I am trying display the selected Images,But it is not showing the images. I am getting the path but it is not displaying the Imagesx

[PrabhakarKotipalli]

const [businessImages,setBusinessImages] = React.useState(null)

`const MultipleImageCall = () => { ImagePicker.openPicker({ multiple: true }).then(images => {

      setBusinessImages(images.map(data=>{
        console.log(data.path)
        return {uri:data.path}
      }))

      console.log(images);

    });
  }`

` {businessImages!==null&& businessImages.map(ImagePath=>{ console.log('Image Paths',ImagePath) return <Image style = {{resizeMode: "contain",width:width*.25}} source = {ImagePath} /> })

        }`

[liukefu2050]

import React, {Component} from 'react';
import {
  View, Text, StyleSheet, ScrollView,
  Image, TouchableOpacity, NativeModules, Dimensions,
} from 'react-native';

import Video from 'react-native-video';

import ImagePicker from 'react-native-customized-image-picker';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  button: {
    backgroundColor: 'blue',
    marginBottom: 10,
  },
  text: {
    color: 'white',
    fontSize: 20,
    textAlign: 'center',
  },
});

export default class App extends Component {

  constructor() {
    super();
    this.state = {
      images: null,
    };
  }

  pickSingleBase64(cropit) {
    ImagePicker.openPicker({
      width: 300,
      height: 300,
      cropping: cropit,
      includeBase64: true,
    }).then(images => {
      this.setState({
        images: images.map(i => {
          console.log('received image', i);
          return {uri: i.path, width: i.width, height: i.height, mime: i.mime};
        }),
      });
    }).catch(e => alert(e.code));
  }

  pickSingle(cropit) {
    ImagePicker.openPicker({
      width: 300,
      height: 300,
      maxSize:1,
      cropping: cropit,
      isSelectBoth: true,
      isCamera: true,
    }).then(images => {
      this.setState({
        images: images.map(i => {
          console.log('received image', i);
          return {uri: i.path, width: i.width, height: i.height, mime: i.mime};
        }),
      });
    }).catch(e => {
      console.log(e.code);
      alert(e.code);
    });
  }

  pickOpenCamera(cropit) {
    ImagePicker.openCamera({
      width: 300,
      height: 300,
      maxSize:1,
      cropping: cropit,
      isSelectBoth: true,
      isCamera: true,
    }).then(images => {
      this.setState({
        images: images.map(i => {
          console.log('received image', i);
          return {uri: i.path, width: i.width, height: i.height, mime: i.mime};
        }),
      });
    }).catch(e => {
      console.log(e.code);
      alert(e.code);
    });
  }

  pickSingleVideo(cropit) {
    ImagePicker.openPicker({
      width: 300,
      height: 300,
      isVideo: true,
      isCamera: true,
      allowPickingVideo:true,
      allowTakeVideo:true,
      cropping: cropit,
    }).then(images => {
      this.setState({
        images: images.map(i => {
          console.log('received image', i);
          return {uri: i.path, width: i.width, height: i.height, mime: i.mime};
        }),
      });
    }).catch(e => {
      console.log(e.code);
      alert(e.code);
    });
  }

  pickMultipleVideo(cropit) {
    ImagePicker.openPicker({
      width: 300,
      height: 300,
      isVideo: true,
      isCamera: true,
      multiple: true,
      cropping: cropit,
    }).then(images => {
      this.setState({
        images: images.map(i => {
          console.log('received image', i);
          return {uri: i.path, width: i.width, height: i.height, mime: i.mime};
        }),
      });
    }).catch(e => {
      console.log(e.code);
      alert(e.code);
    });
  }

  pickSingleAndCamera() {
    ImagePicker.openPicker({
      isCamera: true,
      openCameraOnStart: true,
      returnAfterShot: true,
    }).then(images => {
      this.setState({
        images: images.map(i => {
          console.log('received image', i);
          return {uri: i.path, width: i.width, height: i.height, mime: i.mime};
        }),
      });
    }).catch(e => {
      console.log(e.code);
      alert(e.code);
    });
  }

  pickMultiple() {
    ImagePicker.openPicker({
      isCamera: true,
      multiple: true,
    }).then(images => {
      this.setState({
        images: images.map(i => {
          console.log('received image', i);
          return {uri: i.path, width: i.width, height: i.height, mime: i.mime};
        }),
      });
    }).catch(e => alert(e.code));
  }

  scaledHeight(oldW, oldH, newW) {
    return (oldH / oldW) * newW;
  }

  renderVideo(uri) {
    return <View style={{height: 300, width: 300}}>
      <Video source={{uri}}
             style={{
               position: 'absolute',
               top: 0,
               left: 0,
               bottom: 0,
               right: 0,
             }}
             rate={1}
             paused={false}
             volume={1}
             muted={false}
             resizeMode={'cover'}
             onLoad={load => console.log(load)}
             onProgress={() => {
             }}
             onEnd={() => {
               console.log('Done!');
             }}
             repeat={true}/>
    </View>;
  }

  renderImage(image) {
    return <Image style={{width: 300, height: 300, resizeMode: 'contain'}} source={image}/>;
  }

  renderAsset(image) {
    if (image.mime && image.mime.toLowerCase().indexOf('video/') !== -1) {
      return this.renderVideo(image.uri);
    }

    return this.renderImage(image);
  }

  render() {
    return <View style={styles.container}>
      <ScrollView>
        {this.state.images ? this.state.images.map(i => <View key={i.uri}>{this.renderAsset(i)}</View>) : null}
      </ScrollView>

      <TouchableOpacity onPress={() => this.pickSingle(false)} style={styles.button}>
        <Text style={styles.text}>Select Single</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={() => this.pickSingleVideo(false)} style={styles.button}>
        <Text style={styles.text}>Select Single video</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={() => this.pickMultipleVideo(false)} style={styles.button}>
        <Text style={styles.text}>Select multiple video</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={() => this.pickSingleBase64(false)} style={styles.button}>
        <Text style={styles.text}>Select Single Returning Base64</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={() => this.pickSingle(true)} style={styles.button}>
        <Text style={styles.text}>Select Single With Cropping</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={() => this.pickSingleAndCamera()} style={styles.button}>
        <Text style={styles.text}>Select Single With Camera</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={this.pickMultiple.bind(this)} style={styles.button}>
        <Text style={styles.text}>Select Multiple</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={() => this.pickOpenCamera(false)} style={styles.button}>
        <Text style={styles.text}>OpenCamera</Text>
      </TouchableOpacity>

    </View>;
  }

}