1

I'm working on a React Native project where I need to upload an image to Firebase. I'm using react-native-image-picker for image selection and @react-native-firebase/firestore for interacting with Firestore. The form works well, and the text fields store data in Firebase correctly, but the image field in Firebase shows null.

I am receiving an error when I try to upload the image after clicking the "Select Image" button. The image URI is not stored in Firestore, and instead, it shows null. Please see the provided screenshots!

Steps to reproduce:

Click on the "Select Image" button. Pick an image from the device. Click on the "Submit" button. Expected behavior: The image URI should be saved in Firestore along with the other ticket data.

Actual behavior: An error occurs when I click the select button, and the image URI is not uploaded to Firestore; it shows null instead.

Any help would be appreciated. Thanks!

Code - Where i jahve used Image picker librabry;

import { useState } from "react";
import { ScrollView, StyleSheet, Text, TextInput, View } from "react-native";
import { Colors } from "../../constants/colors";
import ImagePicker from "./ImagePicker";

function PlaceForm(){
    const [enteredTitle, setEnteredTitle] =useState('')

    function changeTitleHandler(enteredText){
        setEnteredTitle(enteredText)
    }
    return(
        <ScrollView style={styles.form}>
            <View>
                <Text>Title</Text>
                <TextInput style={styles.input} onChangeText={changeTitleHandler}  value={enteredTitle}/>
            </View>
            <ImagePicker />
        </ScrollView>
    )
}
export default PlaceForm;

const styles = StyleSheet.create({
    form :{
        flex: 1,
        padding:24,
    },
    label:{
        fontWeight:'bold',
        marginBottom:4,
        color: Colors.primary500
    },
    input:{
        marginBottom:8,
        paddingHorizontal:4,
        paddingVertical:8,
        fontSize:16,
        borderBottomColor:Colors.primary700,
        borderBottomWidth:2,
        backgroundColor: Colors.primary100
    }
})

package.json file

{
  "name": "rncourse",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "@react-navigation/native": "^6.0.8",
    "@react-navigation/native-stack": "^6.5.0",
    "expo": "~44.0.0",
    "expo-status-bar": "~1.2.0",
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "react-native": "0.64.3",
    "react-native-web": "0.17.1",
    "expo-image-picker": "~12.0.1"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9"
  },
  "private": true
}

0

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.