How do I use react-native-image-picker to upload images?

Question

im new to react-native-image-picker package and have several weeks trying to make it work but it gives me errors every time. i have imported the packege as is described in its github page but i cant seem to figure out what im doing wrong. here is my code:

import { StatusBar } from "expo-status-bar";
import React from "react";
import { StyleSheet, Text, View, Button } from "react-native";
import { launchImageLibrary } from "react-native-image-picker";

export default function App() {
  const onPress = () => {
    const options = {};
    launchImageLibrary(options, (item) => {
      console.log(item);
    });
  };
  return (
    <View style={styles.container}>
      <Button title={"pick img"} onPress={onPress} />
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

this is the error im getting:

TypeError: Cannot read property 'launchImageLibrary' of undefined
launchImageLibrary
C:/Users/Denoh/SilkyMarket/node_modules/react-native-image-picker/src/index.ts:37
  34 |   console.error("Send proper callback function, check API");
  35 |   return;
  36 | }
> 37 | NativeModules.ImagePickerManager.launchImageLibrary(
     | ^  38 |   {...DEFAULT_OPTIONS, ...options},
  39 |   callback,
  40 | );
View compiled
onPress
C:/Users/Denoh/SilkyMarket/App.js:9
   6 | export default function App() {
   7 |   const onPress = () => {
   8 |     const options = {};
>  9 |     launchImageLibrary(options, (item) => {
  10 |       console.log(item);
  11 |     });
  12 |   };
View compiled

please help me!!

Answer 1

import { launchCamera } from "react-native-image-picker";

const handleCameraLaunch = async () => {
        const result = await launchCamera();
        if (result?.assets) {
            setImage(result.assets[0].uri);
        }
    };

 <Button title="Camera" onPress={async () => {
                    handleCameraLaunch();
                }} />
                 {image && (
                <Image
                    style={{ width: 100, height: 100, margin: 10 }}
                    source={{ 
                        uri: image,
                    }}
                />
            )}

Answer 2

state:-

const [state, setState] = useState({
    imagePickerVisible: false,
    imagePath: null,

});

function to handle image:-

const chooseFile = () => {


    let options = {
        maxWidth: 500,
        maxHeight: 500,
        mediaType: "photo"
        // title: 'Select Image',
        // customButtons: [
        //     {
        //         name: 'customOptionKey',
        //         title: 'Choose Photo from Custom Option'
        //     },
        // ],
        // storageOptions: {
        //     skipBackup: true,
        //     path: 'images',
        // },
    };
    launchImageLibrary(options, (response) => {
        console.log('Response = ', 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: ',
                response.customButton
            );
            Alert.alert(response.customButton);
        } else {
            let source = response;
            console.log("source==>", source)
            // You can also display the image using data:
            // let source = {
            //   uri: 'data:image/jpeg;base64,' + response.data
            // };
            setState({
                ...state,
                imagePath: source,
                imagePickerVisible: true
            })
        }
    });
};

component:-

                <TouchableOpacity
                    activeOpacity={1}
                    onPress={() => { chooseFile() }}

                >
                    <Image
                        source={state.imagePickerVisible ? { uri: state.imagePath.uri }
                            : constants.Images.Camera
                        }
                        style={styles.image}
                        resizeMode={"cover"}

                    />
                </TouchableOpacity>

Answer 3

Here is the working example showing how you can get images from a gallery and show them.

Working example: Expo Snack

import React, { useState, useEffect } from 'react';
import { StyleSheet, View, Button, Image, FlatList, Text } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import * as ImagePicker from 'expo-image-picker';

export default function Add() {
  const [galleryPermission, setGalleryPermission] = useState(null);
  const [imageUri, setImageUri] = useState(null);

  const permisionFunction = async () => {
    // here is how you can get the camera permission

    const imagePermission = await ImagePicker.getMediaLibraryPermissionsAsync();
    console.log(imagePermission.status);

    setGalleryPermission(imagePermission.status === 'granted');

    if (imagePermission.status !== 'granted') {
      alert('Permission for media access needed.');
    }
  };

  useEffect(() => {
    permisionFunction();
  }, []);

  const pick = async () => {
    let result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.Images,
      quality: 1,
    });

    if (!result.cancelled) {
      setImageUri(result.uri);
    }
  };

  return (
    <View style={styles.container}>
      {imageUri ? (
        <Image
          source={{ uri: imageUri }}
          style={{ flex: 1, borderRadius: 10, margin: 5 }}
        />
      ) : (
        <View style={styles.textBox}>
          <Text>No Image Selected</Text>
        </View>
      )}
      <Button title={'Pick From Gallery'} onPress={pick} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  textBox: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});