React navigation 5 error Binding element ‘navigation’ implicitly has an ‘any’ type.ts

I am new to react-native. I am trying to implement navigation using react-navigation 5. I have two screens Home and profile. These both components have received a navigation prop but typescript is giving me follwoing error

Binding element 'navigation' implicitly has an 'any' type.ts(7031)

How to get rid of this error.

Thank you in advance

NOTE – I am using typescript

App.tsx

import 'react-native-gesture-handler';

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

import Home from './screens/home'

const App  = () => {

  const ProfileScreen = ({}) => {
    return <Text>This is Jane's profile</Text>;
  };
  
  return (
    <NavigationContainer>

    <Stack.Navigator>
        <Stack.Screen
          name="Home"
          component={Home}
          
        />
        <Stack.Screen name="Profile" component={ProfileScreen} />
      </Stack.Navigator>

  </NavigationContainer>

  );
};

Home.tsx
import React from 'react';
import { Button } from 'react-native';


const Home = ({navigation}) =>{ // error

  return (
    <Button
    title="Go to Jane's profile"
    onPress={() =>
      navigation.navigate('Profile', { name: 'Jane' })
    }
  />
  )
  
}

export default Home;

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

Typescript has no idea of the navigation type.

To just get rid of this error, you can type the navigation prop as any (not advisable btw) like so:

/*doing this will make you lose type safety*/
const Home = ({navigation}: {navigation: any}) => {
 return ...
}

Recommended approach

Looking at the docs https://reactnavigation.org/docs/typescript/ we can see we need to create an object type with mappings for route name to the params of the route, then pass this object type as a generic to the createStackNavigator function.

In the screens, we need to import the corresponding type from the navigator which in you case is the StackNavigator. This type takes 2 generics: a params list object type and the name of the current route.

// in your case

// App.tsx
import { createStackNavigator } from '@react-navigation/stack';

type RootStackParamList = {
  Home: undefined, // undefined because you aren't passing any params to the home screen
  Profile: { name: string }; 
};

const Stack = createStackNavigator<RootStackParamList>();


// Home.tsx
import { StackNavigationProp } from '@react-navigation/stack';
type ProfileScreenNavigationProp = StackNavigationProp<
  RootStackParamList,
  'Home'
>;

type Props = {
  navigation: ProfileScreenNavigationProp;
};

const Home = ({navigation}: Props) =>{
  return ...
}


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x