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
→ 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
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.