EDIT - PROBLEM FIXED
Finally, after the samples of support received and the opinions, and doing countless tests, I decided to eliminate the project and start over. I can't say or explain what I was doing wrong or how the problem was corrected, I just started a project from scratch, and everything worked.
I must say that I already did everything shown in the following questions, without being able to bring the data from the Database to my application:
React Native Could not reach Cloud Firestore backend
Ionic 5 emulator AVD Internet connection - error?
Firebase/Firestore not connected to internet
Firebase Firestore and Authentication Errors
Emulated firstore: Firestore (8.5.0): Could not reach Cloud Firestore backend
I have changed the version of Firebase, I have added code that works for others, I have looked for solutions on GitHub, etc. I also looked for a solution on this site, but I can't connect.
My React Native App makes use of Firebase. I am trying to join the Firestore DataBase to my application, with no success. The application so far has a list of products that are in the database, entered in it manually, from a Web application, which is perfectly connected to Firebase DataBase Making Debugger, I check that the fix reaches me, thanks to a console.log, but it is empty, and in the Database I have several elements entered manually.
I show an image from the console.log
I always get the same Warning:
> @ firebase / firestore: Firestore (7.19.0): Could not reach Cloud
> Firestore backend. Backend didn't respond within 10 seconds. This
> typically indicates that your device does not have a healthy Internet
> connection at the moment. The client will operate in offline mode
> until it is able to successfully connect to the backend
They are already 10 days testing solutions. I have changed the version of Firebase, I have added code that works for others,I have looked for answers on GitHub, etc. I also looked for a solution on this site, but I can't connect.
I can't continue with my application if I can't get the data from the DataBase
I show images and code
import app from 'firebase/app'
import 'firebase/firestore'
import firebaseConfig from './config'
class Firebase {
/*constructor() {
if(!app.apps.length) {
app.initializeApp(firebaseConfig)
}
this.db = app.firestore()
}*/
constructor() {
if (!app.apps.length) {
app.initializeApp(firebaseConfig)
app.firestore().settings({ experimentalForceLongPolling: true })
}
this.db = app.firestore()
}
}
const firebase = new Firebase()
export default firebaseFILE Menu.js
import React, { useContext, useEffect, Fragment } from 'react'
import { StyleSheet } from 'react-native'
import {
Container,
Separator,
Content,
List,
ListItem,
Thumbnail,
Text,
Body
} from 'native-base'
import globalStyles from '../styles/global'
import FirebaseContext from '../context/firebase/firebaseContext'
const Menu = () => {
// Context de Firebase
const { menu, obtenerProductos } = useContext(FirebaseContext)
useEffect(() => {
obtenerProductos()
console.log(menu)
}, [])
return (
<Container style={globalStyles.contenedor}>
<Content style={{ backgroundColor: '#FFF' }}>
<List>
{menu.map(plato => {
const { imagen, nombre, descripcion, categoria, precio, id } = plato
return (
<Fragment key={id}>
<ListItem
>
<Body>
<Text>{nombre}</Text>
</Body>
</ListItem>
</Fragment>
)
})}
</List>
</Content>
</Container>
)
}
const styles = StyleSheet.create({
separador: {
backgroundColor: '#000',
},
separadorTexto: {
color: '#FFDA00',
fontWeight: 'bold',
textTransform: 'uppercase'
}
})
export default MenuFILE NuevaOrden.js
import React from 'react'
import { View, StyleSheet } from 'react-native'
import { Container, Button, Text, NativeBaseProvider } from 'native-base'
import globalStyles from '../styles/global'
import { useNavigation } from '@react-navigation/native'
const NuevaOrden = () => {
const navigation = useNavigation()
return (
<Container style={globalStyles.contenedor}>
<View style={[globalStyles.contenido, styles.contenido]}>
<Button
style={globalStyles.boton}
rounded
block
onPress={() => navigation.navigate('Menu')}
>
<Text style={globalStyles.botonTexto} >Crear Nueva Orden</Text>
</Button>
</View>
</Container>
)
}
const styles = StyleSheet.create({
contenido: {
flexDirection: 'column',
justifyContent: 'center'
}
})
export default NuevaOrdenFILE firebaseState.js
import React, { useReducer } from 'react'
import firebase from '../../firebase'
import FirebaseReducer from './firebaseReducer'
import FirebaseContext from './firebaseContext'
import { OBTENER_PRODUCTOS_EXITO } from '../../types'
const FirebaseState = props => {
// Crear state inicial
const initialState = {
menu: []
}
// useReducer con dispatch para ejecutar las funciones
const [state, dispatch] = useReducer(FirebaseReducer, initialState)
// Función que se ejecuta para traer los productos
const obtenerProductos = () => {
// consultar firebase
//firebase.db.settings({ experimentalForceLongPolling: true })
firebase.db
.collection('productos')
.where('existencia', '==', true) // traer solo los que esten en existencia
.onSnapshot(manejarSnapshot)
function manejarSnapshot(snapshot) {
let platos = snapshot.docs.map(doc => {
return {
id: doc.id,
...doc.data()
}
})
console.log(platos)
// Tenemos resultados de la base de datos
dispatch({
type: OBTENER_PRODUCTOS_EXITO,
payload: platos
})
}
}
return (
<FirebaseContext.Provider
value={{
menu: state.menu,
firebase,
obtenerProductos
}}
>
{props.children}
</FirebaseContext.Provider>
)
}
export default FirebaseState
enter image description here
