CODEWITHSUNDEEP
react-nativereact-navigation
Randy Wardhana
Randy Wardhana

Reputation: 3

How to pass state.params from react-navigation as props in react native

I want to pass the props from

this.props.navigation.navigate('LIST_PRODUCT', { product: item.product, stock: item.stock});

but the result will be

{ 
 ...this.props,
 navigation: {
  ...,
  state: {
    ...,
    params: {
      product: 'Lenovo K5 Pro',
      stock: 5
    }
  }
 }
}

and the result what I want is

{ 
 ...this.props,
 product: 'Lenovo K5 Pro',
 stock: 5
}

is there any way to passing params from state to this.props in child component?

Upvotes: 0

Views: 360

Answers (2)

Leonardo Drici
Leonardo Drici

Reputation: 789

I think you could just spread the state object like this:

const { navigation, ...rest } = this.props;
{
  ...rest,
  ...navigation.state.params
}

Beware that state.params may not always be there

Upvotes: 0

Rizwan Ahmed Shivalli
Rizwan Ahmed Shivalli

Reputation: 1503

try the below solution

HomeScreen.js

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Home Screen</Text>
        <Button
          title="Go to Details"
          onPress={() => {
            /* 1. Navigate to the Details route with params */
            this.props.navigation.navigate('Details', {
              itemId: 86,
              otherParam: 'anything you want here',
            });
          }}
        />
      </View>
    );
  }
}

DetailsScreen.js

class DetailsScreen extends React.Component {
  render() {
    /* 2. Get the param, provide a fallback value if not available */
    const { navigation } = this.props;
    const itemId = navigation.getParam('itemId', 'NO-ID');
    const otherParam = navigation.getParam('otherParam', 'some default value');

    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Details Screen</Text>
        <Text>itemId: {JSON.stringify(itemId)}</Text>
        <Text>otherParam: {JSON.stringify(otherParam)}</Text>
        <Button
          title="Go to Details... again"
          onPress={() =>
            this.props.navigation.push('Details', {
              itemId: Math.floor(Math.random() * 100),
            })
          }
        />
        <Button
          title="Go to Home"
          onPress={() => this.props.navigation.navigate('Home')}
        />
        <Button
          title="Go back"
          onPress={() => this.props.navigation.goBack()}
        />
      </View>
    );
  }
}

Upvotes: 1

Related Questions