CODEWITHSUNDEEP
react-nativeasyncstorage
Pedro Correia
Pedro Correia

Reputation: 53

How to store a image in AsyncStorage?

im trying to store a picture in the AsyncStorage, but i dont know how to do it, should i store the uri, or the path?

What i tryied is a little bit of nonsense, but i tryied this:

state = {
    avatarSource: null,
    avatarSource2: null,
}

constructor(props) {
    super(props);
    this.state = {
        modalVisible: false,
        images: [{
            url: '',
        }],
    }
    this.setModalVisible = this.setModalVisible.bind(this)
}

saveData() {
    AsyncStorage.getItem("uri");
}

Then when i select my image is use this:

selectImage = async () => {
    ImagePicker.showImagePicker({ nodata: true, mediaType: 'photo' }, (response) => {
        console.log('Response = ', response);

        if (response.didCancel) {
            console.log('User cancelled image picker');
        } else if (response.error) {
            console.log('ImagePicker Error: ', response.error);
        } else if (response.customButton) {
            console.log('User tapped custom button: ', response.customButton);
        } else {

            // You can also display the image using data:
            // const source = { uri: 'data:image/jpeg;base64,' + response.data };

            this.setState({
                avatarSource: response.uri,
            });
            this.saveData; //here is where i save the data...
        }
    });
}

And then when i load the page...

componentWillMount() {
    AsyncStorage.getItem('uri')


}

And my render is like this...

render() {
    return (
        <ScrollView>
            <View style={styles.container}>
                <View style={styles.avatarContainer}>
                    <TouchableOpacity onPress={() => {
                        this.setModalVisible(!this.state.modalVisible, this.state.avatarSource);
                    }}>
                        {
                            this.state.avatarSource && <Image source={{ uri: this.state.avatarSource }} style={styles.avatar} />
                        }
                    </TouchableOpacity>
                </View>
                <Button title="Seleciona a imagem" onPress={this.selectImage} />
                <View style={styles.avatarContainer}>
                    <TouchableOpacity onPress={() => {
                        this.setModalVisible(!this.state.modalVisible, this.state.avatarSource2);
                    }}>
                        {
                            this.state.avatarSource2 && <Image source={{ uri: this.state.avatarSource2 }} style={styles.avatar} />
                        }
                    </TouchableOpacity>
                </View>
                <Button title="Seleciona a imagem" onPress={this.selectImage2} />
            </View>
            <Modal style={styles.modalImage}
                animationType='slide'
                transparent={false}
                visible={this.state.modalVisible}>
                <TouchableHighlight style={{ backgroundColor: 'black' }} onPress={() => {
                    this.setModalVisible(!this.state.modalVisible) + this.props.navigation.navigate('Cartão de Cidadão');
                }}>
                    <Icon active name="close" size={30} style={{ textAlign: 'center', marginTop: 0, color: 'white' }} />
                </TouchableHighlight>
                <ImageViewer imageUrls={this.state.images} />
            </Modal>
        </ScrollView>
    );
}

}

What i've do wrong? Thank you.

Upvotes: 3

Views: 9761

Answers (4)

ArkaneKhan
ArkaneKhan

Reputation: 476

Your use case is not clear. I am like why would any one want to store images into async storage. So this answer is just a guess on my part.

If you wan't to store images at large. Use some db like realm or something.

Convert image into base64. Then you can read/write base64 of your images into db.

Upvotes: 0

Darshan Javiya
Darshan Javiya

Reputation: 354

await Image.prefetch(url);

You can use Image Core component from react native framework where it give a method named prefetch which can be used to fetch the data of image and store it inside disk cache.

Please check out this link of the documentation https://reactnative.dev/docs/image#prefetch

I hope this helps to the future readers and please correct me if I am wrong or please provide suggestions if necessary.

Upvotes: 1

William
William

Reputation: 61

Easy Fix, you must stringfy when you store it to async and parse on retrieve:

Storing image picker:

AsyncStorage.setItem(@myKey,JSON.stringify(source));

Retrieve:

            const value = await AsyncStorage.getItem(@mykey)
            if(value !== null) {
                this.setState({ image: JSON.parse(value)});
            }

Upvotes: 0

Alec Lorraine
Alec Lorraine

Reputation: 398

Async Storage can only save strings. You can save photos to the file system. Trying using this npm module

Upvotes: 5

Related Questions