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
or
$ 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
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>
);
}
}