I am not able to pass base64 encoded images to source uri and get the image viewer working .

[shanks322]

export default class ImageView extends Component { static navigationOptions = { header: null, drawerLockMode: 'locked-closed', };

constructor(props) {
    super(props);
    this.state = {
        index: 0,
        modalVisible: true,
        encodedImages: []
    }
}

    componentDidMount() {
    if (this.props.navigation.state.params.path && this.props.navigation.state.params.images) {
        var images = this.props.navigation.state.params.images
        var eImages = [];
        var obj;
        var promises = [];
        images.map((i,iterator) => {
            promises[iterator]=imageLoader.load(this.props.navigation.state.params.path, i.imageName.trim() + '.jpg').then(result => {
                eImages.push( {
                    url: '',
                    width: 300,
                    freeHeight: true,
                    props: {
                        source: {
                            uri: result
                        }
                    }
                });
            });
        })
        const p = Promise.all(promises)
        .then((resp) => {
            this.setState({
                encodedImages:eImages
            });
        }).catch(err => console.log("All images : Error", err))
    }
}

toggleModal = () => {
    this.setState({ modalVisible: !this.state.modalVisible });
};

render() {
    console.log("CALLED ",this.state.encodedImages[0]);
    console.log("CALLED 111",images);
return (
    <View style={{ padding: 10,flex:1 }}>
    {/* <View style={{flex:1,margin:5,backgroundColor:'#fff'}}>
        <TouchableOpacity onPress={this.toggleModal}>
            <Image style={styles.checkedImage} resizeMode={'contain'} source={require('../assets/close.png')}/>
        </TouchableOpacity>
    </View> */}
    <Modal
        visible={this.state.modalVisible}
        transparent={true}
        onRequestClose={this.toggleModal}
    >
        <ImageViewer
        imageUrls={this.state.encodedImages}
        index={this.state.index}
        onSwipeDown={() => {
            this.props.navigation.pop()
        }}
        // onMove={data => console.log(data)}
        enableSwipeDown={true}
        />
    </Modal>
    </View>
);
}

}

Above is my code. I want to pass the base64 encoded images to my component and show the images as i cannot require dynamically or directly give the File System path.

[shanks322]

@ascoders do you have any solution for the above problem?

[jnsvu]

This worked for me

  const images = [
    {
      url: base64encodedImage,
      width: Dimensions.get("window").width,
      height: Dimensions.get("window").height,
      props: {
        resizeMode: "contain",
      },
    },
  ]

[shanks322]

Worked thanks a lot for your help! Also for those who are referring this please don't enclose the Modal in any View whatsoever it wont work that way.