Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

React Navigation V5 custom header + Typescript Error: custom property 'rightButtons' does not exist on type 'object' (router.params)

$
0
0

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?


Viewing all articles
Browse latest Browse all 6287

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>