How to Update Data Firebase In Expo React Native?

Dec 20, 2022 . Admin

This article is focused on how to update data to firebase realtime database. This tutorial will give you simple example of how to update data in firebase. I explained simply about expo update firebase. you can see how to update data in firebase. Follow bellow tutorial step of expo firebase firestore example.

Firebase is a Backend-as-a-Service (Baas). It provides developers with various tools and services to help them develop quality apps, grows their user base, and earn profit. It is built on Google’s infrastructure.

Firebase is categorized as a NoSQL database program, which stores data in JSON-like documents.

Step 1: Firebase Get Start
In the first step, you can first click to "" this can click on to get started button. Step 2: Firebase Create Project The second step, you can click to add a project box. you can display this image. In this can add to project name add to the input box. then your database creates to firebase database. Click the “Create project” button, and you should be redirected to the dashboard screen. You should see your newly-created project on that dashboard. Step 3: Firebase Project Setting The third step, you can firebase setting click to then open drop down. you can click to project setting. you can click to IMG red square part. Step 4: App Name In this step, you can add to the project nickname. you can create to the config file in your project, then add to this code your config file Step 5: Firestore Database Start In this step, you can start to firestore database. you can select drop-down mumbai. Step 6: Download Project

In the first step run the following command to create a project.

expo init ExampleApp
Step 7: Install Firebase in Expo

In the first step run the following command to install firebase a project.

npm install firebase
Step 8: Create Config File

In the first step, you can create to config file for your project.

// Import the functions you need from the SDKs you need
import firebase from 'firebase/compat/app';

import firestore from "firebase/compat/firestore";
// TODO: Add SDKs for Firebase products that you want to use

// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
    apiKey: "Your Api Key Add",
    authDomain: "",
    projectId: "fir-66ba7",
    storageBucket: "",
    messagingSenderId: "620063574511",
    appId: "1:620063574511:web:838d671a60d7d916530e1a",
    measurementId: "G-FKH0ZZY2Z2"


export {firebase};
Step 9: App.js

In this step, You will open the App.js file and put the code.

import { FlatList, StyleSheet, Text, TouchableOpacity, View, Alert, Modal, TextInput, Pressable } from 'react-native'
import React from 'react'
import { firebase } from './config';

const App = () => {

  const [user, setUser] = React.useState([]);
  const [name, setName] = React.useState('');
  const [key, setkey] = React.useState('');
  const [modalVisible, setModalVisible] = React.useState(false);

  React.useEffect(() => {
  }, [])

  const getData = () => {
      .onSnapshot(querySnapshot => {
        const userlist = [];
        querySnapshot.forEach(documentShot => {



  const submit = () => {
        userName: name
      .then(() => {
        console.log("User Upadate SuccessFully")

  const updateItem = (item) => {

  const renderItem = ({ item }) => {
    return (
      <View style={{
        backgroundColor: 'red',
        margin: 5,
        padding: 10,
        flexDirection: 'row',
        justifyContent: 'space-between'
        <Text style={{ color: 'white' }}>{item.userName}</Text>
          onPress={() => updateItem(item)}
          <Text style={{ color: 'white' }}>Update</Text>

  return (
    <View style={{
      marginTop: 50

        onRequestClose={() => {
          Alert.alert("Modal has been closed.");
        <View style={styles.modalView}>
          <Text>User Name</Text>
              borderWidth: 1,
              borderRadius: 8,
              padding: 5,
              marginTop: 5
            onChangeText={(name) => setName(name)}
              backgroundColor: 'green',
              marginTop: 10,
              padding: 5,
              alignItems: 'center'
            onPress={() => submit()}
            <Text style={{ color: 'white' }}>Submit</Text>

        keyExtractor={item =>}

export default App

const styles = StyleSheet.create({
  centeredView: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    marginTop: 22
  modalView: {
    margin: 20,
    backgroundColor: "white",
    borderRadius: 20,
    padding: 35,
    // alignItems: "center",
    shadowColor: "#000",
    shadowOffset: {
      width: 0,
      height: 2
    shadowOpacity: 0.25,
    shadowRadius: 4,
    elevation: 5
  button: {
    borderRadius: 20,
    padding: 10,
    elevation: 2
  buttonOpen: {
    backgroundColor: "#F194FF",
  buttonClose: {
    backgroundColor: "#2196F3",
  textStyle: {
    color: "white",
    fontWeight: "bold",
    textAlign: "center"
  modalText: {
    marginBottom: 15,
    textAlign: "center"
Step 10: Run Project

In the last step run your project using the below command.

expo start

You can QR code scan in Expo Go Application on mobile.

Firebase Databse User Table:


Firebase Databse Update User Data:

It will help you...

#React Native