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 = { ...DefaultTheme, colors: { ...DefaultTheme.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.
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>
</TouchableOpacity>
);
}
This is where we share our knowledge and insights. Our aim is to impart industry insights to help our website visitors take away valuable information.
Explore More Blog ⟶