React Native: Navigation not working in component

Question

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.

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. ?

App.js

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 = () =>
  {
     this.props.navigation.navigate('Second');

  }

  render() {
    return (
      <View style={styles.container}>

       <Button onPress = { this.OpenSecondActivityFunction } title = 'Open Second Activity'/>
      </View>
    );
  }
}


 class SecondActivity extends Component
{
  static navigationOptions =
  {
     title: 'SecondActivity',
  };

     OpenThirdActivityFunction = () =>
  {
     this.props.navigation.navigate('Third');

  }

  render()
  {
     return(


            <View style={{  flex: 1}}>
            <ListComponents data={alapinCtrl} OpenThirdActivityFunction={this.OpenThirdActivityFunction} />
        </View>

     );
  }
}





 class ThirdActivity extends Component
{
  static navigationOptions =
  {
     title: 'ThirdSecondActivity',
  };

  render()
  {
     return(


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

             <Text>3</Text>

        </View>

     );
  }
}


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', () => ActivityProject);

ListComponent.js

 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 = () => {
        return (
          <View
            style={{
              height: 1,
              width: "98%",
              backgroundColor: "#CED0CE",
              marginLeft: "2%"
            }}
          />
        );
      };

      renderHeader = () => {
        return <SearchBar placeholder="Type Here..." lightTheme round />;
      };

      renderFooter = () => {
        if (!this.state.loading) return null;

        return (
          <View
            style={{
              paddingVertical: 20,
              borderTopWidth: 1,
              borderColor: "#CED0CE"
            }}
          >
            <ActivityIndicator animating size="large" />
          </View>
        );
      };

        render()  {
            return (

            <List containerStyle={{ borderTopWidth: 0, borderBottomWidth: 0 }}>
            <FlatList 
                data={this.props.data}
                renderItem={({ item }) => (
                <ListItem
                    roundAvatar
                    title={`${item.name}`}
                    subtitle={item.coders}

                    containerStyle={{ borderBottomWidth: 0 }}

  onPress={() => this.props.OpenThirdActivityFunction(item.coders)}
                />
                )}
                keyExtractor={item => item.coders} 
                ItemSeparatorComponent={this.renderSeparator}
                ListHeaderComponent={this.renderHeader}
                ListFooterComponent={this.renderFooter}
            />
            </List> 
            );
        }
      }


     export default ListComponents;

Answer 1

Only SecondActivity has the navigation prop; you need to explicitly pass it to child component:

<ListComponent navigation={this.props.navigation} />

Alternatively,

<ListComponent onPress={() => this.props.navigation.navigate('Third')} />;

Then just do <Button onPress={this.props.onPress} in your ListComponent.