I am trying to pass some row data from a list to next screen to display details but cannot seem to achieve it. This is how i pass props when navigating like:

_renderRow(row,sectionId, rowId, highlightRow) {
      var self = this;
      let navigate=this.props.navigation;
               return (
            <TouchableOpacity onPress={() => navigate('ChatList',{row})}>
            
........//ignored code

I am trying to pass some row data from a list to next screen to display details but cannot seem to achieve it. This is how i pass props when navigating like:

_renderRow(row,sectionId, rowId, highlightRow) {
      var self = this;
      let navigate=this.props.navigation;
               return (
            <TouchableOpacity onPress={() => navigate('ChatList',{row})}>
            
........//ignored code

And on the other screen ChatList.js:

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  TextInput,
  Image
} from 'react-native';

import { StackNavigator } from 'react-navigation';


const ChatList = ()  => {

  return (    
    <View>
    </View>
  );
}

ChatList.navigationOptions = {
//trying to set the title from the data sent around here
  title: 'ChatList Title',
  headerStyle: {
            backgroundColor: '#2196F3',
        },
  headerTitleStyle: {
      color: 'white',
  },
  headerBackTitleStyle: {
      color: 'white',
  },
  headerTintColor: 'white',
};


export default ChatList

Also to note, i have a different implementation on stacknavigation unlike the docs from reactnavigation .Checkout my entire implementation here https://gist.github./SteveKamau72/f04b0a3dca03a87d604fe73767941bf2

Here is the full class from which _renderRow resides:

ChatGroup.js

/** ChatGroup.js**/ 
//This code is ponent for file App.js to display group of chats 
 
import React, { Component } from 'react'; 
import { 
  StyleSheet, 
  ListView, 
  Text, 
  View, 
  Image, 
  TouchableOpacity 
} from 'react-native'; 
 
const data = [ 
    { 
        name: "Kasarini", 
        last_chat: { 
            updated_at:"22:13", 
            updated_by: "Steve Kamau", 
            chat_message: "Lorem Ipsum is pretty awesome if you know it" 
        }, 
        thumbnail: "https://randomuser.me/api/portraits/thumb/men/83.jpg" 
 
    }, 
    { 
        name: "Kabete", 
        last_chat: { 
            updated_at:"20:34", 
            updated_by: "Tim Mwirabua", 
            chat_message: "Lorem Ipsum is pretty awesome if you know it" 
        }, 
        thumbnail: "https://randomuser.me/api/portraits/thumb/men/83.jpg" 
 
    }, 
    { 
        name: "Kiambuu", 
        last_chat: { 
            updated_at:"19:22", 
            updated_by: "Maureen Chubi", 
            chat_message: "Lorem Ipsum is pretty awesome if you know it" 
        }, 
        thumbnail: "https://randomuser.me/api/portraits/thumb/men/83.jpg" 
 
    }, 
    { 
        name: "UnderPass", 
        last_chat: { 
            updated_at:"17:46", 
            updated_by: "Faith Chela", 
            chat_message: "Lorem Ipsum is pretty awesome if you know it" 
        }, 
        thumbnail: "https://randomuser.me/api/portraits/thumb/men/83.jpg" 
 
    }, 
] 
 
export default class UserListView extends Component { 
    constructor() { 
        super(); 
        const ds = new ListView.DataSource({rowHasChanged: this._rowHasChanged}); 
 
        this.state = { 
            dataSource: ds.cloneWithRows(data) 
        } 
    } 
    render() { 
        return ( 
            <ListView
                dataSource={this.state.dataSource}
                renderRow={this._renderRow.bind(this)}
                enableEmptySections={true} />
        ) 
    } 
 
    _renderRow(row,sectionId, rowId, highlightRow) { 
      var self = this; 
        return ( 
            <TouchableOpacity activeOpacity={0.9} onPress={() => navigate('ChatList',{ user: 'Lucy' })}>
                <View style={styles.container}> 
                   <Image 
                          style={styles.groupChatThumbnail} 
                          source={{uri: row.thumbnail}}/> 
                   <View> 
                        <View style={{flexDirection:'row', justifyContent:'space-between', width:280}}> 
                                <Text style={styles.groupNameText}>{row.name} </Text> 
                                <Text style={styles.groupUpdatedAtText}>{row.last_chat.updated_at}</Text> 
 
                        </View> 
                        <View style={{ flexDirection:'row', alignItems:'center', marginTop: 5}}> 
                                <Text style={styles.groupUpdatedByText}>{row.last_chat.updated_by} : </Text>    
                                <View style={{flex: 1}}> 
                                        <Text ellipsizeMode='tail' numberOfLines={1}style={styles.groupChatMessageText}>{row.last_chat.chat_message} </Text>  
                                </View> 
                        </View> 
                  </View> 
                        
                
                </View> 
            </TouchableOpacity> 
        ) 
    } 
 
    _rowHasChanged(r1, r2) { 
        return r1 !== r2 
    } 
 
 
         highlightRow() { 
    alert('Hi!'); 
  } 
 
} 
 
const styles = StyleSheet.create({ 
  container:{ 
        alignItems:'center',  
        padding:10,  
        flexDirection:'row',  
        borderBottomWidth:1,  
        borderColor:'#f7f7f7', 
        backgroundColor: '#fff' 
      }, 
      groupChatContainer:{ 
        display: 'flex', 
        flexDirection: 'row', 
        
      }, 
      groupNameText:{ 
        marginLeft:15,  
        fontWeight:'600',  
        marginTop: -8, 
        color: '#000' 
      }, 
      groupUpdatedAtText :{ 
        color:'#333', fontSize:10, marginTop: -5 
      }, 
      groupChatThumbnail:{ 
       borderRadius: 30,  
       width: 50,  
       height: 50 , 
       alignItems:'center' 
      }, 
      groupUpdatedByText:{ 
        fontWeight:'400', color:'#333', 
        marginLeft:15, marginRight:5 
      }, 
 
}); 

• javascript
• android
• react-native
• react-router

• Can you please show the constructor of the class which _renderRow belongs to? – Ismailp Commented Jun 19, 2017 at 19:29
• Would it be a reasonable interpretation to say you are trying to pass data between sibling ponents? – SoZettaSho Commented Jun 20, 2017 at 2:43
• @Ismailp see my updated code. – Steve Kamau Commented Jun 20, 2017 at 6:18
• 1 there is two to access navigation props on second screen first one inside like navigationOptions = ({navigation}) => ({title:` ${navigation.state.params.name}`}); and second if you access inside any method like render etc is {user}= this.props.navigation.state.params.name – Rahul Commented Jun 20, 2017 at 6:40
• 2 ChatList.navigationOptions this could written be as ChatList.navigationOptions= ({navigation}) => ({// props access here }); and inside const ChatList = () this you can write this.props.navigation.state.params – Rahul Commented Jun 20, 2017 at 7:14

1 Answer 1

There are two ways to access navigation props on second screen:

1. Inside like

   navigationOptions = ({navigation}) => ({title:`${navigation.state.params.name}`}); 
   

2. If you access inside any method like render etc is

   {user}= this.props.navigation.state.params
   

ChatList.navigationOptions this could written be as

ChatList.navigationOptions= ({navigation}) => ({// props access here });

and const ChatList = () inside this you can write this.props.navigation.state.params