I create custom header:
const header = ({ navigation, route, options, back }: NativeStackHeaderProps): React.ReactNode => { const buttons: HeaderRightButtons = route.params?.rightButtons || [] return (...)}
Typescript shows error:
property 'rightButtons' does not exist on type 'object'
In this property Array of "buttons":
type HeaderRightButtons = Array<{ icon: any, action: () => void }>
I try to make extended type:
export type NativeStackHeaderPropsCustomRight = (NativeStackHeaderProps & { route: RouteProp<{params?: { rightButtons: HeaderRightButtons }}, 'params'> }) | NativeStackHeaderProps
But it doesn't solve problem.
Property "rightButtons" does not exist in the "object | (object &Readonly<{ rightButtons: HeaderRightButtons; }>)" type.The "rightButtons" property does not exist in the "object" type.
Without | NativeStackHeaderProps
shows error in screen declaration:
<Stack.Screen ... options={{ header: headerMain, title: strings.titleEpochs }} />
Type "({ navigation, route, options, back }:NativeStackHeaderPropsCustomRight) => React.ReactNode" cannot beassigned for type "(props: NativeStackHeaderProps)
How to write correct type?
Or is there a more correct way to pass an object through properties to a custom header?