Recoil DarkMosw

Question

i have a question about recoil. In my app a have few screens. There are a lot of Text Components. I am doing dark mode now and i try to use recoil for this. I have atom isDarkMode, which can be false or true. There is a problem. Is needed to check in every Text component( I have around 50 for all app) in style => {isDarkMode ? darkModeStyles: lightModeStyles}. In all Text Components i need to have same style in darkMode... Now I just repeat this in every TextComponent. Is the way to manage this in smarter way, to avoid repeating? I mean like pass this styles from parent or sth like that? or I just need to do like I am doing now?

I have switch in settings, so if this switch is true i want dark mode, if false I want light mode. So will is other method rather than checking if this switch state is true or false in every Text Component? Now i have sth like this

<Text style={{isDarkMode ? darkModeStyles: lightModeStyles}}> Some text </Text>
<Text style={{isDarkMode ? darkModeStyles: lightModeStyles}}> Some text </Text>
<Text style={{isDarkMode ? darkModeStyles: lightModeStyles}}> Some text</Text>
<Text style={{isDarkMode ? darkModeStyles: lightModeStyles}}> Some text </Text>

etc. and a lot other text comp in few screens if I am able to manage all texts at the same time? I mean avoid writing this "{isDarkMode ? darkModeStyles: lightModeStyles}" in every comp. If not, maybe some way to shortening this provision

score 1 · Answer 1 · answered Jul 25 '21 at 13:55

You can make a simple reusable component:

...import all the dependencies that you need

export const ThemeDependentText = ({children}) => {
  return (
    <Text style={{isDarkMode ? darkModeStyles: lightModeStyles}}> {children} </Text>
  )
}

and then you can use it anywhere with a custom text, with the theme condition applied to every component:

...
import { ThemeDependentText } from 'ThemeDependentText'
...

<ThemeDependentText> YAY </ThemeDependentText>

Recoil DarkMosw

1 Answers1