I followed all the installations from the expo regarding firebase, for web and android. When I run the app the on web I get the data fine, however, when I run it on android the onValue method does not run.
It doesn't give any errors either.
import { StyleSheet, Text, View, FlatList, TouchableOpacity } from 'react-native';
import {useEffect, useState } from 'react'
import { getDatabase, onValue, ref } from 'firebase/database';
import { fb } from '../firebaseConfig'
import { LogBox } from 'react-native';
const db = getDatabase();
LogBox.ignoreLogs(['Setting a timer']);
const HomePage = ({navigation})=>{
const [count, setCount] = useState([]);
useEffect(() => {
const cart = ref(db,"cart/");
onValue(cart,(snapshot)=>{
const data = snapshot.val();
console.log(data)
setCount(data)
}) },[]);
const sendData = (name, surname) =>{
navigation.navigate('Map', { name: name, surname: surname} )
}
return(
<View>
<FlatList data = {Object.keys(count)}
renderItem={({item})=>
<TouchableOpacity onPress={() => {sendData(count[item].name, count[item].Surname)}}>
<Text>{count[item].name}</Text>
</TouchableOpacity>}
keyExtractor={(item, index) => index.toString()}
/>
</View>
)
}
export default HomePage
this is my app.json
"expo": {
"name": "my-app",
"slug": "my-app",
"version": "1.0.0",
"orientation": "portrait",
"icon": "./assets/icon.png",
"splash": {
"image": "./assets/splash.png",
"resizeMode": "contain",
"backgroundColor": "#ffffff"
},
"updates": {
"fallbackToCacheTimeout": 0
},
"assetBundlePatterns": [
"**/*"
],
"ios": {
"supportsTablet": true
},
"android": {
"package": "com.mypackage.myapp",
"googleServicesFile": "./google-services.json",
"adaptiveIcon": {
"foregroundImage": "./assets/adaptive-icon.png",
"backgroundColor": "#FFFFFF"
}
},
"web": {
"favicon": "./assets/favicon.png"
}
}
}
Am I missing something?
Since you are not passing an error callback as third argument to onValue() it may just look like the function is not firing when it actually executed but then failed and got canceled.
The failure may be due to a permission error, therefore make sure to add an cancelCallback function.
From the docs:
An optional callback that will be notified if your event subscription is ever canceled because your client does not have permission to read this data (or it had permission but has now lost it). This callback will be passed an Error object indicating why the failure occurred.
export declare function onValue(
query: Query,
callback: (snapshot: DataSnapshot) => unknown,
cancelCallback?: (error: Error) => unknown // <--- error handler
): Unsubscribe;