React Native: Navigation not working in component - react-native

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.