CODEWITHSUNDEEP
react-native
nita
nita

Reputation: 23

react native stack navigation button onpress not working

I am new in react native and trying to navigate between screens. I made two components: Home.js and Product.js. in App.js I try to show the home. There is a button in homescreen but when I click the button it does not respond. I want to go productList after clicking the button.

home.js:

import React from 'react';
import { StyleSheet, View,  Text, Button,ScrollView} from 'react-native';

import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
class Home extends  React.Component{

    render(){

        return(
            <ScrollView>
                 <View>
                     <Button
                      title="Go to About"
                      onPress={() => this.props.navigation.navigate('ProductList')}
                     />
                 </View>
            </ScrollView>
        )
    }
}

export default Home;

ProductList.js:

import React from 'react';
import { StyleSheet,Text,View,Image,ScrollView,AppRegistry,FlatList,Button } from 'react-native';
import ProductImages from './ProductImages';

class ProductList extends  React.Component{
    render(){
        return(
        <View>
             <Text>Product List</Text>         
            </View>

        );
    }
}
export default ProductList;

App.js:

import React from 'react';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import Home from './components/Home';
import ProductList from './components/ProductList';

class App extends  React.Component{
     render(){
        return <AppContainer  />;
    }
}
const AppNavigator = createStackNavigator({
  Home: {
    screen: Home,
  },
  Product: {
      screen: ProductList
   },
});

export default AppContainer  = createAppContainer(AppNavigator);

Upvotes: 2

Views: 1772

Answers (1)

Vijay Bhati
Vijay Bhati

Reputation: 69

import React from "react";
import { StyleSheet, View, Text, Button, ScrollView } from "react-native";

import { createAppContainer } from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";
class Home extends React.Component {
  render() {
    return (
      <ScrollView>
        <View>
          <Button
            title="Go to About"
            onPress={() => this.props.navigation.navigate("Product")}
          />
        </View>
      </ScrollView>
    );
  }
}

export default Home;

change onPress in Home.js ProductList to Product which you have defined in App.js

Upvotes: 1

Related Questions