React Native Navigation between functional components?

Question

I am trying to navigate to the Main screen when Login button is pressed in Login.js. LoginForm loads perfectly but when I press the button I start receiving the error "TypeError: Undefined is not an object (evaluating 'navigation.navigate'). Before this was not a problem but it changed when I moved Login to a different component. I was getting a different error and I went through this but it didn't fix it: Getting undefined is not an object evaluating _this.props.navigation Let me know if you need the whole code. Thanks :)

LoginForm.js

...
import Login from "./Login";

const LoginForm = props => {
  return <Login />
}
...

Login.js

const Login = ({ navigation }) => {
 return (
  <TouchableOpacity
    style={{ marginTop: 20 }}
    activeOpacity={1}
    onPress={() => navigation.navigate("Main")}
  >
    <View style={styles.loginButtonContainer}>
      <Text style={styles.loginButtonText}>Login</Text>
    </View>
  </TouchableOpacity>
  )}
...

When you `console.log(navigation)` above the return what does it log ? — Hayk Shakhbazyan, Jan 14 '20 at 14:05

score 0 · Answer 1 · answered Jan 14 '20 at 14:15

I fixed it thanks to withNavigation. https://reactnavigation.org/docs/en/with-navigation.html

withNavigation is a higher order component which passes the navigation prop into a wrapped component. It's useful when you cannot pass the navigation prop into the component directly, or don't want to pass it in case of a deeply nested child.

Login.js

import { withNavigation } from 'react-navigation'

const Login = ({ navigation }) => {
...
}

export default withNavigation(Login)

Anyway, if its possible, I would love to know how to fix it without this.

React Native Navigation between functional components?

1 Answers1