title: React Native: Navigation not working in component
body: <p>I can not open the third page screen with the On Press method in the List Component.js file. I do not understand the problem. I want to know what I'm doing wrong with this. Where is the problem? Thank you. Please help.</p>
  
  <p>Thank you for your reply but this will not work, my friend. I've updated the ListComponent.js file. The ListComponent.js file is actually a list. Please can you look again. ?</p>
  
  <p>App.js</p>
  
  <pre><code>import React, { Component } from 'react';
  import {
    WebView,
    AppRegistry, StyleSheet, Text, View, Button
  } from 'react-native';
  
  import { StackNavigator } from 'react-navigation';
  
  import ListComponent from './ListComponent';
  
  
  
  
   class App extends Component {
  
    static navigationOptions =
    {
       title: 'App',
    };
  
    OpenSecondActivityFunction = () =&gt;
    {
       this.props.navigation.navigate('Second');
  
    }
  
    render() {
      return (
        &lt;View style={styles.container}&gt;
  
         &lt;Button onPress = { this.OpenSecondActivityFunction } title = 'Open Second Activity'/&gt;
        &lt;/View&gt;
      );
    }
  }
  
  
   class SecondActivity extends Component
  {
    static navigationOptions =
    {
       title: 'SecondActivity',
    };
  
       OpenThirdActivityFunction = () =&gt;
    {
       this.props.navigation.navigate('Third');
  
    }
  
    render()
    {
       return(
  
  
              &lt;View style={{  flex: 1}}&gt;
              &lt;ListComponents data={alapinCtrl} OpenThirdActivityFunction={this.OpenThirdActivityFunction} /&gt;
          &lt;/View&gt;
  
       );
    }
  }
  
  
  
  
  
   class ThirdActivity extends Component
  {
    static navigationOptions =
    {
       title: 'ThirdSecondActivity',
    };
  
    render()
    {
       return(
  
  
              &lt;View style={{  flex: 1}}&gt;
  
               &lt;Text&gt;3&lt;/Text&gt;
  
          &lt;/View&gt;
  
       );
    }
  }
  
  
  export default ActivityProject = StackNavigator(
  {
    First: { screen: App },
  
    Second: { screen: SecondActivity },
  
    Third: { screen: ThirdActivity }
  });
  
  const styles = StyleSheet.create({
  
  
    container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: '#F5FCFF',
    },
    welcome: {
      fontSize: 20,
      textAlign: 'center',
      margin: 10,
    },ActivityNameTextCss:
    {
       fontSize: 22,
       color: 'black',
       textAlign: 'center',
    },
  
  });
  
  AppRegistry.registerComponent('ActivityProject', () =&gt; ActivityProject);
  </code></pre>
  
  <p>ListComponent.js</p>
  
  <pre><code> import React, { Component } from "react";
      import {AppRegistry,View, Text, FlatList, ActivityIndicator} from "react-native";
      import { List, ListItem, SearchBar } from "react-native-elements";
  
  
      class ListComponents extends Component {
        constructor(props) {
  
          super(props);
  
          this.state = {
            loading: false,
            data: [],
            page: 1,
            seed: 1,
            error: null,
            refreshing: false
          };
        }
  
  
         renderSeparator = () =&gt; {
          return (
            &lt;View
              style={{
                height: 1,
                width: "98%",
                backgroundColor: "#CED0CE",
                marginLeft: "2%"
              }}
            /&gt;
          );
        };
  
        renderHeader = () =&gt; {
          return &lt;SearchBar placeholder="Type Here..." lightTheme round /&gt;;
        };
  
        renderFooter = () =&gt; {
          if (!this.state.loading) return null;
  
          return (
            &lt;View
              style={{
                paddingVertical: 20,
                borderTopWidth: 1,
                borderColor: "#CED0CE"
              }}
            &gt;
              &lt;ActivityIndicator animating size="large" /&gt;
            &lt;/View&gt;
          );
        };
  
          render()  {
              return (
  
              &lt;List containerStyle={{ borderTopWidth: 0, borderBottomWidth: 0 }}&gt;
              &lt;FlatList 
                  data={this.props.data}
                  renderItem={({ item }) =&gt; (
                  &lt;ListItem
                      roundAvatar
                      title={`${item.name}`}
                      subtitle={item.coders}
  
                      containerStyle={{ borderBottomWidth: 0 }}
  
    onPress={() =&gt; this.props.OpenThirdActivityFunction(item.coders)}
                  /&gt;
                  )}
                  keyExtractor={item =&gt; item.coders} 
                  ItemSeparatorComponent={this.renderSeparator}
                  ListHeaderComponent={this.renderHeader}
                  ListFooterComponent={this.renderFooter}
              /&gt;
              &lt;/List&gt; 
              );
          }
        }
  
  
       export default ListComponents;
  </code></pre>