react-native-image-crop-picker not displaying image

Question

My Image Picker is able to select image from the gallery but it is unable to display the image on the app, I've tried many ways and reviewed my code all over again but I'm unsure what went wrong. Can anyone tell me what's the problem? Here is my reactnative and picker version:

"react-native-image-crop-picker": "^0.37.2", "react-native": "0.67.1",

import { Alert, Image, ScrollView, StyleSheet, Text, TouchableOpacity, View, SafeAreaView, TextInput} from 'react-native';
import ImagePicker from 'react-native-image-crop-picker';

const Imagepick = ({navigation}) => {
    const [image, setImage] = useState(null)
    const [images, setImages] = useState(null)

      const pickSingle = (cropit, circular = false, mediaType) => {
        ImagePicker.openPicker({
          width: 500,
          height: 500,
          cropping: cropit,
          cropperCircleOverlay: circular,
          sortOrder: 'none',
          compressImageMaxWidth: 1000,
          compressImageMaxHeight: 1000,
          compressImageQuality: 1,
          compressVideoPreset: 'MediumQuality',
          includeExif: true,
          cropperStatusBarColor: 'white',
          cropperToolbarColor: 'white',
          cropperActiveWidgetColor: 'white',
          cropperToolbarWidgetColor: '#3498DB',
        })
          .then((image) => {
            console.log('received image', image);
            setImage({
                uri: image.path,
                width: image.width,
                height: image.height,
                mime: image.mime,
            })
            setImage(null);
          })
          .catch((e) => {
            console.log(e);
            Alert.alert(e.message ? e.message : e);
          });
      }


    const renderAsset = (image) =>  {
        return renderImage(image);
    }

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

    return (
        <View style={styles.container}>

            {image ? renderAsset(image) : null}
            {images
                ? images.map((i) => (
                    <View key={i.uri}>{this.renderAsset(i)}</View>
                ))
            : null}
            
            <TouchableOpacity onPress={() => pickSingle(false)} style={styles.button}>
                <Text style={styles.text}>Select Single</Text>
            </TouchableOpacity>      

        </View>
    )
}
export {Imagepick}

Answer 1

It is because you are setting image as null just after setting its value

.then((image) => {
            console.log('received image', image);
            setImage({
                uri: image.path,
                width: image.width,
                height: image.height,
                mime: image.mime,
            })
            // setImage(null); //remove this line
          })

also you are passing whole data in Image source. Instead just pass uri like this

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