useContext in React Native

Question

I've been trying to use the context hook in React Native, but it doesn't seem to work, it returns undefined. However, when I use <Context.Consumer> it does work fine, do you know if useContext is supported in React Native?

Answer 1

useContext is absolutely supported in react native. Use React.createContext() to create the context.

export const AppStateContext = React.createContext();

const AppStateProvider = props => {

  const contextValue={...yourContext}

  return (
    <AppStateContext.Provider value={contextValue}>
      {props.children}
    </AppStateContext.Provider>
  );
};

Wrap your app like so.

<AppStateProvider>
    <App />
</AppStateProvider>

Then you can access the context in your nested component with the useContext hook.

import {AppStateContext} from './AppStateProvider';

function YourComponent(props) {
  const {context} = useContext(AppStateContext)
  
  ...
    return (
      <View>
      ...
      </View>
  );
}