How to use react-navigation's withNavigation in typescript?

Question

I'm trying to use react-native, react-navigation and typescript together to create an app. There are only two screens(HomeScreen and ConfigScreen) and one component(GoToConfigButton) in total, as follows.

HomeScreen

import React from "react";
import { NavigationScreenProps } from "react-navigation";
import { Text, View } from "react-native";
import GoToConfigButton from "./GoToConfigButton";

export class HomeScreen extends React.Component<NavigationScreenProps> {
  render() {
    return (
      <View>
        <Text>Click the following button to go to the config tab.</Text>
        <GoToConfigButton/>
      </View>
    )
  }
}

GoToConfigButton

import React from "react";
import { Button } from "react-native";
import { NavigationInjectedProps, withNavigation } from "react-navigation";

class GoToConfigButton extends React.Component<NavigationInjectedProps> {
  render() {
    return <Button onPress={this.handlePress} title="Go" />;
  }
  private handlePress = () => {
    this.props.navigation.navigate("Config");
  };
}
export default withNavigation(GoToConfigButton);

The code for ConfigScreen is not given because it's not important here. Well, actually the above code works, I can go to the config screen by clicking on the button. The problem is, Typescript thinks I should provide the navigation property to GoToConfigButton manually.

<View>
  <Text>Click the following button to go to the config tab.</Text>
  <GoToConfigButton/>  <-- Property "navigation" is missing.
</View>

How can I tell Typescript that the navigation property is given automatically by react-navigation?

It looks like the withNavigation function should strip out the NavigationInjectedProps interface. github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/… It shouldn't matter, but can you try changing class GoToConfigButton extends React.Component<NavigationInjectedProps> { to class GoToConfigButton extends React.Component<{} & NavigationInjectedProps> { — Andrej Kyselica
– Andrej Kyselica, Commented Aug 2, 2018 at 13:14
@AndrejKyselica works! but how? why? what is the difference between React.Component<NavigationInjectedProps> and React.Component<{} & NavigationInjectedProps> — Mehdi
– Mehdi, Commented Aug 15, 2018 at 13:26

Niko Kovačič · Accepted Answer · 2018-11-06 21:29:42Z

4

You were just missing Partial<> interface wrapping your NavigationInjectedProps as it is described in this pull request where this issue was fixed.

import React from "react";
import { Button } from "react-native";
import { NavigationInjectedProps, withNavigation } from "react-navigation";

class GoToConfigButton extends React.Component<Partial<NavigationInjectedProps>> {
    render() {
        return <Button onPress={this.handlePress} title="Go" />;
    }

    private handlePress = () => {
        this.props.navigation.navigate("Config");
    };
}

export default withNavigation(GoToConfigButton);

Tested with @types/react-navigation >= 2.13.0

answered Nov 6, 2018 at 21:29

Niko Kovačič

1932 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user1007522 Over a year ago

This doesn't work. I can't pass the component to this function.

Sebastian Nielsen Over a year ago

Doesn't work with react-navigation 4.4.4 and react 17

laogui · Accepted Answer · 2019-11-01 09:13:28Z

import styles from "./styles";

import React, { PureComponent } from "react";

import { Button } from "react-native-elements";
import {
  DrawerItems,
  NavigationInjectedProps,
  SafeAreaView,
  withNavigation
} from "react-navigation";

class BurgerMenu extends PureComponent<NavigationInjectedProps> {
  render() {
    return (
      <SafeAreaView style={styles.container} >

        <Button
          icon={{ name: "md-log-out", type: "ionicon" }}
          title={loginStrings.logOut}
          iconContainerStyle={styles.icon}
          buttonStyle={styles.button}
          titleStyle={styles.title}
          onPress={() => this.props.navigation.navigate("LoginScreen")}
        />
      </SafeAreaView>
    );
  }
}

export default withNavigation(BurgerMenu);

Collectives™ on Stack Overflow

How to use react-navigation's withNavigation in typescript?

HomeScreen

GoToConfigButton

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

HomeScreen

GoToConfigButton

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related