I have a problem with react navigation.
In my view i put my option navigation with setOptions: headerRight.
Eveything work when i change my view, but when i reduce the app in the second view, and i come back the icon from the first view appear, and after a few second, the icon from the second view come back… I dont understand why
Thanks a lot !!
my code:
I have a first navigation :
<DashboardBottomtBarNavigator.Screen
name="Planning"
component={EventsTopBar}
options={{
unmountOnBlur: true,
lazy: false,
title: t('BOTTOM_BAR_ITEM_PLANNING') as string,
tabBarIcon: ({ color, size }) => (
<AntDesignIcon color={color} size={size} name="calendar" />
),
}}
/>
and in EventsTopBar i have 2 other navigation:
<EventsTopBarNavigator.Navigator
initialRouteName="EventsToday"
screenOptions={{
lazy: true,
tabBarStyle: {
backgroundColor: colors.headerBackground,
},
tabBarInactiveTintColor: Palette.lighterGrey,
tabBarActiveTintColor: Palette.white,
tabBarIndicatorStyle: { backgroundColor: Palette.lighterGrey },
swipeEnabled: true,
}}
>
<EventsTopBarNavigator.Screen
options={{ title: t('EVENTS_TODAY') as string }}
component={EventViewNavigator}
name="EventsToday"
initialParams={{ eventsType: EventOption.Today, setBadge: setBadge, onOpenActionSheet: onOpenActionSheetEventFilters }}
/>
<EventsTopBarNavigator.Screen
options={{ title: t('EVENTS_ALL') as string }}
component={EventViewNavigator}
name="EventsAll"
initialParams={{ eventsType: EventOption.All, setBadge: setBadge, onOpenActionSheet: onOpenActionSheetEventsFilters }}
/>
</EventsTopBarNavigator.Navigator>
and next,
type export const EventViewNavigator = ({ route }: NavProps) => {
const type = route.name
const { onOpenActionSheet } = route.params;
if (type === 'EventsAll') {
return (
<EventInfiniteView
eventsType={route.params.eventsType}
setBadge={route.params.setBadge}
onOpenActionSheet={onOpenActionSheet}
/>
)
}
if (type === 'EventsToday') {
return (
<EventView
eventsType={route.params.eventsType}
setBadge={route.params.setBadge}
onOpenActionSheet={onOpenActionSheet}
/>
)
}
}
and in EventInfiniteView and EventView i put my options, different for the 2 view:
navigation.getParent()?.setOptions({
headerRight: () => (
<EventHeaderRight
type={"EventsAll"}
onPress={onOpenActionSheet}
onPressCalendar={onPressCalendar}
/>
)
})
Yann Fitsch is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.