React Navigation V5 typescript error: Trying to add a custom header with a 'rightButtons' property, but encountering an issue with the type 'object' (specifically router parameters) that does not recognize this custom

Question

React Navigation V5 typescript error: Trying to add a custom header with a 'rightButtons' property, but encountering an issue with the type 'object' (specifically router parameters) that does not recognize this custom

I am designing a unique header:

const customHeader = ({ navigation, route, options, back }: NativeStackHeaderProps): React.ReactNode => {
    const buttons: HeaderRightButtons = route.params?.rightButtons || []
    return (...)
}

An error is displayed in Typescript:

The property 'rightButtons' does not exist on the type 'object'

This property should contain an Array of "buttons":

type HeaderRightButtons = Array<{ icon: any, action: () => void }>

I attempted to create an extended type:

export type NativeStackHeaderPropsCustomRight =
    (NativeStackHeaderProps & {
        route: RouteProp<{params?: { rightButtons: HeaderRightButtons }}, 'params'>
    }) | NativeStackHeaderProps

However, this did not resolve the issue.

The property "rightButtons" does not exist in the type "object | (object & Readonly<{ rightButtons: HeaderRightButtons; }>)". The "rightButtons" property does not exist in the "object" type.

When excluding | NativeStackHeaderProps, an error appears in the screen declaration:

<Stack.Screen ... options={{
        header: customHeader,
        title: strings.titleEpochs
      }} />

The type "({ navigation, route, options, back }: NativeStackHeaderPropsCustomRight) => React.ReactNode" cannot be assigned to type "(props: NativeStackHeaderProps)

How can I define the correct type?

Is there a more appropriate way to pass an object as properties to a custom header?

typescript react-native types routes react-navigation

Answer 1

Answer №1

I encountered a similar issue and was able to resolve it by following these steps:

Firstly, ensure that you have created the NativeStackNavigator with your specified route object:

type RouteParamList = {
  myScreenName: {
    rightButtons: Array<{ icon: any, action: () => void }>
  }
}
const Stack = createNativeStackNavigator<RouteParamList>();

Next, define your screen and pass the function to the options property:

<Stack.Screen
  name="myScreenName"
  component={MyScreenComponent}
  options={({ route }) => ({
    header: (props) => <HeaderMain {...props} rightButtons={route.params.rightButtons} />,
  })}
/>

In your HeaderMain component:

type NativeStackHeaderPropsCustomRight = NativeStackHeaderProps & {
  rightButtons: Array<{ icon: any, action: () => void }>
};

const HeaderMain = ({ navigation, route, options, back }: NativeStackHeaderPropsCustomRight) : React.ReactNode => {
  // your component logic here

  const buttons: Array<{ icon: any, action: () => void }> = route.params?.rightButtons || []
  return (...)
}

export {HeaderMain}

Answer 2

I encountered a similar issue and was able to resolve it by following these steps:

Firstly, ensure that you have created the NativeStackNavigator with your specified route object:

type RouteParamList = {
  myScreenName: {
    rightButtons: Array<{ icon: any, action: () => void }>
  }
}
const Stack = createNativeStackNavigator<RouteParamList>();

Next, define your screen and pass the function to the options property:

<Stack.Screen
  name="myScreenName"
  component={MyScreenComponent}
  options={({ route }) => ({
    header: (props) => <HeaderMain {...props} rightButtons={route.params.rightButtons} />,
  })}
/>

In your HeaderMain component:

type NativeStackHeaderPropsCustomRight = NativeStackHeaderProps & {
  rightButtons: Array<{ icon: any, action: () => void }>
};

const HeaderMain = ({ navigation, route, options, back }: NativeStackHeaderPropsCustomRight) : React.ReactNode => {
  // your component logic here

  const buttons: Array<{ icon: any, action: () => void }> = route.params?.rightButtons || []
  return (...)
}

export {HeaderMain}

React Navigation V5 typescript error: Trying to add a custom header with a 'rightButtons' property, but encountering an issue with the type 'object' (specifically router parameters) that does not recognize this custom

Answer №1

Similar questions

What is the best way to modify the KeyName in an object?

Struggling to make the paste event function in Typescript

Is there a way to initiate validations for inputs within ReactiveForms?

Redirecting with React Router - Redirecting after Form Submission Leads to Loading HomeRoute

Transfer an object to $state.go

The Unusual Behavior of Typescript Partial Interfaces

Before proceeding to update in Angular 8, ensure the repository is not dirty. Commit or stash any changes that have been

Exploring the power of Next.js, Styled-components, and leveraging Yandex Metrica Session Replay

We were unable to locate a declaration file for the module known as 'firebase-tools'

Leveraging ts-loader alongside strip-loader in Webpack

Are union types strictly enforced?

Retrieve and present JSON information (object, array) using a service provider in Ionic 2 with TypeScript and Angular 2

Using React JS to Sort an Array Based on a Specific String

What is the best way to update properties in a child component using React hooks?

Is there a way to retrieve the chosen value from a select element?

Discovering the 3D coordinates of a point that is perpendicular to the midpoint of a line

When using TypeScript in React Native, the error "TypeError: this.setState is not a function

What are some effective methods for handling data from a backend API within an Angular service?

What is the best way to retrieve the response from an Observable/http/async call in Angular?

Achieve compliance with the ESLint "no-var-requires" rule by utilizing an import statement for a module that lacks a declaration file