React Native useNavigation class Component

Question

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>
    )
}}

Waheed Akhtar · Answer 1 · 2021-02-03T08:50:44.593

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>
    )
  }
}

score 4 · Answer 2 · answered Sep 27 '22 at 16:07

For those who are struggling with route v6 and more. You must define a function outside of your component Class and use it as following:

function myParams(Component) {
    return props => <Component navHook={useNavigate()} />;
}

in your Class component:

this.props.navHook('/SomeWhere')

And keep in mind you have wrap your Class in your function:

export default myParams(Card);

score 0 · Answer 3 · answered Dec 22 '22 at 12:13

For those struggling with TypeScript and @vahid-sabet 's proposal:

export type NavComponentProps<T extends Readonly<unknown>> =
  T & { navigate: NavigateFunction; };

export class NavComponent<T extends Readonly<unknown>>
  extends React.PureComponent<NavComponentProps<T>> { };

export function navHOC<T extends Readonly<unknown>>
  (Component: typeof NavComponent<T>) {
  return (props: T) => <Component {...props} navigate={useNavigate()} />;
}

Then declare your class:

class _MyClass extends NavComponent<MyProps> {
  constructor(props: NavComponentProps<MyProps>) {
    super(props);
    // I can call:
    this.props.navigate();
  }
};
export const MyClass = navHOC(_MyClass);

score -1 · Answer 4 · answered Jan 27 '22 at 18:28

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>
    )
}}

score -3 · Answer 5 · edited May 05 '20 at 11:33

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!

React Native useNavigation class Component

5 Answers5

Linked