Navigation Question

Expo SDK
1

I am working with the example project with tab navigation and have made a ListView using react-native-elements.

I am trying to figure out how to open up an item in the list using the onPress method. Do I add another route/screen in the RootStackNavigator

This is what the HomeScreen is.

export default class HomeScreen extends React.Component {
-  static navigationOptions = {
2    header: null,
2  };
|
-  render() {
2    return (
2      <View style={styles.container}>
2        <PostList />
2      </View>
2    );
2  }
|}

This is Post List - Following How to use the FlatList Component - React Native Basics

export class PostList extends React.Component {
-  constructor(props) {
2    super(props);
2
-    this.state = {
3      loading: false,
3      data: [],
3      page: 1,
3      seed: 1,
3      error: null,
3      refreshing: false
3    };
2  }
|
-  componentDidMount() {
2    this.getPosts();
2  }
|
-  getPosts = () => {
2    const { page, seed } = this.state;
2    const url = `https://randomuser.me/api/?seed=${seed}&page=${page}&results=20`;
|    this.setState({ loading: true });
|
|    fetch(url)
|      .then(res => res.json())
-      .then(res => {
-        this.setState({
3          data: page === 1 ? res.results : [...this.state.data, ...res.results],
3          error: res.error || null,
3          loading: false,
3          refreshing: false
3        });
2      })
-      .catch(error => {
2        this.setState({ error, loading: false });
2      });
|  };
 
-  handleRefresh = () => {
-    this.setState({
2      page: 1,
2      seed: this.state.seed + 1,
2      refreshing: true
2    }, () => {
2      this.getPosts();
2    });
|  };
 
-  handlePostPress = () => {
|    console.log(this.props);
|    const { navigate } = this.props.navigation;
|    console.log(navigate);
|  };
 
-  render() {
|    return (
|      <List containerStyle={{borderTopWidth: 0, borderBottomWidth: 0}}>
|        <FlatList
|          data={this.state.data}
-          renderItem={ ({item}) => (
2            <ListItem
2              roundAvatar
2              hideChevron
2              title={`${item.name.first} ${item.name.last}`}
2              subtitle={item.email}
2              avatar={{ uri: item.picture.thumbnail }}
2              containerStyle={{ borderBottomWidth: 0 }}
2              onPress={this.handlePostPress}
2            />
2          )}
|          keyExtractor={item => item.email}
|          onRefresh={this.handleRefresh}
|          refreshing={this.state.refreshing}
|        />
|      </List>
|    );
|  }
 }

How can I get the onPress handler to navigate to a sub-navigation using this example apps “flow”? Any tips?

2

you can do something like this

<FlatList
data={this.props.data}
renderItem={({ item }) => (
<ListItem onPress={()=> this.handleonPress( navigate, item ) }

handleonPress = ( navigate, item ) => {

this.props.TheParticularData(id);
navigate(‘TheParticularData’, {item})
};