CODEWITHSUNDEEP
reactjsreact-nativereact-navigation
Rahul Bhogayata
Rahul Bhogayata

Reputation: 71

How to get params in react hooks component?

For class component there is "this.props.route.params" option. How to get params from one screen to other screen in react hook functional component.

"react": "16.11.0",
"react-native": "0.62.2",
"react-navigation": "@react-navigation/native": "^5.1.2",

Upvotes: 4

Views: 4933

Answers (3)

B. Mohammad
B. Mohammad

Reputation: 2464

You can use:

If the component is in a navigation stack use:


const myParam = props.route.params?.param_name

Otherwise:


import { useRoute } from "@react-navigation/native";
//
//
const route = useRoute()

const myParam = route.params?.param_name

The ? is for security. If params is undefined it won't crash.

Upvotes: 1

Sanoob Pookodan
Sanoob Pookodan

Reputation: 25

this.props.navigation.getParam('param_name')

Upvotes: -1

Jackmekiss
Jackmekiss

Reputation: 743

You can use the hook useRouter from @react-navigation/native

import * as React from 'react';
import { Text } from 'react-native';
import { useRoute } from '@react-navigation/native';

function MyText() {
  const route = useRoute();

  return <Text>{route.params.caption}</Text>;
}

Upvotes: 6

Related Questions