I have a HomePage.js which contains About Us button, and when I click on that button I want to show AboutUs.js. The HomePage.js is displayed correctly, however, when I click on the button it gives me the following error: this.props.onPress is not a function. (In 'this.props.onPress(e)', 'this.props.onPress' is an instance of Object)
I have App.js
import React, { Component } from 'react';
import { StackNavigator } from 'react-navigation';
import HomePage from './HomePage';
import AboutUs from './AboutUs';
const App = StackNavigator({
HomePage: {
screen: HomePage,
navigationOptions: {
header: () => null
}
},
AboutUs: {
screen: AboutUs,
navigationOptions: {
header: () => null
}
}
});
export default App;
Then I have a reusable component Button.js:
import React from 'react';
import { Text, TouchableOpacity } from 'react-native';
const Button = ({ onPress, children }) => {
return (
<TouchableOpacity onPress={onPress}>
<Text>{children}</Text>
</TouchableOpacity>
);
};
export { Button };
HomePage.js which is rendering the Button component. When I press it I get the above mentioned error
import React, { Component } from 'react';
import { View, Text } from 'react-native';
import { Button } from './Button.js';
import AboutUs from './AboutUs';
class HomePage extends Component{
render() {
const { navigate } = this.props.navigation;
return(
<View>
<Button
onPress={() => navigate('AboutUs'), { name: 'About Us' }}
>About Us</Button>
</View>
)
}
}
export default HomePage;
AboutUs.js
import React, { Component } from 'react';
import { Text, View } from 'react-native';
class AboutUs extends Component {
render() {
return (
<View>
<Text>About us!</Text>
</View>
);
}
}
export default AboutUs;
This is not a valid function reference
onPress={() => navigate('AboutUs'), { name: 'About Us' }}
seems like you mixed up { name: 'About Us' } inside the function ref instead of as a prop to Button
I had a similar issue with the same error: "this.props.onPress is not a function" The mistake I made was using:
onPress={this.props.incrementCount()}
where the correct syntax is:
onPress={ () => this.props.incrementCount()}
the latter returns the results of the function.
for me it was i missed a curly brackets
onPress={() => {navigate('AboutUs'), { name: 'About Us' }}}
Related
I am working on a ReactNative Project. I am a beginner so this question might seem silly. I am creating a basic navigation for a login screen and keep getting this error message
'Unable to resolve module ./src/Home from /app7-react-native/App.js:
Then it says none of these files exist
Here is my App. js
import React from 'react';
import { View, Text, Button } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import Home from '.src/Home';
import Login from './src/Login';
const Navigator = createStackNavigator ({
Home: { screen: Home},
Login: { screen: Login},
});
const App = createAppContainer(Navigator);
export default App;
Home.js
import React from 'react';
import { StyleSheet, View, Text, Button} from 'react-native';
export default class Home extends React.Component {
static navigationsOptions = ({ navigation }) => {
return {
title: navigation.getParam('name'),
};
};
render() {
const { navigate, state } = this.props.navigation;
return (
<View style={styles.container}>
<Text>Hello {state.params.name}</Text>
<Button
title="Go to home screen"
onPress={() => navigate('Home')}
/>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center'
}
});
Login.js
import React from 'react';
import { Text, View, TextInput, Stylesheet, Button, Touchableopacity } from 'react-native';
export default class Login extends React.Component {
static navigationsOptions = {
title = 'Login',
};
render() {
const { navigate } = this.props.navigation;
return (
<View style={styles.container}>
<Button
title="Go to profile screen"
onPress={() => navigate(
'Profile', { name: 'Jane'}
)}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center'
}
})
Try to replace this '.src/Home' with './src/Home';
and your folder structure must be :
App. js
src
Home.js
Login.js
2 fixes need to be done here
Replace '.src/Home' with './src/Home' in your App.js file.
MyRNProject
App.js
src
Home.js
Login.js
You seem to be calling "Home" from inside of Home.js onPress function. You are creating an infinite loop here. Change it to a different screen like Login or Profile
When I run my app I get the error: 'The component for route 'Camera' must be a react component'. I do not know what this means:
Here is my App.js:
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { createAppContainer } from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack';
import Home from './screens/Home';
import Camera from './screens/Camera'
const MainNavigator = createStackNavigator(
{
Home: {screen: Home},
Camera: { screen: Camera}
},
{
defaultNavigationOptions: {
headerTintColor: '#fff',
headerStyle: {
backgroundColor: '#b83227'
},
headerTitleStyle: {
color: '#fff'
}
}
}
);
Here is my home:
import React from 'react';
import { StyleSheet, Text, View, Image, Button } from 'react-native';
import Camera from './Camera'
export default class Home extends React.Component{
static navigationOptions = {
title: "PhotoClicker"
}
render(){
let photo = this.props.navigation.getParam("Photo", "empty")
const { navigate } = this.props.navigation;
return (
<View style={styles.container}>
<Image
resizeMode="center"
style = {styles.imageHolder}
source={
photo === "empty" ? require("../assets/viking.png") : photo
}
/>
<Button
title="Take Photo"
style={styles.button}
onPress={()=>{
this.props.navigation.navigate(Camera)
}}
/>
</View>
);
}
}
Here is Camera:
import React from 'react';
import { StyleSheet, Text, View, Image, Button } from 'react-native';
export default class Camera extends React.Component{
render(){
const { navigate } = this.props.navigation;
return (
<View style={styles.container}>
<Text>Camera Screen</Text>
</View>
);
}
}
It should just be a button that leads from home to Camera, but all I get is the above error. I have tried to change the imports but I just keep getting the same error. Could there be something wrong with my setup, I feel I get many more errors not directly related to code with React-native than I would with Java for Android.
Since you are adding Camera Screen to createStackNavigator. You can navigate to that screen directly through navigation props. So remove below unnecessary import code from your Home Screen
import Camera from './Camera'
change your navigation action
this.props.navigation.navigate('Camera')
I am new to react native and I was trying to connect reduxstore to my app so that my Menu component may fetch the dishes.
I have tried everything checked for the export errors but yet I couldn't find where is the route missing.
Please help I'm stuck
MenuComponent.js
import React, { Component } from "react";
import { FlatList } from "react-native";
import { Tile } from "react-native-elements";
import { connect } from "react-redux";
import { baseUrl } from "../shared/baseUrl";
const mapStateToProps = state => {
return {
dishes: state.dishes
}
};
class Menu extends Component {
static navigationOptions = {
title: "Menu"
};
render() {
const renderMenuItem = ({ item, index }) => {
return (
<Tile
key={index}
title={item.name}
subtitle={item.description}
featured
onPress={() => navigate("Dishdetail", { dishId: item.id })}
imageSrc={{ uri: baseUrl + item.image }}
/>
);
};
const { navigate } = this.props.navigation;
return (
<FlatList
data={this.props.dishes.dishes}
renderItem={renderMenuItem}
keyExtractor={item => item.id.toString()}
/>
);
}
}
export default connect(mapStateToProps)(Menu);
MainComponent.js
import React, { Component } from "react";
import Menu from "./MenuComponent";
import { DISHES } from "../shared/dishes";
import Dishdetail from "./DishdetailComponent";
import {
View,
Platform,
StyleSheet,
Image,
ScrollView,
Text
} from "react-native";
import {
createStackNavigator,
createDrawerNavigator,
DrawerItems,
SafeAreaView
} from "react-navigation";
import Home from "./HomeComponent";
import Contact from "./ContactComponent";
import About from "./AboutComponent";
import { Icon } from "react-native-elements";
import { connect } from "react-redux";
import {
fetchDishes,
fetchComments,
fetchPromos,
fetchLeaders
} from "../Redux/ActionCreators";
.....
const MenuNavigator = createStackNavigator(
{
Menu: {
screen: Menu,
navigationOptions: ({ navigation }) => ({
headerLeft: (
<Icon
name="menu"
size={24}
color="white"
onPress={() => navigation.toggleDrawer()}
/>
)
})
},
Dishdetail: { screen: Dishdetail }
},
{
initialRouteName: "Menu",
navigationOptions: {
headerStyle: {
backgroundColor: "#512DA8"
},
headerTintColor: "#fff",
headerTitleStyle: {
color: "#fff"
}
}
}
);
.....
export default connect(
mapStateToProps,
mapDispatchToProps
)(Main);
Error message
The component for route 'Menu' must be a React component for example:
import MyScreen from './Myscreen'
...
Menu : Myscreen,
}
you can also use a navigator:
import MyNavigator from './MyNavigator';
....
Menu : MyNavigator
}
validateRouteConfigMap
createStackNavigator
I dont understand why I'm getting error for menu component because I have exported it successfully.
The error has also something to do with createStackNavigator but I think the code looks fine, if not then what am I doing worng?
I don't think your screen is properly setting export default.
Could you change this code?
const MenuNavigator = createStackNavigator(
{
Menu: {
screen: () => <Menu />,
I'm trying to make custom component here (footer). Here's my code:
Footer.js
import React, { Component } from 'react'
import {
View,
Text,
Linking,
StyleSheet,
Image,
TouchableOpacity
Dimensions,
} from 'react-native'
class Footer extends Component {
constructor(props) {
super(props);
}
static navigationOptions = ({ navigation }) => ({
title: ''
})
_pageAbout = () => {
this.props.navigation.navigate('About');
}
render() {
return (
<View>
<View style={{ margin: 15 }}>
<TouchableOpacity
onPress={()=>this._pageAbout()}>
<Text>About</Text>
</TouchableOpacity>
</View>
</View>
);
}
}
export default Footer
Then I import and call that component on Home.js screen.
Home.js
import React, { Component } from 'react'
import {
View,
Text,
Linking,
StyleSheet,
Image,
TouchableOpacity
Dimensions,
} from 'react-native'
class Home extends Component {
constructor(props) {
super(props);
}
static navigationOptions = ({ navigation }) => ({
title: ''
})
render() {
return (
<Footer />
);
}
}
export default Home
But when I click "About" text, it returns
TypeError: undefined is not an object (evaluating
this.props.navigation.navigate) in react native
Please help. Thanks before.
You need to pass navigation as a prop to the Footer
<Footer navigation={this.props.navigation} />
As the Footer will be unaware of the navigation stack
send Home props to footer as below
<Footer {...this.props} />
The specific error is "Route 'Camera' should declare a screen".
I have index.js which imports Camera.js and renders the camera component. Camera.js imports router.js which imports all of my screens and creates a StackNavigator. I'm new to React so there's probably something I'm not understanding. Here's the code...
Index.js
import React, { Component } from 'react';
import { CameraView } from './screens/Camera'
class App extends Component {
render() {
return <CameraView />;
}
}
export default App;
Camera.js
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Button,
} from 'react-native';
import { AppStack } from '../config/router';
....
export default class CameraView extends Component {
viewProducts = () => {
this.props.navigation.navigate('Products');
};
render() {
const { navigate } = navigation;
return (
<View style={styles.container}>
<Camera
ref={(cam) => {
this.camera = cam;
}}
style={styles.preview}
aspect={Camera.constants.Aspect.fill}
onBarCodeRead={this.readBarcode}>
<Button
onPress={() => this.viewProducts}
title="Products"
/>
</Camera>
</View>
);
}
}
Router.js
import React from 'react';
import { StackNavigator } from 'react-navigation';
import { Icon } from 'react-native-elements';
import Products from '../screens/Products';
import ProductDetail from '../screens/ProductDetail';
import CameraView from '../screens/Camera';
export const Root = StackNavigator({
Camera: {
screen: CameraView,
},
ProductDetail: {
screen: ProductDetail,
navigationOptions: {
title: ({ state }) => `${state.params.name}}`
},
},
Products: {
screen: Products,
navigationOptions: {
title: 'Products',
},
},
});
I'm importing CameraView here and using it as the screen for my Camera route. Is CameraView not considered a screen? Thanks.
Figured the problem out. Instead of rendering
render() {
return <CameraView />;
}
in my index.js I needed to import the router.js and render
render() {
return <Root />;
}