react native image picker showimagepicker

Question

I want to take an image using react-native image picker, I am using npm run android command but as the application runs in expo it shows this error:

undefined is not an object(evaluating 'imagepickerManager.showimagepicker')

As I am using expo project index.android.js is not present in the project so react-native run-android command is not working.

Can someone please guide me how to recover this error?

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

// var ImagePicker = require('react-native-image-picker');
import * as ImagePicker from 'react-native-image-picker';
// More info on all the options is below in the README...just some common use cases shown here
var options = {
  title: 'Select Avatar',
  customButtons: [
    {name: 'fb', title: 'Choose Photo from Facebook :'},
  ],
  storageOptions: {
    skipBackup: true,
    path: 'images'
  }
};

export default class App extends Component{
  constructor(props){
    super(props);
    this.state={
      avatarSource:null
    }
  }
  render(){
    let img=this.state.avatarSource == null?null:
    <Image
    source={this.state.avatarSource}
    style={{height:200, width:300}}
    />
    return(
        <View>
        <Text>Welcome to Image Picker</Text>
          <TouchableOpacity onPress = {this.show.bind()} >
          <Text>Load Images</Text>
          </TouchableOpacity>
          {img}
        </View>
    )
  }
  show(){
          ImagePicker.showImagePicker(options, (response) => {
        if (response.didCancel) {
          console.log('User cancelled image picker');
        }
        else if (response.error) {
          console.log('ImagePicker Error: ', response.error);
        }
        else if (response.customButton) {
          console.log('User tapped custom button please: ', response.customButton);
        }
        else {
          let source = { uri: response.uri };

          // You can also display the image using data:
          // let source = { uri: 'data:image/jpeg;base64,' + response.data };

          this.setState({
            avatarSource: source
          });
        }
      });
  }
}

Answer 1

I was having the same issue. And solved it in following way -

1. react-native link react-native-image-picker
2. run the react-native-run-ios and react-native run-android command

More description here