react-native-image-crop-picker show image

Question

I'm using react-native-image-crop-picker to upload multiple images. I have used the following code to do that

ImagePicker.openPicker({
      multiple: true
    }).then(images => {
      this.setState({
          avatarSource: images,
    });
});

When selected images it will receive this array

[{"height": 1280, "mime": "image/jpeg", "modificationDate": "1572089089000","path": "file:///data/user/0/com.carup/cache/react-native-image-crop-picker/image-ed1c260f-ee73-4ec0-932b-167e9771d24f.jpg",
         "size": 199376, "width": 960}]

I have tried to show selected images (in android) with the following code

<Image style={{marginTop:10,height:150, resizeMode:'contain'}} source={{uri:avatarSource.path}}/>

but it will not be showing the images. How can I show selected images?

can you check this github.com/ivpusic/react-native-image-crop-picker/tree/master/… — DevAS
@DevAS Thank you very much, seems it's working. You saved me — Udara
Welcome, can you write the right answer to help other people who faced the same issue ;) — DevAS

Udara Udara · Accepted Answer · 2019-10-26T17:05:35

Here is the answer, used react-native NativeModules.ImageCropPicker instead of react-native-image-crop-picker

import React, {Component} from 'react';
import {
    View, Text, StyleSheet, ScrollView, Alert,
   Image, TouchableOpacity, NativeModules, Dimensions, StatusBar, SafeAreaView
} from 'react-native';
import {CarColors} from "../assets/Colors";

var commonStyles = require('../assets/style');
var ImagePicker = NativeModules.ImageCropPicker;


export default class App extends Component {

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

    cleanupImages() {
        ImagePicker.clean().then(() => {
            // console.log('removed tmp images from tmp directory');
            alert('Temporary images history cleared')
        }).catch(e => {
            alert(e);
        });
    }

    pickMultiple() {
        ImagePicker.openPicker({
            multiple: true,
            waitAnimationEnd: false,
            includeExif: true,
            forceJpg: true,
        }).then(images => {
            this.setState({
                image: null,
                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));
    }

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

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

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

        return this.renderImage(image);
    }

    render() {
        return (
            <SafeAreaView style={styles.safeArea}>

                <View style={styles.container}>
                    <StatusBar
                        backgroundColor={CarColors.primary}
                        barStyle="light-content"/>
                    <TouchableOpacity onPress={this.pickMultiple.bind(this)} style={commonStyles.button}>
                        <Text style={commonStyles.text}>Select Images</Text>
                    </TouchableOpacity>
                    <TouchableOpacity onPress={this.cleanupImages.bind(this)} style={commonStyles.button}>
                        <Text style={commonStyles.text}>Clean History</Text>
                    </TouchableOpacity>
                </View>

                <ScrollView style={styles.imgContainer}>
                    {this.state.image ? this.renderAsset(this.state.image) : null}
                    {this.state.images ? this.state.images.map(i => <View style={styles.imgView}
                                                                          key={i.uri}>{this.renderAsset(i)}</View>) : null}
                    {
                        this.state.images &&
                        <TouchableOpacity onPress={this.cleanupImages.bind(this)} style={commonStyles.bottomBtn}>
                            <Text style={commonStyles.text}>Upload</Text>
                        </TouchableOpacity>
                    }
                </ScrollView>


            </SafeAreaView>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        backgroundColor: CarColors.white,
    },
    imgContainer: {
        marginVertical: 20
    },
    button: {
        backgroundColor: 'blue',
        marginBottom: 10,
    },
    text: {
        color: 'white',
        fontSize: 20,
        textAlign: 'center'
    },
    title: {
        fontWeight: 'bold',
        fontSize: 22
    },
    safeArea: {
        marginTop: 20
    },
    dateContainer: {
        flexDirection: 'row',
    },
    imgView: {
        width: '50%',
        marginVertical: 10,

    }
});

react-native-image-crop-picker show image

1 Answers