CODEWITHSUNDEEP
react-nativereact-navigation
aseel
aseel

Reputation: 473

how can i send an array as props using this.props.navigation.navigate?

My array is 

     this.state={
          locations:[
              {name: 'kerala'},
              {name: 'maharashtra'},
              {name: 'tamilnadu'},
           ]}

and my component is 

    <TouchableWithoutFeedback
        onPress={(e)=>this.props.navigation.navigate('MultiSelector',{
        locations:this.state.locations})}>
       <View><Text>select</Text></View>   
     </TouchableWithoutFeedback>

i send the props as above .

and Multiselector component is like

     render(){
        const { params} = this.props.navigation.state;
        const { navigation } = this.props;
        const locations = navigation.getParam('locations','kerala')
        return (
          <View style={styles.container}>
          {
            locations.map((item,index)=>{
              return(
             <View key={index}><Text>{item.name}</Text>
             </View>)
            })
           }
          </View>
        )

I didn't get the locations array as props in multiselector it takes the default value only(when i tested). and it makes an error locations.map is not a function .can anyone help me?

Upvotes: 0

Views: 3888

Answers (2)

flix
flix

Reputation: 1984

you can doing something like this:

<TouchableWithoutFeedback
    onPress={(e)=>this.props.navigation.navigate('MultiSelector',{...this.state.locations})}> //change your code to use ...
   <View><Text>select</Text></View>   
</TouchableWithoutFeedback>

and the rest is up to you

Upvotes: 1

Vikram Biwal
Vikram Biwal

Reputation: 2826

You can access this using:

const locations = this.props.navigation.state.params.locations;

Or

Use library StackNavigatorHelper :

StackNavigator({
     Home: { screen: StackNavigatorHelper.paramsToProps(Home) },
     MultiSelector: { screen: StackNavigatorHelper.paramsToProps(MultiSelector) }
});

Library link: https://github.com/dayitv89/react-navigation-helper

Upvotes: 0

Related Questions