Using Expo AppLoading to preload data from firebase

[ccraig09]

Please provide the following:

1. SDK Version: 41
2. Platforms(Android/iOS/web/all):
3. Add the appropriate “Tag” based on what Expo library you have a question on.
   AppLoading

0

I am trying to use AppLoading on Expo to preload data from firebase, before the app goes to the homepage. I keep receiving an error.

"Error: could not find react-redux context value; please ensure the component is wrapped in a < Provider > "

import React, { useState } from "react";
import { createStore, combineReducers, applyMiddleware } from "redux";
import { Provider } from "react-redux";
import ReduxThunk from "redux-thunk";
import productsReducer from "./store/productReducer";
import createdProducts from "./store/createdProductReducer";
import storeName from "./store/StoreNameReducer";
import authReducer from "./store/authReducer";
import { useDispatch } from "react-redux";
import * as ProdActions from "./store/productActions";
import AppLoading from "expo-app-loading";

import InventoryNavigator from "./navigation/InventoryNavigator";

const rootReducer = combineReducers({
  products: productsReducer,
  availableProducts: createdProducts,
  auth: authReducer,
  storeName: storeName,
});

const store = createStore(rootReducer, applyMiddleware(ReduxThunk));

export default function App() {
  const [fireBLoaded, setFireBLoaded] = useState(false);
  const dispatch = useDispatch();
  const fetchFirebase = () => {
    dispatch(ProdActions.fetchAvailableProducts());
    dispatch(ProdActions.fetchStoreName());
    dispatch(ProdActions.fetchProducts());
  };
  if (!fireBLoaded) {
    return (
      <AppLoading
        startAsync={fetchFirebase}
        onFinish={() => setFireBLoaded(true)}
        onError={console.warn}
      />
    );
  } else {
    return (
      <Provider store={store}>
        <InventoryNavigator />
      </Provider>
    );
  }
}

what I have tried:

  const fetchFirebase = async () => {

any help would be greatly appreciated, I am still new to React Native Expo.

[adamjnav]

Hey @ccraig09, as the error mentions you’ll need to ensure the AppLoading component is the wrapped with the redux provider. The best way to approach this is by wrapping your app at the root level. In this instance, you could either create a separate component that wraps your App component or wrap your App component and move your AppLoading and InventoryNavigator logic into a new child component of your App component.

Cheers,
Adam