I try to change a color of app header to light green and color of StatusBar to a bit darker. This is my _layout.tsx file:
import { Stack } from "expo-router";
import { View, StatusBar, StyleSheet, Platform } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
export default function Layout() {
return (
<View style={styles.wrapper}>
<StatusBar
barStyle="light-content"
backgroundColor="#0e646c"
translucent={false}
/>
<SafeAreaView style={styles.container}>
<Stack
screenOptions={{
contentStyle: { backgroundColor: "#ffffff" },
headerStyle: { backgroundColor: "#10757e" },
headerTintColor: "#ffffff",
headerTitleStyle: { fontWeight: "bold" },
}}
>
<Stack.Screen
name="index"
options={{ title: "My app" }}
/>
<Stack.Screen
name="about"
options={{ title: "About app" }}
/>
</Stack>
</SafeAreaView>
</View>
);
}
const styles = StyleSheet.create({
wrapper: {
flex: 1,
backgroundColor: "#ffffff",
},
container: {
flex: 1,
backgroundColor: "#0e646c", // Green background for iOS
},
});
On iPhone everything looks fine, but on Android the header bar with the app title is twice as tall as expected. I tried wrapping the app in SafeAreaView, but then the app title gets pushed behind the status bar (behind the clock). What is the recommended way to set the status bar and header background colors consistently across both iOS and Android without layout issues?
default