react-redux-firebase Firestore not ever loading the data - react-native

Question

I have a react-native app that is using react-redux-firebase, react-native-firebase to connect to a firestore to return some todo records. There are records in the store, however all that is displayed is the "loading" text. It never updates the todos.
I have tried connecting directly within the app and it works fine so I'm assuming that firebase is configured correctly.
this.ref.get().then((querySnapshot) => {
console.log("ListItemFS: started query snapshot", querySnapshot);
this.handleSnapshot(querySnapshot);
});
This is my App.tsx
import React from 'react'
import { Provider } from 'react-redux'
import { ReactReduxFirebaseProvider } from 'react-redux-firebase';
import firebase from 'react-native-firebase'
import { createStore, compose } from 'redux'
import { composeWithDevTools } from "redux-devtools-extension";
import { createFirestoreInstance, firestoreReducer } from 'redux-firestore'
import { combineReducers } from 'redux';
import { firebaseStateReducer } from 'react-redux-firebase'
import Todos from './Todos';
//Configure firebase
const fbConfig = {
userProfile: 'users',
useFirestoreForProfile: true, // Firestore for Profile instead of Realtime DB,
enableLogging: true
}
//firebase.initializeApp(fbConfig) // <- I have tried with and without this with no difference.
//let db = firebase.firestore(); makes no difference
//Configure reducers
const rootReducer = combineReducers({
firebase:firebaseStateReducer,
firestore: firestoreReducer
})
// Configure store
const store = createStore(rootReducer, compose(composeWithDevTools()))
export default () => (
<Provider store={store}>
<ReactReduxFirebaseProvider
firebase={firebase}
config={fbConfig}
dispatch={store.dispatch}
createFirestoreInstance={createFirestoreInstance}
>
<Todos />
</ReactReduxFirebaseProvider>
</Provider>
)
This is my TODO component
import React from 'react'
import { connect } from 'react-redux'
import { compose } from 'redux'
import { isLoaded, isEmpty } from 'react-redux-firebase/lib/helpers'
import { View ,Text} from 'react-native'
import { firestoreConnect } from 'react-redux-firebase'
function Todos({ todos, firebase, state }) {
console.log("ToDos",todos);
console.log("state",state);
if (!isLoaded(todos)) {
return <Text>Loading...</Text>
}
if (isEmpty(todos)) {
return <Text>Todos List Is Empty</Text>
}
return (
<View>
{
Object.keys(todos).map(
(key, id) => (
<Text >First Key:{todos[key]}</Text>
)
)
}
</View>
)
}
export default compose(
firestoreConnect(() => [
{ collection: 'todos' } //'todos' // { path: '/todos' } // neither works
]),
connect(state => ({
todos: state.firestore.data.todos
// profile: state.firebase.profile // load profile
}))
)(Todos)
The following are my dependencies
"dependencies": {
"expo": "^34.0.1",
"fbjs": "^1.0.0",
"react": "16.8.3",
"react-dom": "16.8.3",
"react-native": "0.59.10",
"react-native-firebase": "5.2.0",
"react-native-gesture-handler": "~1.3.0",
"react-native-reanimated": "~1.1.0",
"react-native-router-flux": "^4.1.0-beta.8",
"react-native-screens": "1.0.0-alpha.22",
"react-native-size-matters": "^0.2.1",
"react-native-unimodules": "~0.5.2",
"react-native-web": "^0.11.4",
"react-navigation-deprecated-tab-navigator": "^1.3.0",
"react-redux": "^5.0.6",
"react-redux-firebase": "^3.0.0-beta.2",
"recompose": "^0.30.0",
"redux": "3.x.x",
"redux-devtools-extension": "^2.13.8",
"redux-firestore": "^0.8.0"
}
If you have any suggestions on what I've done wrong I would be really grateful.

Answer 1

Try to add
import 'react-native-firebase/firestore'
in your App.tsx