Post

ReactNative app #3 : Create reactNative Firebase setup and getting database

Create reactNative Firebase setup and Add Post

Go to https://console.firebase.google.com/

→ select web application

11

→ Register app (Comunity MarketPlace)

npm install firebase

→ add firebaseConifg.jsx in the root folder and copy firebaseconfig content into it.

→ add export before initializeApp export const app = initializeApp(firebaseConfig);

→ build > Make a database > Firestore database > Start a collection

→ add icons collections like furniture, car, properties, Hobby, Clothing, jobs

22

1
2
3
4
5
6
7
Apps
├── firebaseConfig.jsx
├── Apps
│   ├── HomeScreen.jsx
│   ├── ExploreScreen.jsx
│   ├── ProfileScreen.jsx
│   └── AddPostScreen.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import {View, Text} from 'react-native';
import React, { useEffect } from 'react'
import {app} from '../../firebaseConfig';
import {getFirestore,getDocs,collection} from 'firebase/firestore';

export default function AddPostScreen() {

    const db = getFirestore(app);
    
    useEffect(() => {
        getCategoryList();
    }, []) // only once

    const getCategoryList=async()=>{
        const querySnapshot = await getDocs(collection(db, 'Category'));

        querySnapshot.forEach((doc)=> {
            console.log("Docs:", doc.data());
        })
    }
}

if press AddPost. Terminal shows log

1
2
3
4
5
6
7
LOG  Docs: {"Car": "https://cdn-icons-png.flaticon.com/128/8431/8431017.png"}
LOG  Docs: {"Furniture": "https://cdn-icons-png.flaticon.com/128/8438/8438274.png"}
LOG  Docs: {"Jobs": "https://cdn-icons-png.flaticon.com/128/5079/5079335.png"}
LOG  Docs: {"Hobby": "https://cdn-icons-png.flaticon.com/128/2816/2816775.png"}
LOG  Docs: {"Properties": "https://cdn-icons-png.flaticon.com/128/4664/4664316.png"}
LOG  Docs: {"Clothing": "https://cdn-icons-png.flaticon.com/128/3704/3704721.png"}
LOG  Docs: {"icon": "https://cdn-icons-png.flaticon.com/128/3659/3659899.png", "name": "Electronics"}
This post is licensed under CC BY 4.0 by the author.