Flat List navigation react native

Question

I been having an issue with navigating from API flat list to separate screen. I got a news api integrated and I want to from each article render to navigate to newsdetail screen. I'm not getting an error message only touchable opacity is not working. I'm not sure where I made a mistake in the flatlist or in the APP.js

FlatList:

import React, { Component } from 'react';
import { FlatList, TouchableOpacity } from 'react-native';


import { getUSANews } from './fetchNews';
import Article from './Article';
import NewsDetail from '../screens/NewsDetail';

class News extends Component {
 state = {
 articles: [],
 refreshing: true
};

componentDidMount = () => {
  this.fetchNews();
};

fetchNews = () => {
  getUSANews()
  .then(articles => {
    this.setState({ articles, refreshing: false });
  })
  .catch(() => this.setState({ refreshing: false }));
};

handleRefresh = () => {
this.setState({ refreshing: true }, () => this.fetchNews());
};

render(navigation) {
 return (
  <FlatList
    data={this.state.articles}
    keyExtractor={item => item.url}
    refreshing={this.state.refreshing}
    onRefresh={this.handleRefresh}
    renderItem ={({item}) => {
      return (
      <TouchableOpacity onPress={() => this.props.navigation.navigate('NewsDetail')}
      >
      <Article article={item} />
      </TouchableOpacity>
      );
  }} 
  />
);
}
}

export default News;

App.js:

 const Drawer = createDrawerNavigator(
  {
  Home: { 
    screen: homeScreen,
    Options: {
      title: 'Home',
      activeTintColor: 'red'
    },
  },
  Signin:{ 
    screen: SigninScreen,
    Options: {
      title: "Sign In",

    },
  },
  Signup: {
    screen: SignupScreen,
    navigationOptions: {
    title: 'Sign Up'
    }
  }
},

{
  initialRouteName: 'Home',
  unmountInactiveRoutes: true,
  headerMode: 'none',
  contentOptions: {
    activeTintColor: 'red'
  },

},


);

const AppNavigator = createStackNavigator({
    Drawer: {
      screen: Drawer,
      navigationOptions: ({ navigation }) => {
        return {
          headerTitle: "Home",
          headerTitleStyle: {
            color: "white"
          },
          headerStyle: {
            backgroundColor: "#5BBC9D"
          },
          headerLeft: (
            <Icon
              onPress={() => navigation.openDrawer()}
              name="md-menu"
              color="white"
              size={30}
              style={{
              paddingLeft: 10
              }}
            />

          ),
          headerRight: (
            <Icon
              onPress={() => navigation.se()}
              name="ios-search"
              color="white"
              size={30}
              style={{
                paddingRight: 10
              }}
            />
          )
        }
      }},
      Detail: {
        screen:NewsDetail
      }
  })





const AppContainer = createAppContainer(AppNavigator);

export default class App extends React.Component {
  render (){

    return(
      <AppContainer />
    );
  }
}

Answer 1

You set the RouteName to your newsDetail screen as Detail. Hence to navigate to that screen you need to use the RouteName you set and not the screen name. Kindly change from;

onPress={() => this.props.navigation.navigate('NewsDetail')}

to

onPress={() => this.props.navigation.navigate('Detail')}

Answer 2

You don't have any screen name NewsDetail change this:

onPress={() => this.props.navigation.navigate('NewsDetail')}

to

onPress={() => this.props.navigation.navigate('Detail')}

Hope this helps!