Complete Dark & Light Theme in a React Native App (Multiple Switching Methods & Saving Theme)

In this video, we look at implementing dark and light theme mode in a full React Native application using different switching methods.
GET SOURCE CODE ?⬇️

? Resulting Source Code - https://bit.ly/rn-dark-light-theme-project

? All Other Source Codes & Support - https://bit.ly/ttpc-monthly-access

NOTES

? We ensure consistent theme colors in all components and also status bar based on selected theme.

? We look at switching theme using a toggle switch.

? We look at switching theme using theme select buttons.

? We look at switching theme using based on user system preference.

? We look at storing the selected theme in memory for next app start.

? The tools we'll be using include React Context, Async Storage, React Native Switch, etc.

VIDEO RESOURCES

? News Feed Project Used - https://www.youtube.com/playlist?list=PLk8gdrb2DmCjzB1eVRwobY9I_HLaZGPKv

? React Context - https://reactjs.org/docs/context.html

? Async Storage - https://react-native-async-storage.github.io/async-storage/docs/install/

LET’S WORK

? You can reach me at - https://www.tothepointcode.com/contact

CHECK OUT THESE HELPFUL TUTORIALS

? Complete React and Node JS Login System - https://youtube.com/playlist?list=PLk8gdrb2DmChrL50moKeFNAVnFqZ3GLF7

? Node JS Projects - https://youtube.com/playlist?list=PLk8gdrb2DmCh7bDI-OzoUSkWUxQg0n5A_

? React Native Projects - https://youtube.com/playlist?list=PLk8gdrb2DmChwoNzs5n2iAvqak4-euA5H

? Publishing Expo React Native App to Play Store Journey
- https://youtube.com/playlist?list=PLk8gdrb2DmCjsRsDIwMBJdf350qKMiJ8R

? PHP Project
- https://youtube.com/playlist?list=PLk8gdrb2DmCjGHFH1iQxdJUTWsxyceSO0

TOOLS USED

? Tool for my thumbnail & images - https://partner.canva.com/ttpc

? Cheap website domain name - https://namecheap.pxf.io/ttpc


FOLLOW US ON:

? Twitter - https://twitter.com/ToThePointCode

? Instagram - https://www.instagram.com/invites/contact/?i=1nbjm5bt0glsc&utm_content=ivnmcsm

? GitHub - https://github.com/tothepointcode

? YouTube - https://www.youtube.com/channel/UCWUk0Y_h1bLvB8qLZ4lAS8A?sub_confirmation=1

CHAPTERS

00:00 What will be done
00:47 Required Color Preparations
01:58 Updating Components with Initial Static Theme Colors
02:59 Important Styling Pattern Used
03:18 Continuation of Updating Components with Initial Static Theme Colors
08:45 Setting up Theme Context for global theme accessibility
12:48 Updating Components with Theme Colors from Context
18:54 Changing Theme with Toggle Switch
20:38 Setting Theme with Theme Select Buttons
22:40 Setting Theme Based on Device System Theme Mode
27:28 App.json Settings Needed for System Theme in Development
28:46 Constantly Monitoring System for Theme Changes
31:16 Saving Selected Theme for when App Starts Preparations
32:22 Setting up Async Storage Helper functions
35:26 Storing and Fetching Theme using Async Storage
39:00 Fetching Theme Before App Starts with Splash Screen
41:28 Final Theme Test

#tothepointcode #darktheme #reactnative