React Native useNavigation class Component

user_13235144 0
Viewed 10373

I am using a class component and I want to navigate from here to another screen. But it says navigate is undefined. I look up to the docs and I realised I need to use userNavigationThis. but i don't how to actually use it. Someone helps please

export default class ReduxScreen extends Component {
render() {
    return (
        <View>
           <Button block style={{ marginHorizontal: 30, marginTop: 50 }} onPress={() => {
         //I want to add the useNavigation here

            }}>
             <Text style={{ color: '#FFF' }}>Start</Text>
          </Button>
        </View>
    )
}}
react-native
3 Answers

useNavigation is a hook and hooks can only be used inside a functional component like this.

 const navigation = useNavigation()

But as you are using the class component so you can navigate like this.

this.props.navigation.navigate('YouScreen', {paramsIfAny})

But you have to make sure that navigation prop is available in your class component by putting console.log if it's available then the above line will work if not then you have to follow this.

Note: navigation prop is always available in the parent route(Route which is used to navigate some screen)

https://reactnavigation.org/docs/navigating-without-navigation-prop

Another solution is you can pass navigation prop from your functional component to a class component like this.

export default function RootFunction (){
const navigation = useNavigation() // extract navigation prop here 

 return <ReduxScreen navigation={navigation} /> //pass to your component.

  }




class ReduxScreen extends Component {
  render () {
    return (
      <View>
        <Button block style={{ marginHorizontal: 30, marginTop: 50}}
          onPress={() => {
            this.props.navigation.navigate('YourScreen')
                  // now prop will be available here
          }}>
          <Text style={{ color: '#FFF' }}>Start</Text>
        </Button>
      </View>
    )
  }
}
user_77139200

Use <Link /> instead like blow

import { Link } from 'react-router-dom';



export default class ReduxScreen extends Component {
render() {
    return (
        <View>
           <Button component={Link} to="some-where" block style={{ marginHorizontal: 30, marginTop: 50 }} 
            }}>
             <Text style={{ color: '#FFF' }}>Start</Text>
          </Button>
        </View>
    )
}}
user_121601820

As seen in the linked docs, you will have to use functional component in order to use the navigation hook.

Try this

import { useNavigation } from '@react-navigation/native';

export default () => {
  const navigation = useNavigation();

  return (
    <View>
      <Button
        block
        style={{ marginHorizontal: 30, marginTop: 50 }}
        onPress={() => navigation.navigate('YourScreenHere')}
      >
        <Text style={{ color: '#FFF' }}>Start</Text>
      </Button>
    </View>
  );
};

Hope this helps!

user_19290060
Related