Props not received in a screen wrapped with provider

Viewed 66

I am new to react native so please help out.

Instead of wrapping my whole app around a context provider, I want to wrap a particular flow only App -> Dashboard -> Provider{ List -> Details}

I have got it to work in the flow but now the problem here is that I am not getting any of the props in list screen, can anybody check and help out?

Create Data Context Template ::

export default (reducer, actions, initialState) => {
    const Context = React.createContext();

    const Provider = ({ children }) => {
        const [state, dispatch] = useReducer(reducer, initialState);

        const boundActions = {};
        for (let key in actions) {
            boundActions[key] = actions[key](dispatch);
        }

        return (
            <Context.Provider value={{ state, ...boundActions }}>
                {children}
            </Context.Provider>
        );
    };

    return { Context, Provider };
};

Navigation::

<NavigationContainer>
        <Stack.Navigator initialRouteName="Dashboard" screenOptions={{
            headerBackTitleVisible: false
        }}>
            <Stack.Screen name="Dashboard" component={DashboardScreen} />
            <Stack.Screen name="NewsList" component={ListWithProvider} />
        </Stack.Navigator>
    </NavigationContainer>

ListWithProvider::

export const ListWithProvider = () => {
    return <ListProvider>
        <ListScreen/>
    </ListProvider>
};

ListProvider::

const reducer = (state, action) => {
  switch (action.type) {
    default:
      return state;
  }
};

const setData = (dispatch) => {
  return (source) =>{
    dispatch({type:"setData", payload: source});
  }
}
export const { Context, Provider } = CreateDataContext(
  reducer,
  { setData },
  {loading: false, data: null, error: null, filter: "all"}
);
0 Answers
Related