Image preview in react-native

Question

I have an image uploader in my react-native app, once you upload the image it navigates you to another screen and previews the image there, in the image preview screen there is an input for giving a name for this image and a save button, when clicking on save button it should go back to the previous screen and display the image and it's name there inside the flatlist i have, i managed to do the steps until previewing the image but after that i didn't know what to do next, here is the code:

First screen:

  state = {
    image: null,
    previews: []
  };

  _pickImage = async () => {
    await Permissions.askAsync(Permissions.CAMERA_ROLL);
    const {navigate} = await this.props.navigation;

    let result = await ImagePicker.launchImageLibraryAsync({
      allowsEditing: false,
      aspect: [4, 4],
    });

    navigate( 'ImagePreview', { uri : result.uri } );

    if (!result.cancelled) {
      this.setState({ image: result.uri });
    }
  };

  _keyExtractor (item, index) {
      return index.toString();
    }

     _renderItem ({ item, index }) {
      return (
        <View>
        <Image source={require('')}/>
        <Text>Image title</Text>
        </View>
        );
    }

<FlatList style={{ flex: 0.5 }}
  data={this.state.previews}
  keyExtractor={this._keyExtractor.bind(this)}
  renderItem={this._renderItem.bind(this)}
  numColumns={2}
/>

Second screen:

const uri = navigation.getParam('uri');
<Image source={{uri:uri}} style={{width: 200, height: 200}} />
<Button title="Save" />

I'm not sure what your problem is. Does the preview image not display in the second screen or is the issue the back navigation? — Niels Ladekarl, Dec 11 '18 at 21:32
@Niels Ladekarl It gets displayed, but after displaying it there i need to go back to the first screen and display it in the flatlist with it's title — Natalie Merrill, Dec 11 '18 at 21:35

score 1 · Accepted Answer · answered Dec 11 '18 at 21:58

From my understanding you are trying to send data back from the second screen to the first screen. One solution is to create a function inside the first screen that you pass to the second screen.

So you declare a function in the first screen where you update the state with the title:

returnTitle(uri, title) {
    const {previews} = this.state;
    previews.push({uri, title});
    this.setState({previews});
}

And you pass this function when you navigate to the second screen:

navigate('ImagePreview', { 
    uri: result.uri, 
    returnTitle: this.returnTitle.bind(this)
});

In your second screen you define an onPress handler for your Button where you call the returnTitle function and navigate back:

onSavePress = () => {
    const {title} = this.state; // Not sure where you store the title
    const {navigation} = this.props;
    const uri = navigation.getParam('uri');
    navigation.state.params.returnTitle(uri, title);
    navigation.goBack();
}

Remember to get the title from your input. The code does not show if you store it in the component state.

Now in the first component change your _renderItem method to fit the previews which is now an array of objects:

_renderItem ({ item, index }) {
    return (
        <View>
            <Image source={{uri: item.uri}}/>
            <Text>{item.title}</Text>
        </View>
    );
}

score 0 · Answer 2 · answered Dec 11 '18 at 21:14

0

On your second screen, the Image tag should have a source property instead of image, like this:

<Image source={{uri:uri}} style={{width: 200, height: 200}} />

answered Dec 11 '18 at 21:14

NULL SWEΔT

1,827
2
11
13

Did you check if the `uri` param is correctly coming to the component? – NULL SWEΔT Dec 11 '18 at 21:22

Image preview in react-native

2 Answers2