CODEWITHSUNDEEP
react-nativeexpo
Raptor
Raptor

Reputation: 54258

React Native save image from CameraRoll.getPhotos() in Expo App

I'm using CameraRoll.getPhotos function to obtain images from photo album. I have no problem accessing the images, but I would like to edit one of the images, and save it back to Photo Album.

getPhotos = () => {
    CameraRoll.getPhotos({
        first: 20,
        assetType: 'Photos'
    })
    .then(r => this.setState({ photos: r.edges, isLoaded: true }));
}

componentDidMount() {
    this.getPhotos();
}

render() {
    const { navigate } = this.props.navigation;
    return (
        <View style={styles.pageWrapper}>
            <View>
                {this.state.isLoaded && 
                <Image source={{uri: this.state.photos[this.state.index].node.image.uri}} style={{width: width, height: width}} />
                }
            </View>
            <ScrollView contentContainerStyle={styles.scrollView}>
                {
                    this.state.photos.map((p, i) => {
                        return (
                            <TouchableHighlight style={{opacity: i === this.state.index ? 0.5 : 1}} key={i} onPress={() => this.setIndex(i)}>
                                <Image style={{width: width / 4, height: width / 4}} source={{uri: p.node.image.uri}} />
                            </TouchableHighlight>
                        )
                    })
                }
            </ScrollView>
        </View>
    );
}

I would like to pass the uri of the image, and save it to an image file. However, the uri is in asset-library:// format, and it cannot be loaded in this way in next page:

<Image source={{uri: assetLibraryURI}} />

I pass the assetLibraryURI to next page by:

onPressHeaderRight() {
    const { navigate } = this.props.navigation;
    navigate('Editor', { assetLibraryURI: this.state.photos[this.state.index].node.image.uri });
}

What did I miss?

p.s. I'm working in Expo App, i.e. haven't ejected the App.

Upvotes: 1

Views: 1486

Answers (1)

bennygenel
bennygenel

Reputation: 24680

Although this does not answer your question directly I think its relevant to your question.

CameraRoll API needs you to link RCTCameraRoll library in react-native-cli project. This might cause some problem when using it with expo.

CameraRoll provides access to the local camera roll / gallery. Before using this you must link the RCTCameraRoll library. You can refer to Linking for help.

Expo has a different API for integrating picture gallery. You can read about it more here.

ImagePicker

Provides access to the system’s UI for selecting images from the phone’s photo library or taking a photo with the camera.

You can use Expo.ImagePicker.launchImageLibraryAsync(options) for possible better performance. This method also has base64 prop that can be easier to use if the uri result is same as before (asset-library:// format).

Upvotes: 4

Related Questions