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:
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.