Passing data through React-Navigation Issue

[rizwanellahi]

Passing Data Using React-Navigation. Only grid images showing but the image preview throwing android error.

render() {
    const photos = this.props.navigation.getParam('getPhotos').acf.gallery;
    const imageSize = Dimensions.get('window').width / 3;
    const imageStyle = {
      width: imageSize,
      height: imageSize,
    };

    return (
      <View style={styles.container}>
        <PhotoView
          visible={this.state.visible}
          data={photos}
          hideStatusBar={true}
          hideCloseButton={true}
          hideShareButton={true}
          initial={this.state.initial}
          onDismiss={() => {
            this.setState({visible: false});
          }}
          onChange={data => {
            this.setState({initial: data.index});
          }}
        />
        <ScrollView showsVerticalScrollIndicator={false}>
          <View style={styles.photoContainer}>
            {photos.map((cat, index) => (
              <TouchableOpacity
                key={index.id}
                style={[imageStyle, {}]}
                ref={r => (this.r = r)}
                onPress={() =>
                  this.setState({visible: true, initial: index.id})
                }>
                <Image style={imageStyle} source={{uri: cat.url}} />
              </TouchableOpacity>
            ))}
          </View>
        </ScrollView>
      </View>
    );
  }

"react-native": "0.61.5",
"@merryjs/photo-viewer": "^3.1.2",

Android Error

Attempt to invoke interface method 'java.lang.string com.facebook.react.bridge.readablemap.getstring on a null object reference

[BANG88]

Please check your data at first maybe there has a null reference. I guess

[rizwanellahi]

Images thumbnails are showing <Image style={imageStyle} source={{uri: cat.url}} /> In image source we are converting the image url to uri. But in data={photos} how image will be convert into uri.

That's why whenever i tap on the image for preview throwing this error:

Attempt to invoke interface method 'java.lang.string com.facebook.react.bridge.readablemap.getstring on a null object reference

[BANG88]

@Rizwanilahi Could you please checkout the examples and then re-check your data. I think this should not an issue with this pkg.

[BANG88]

https://github.com/merryjs/photo-viewer#usage

[rizwanellahi]

@BANG88 The example is working fine.

const photos = [
  {
    source: {
      uri:
        "https://images.pexels.com/photos/82072/cat-82072.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"
    }
  }
];

The image source Uri is already defined here. In my case, I am using API receiving data. const photos = this.props.navigation.getParam('getPhotos').acf.gallery;

[BANG88]

You can normalize your data structure to fit your needs. Rizwan Ellahi <[email protected]>于2020年1月16日 周四18:07写道：

…

@BANG88 <https://github.com/bang88> The example is working fine. const photos = [ { source: { uri: "https://images.pexels.com/photos/82072/cat-82072.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb" } } ]; The image source Uri is already defined here. In my case, I am using API receiving data. const photos = this.props.navigation.getParam('getPhotos').acf.gallery; — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#106?email_source=notifications&email_token=AADJY22IFXLNKYBGBEM77STQ6AWV3A5CNFSM4KFZPXFKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEJDP7ZQ#issuecomment-575078374>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AADJY242DMHQVQ2K3QCZPY3Q6AWV3ANCNFSM4KFZPXFA> .