2

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.

seven
  • 1,183
  • 14
  • 33

0 Answers0