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"}
);