Dynamic switching of themes in React Native App: The funky way with hooks! 👌

In February I posted an article with example of how to switch React Native Paper themes dynamically via the recently introduced Context API.

Today, I will try to rewrite the example with the latest big thing in React world - React Hooks! I'm so excited about this addition since writing functional components are much better solution than the class-based way! With them is much more easier to code, test and maintain and after the hooks introduction - they're on steroids with state management and handling lifecycle events! 🚀

So, lets dive in the revised example with hooks!

1. Lets create a file: Themes.js, containing our themes:

2. Create a file called AppContextProvider.js and write a function that will provide our AppContext Provider:

3. Go back to App.js and update the return statement:

4. So, here is how to change the theme from a child component:

What do you think when comparing the functional approach with hooks to the class-based example in the previous article?

Yeah, it's so simple, clean and... fun! 🥳