What is the best way to implement Dark mode in React Native - reactjs

Question

I want to add dark mode in my React Native App. I have come across many implementations including React Navigation and Appearance. Everywhere I see code similar to the one below:-
import { Text, useColorScheme } from 'react-native';
const theme = useColorScheme();
<Text style={theme === 'light' ? styles.text_light : styles.text_dark}>Hello</Text>
But using these ternary operators everywhere is adding up to noise in code. I have created my custom Text and View as you can see below.
import { Text, useColorScheme } from 'react-native';
const theme = useColorScheme();
const CustomText = ({ styles, children }) => {
return (
<Text
style={[
theme === 'dark' ? { color: 'white' } : { color: 'black' },
styles,
]}>
{children}
</Text>
);
};
My Question is, Is my solution feasible? Can I replace React Native Components like Text and View(that get used everywhere) with custom components, or the ternary operator in React Components a better way. Thank you.

Answer 1

react-native-paper provides components that are colored using the theme stored in the PaperProvider context. React navigation has a similar context. Since these themes are compatible with one another, here's an example where users allow to manipulate both:
First merge the paper and navigation light and dark schemes:
// React native paper theme is compatible with react-navigation theme
// so merge them
const CombinedDefaultTheme = merge(
PaperDefaultTheme,
NavigationDefaultTheme
);
const CombinedDarkTheme = merge(PaperDarkTheme, NavigationDarkTheme);
Now I create a function that will customize the merged scheme base on a provided color and whether or not dark mode is desired:
// create theme base on provided color and whether in darkmode
export const getTheme = (color, isDarkMode) => {
// use color scheme generator to get colors
const [primary, accent, ...otherColors] =
colorSchemes.getNeutralScheme(color);
const colorPresets = isDarkMode
? darkenColorPresets
: lightenColorPresets;
// get lighter and darker versions of these colors
const primaryPresets = colorPresets(primary);
const accentPresets = colorPresets(accent);
// get default paper& navigation theme
const DefaultTheme = isDarkMode
? CombinedDarkTheme
: CombinedDefaultTheme;
//override theme with changes
const theme = {
...DefaultTheme,
colors: {
...DefaultTheme.colors,
primary,
accent,
primaryPresets,
accentPresets,
otherColors,
},
};
// make background color darker
const onDark = {
background: colorManipulators.blend(primary, "#000", 0.8),
};
// make text lighter version of background color
onDark.text = colorManipulators.blend(onDark.background, "#fff", 0.6);
if (isDarkMode) theme.colors = { ...theme.colors, ...onDark };
return theme;
};
And now put this theme into a piece of state with useReducer:
import React, { useReducer } from "react";
import { useColorScheme } from "react-native";
import { getTheme } from "../colors";
const initialState = {
mainColor: "#0D3FF8",
};
initialState.isDarkMode = false;
initialState.theme = getTheme(
initialState.mainColor,
initialState.isDarkMode
);
const reducer = (state, action) => {
switch (action.type) {
case "setMainColor": {
let newColor = action.payload;
return {
...state,
mainColor: newColor,
theme: getTheme(newColor, state.isDarkMode),
};
}
case "overrideTheme": {
let newTheme = action.payload;
return { ...state, theme: { ...state.theme, ...newTheme } };
}
case "setIsDark": {
const newDark = action.payload;
return {
...state,
isDarkMode: newDark,
theme: getTheme(state.mainColor, newDark),
};
}
}
};
export default function ThemeReducer(stateOverride = {}) {
console.log("here is the state override");
console.log(stateOverride);
const [state, dispatch] = useReducer(reducer, {
...initialState,
isDarkMode: useColorScheme() == "dark",
...stateOverride,
});
return { ...state, dispatch };
}