React Native Context - reactjs

Question

I am trying to create a context for saveing data from an Api response. But it gives me an error.
I don't know how to solve the error.
This screen is a show screen. In the index screen I can use another context and it works well.
I want to create another context for saving data from other Api call. I am trying to copy it but it gives me an error.
Thanks.
TypeError: undefined is not an object (evaluating '_useContext.state')
CONTEXT
import createDataContext from './createDataContext';
import jsonServer from '../api/api';
const currencyPrices = (state, action) => {
switch (action.type) {
case 'show_prices':
return action.payload;
default:
return state;
}
};
const showPrices = (dispatch) => {
return async (id) => {
const response = await jsonServer.get(`/prices/${id}`);
dispatch({type: 'show_prices', payload: response.data[0]});
};
};
export const {Context, Provider} = createDataContext(
currencyPrices,
{showPrices},
[],
);
CREATE DATA CONTEXT
import React, {useReducer} from 'react';
export default (reducer, actions, initialState) => {
const Context = React.createContext();
const Provider = ({children}) => {
const [state, dispatch] = useReducer(reducer, initialState);
// actions === { addBlogPost: (dispatch) => { return () => {} } }
const boundActions = {};
for (let key in actions) {
boundActions[key] = actions[key](dispatch);
}
return (
<Context.Provider value={{state, ...boundActions}}>
{children}
</Context.Provider>
);
};
return {Context, Provider};
};
SCREEN
/* eslint-disable react-hooks/rules-of-hooks */
import React, {useContext, useEffect} from 'react';
import {View, Text} from 'react-native';
import {Context} from '../context/currencyPrices';
const showScreen = ({navigation}) => {
const {state, showPrices} = useContext(Context);
useEffect(() => {
showPrices(1);
const listener = navigation.addListener('didFocus', () => {
showPrices(1);
});
return () => {
listener.remove();
};
});
return (
<View>
<Text>{state.length}</Text>
</View>
);
};
export default showScreen;

Answer 1

in app.js
import {Provider as ProviderName}
<ProciderName>
<App/>
</ProviderName}
you should wrap provider in mani root like app.js