Navigation using react-native

Problem.js

/** index.android.js**/
//This code includes the stack navigation to different screens
import React, { Component } from 'react';
import {
  AppRegistry,
} from 'react-native';
import { StackNavigator } from 'react-navigation';
import SecondScreen from './src/SecondScreen';
import App from './src/App';

class SampleApp extends Component {
  static navigationOptions = {
    title: 'Home Screen',
  };

  render(){
    const { navigation } = this.props;

    return (
      <App navigation={ navigation }/>
    );
  }
}

const SimpleApp = StackNavigator({
  Home: { screen: Sasa },
  SecondScreen: { screen: SecondScreen, title: 'ss' },
});

AppRegistry.registerComponent('SampleApp', () => SimpleApp);




/** App.js**/
//This code is for file App.js to display group of chats

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  Button,
  View
} from 'react-native';
import { StackNavigator } from 'react-navigation';
import ChatGroups from './components/ChatGroups';

const App = (props)  => {
  
  const { navigate } = props.navigation;

  return (
    
   //Here's the problem
    // i am trying to get user row click
     <ChatGroups onUserSelected={this._onUserSelected.bind(this)}/>
  );
}
//then show this alert. But this isnt expected to be here and app 'crashes'. 
//seems app should return nothin but a component.
   _onUserSelected(user) {
    alert("Selected User:\n" + JSON.stringify(user))

}

export default App


/** ChatGroup.js**/
//This code is component 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 onPress={function() {
                  highlightRow(sectionId, rowId)
                  self.props.onUserSelected(row)
                }}>
                <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
      },

});

what's screen Sasa?. Line 26