As a learning exercise, I'm writing a react-native-cli based photo application which should work in a offline mode. What I mean is, application provides a way to either take a picture using camera or select a photo from a built-in gallery and stores them in local filesystem whose directory path is stored in a realm database. Following is my stack,
System: Ubuntu Linux,
react-native-cli: 2.0.1
react-native: 0.61.4,
realm@3.4.2,
react-native-image-picker@1.1.0
With react-native-image-picker, I can either pick a photo or take a photo whose details are stored in the response object from image-picker as, response.data (image data) and response.uri
ImagePicker.showImagePicker(options, (response) => {
if (response.didCancel) {
alert('User cancelled image picker');
} else if (response.error) {
alert('ImagePicker Error: ', response.error);
} else {
const source = { uri: response.uri };
const sourceData = response.data;
this.setState({
imageSourceData: source,
});
}
});
In Main.js I've a simple view,
import React, { Component } from 'react';
function Item({ item }) {
return (
<View style={{flexDirection: 'row'}}>
<Text>{item.picureName}</Text>
</View>
<Image source={uri: ....????} /> <------------- How this would work?
)
}
export default class Main extends Component {
state = {
size: 0,
pictureName: null,
picureLocation: null,
picureDate: new Date(),
imageSourceData: '',
picures: []
}
componentDidMount() {
Realm.open(databaseOptions)
.then(realm => {
const res = realm.objects(PICTURE_SCHEMA);
this.setState({
pictures: res
})
});
}
render() {
return(
<View>
<Image source={uri: 'data:image/jpeg;base64,' + this.state.imageSourceData}
style:{{width: 50, height:50}}/>
<FlatList
data={this.state.pictures}
renderItem={({ item }) => <Item item={item} />}
keyExtractor={item => item.pictureID}
>
</View>
)
}
}
I need to do following, once I get the image from the ImagePicker,
1) store this data in a file on the device and get a file location.
2) Store the location with other meta data in a realm object
saveButton() {
// Store the imageSourceData into a file on a device,
// Get the fileLocation
// update state.picureLocation property
this.addOnePicture()
}
addOnePicture() {
var obj = new Object();
obj = {
PicureID: this.state.size + 1;
PictureName: this.state.pictureName,
PictureDate: this.state.pictureDate,
PicureLocation: this.state.picureLocation
};
Realm.open(databaseOptions)
.then(realm => {
realm.write(() => {
realm.create(PICTURE_SCHEMA, obj);
this.setState({ size: realm.objects(PICTURE_SCHEMA).length });
});
})
}
3) List of realm objects can be read to display the data in a flatlist in "componentDidMount() hook"
It's a snippet of a code but I hope it's clear. I would really appreciate any help/suggestions with possible code block to do following,
1) How do you store the data (imageSourceData) to a local file, basically fill in saveButton() (I was thinking of using react-native-fs package. Is this a good idea?)
2) How do I display this image in a view? Do I need to read the contents as it renders in a FlatList? What does Image syntax looks like (check Item component code).
