Argthtjtr

I have a View that is clickable using touchable opacity which has an item.address and item.price that renders inside.

<TouchableOpacity onPress = {this.onShowHomeDetails.bind()}>

    <View style = {{height: 130,width :130,

        marginLeft : 20, borderWidth: 0.5, borderColor: '#dddddd'}} > 

        <View style={{flex: 2}}>

            <Image source={{uri : item.imageUrl}} 

               style={{flex:1, width: null,

               height: null, resizeMode: 'cover'}}/>

        </View> 

        <View style={{flex: 1 , paddingLeft: 10,paddingTop: 10}}>

            <Text style={{fontWeight:"bold", fontSize :12}}> 

                 {item.address} 

            </Text>

            {this.getIndividualHouseInfo(item.address)}  

        </View>

        <View style={{flex: 1 , paddingLeft: 10}}>

            <Text> ${item.price} </Text>    

        </View>

    </View>

</TouchableOpacity>

How do I pass these values through navigation to another screen using the onShowHomeDetails function?

onShowHomeDetails = () => {

    this.props.navigation.navigate('HomeDetails');

}

And my home detail component which is the destination screen is

class HomeDetails extends Component{

    constructor(props){

        super(props);

        this.state = {

        address : this.props.state.params.address,

        };

    }

    render(){

        return(

            <View style ={styles.container}>

                <Text>Details </Text>

                <Text>{this.state.address}</Text>

            </View>

        );

    }

}

Cool I feel its easy.

Call function:

<TouchableOpacity onPress={this.onShowHomeDetails.bind(this, item)}>

                <View style = {{height: 130,width :130,

                    marginLeft : 20, borderWidth: 0.5,

                    borderColor: '#dddddd'}} > 

                      <View style={{flex: 2}}>

                        <Image source={{uri : item.imageUrl}} 

                        style={{flex:1, width: null,

                        height: null, resizeMode: 'cover'}} 

                        />

                    </View> 

                    <View style={{flex: 1 , paddingLeft: 10,paddingTop: 10}}>

                        <Text style={{fontWeight:"bold" , fontSize :12}}> {item.address} </Text>  

                        {this.getIndividualHouseInfo(item.address)}  

                    </View>

                    <View style={{flex: 1 , paddingLeft: 10}}>

                            <Text> ${item.price} </Text>    

                    </View>

                </View>

                </TouchableOpacity>

Writing function:

 onShowHomeDetails = (item) => {

            this.props.navigation.navigate('HomeDetails', {item: item});

        }

Get params in appropriate screen:

class HomeDetails extends Component{

    constructor(props){

        super(props);

        this.state = {

        address : props.navigation.getParam('item', '');

        };

    }

    render(){

        return(

            <View style ={styles.container}>

                <Text>Details </Text>

                <Text>{this.state.address}</Text>

            </View>

        );

    }

}

Few important things we should know about passsing value as navigation params.

1. Passing params and getParams both name should be same.




2. In getparams method we set empty string(''). Because if value is not
   
   passed, its return empty string

Refer this document it will help you. https://reactnavigation.org/docs/en/params.html

You can pass data while navigating to the state.

onShowHomeDetails = () => {

    this.props.navigation.navigate('HomeDetails', { home: 'abc'}); 

    // you can pass any type of object in here as well

}

As per the react Navigation doc. The second parameter is the params to pass to destination route.

navigation.navigate({ routeName, params, action, key })

and use it in another component with props.
Option 1:

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

And if at all home is undefined, option 1 fails but with option 2 it will fallback to bydefaultHome

Option 2:

this.props.navigation.getParam('home', 'bydefaultHome');

Hope this helps!