60860

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.

<h3>HomeScreen</h3> 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> ) } } <h3>GoToConfigButton</h3> 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?

Answer1:

You were just missing Partial<> interface wrapping your NavigationInjectedProps as it is described in this <a href="https://github.com/DefinitelyTyped/DefinitelyTyped/pull/29208" rel="nofollow">pull request</a> where this issue was fixed.

<pre class="lang-js prettyprint-override">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 <a href="https://www.npmjs.com/package/@types/react-navigation" rel="nofollow">@types/react-navigation >= 2.13.0</a>

Recommend

  • How do references in functions work?
  • How to avoid multiple definition of function (Linux, GCC/G++, Code::Blocks)
  • Reload UITableView from another tab
  • Angular5 Service Worker update(SWUpdate) not detecting on firefox. Working on chrome
  • Deploying pre-encrypted configuration files to a production environment
  • Load image without autoscaling in Android
  • Instanciate service on startup in Angular2
  • How do I recognize a line break with a switch case that evaluates a char in Java?
  • How to add System.Windows dll to Visual Studio 2010 express?
  • get passwords from chrome
  • Undefined navigator.push React-native 0.43.4
  • redirect_to root_url and return unless @user.activated
  • Outlines on links in IE9 remains when focus is changed
  • Django invalid literal for int() with base 10
  • How can I enlarge video fullscreen without the affected interface project in as3?
  • Typescript - Unable to get 'import' statement to function
  • Highlight and Bold text in JTextPane
  • Disabling Alt-F4 on a Win Forms NotifyIcon
  • how to do an event when i swipe from fragment to the other
  • Updating server-side rendering client-side
  • Modifying destination and filename of gulp-svg-sprite
  • sending/ receiving email in Java
  • Web-crawler for facebook in python
  • Akka Routing: Reply's send to router ends up as dead letters
  • Cannot Parse HTML Data Using Android / JSOUP
  • How get height of the a view with gone visibility and height defined as wrap_content in xml?
  • Getting Messege Twice Using IMvxMessenger
  • Java static initializers and reflection
  • unknown Exception android
  • Easiest way to encapsulate a HTML5 webpage into an android app?
  • Busy indicator not showing up in wpf window [duplicate]
  • costura.fody for a dll that references another dll
  • Observable and ngFor in Angular 2
  • How to Embed XSL into XML
  • UserPrincipal.Current returns apppool on IIS
  • Unable to use reactive element in my shiny app
  • Conditional In-Line CSS for IE and Others?
  • java string with new operator and a literal
  • How to push additional view controllers onto NavigationController but keep the TabBar?
  • How to load view controller without button in storyboard?