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

Typescript StackNavigatonProps and Screen props in react-navigation v5

$
0
0

What is the best way to define type for screen's navigation prop, when screen is in different file that router? Let's say I have one file, in which I define routes:

//Router.tsx

type RootStackParamList = {
  Home: undefined;
  Profile: undefined;
}

const Stack = createStackNavigator<RootStackParamList>();

// Component rendering navigator
const Router = () => {
   .
   .
   .
}

Then I have the separate file for screen:

// Home.tsx


// here has to be the same RootStackParamList
// that we've already defined in Router.tsx
type = HomeScreenNavigationProp = StackNavigationProp<
  RootStackParamList,
  "Home">;

type Props: {
  navigation: HomeScreenNavigationProp
}


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

Do I have to copy RootStackParamList over and over to every screen or create something like types.ts file and import it from there? Is there a better way to handle it? I am using navigation almost in every component.


Viewing all articles
Browse latest Browse all 6211

Trending Articles