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 />;
}
Related
I am trying to use localization to offer multiple language options in an app I am putting together. I am using react-navigation to move through different screens and I want to use expo-localization to access local language settings. I have looked at the documentation and I'm not sure how to integrate this into my navigation. How would I access Localization.locale in the different screens to be able to display the proper language?:
Below is a sample of the first landing screen and my routing.
App.js
import React, {Component} from 'react';
import {createBottomTabNavigator} from 'react-navigation-tabs'
import { createAppContainer, createSwitchNavigator } from 'react-navigation';
import { Ionicons } from '#expo/vector-icons';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import ourReducer from './store/reducer';
const store = createStore(ourReducer);
global.x = 'https://volleybuddy.metis-data.site'
import Home from './components/Home'
import Profile from './components/Profile'
import Login from './components/Login'
import SignUp from './components/SignUp'
import StartScreen from './components/StartScreen'
//import language settings
import * as Localization from 'expo-localization'; // or whatever library you want
import i18n from 'i18n-js'; // or whatever library you want
const en = {
login: 'Login'
};
const es = {
login: 'Entre'
};
i18n.fallbacks = true;
i18n.translations = { es, en };
// This will log 'en' for me, as I'm an English speaker
console.log(Localization.locale);
export default class App extends Component {
render(){
return (
<Provider store={ store }>
<AppContainer/>
</Provider>
);
}
}
const bottomTabNavigator = createBottomTabNavigator(
{
Home: {
screen: Home,
navigationOptions: {
tabBarIcon: ({ tintColor }) => (
<Ionicons name="ios-home" size={25} color={tintColor}/>
// <Icon name="qrcode" size={25} color={tintColor} />
)
}
},
Profile: {
screen: Profile,
navigationOptions: {
tabBarIcon: ({ tintColor }) => (
// <Icon name="search" size={25} color={tintColor} />
<Ionicons name="md-person" size={25} color={tintColor}/>
)
}
},
},
{
initialRouteName: 'Home',
tabBarOptions: {
activeTintColor: '#eb6e3d'
}
}
);
const RootSwitch = createSwitchNavigator({
StartScreen,
SignUp,
Login,
bottomTabNavigator
});
const AppContainer = createAppContainer(RootSwitch);
Login.js
import React, {Component} from 'react';
import { StyleSheet, Text, View} from 'react-native';
class StartScreen extends Component {
render(){
<View>
<Text>{HERE I WOULD BE PASSING VALUES HERE}</Text>
</View>
}
}
export default StartScreen
for example in App.js make :
const en = {
login: 'Heloooooooo'
};
and in StartScreen:
import i18n from 'i18n-js';
<View>
{i18n.t('login')} //output is : Heloooooooo
</View>
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 using react navigation as per the docs but trying to make my app a bit more modular. I placed the result of createStackNavigator into a separate component..
Navigator.js
import React, { Component } from 'react';
import {createAppContainer} from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack';
import Home from './views/Home.js';
import TestComponent from './views/TestComponent.js';
const MainNavigator = createStackNavigator({
Home: {screen: Home},
Test: {screen: TestComponent}
});
export default createAppContainer(MainNavigator);
..and importing this component into my App.js
App.js
import React, { Component } from 'react';
import { View } from 'react-native';
import Header from './Header.js';
import Navigator from './Navigator.js';
import FooterMenu from './FooterMenu.js';
class App extends Component {
render() {
return (
<View>
<Header />
<Navigator />
<FooterMenu />
</View>
);
}
}
export default App;
My index.js is as follows:
import { AppRegistry } from 'react-native';
import App from './components/App';
import {name as appName} from './app.json';
AppRegistry.registerComponent(appName, () => App);
Im finding that my <Header/> and <FooterMenu/> components are rendering but the <Navigator/> component is not.
I found that if I replace the top-level <View> component with a React fragment, it does render.
render() {
return (
<>
<Header />
<Navigator />
<FooterMenu />
</>
);
}
Although this syntax breaks my editor's (sublime) syntax highlighting. Though if I change the fragment to <React.Fragment> React native throws an exception.
My questions are:
Why does <Navigator/> not render if I wrap it in a <View> component?
Why do I get an error if I use <React.Fragment>?
If you want to create your own Navigator, here's how.
It is possible to take an existing Navigator and extend its behavior, using the following approach:
const MyStack = createStackNavigator({ ... });
class CustomNavigator extends React.Component {
static router = MyStack.router;
render() {
const { navigation } = this.props;
return <MyStack navigation={navigation} />;
}
}
Now it is possible to render additional things, observe the navigation prop, and override behavior of the router:
const MyStack = createStackNavigator({ ... });
class CustomNavigator extends React.Component {
static router = {
...MyStack.router,
getStateForAction: (action, lastState) => {
// check for custom actions and return a different navigation state.
return MyStack.router.getStateForAction(action, lastState);
},
};
componentDidUpdate(lastProps) {
// Navigation state has changed from lastProps.navigation.state to this.props.navigation.state
}
render() {
const { navigation } = this.props;
return (
<View>
<Header />
<MyStack navigation={navigation} />
<FooterMenu />
</View>
);
}
}
If you want to know more about this,
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 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' }}}