Error in uploading image with 'react-native-image-picker' library

Question

I am creating an android application and I need to use the react-native-image-picker library but it is showing some error, the error is:

[Unhandled promise rejection: TypeError: null is not an object (evaluating '_reactNative.NativeModules.ImagePickerManager.launchImageLibrary')]

I have tried everything like changing to different versions as well, also I have used expo-image-picker which does not show an error while fetching an image from android but gives an error when uploading it to firebase.

Please help, I have been frustrated with this error.

import {
  View,
  Text,
  Image,
  StyleSheet,
  KeyboardAvoidingView,
  TouchableOpacity,
  ActivityIndicator
} from "react-native";
import React, { useState } from "react";
import { TextInput, Button } from "react-native-paper";
import ImagePicker, { launchImageLibrary } from "react-native-image-picker";
import storage from "@react-native-firebase/storage";
import auth from '@react-native-firebase/auth';
import firestore, {getStorage, ref, uploadBytes} from '@react-native-firebase/firestore';

export default function SignUp({ navigation }) {
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [image, setImage] = useState(null);
  const [shownext, setShownext] = useState(false);
  const [loading, setLoading] = useState(false);

  if (loading) {
    return <ActivityIndicator size='large' />
  }

  const userSignUp = async () => {
    setLoading(true)
    if (!email || !password || !image || !name) {
      alert('fill all details correctly')
      return false;
    }
    try {
      const result = await auth().createUserWithEmailAndPassword(email, password);
    firestore().collection('users').doc(result.user.uid).set({
      name: name,
      email: result.user.email,
      uid: result.user.uid,
      pic:image
    })
      setLoading(false)
  }catch (err) {
      alert('something went wrong from your side')
    }
    }

  const pickImageAndUpload = () => {
    console.log(1);
    launchImageLibrary({ puality: 0.5 }, async (fileobj) => {
        console.log(2);
        console.log(fileobj);
        const uploadTask = storage().ref().child(`/userprofilepic/${Date.now()}`).putFile(fileobj.uri);
      uploadTask.on(
        "state_changed",
        (snapshot) => {
          const progress =
            (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
          if (progress == 100) alert("image uploaded");
        },
        (error) => {
          alert("error uploading image");
        },
        () => {
          getDownloadURL(uploadTask.snapshot.ref).then((downloadURL) => {
            setImage(downloadURL);
          });
        }
      );});
  };

  return (
    <KeyboardAvoidingView behavior="position" style={{ alignItems: "center" }}>
      <View style={styles.box1}>
        <Text style={styles.text}>Welcome to chatapplication</Text>
        <Image style={styles.img} source={require("../assets/wa-logo.png")} />
      </View>
      {!shownext && (
        <>
          <TextInput
            style={{ width: 330, marginTop: 50, marginBottom: 30 }}
            label="Email"
            value={email}
            mode="outlined"
            onChangeText={(text) => setEmail(text)}
          />
          <TextInput
            style={{ width: 330, marginBottom: 30 }}
            label="Password"
            value={password}
            mode="outlined"
            onChangeText={(text) => setPassword(text)}
            secureTextEntry
          />
        </>
      )}

      {shownext ? (
        <>
          <TextInput
            style={{ width: 330, marginTop: 50, marginBottom: 30 }}
            label="Name"
            value={name}
            mode="outlined"
            onChangeText={(text) => setName(text)}
          />
          <Button
            style={{ marginBottom: 30 }}
            mode="contained"
            onPress={() => { pickImageAndUpload() }}
          >
            Upload Profile Pic
          </Button>
          <Button
            disabled={image?false:true}
            mode="contained"
            onPress={() => { userSignUp() }}>
            SignUp
          </Button>
        </>
      ) : (
          <Button
            // disabled={email&&password?false:true}
          mode="contained"
          onPress={() => {
            setShownext(true);
          }}
        >
          Next
        </Button>
      )}
      <TouchableOpacity onPress={() => navigation.goBack()}>
        <Text style={{ margin: 10, textAlign: "center", fontSize: 18 }}>
          Already have an account?
        </Text>
      </TouchableOpacity>
    </KeyboardAvoidingView>
  );
}

const styles = StyleSheet.create({
  text: {
    fontSize: 22,
    color: "green",
    margin: 20,
  },
  img: {
    width: 200,
    height: 200,
  },
  box1: {
    alignItems: "center",
  },
});