What are some advanced examples of using the Context API in React Native?

What are some advanced examples of using the Context API in React Native?

The Context API in React Native allows for state management across components without prop drilling. Advanced examples include using it for theming, managing user authentication, and handling complex state logic.

Can you show me a code example for theming?

Sure! Here's a simple example:

const ThemeContext = React.createContext();

const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme(prevTheme => (prevTheme === 'light' ? 'dark' : 'light'));
  };

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

You can then use ThemeContext in your components to access the current theme and toggle function.

What about managing user authentication?

For user authentication, you can create an AuthContext that holds user data and authentication methods. This allows any component to access user information and login/logout functions easily.

Are there any performance considerations when using Context API?

Yes, frequent updates to context values can cause unnecessary re-renders. To mitigate this, consider splitting context into smaller contexts or using memoization techniques.