Display uploaded image in another component

Question

I have a code that picks an image from the gallery, i want after selecting an image to navigate to another component to display the selected image there, it's working fine until i navigate to the other component it's not displaying the selected image actually i don't know how should i display it there, help please, here is the code:

state = {
 image: null,
};

_pickImage = async () => {
  const { navigate } = this.props.navigation;

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

  navigate('ConfirmImage');

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

To upload the image

let { image } = this.state;
<TouchableOpacity onPress={this._pickImage}><Text>Upload</Text></TouchableOpacity>

score 0 · Answer 1 · answered Sep 21 '18 at 15:20

0

To Display image in ConfirmImage screen

you need to pass the image uri as a navigation parameter from the First screen.

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

Access the passed value in ConfirmImage.

//ConfirmImage.js 

 render() {
  const { navigation } = this.props;
  const uri = navigation.getParam('uri');

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Image  style={{width: 50, height: 50}} source={{uri:uri}}/>
    </View>
  )
}

answered Sep 21 '18 at 15:20

Mohammed Ashfaq

3,353
2
15
22

the image picker function was working fine but now it says missing camera roll permission, do you know why? – Judy M. Sep 21 '18 at 15:31
for react-native-image-picker package you have to add in android manifest file – Mohammed Ashfaq Sep 21 '18 at 15:35

Display uploaded image in another component

1 Answers1