'Remove background in react native

I have updated my react native and expo version and it set grey background that I can not remove or I just do not know how. Help me please, I tried to remove it like this:

<View style={{background: 'white'}}></View>

but it did not help, when the page was loading it had grey background and when it loaded it became white, but I want to make it white at all.



Solution 1:[1]

You could try:

backgroundColor: 'transparent'

If you are using react-navigation try:

cardStyle: { backgroundColor: 'transparent' },

Solution 2:[2]

If anyone comes across this issue allow me to bestow this knowledge upon you so youdo not suffer as i have. As of Expo SDK v44, they've added "SystemUI" class which has a function "setBackgroundColorAsync"

So you can simply do this:

import * as SystemUI from "expo-system-ui";
...
 async function onload() {
    const color = "#000000" // 8 digit hex color code
    await SystemUI.setBackgroundColorAsync(color);
  }
  useEffect(() => {
    onload()
  }, [])

references:

https://blog.expo.dev/expo-sdk-44-4c4b8306584a

https://docs.expo.dev/versions/latest/sdk/system-ui/

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Dimitris Tzimikas
Solution 2 Brandon Jamal Irving