0

I have the following graphic at the top of the screen in my React Native app:

enter image description here

Obviously the problem is that the time, battery power, etc, are hard to see because the graphic is black. How do people normally deal with this kind of thing? If I made it white, I'd run the risk of it being less visible if the time etc on a particular phone is white. Should I just put padding at the top of the screen so that the graphic doesn't overlap with the text?

gkeenley
  • 6,088
  • 8
  • 54
  • 129

1 Answers1

0

If you know the color of the graphic of each page, and have a limited number of pages, just hard-code it. You can set the color of status bar text with https://reactnative.dev/docs/statusbar#setbarstyle. Call this on every page on focus to make sure it's right.

If the graphic is dynamic, grab the dominant color with https://github.com/iran-react-community/rn-dominant-color. Then, you can use the https://github.com/Qix-/color to determine whether the color is light or dark, and set it accordingly with StatusBar.setBarStyle API.

Just my quick thoughts.

cltsang
  • 1,670
  • 1
  • 14
  • 19