How to catch params with React Navigation 5?

Question

UPDATE: I did solve this which you can see in my comments shortly after posting. I am keeping this up in case it helps others or if anyone has a better approach or method.

My goal is to pass params to the next Screen. I will show how I have done it without React Navigation 5 so you can see my goal:

I have a button from one screen like so:

<Button
    title="View Card"
    onPress={() => this.props.navigation.navigate("CardDetail", {cardId: 1})}
/>

This takes me to the other screen CardDetail:

I show the cardId:

class CardDetail extends Component {
    render() {
        return(
            <View>
                <Text>{this.props.route.params.cardId}</Text>
                <Text>Card Detail </Text>
            </View>
        );
    }
}

Now, I have implemented React Navigation but cannot find a way to catch the params. Here is what I have:

function Overview({props}) {
    return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Overview</Text>
        <Text>{prop}</Text> // this doesn't work
    </View>
  );
}

const Tab = createBottomTabNavigator();

class CardDetail extends Component {
    render() {
        return(
             <Tab.Navigator>
                 <Tab.Screen name="Overview" component={Overview} />
             </Tab.Navigator>
        );
    }
}

I have tried a few ways: Here is one

function Overview({props}) {
    const cardId = React.useState(this.props.route.params.cardId);
    return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Overview</Text>
        <Text>{cardId}</Text>
    </View>
  );
}

Tried adding:

<Tab.Screen name="Overview" component={Overview} options={{ title: this.props.route.params.cardId }} />

This error: label is not a function

Tried doing this method: This seems like its the most promising https://reactnavigation.org/docs/hello-react-navigation/ function Overview(props) { const cardId = this.props.route.params.cardId; console.log("sadf", props); return ( <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}> Overview {cardId} ); }

            <Tab.Screen name="Overview">
                {props => <Overview {...this.props}  />}
            </Tab.Screen>

This seems promising but I cannot find a way to actually have it pass to the Overview.

I have tried passing props through: const Tab = createBottomTabNavigator({props}); a handful of ways. Either nothing happens or it tells me my method isn't accepted in RN5

Am I even attempting this correctly?

I've read through the docs of RN5 and tried many ways to pass the params

https://reactnavigation.org/docs/custom-navigators/

Answer 1

That so easy First: When you pass params CardDetail(Now is tabbar) that mean your params is props of CardDetail

const Tab = createBottomTabNavigator();

class CardDetail extends Component {
    const cardId = this.props.route.params.cardId
    render() {
        return(
             <Tab.Navigator>
                 // ==> and pass cardId into Overview as props
                 <Tab.Screen name="Overview" component={() => <Overview cardId={cardId}/>} />
             </Tab.Navigator>
        );
    }
}

In Overview component just use cardId like that

function Overview(props) {
    const {cardId} = props;
    return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Overview</Text>
        <Text>{cardId}</Text>
    </View>
  );
}