When I change screens with react-native-navigation I have a flicker of underlying background on ios, when I change screens with standard navigation everything is going smooth but with the custom one it look like it applies background color too late, is there some prop I should be aware of when dealing with custom header bar?
this is the code of custom header:
export const CustomNavigation = (props: NativeStackHeaderProps) => {
const styles = useStyleSheet(themedStyles);
return (
<SafeAreaView style={styles.wrapper}>
<Pressable onPress={props.navigation.goBack}>
<ArrowLeftIcon />
</Pressable>
<Text>{props.options.title}</Text>
<Pressable>
<NavMenuIcon />
</Pressable>
</SafeAreaView>
);
};
const themedStyles = StyleService.create({
wrapper: {
height: Platform.OS === "ios" ? 100 : 70,
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
paddingHorizontal: spacing.regular,
transform: Platform.OS === "ios" ? [{ translateY: 20 }] : [],
backgroundColor: "#fff",
},
});
app.tsx
const Stack = createNativeStackNavigator<RootStackParamList>();
return (
<SafeAreaProvider onLayout={onLayoutRootView}>
<NavigationContainer>
<ApplicationProvider {...eva} theme={{ ...eva.light, ...theme }}>
<ReduxProvider store={store}>
<Stack.Navigator
initialRouteName="Home"
screenOptions={{
header: (props) => <CustomNavigation {...props} />,
}}
>
<Stack.Screen
name="Home"
component={HomeScreen}
options={{ headerShown: false }}
/>
<Stack.Screen
name="Scheduler"
component={ScheduleScreen}
options={{
title: "Plan your booking",
}}
/>
<Stack.Screen
name="LocationPicker"
component={PickLocationScreen}
/>
</Stack.Navigator>
</ReduxProvider>
</ApplicationProvider>
</NavigationContainer>
</SafeAreaProvider>
On android it looks ok, there is no background flash, only on ios. Thanks for any suggestions.