Dark and Light theme using react-native/navigation

Dark and light theme implementation can be done according to the UI libraries using in your app,  go through their docs in my case react-native-elements doesn’t have a good support of dark and light theme so I am using react native navigation dark light theme functionality to set dark and light theme in my App

import * as React from 'react';
import { NavigationContainer, DefaultTheme } from '@react-navigation/native';
const MyTheme = {
 colors: {
   primary: 'rgb(255, 45, 85)',
export default function App() {
 return (
   <NavigationContainer theme={MyTheme}>{/* content */}</NavigationContainer>

 you can use both methods to modify the theme object you can make a new object or modify the imported object.

Using the the light and dark theme in your custom components

To gain access to the theme in any component that is rendered inside the navigation container:, you can use the useTheme hook. It returns the theme object:

import * as React from ‘react’;

import { TouchableOpacity, Text } from ‘react-native’;

import { useTheme } from ‘@react-navigation/native’;

// Black background and white text in light theme, inverted on dark theme

function MyButton() {

 const { colors } = useTheme();

 return (

   <TouchableOpacity style={{ backgroundColor: colors.card }}>

     <Text style={{ color: colors.text }}>Button!</Text>




Resource for reference