undefined ImagePicker.ShowImagePicker , read all issue same as mine

Hi I’ve read all issues , been still stuck for hours on this.

please help

import React, { Component } from 'react';
import { AppRegistry, ScrollView, Image, TouchableOpacity, StyleSheet, PixelRatio, View } from 'react-native';
import { Button, Icon, Divider, Card, Badge, Text} from 'react-native-elements';
import Moment from 'react-moment';
import * as firebase from 'firebase';
import Database from "../firebase/database";

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



export default class DetailsShift extends Component {


  state = {
    avatarSource: null,
    videoSource: null
  };

  selectPhotoTapped() {
    const options = {
      quality: 1.0,
      maxWidth: 500,
      maxHeight: 500,
      storageOptions: {
        skipBackup: true
      }
    };
  
    ImagePicker.showImagePicker(options, (response) => {
      console.log('Response = ', response);

      if (response.didCancel) {
        console.log('User cancelled photo picker');
      }
      else if (response.error) {
        console.log('ImagePicker Error: ', response.error);
      }
      else if (response.customButton) {
        console.log('User tapped custom button: ', 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
        });
      }
    });
  }

  selectVideoTapped() {
    const options = {
      title: 'Video Picker',
      takePhotoButtonTitle: 'Take Video...',
      mediaType: 'video',
      videoQuality: 'medium'
    };

    ImagePicker.showImagePicker(options, (response) => {
      console.log('Response = ', response);

      if (response.didCancel) {
        console.log('User cancelled video picker');
      }
      else if (response.error) {
        console.log('ImagePicker Error: ', response.error);
      }
      else if (response.customButton) {
        console.log('User tapped custom button: ', response.customButton);
      }
      else {
        this.setState({
          videoSource: response.uri
        });
      }
    });
  }


  static navigationOptions =  {
    title: 'Shift Details',
    headerLeft: null,
    headerTintColor: "white",
    headerStyle: {
        backgroundColor: 'rgb(207, 90, 99)',
        elevation: null },   
    };
  render() {


    
    return (
      <ScrollView>


                <TouchableOpacity onPress={this.selectPhotoTapped}>
                <View style={[styles.avatar, styles.avatarContainer, {marginBottom: 20}]}>
                { this.state.avatarSource === null ? <Text>Select a Photo</Text> :
                  <Image style={styles.avatar} source={this.state.avatarSource} />
                }
                </View>
              </TouchableOpacity>



      </ScrollView>
    );
  }

  
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF'
  },
  avatarContainer: {
    borderColor: '#9B9B9B',
    borderWidth: 1 / PixelRatio.get(),
    justifyContent: 'center',
    alignItems: 'center'
  },
  avatar: {
    borderRadius: 75,
    width: 150,
    height: 150
  }
});

Can anyone help please, am i doing something wrong ?

[20chix]

Right I’m closing this issue as I found a different solution to upload Image with project created in Expo. I used this example which really helped me https://docs.expo.io/versions/latest/sdk/imagepicker.html. hope will be useful for someone in the future

[matheuscouto]

You upload base64 images to firebase, just get the response.uri and use the method:

firebase.storage().ref().child('randomPath')
	.putString(file, 'base64' ,{
		contentType: 'image/jpeg',
	});

That worked for me