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.