CODEWITHSUNDEEP
react-native
learner
learner

Reputation: 234

React Native useNavigation class Component

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

Upvotes: 7

Views: 20114

Answers (5)

Criminal_Affair_At_SO
Criminal_Affair_At_SO

Reputation: 3443

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

Upvotes: 0

vahid sabet
vahid sabet

Reputation: 583

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

Upvotes: 4

Bambier
Bambier

Reputation: 846

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

Upvotes: -1

Waheed Akhtar
Waheed Akhtar

Reputation: 3187

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

Upvotes: 5

Milind Agrawal
Milind Agrawal

Reputation: 2944

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!

Upvotes: -3

Related Questions