react-native local filesystem storage for images

Question

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).

Answer 1

react-native-fs worked perfectly.