react-nativebackground-colorstatusbarreact-native-cli

Can't match StatusBar and View background color


I spent a few hours trying to solve this, but it seems I just cannot find an answer. Nothing works. I've tried various combinations of the following:

For some reason, which I'm ignoring, I cannot get rid of the style that Android is imposing. If I set the color to be, for example, 'black', the StatusBar, regardless of what I do, will have a toned-down version of 'black'.

No matter which combination of the options above I try, I can't even hide it, like many videogames and apps out there.

P.S.: I also tried changing the SafeAreaView component to View, but the issue remains the same.

The following is my code

import { SafeAreaView, StatusBar, View } from "react-native"
import { CalculadoraScreen } from "./src/screens/CalculadoraScreen";
import { style } from './src/theme/appTheme';


const App = () => {

  return (
    <SafeAreaView style={{
      ...style.background,
      }}>
      <StatusBar 
        backgroundColor={style.background.backgroundColor}
        // translucent={true}
        // hidden={true}
        barStyle={'light-content'}
      />
      <CalculadoraScreen/>
    </SafeAreaView>
  )
}

export default App;

Phone model: Google Pixel 4a (physical device)

OS: Android 13

React Native CLI

  "dependencies": {
    "react": "18.2.0",
    "react-native": "0.72.1"
  }

Edit:


Solution

  • I had to turn my PC on and off to get every buggy property of the component to work as expected.

    So, if you're encountering a similar issue, simply restart everything, and you should be good to go.

    I've spent a considerable amount of time searching for a solution here, but none of the variations of this question have been 'resolved' yet.