CODEWITHSUNDEEP
javascriptreact-nativereact-navigationarrow-functions
Hisham Mubarak
Hisham Mubarak

Reputation: 1609

Touchable onPress with React Native Navigation not working

The below code works and when clicked takes me the loginStack Stack Navigator

<TouchableWithoutFeedback 
    onPress={ this.navigateToScreen('loginStack') }>
        <View><Text>Click Me</Text></View>
</TouchableWithoutFeedback>

My NavigateToScreen function looks like this

navigateToScreen = (route) => () => {
        const navigationAction = NavigationActions.navigate({
            routeName: route
        })
        this.props.navigation.dispatch(navigationAction)
    }

Since I need to manage multiple stuff, I converted it to an arrow function and it doesn't work. The below code does nothing when pressed. No response at all.

<TouchableWithoutFeedback 
    onPress={ () => this.navigateToScreen('loginStack') }>
        <View><Text>Click Me</Text></View>
</TouchableWithoutFeedback>

How do I fix this so I can run multiple lines of code on the onPress function like given below?

<TouchableWithoutFeedback 
    onPress={ () => { this.navigateToScreen('loginStack') 
                      AsyncStorage.removeItem('token') 
                    }}>
        <View><Text>Click Me</Text></View>
</TouchableWithoutFeedback>

Upvotes: 2

Views: 8213

Answers (2)

lemarc
lemarc

Reputation: 121

Your navigateToScreen function is returning another function, which in your working example is the function being called when pressed. Where you changed onPress to an arrow function, you are calling navigateToScreen but not the function it returns.

Changing it to

<TouchableWithoutFeedback 
    onPress={ () => {
        this.navigateToScreen('loginStack')()
        AsyncStorage.removeItem('token')
}}>
    <View><Text>Click Me</Text></View>
</TouchableWithoutFeedback>

should work, or you could remove the second arrow function in your navigateToScreen function so it no longer returns a function but executes the code itself

navigateToScreen = (route) => {
        const navigationAction = NavigationActions.navigate({
            routeName: route
        })
        this.props.navigation.dispatch(navigationAction)
    }

I would recommend this option, but keep in mind your currently working example would no longer work in this case.

Upvotes: 4

Nisarg Thakkar
Nisarg Thakkar

Reputation: 1547

TouchableWithoutFeedback always needs to have child View component. 

<TouchableWithoutFeedback onPress={ this.navigateToScreen('loginStack') }}>
  <View>
      <Text>Click Me</Text>
  </View>
</TouchableWithoutFeedback>

Upvotes: 0

Related Questions