react-native-livephoto (Library for working with Apple LivePhoto)

Apple LivePhotos are working only on IOS devices.

Installation

Mostly automatic installation

$ npm install react-native-livephoto --save

$ react-native link react-native-livephoto

Manual installation

In order to use this extension, you have to do the following steps:

In your react-native project, run npm install react-native-livephoto --save or yarn add react-native-livephoto

XCode:

go to xcode's Project Navigator tab

2. right click on `Libraries` 3. select `Add Files to [your project's name]` option

4. navigate to `node_modules/react-native-livephoto/src` and add `Livephoto.xcodeproj` folder

5. on project `Project Navigator` tab, click on your project's name and select Target's name and from there click on `Build Phases`

6. expand `Link Binary With Libraries` and click `+` sign to add a new one. 7. select `libLivephoto.a` and click `Add` button.

8. clean compile to make sure your project can compile and build.

Documentation

If you want save or open livephoto from Camera Roll you need add permissions in Info.plist:

<key>NSPhotoLibraryAddUsageDescription</key>
<string>Your text.</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>Your text.</string>

For show livephoto from Camera Roll use the <LivePhoto />. The library using native picker. Call pickLivePhoto().

For show livephoto from remote server/app's storage use the <LivePhotoAssemled />. react-native-livephoto is using your app cache to optimize assembly of a livephoto. You can manage memory of your app from prop cachedPhotos for <LivePhotoAssembled />.

Functions

Function	Description
downloadLivePhoto()	`Work only with <LivePhotoAssembled />`. Download assembled LivePhoto of local file
pickLivePhoto()	`Work only with <LivePhoto />`. Pick LivePhoto from Camera Roll

Props for LivePhotoAssembled component

Prop	Type	Default	Description
imgUri	`string`	`null`	`Required`! Remote/local absolute url picture(`.jpeg`) for livephoto.
videoUri	`string`	`null`	`Required`! Remote/local absolute url video(`.mov`) for livephoto.
cachedPhotos	`number`	`0`	Cached livephoto count.
vibration	`boolean`	`true`	You can enable/disable vibration while start of playback livephoto.
autoplay	`boolean`	`true`	Will be beginning of playback when livephoto are finished assembled.
style		`null`	Use `react-native StyleSheet` for styling LivePhoto component.
disabled	`boolean`	`false`	You can disable livephoto for playing

Props for LivePhoto component

Prop	Type	Default	Description
vibration	`boolean`	`true`	You can enable/disable vibration while start of playback livephoto.
autoplay	`boolean`	`true`	Will be beginning of playback when livephoto are finished assembled.
style		`null`	Use `react-native StyleSheet` for styling LivePhoto component.
disabled	`boolean`	`false`	You can disable livephoto for playing

Usage

Just import the module with one of the suggested ways:

//CommonJS style
var LivePhoto = require('react-native-livephoto');
// ES6/ES2015 style
import LivePhoto from 'react-native-livephoto';

Asseble livephoto

import React from 'react';
import { View, TouchableOpacity, Text, Alert } from 'react-native';
import { LivePhotoAssembled } from 'react-native-livephoto';

export default class MyLivePhotoComp extends React.Component {
  download = async () => {
    const downloadRes = await this.livephoto.downloadLivePhoto();

    if (downloadRes.success) {
      Alert.alert('All right!')
    } else {
      Alert.alert('Error!')
    }
  }

  render() {
    return (
      <View style={{ flex: 1 }}>
        <LivePhotoAssembled
          ref={ref => this.livephoto = ref}
          imgUri={'remote or absolute image URL'}
          videoUri={'remote or absolute video URL'}
          autoplay={true}
          vibration={false}
          style={{ width: '100%', height: '100%' }}
        />
        <TouchableOpacity onPress={this.download}>
          <Text>Save my livephoto!</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

Show livephoto

import React from 'react';
import { View, TouchableOpacity, Text, Alert } from 'react-native';
import { LivePhoto } from 'react-native-livephoto';

export default class MyLivePhotoComp extends React.Component {
  pickLivePhoto = async () => {
    const pickerRes = await this.livephoto.pickLivePhoto();

    if (pickerRes.success) {
      Alert.alert('All right!')
    } else {
      Alert.alert('Error!')
    }
  }

  render() {
    return (
      <View style={{ flex: 1 }}>
        <LivePhoto
          ref={ref => this.livephoto = ref}
          autoplay={true}
          vibration={false}
          style={{ width: '100%', height: '100%' }}
        />
        <TouchableOpacity onPress={this.pickLivePhoto}>
          <Text>You can pick livephoto from Camera Roll to your component LivePhoto</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

NarekChang/react-native-livephoto