Quantcast
Channel: Active questions tagged react-native+android - Stack Overflow
Viewing all articles
Browse latest Browse all 29741

What does the react error 'The component for route 'Camera' must be a react component' mean?

$
0
0

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.


Viewing all articles
Browse latest Browse all 29741

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>