I was trying to use the react-navigation StackNavigator, and backtracked my code multiple times but couldn't find the issue. I was trying to build a simple navigation menu using this function for ios.
I'm using expo. So I started this project by creating a new expo project through terminal with the command "create-react-native-app testExpo". As shown below I modified the App.js a bit then created a screens folder -> then created two screens: "HomeScreen" and "LoginScreen"
These are the pictures of my code and the error
https://i.ibb.co/fQ9fjf2/Screen-Shot-2019-01-10-at-9-02-54-AM.png
https://i.ibb.co/7Xtx6jM/Screen-Shot-2019-01-10-at-9-03-01-AM.png
https://i.ibb.co/C8xbBVY/Screen-Shot-2019-01-10-at-9-03-07-AM.png
//Error picture
https://i.ibb.co/chgwYHT/Simulator-Screen-Shot-i-Phone-X-2019-01-10-at-08-59-08.png
App.js
import React, {Component} from 'react';
import { StyleSheet, Text, View } from 'react-native';
import {StackNavigator} from 'react-navigation'
import LoginScreen from './screens/LoginScreen'
import HomeScreen from './screens/HomeScreen'
export default class App extends React.Component {
render() {
return (
<AppNavigator />
);
}
}
const AppNavigator = StackNavigator({
LoginScreen: {screen: LoginScreen},
HomeScreen: {screen: HomeScreen}
})
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
HomeScreen.js
import React, { Component } from 'react';
import {Text,
View,
StyleSheet} from 'react-native';
class HomeScreen extends Component{
render() {
return(
<View>
<Text>This is the home screen</Text>
</View>
);
}
}
export default HomeScreen;
LoginScreen.js
import React, {Component} from 'react';
import {Text,
View,
StyleSheet} from 'react-native';
class LoginScreen extends Component{
render() {
return(
<View>
<Text>This is the login screen</Text>
</View>
);
}
}
export default LoginScreen;
I expect the app to launch with multiple screens to the applications.
Related
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);
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
I keep getting this error. I already went through all the posts related to this error and tried everything to solve this error but still, I don't know why I am getting this error.
Here is the complete error statement:
Error: The component for route 'Home' must be a React component. For example:
import MyScreen from './MyScreen';
...
Home: MyScreen,
}
You can also use a navigator:
import MyNavigator from './MyNavigator';
...
Home: MyNavigator,
}
App.js :
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import * as firebase from "firebase"
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import HomeScreen from './screens/HomeScreen'
import SignupScreen from './screens/SignupScreen'
import SigninScreen from './screens/SigninScreen'
import LoadingScreen from './screens/LoadingScreen'
const MainNavigator = createStackNavigator(
{
Home: { screen: HomeScreen },
Loading: { screen: LoadingScreen },
SignIn: { screen: SigninScreen },
SignUp: { screen: SignupScreen }
},
{
//launcher screen
initialRouteName: "Loading"
}
);
//create app container
const AppContainer = createAppContainer(MainNavigator);
export default class App extends React.Component {
render() {
return <AppContainer />;
}
}
Here is HomeScreen.js
I have changed nothing here, it's just a bare minimum boilerplate code
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default class HomeScreen extends React.Component {
render()
{ return (
<View style={styles.container}>
<Text>Open up App.js to start working on your app!</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
I am beginning with ReactNative and try to get a component I can navigate to as well as use inline.
MyComp is the component. In Home I try to navigate to MyComp by a button as well as have it inline with .
App.js
import React from 'react';
import { StyleSheet, Text, View, Button, Alert, Image} from 'react-native';
import {createStackNavigator, createAppContainer} from 'react-navigation';
import Home from "./Home";
import MyComp from "./MyComp";
const navi = createStackNavigator({
Home: {screen: Home},
MyComp: {screen: MyComp}
});
const App = createAppContainer (navi);
export default App;
Home.js
import React from 'react';
import {StyleSheet, Text, View, Button, Alert} from 'react-native';
import {navigate} from 'react-navigation';
import {MyComp} from "./MyComp";
export default class Home extends React.Component
{
static navigationOptions = {title: 'At Home'};
render()
{
return (
<View style={{ alignItems: 'center', justifyContent: 'center', flex: 1}}>
<Button
title={"Goto MyComp"}
onPress={() => this.props.navigation.navigate('MyComp')}/>
<MyComp/> {/* Compiler Error */}
</View>
);
}
}
MyComp.js
import React from 'react';
import {Text, View, Button} from 'react-native';
export default class MyComp extends React.Component
{
render()
{
return (
<View>
<Text>Here I am</Text>
</View>
);
}
}
But the inline produces an error.
Invariant Violation: Invariant Violation: Element type is invalid:
expected a string (for built-in components) or a class/function (for
composite components) but got: undefined. You likely forgot to export
your component from the file it's defined in, or you might have mixed
up default and named imports.
Check the render method of Home.
I am not sure whats the problem here. Is it not possible to use a component in both ways?
remove brackets when u import component in home screen
change
import {MyComp} from "./MyComp";
to
import MyComp from "./MyComp";
I want to create a new StackNavigator with 'react-navigation' package
but when I initialize the screens for the StackNavigator i get an error -> undefined is not an object (evaluating '_TextUpload.TextUpload')
My TextUpload Component:
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
export class TextUpload extends Component {
constructor(props){
super(props);
this.state = {
ready: false
}
}
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Text Upload
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
}
});
My StackNavigator Component:
import React from 'react';
import { createBottomTabNavigator, createAppContainer, createStackNavigator } from 'react-navigation';
import { Home, Profile, Feed, Upload, Notes, TextUpload, ImageScreen } from '../components';
import Icon from 'react-native-vector-icons/dist/FontAwesome';
import { createMaterialBottomTabNavigator } from "react-navigation-material-bottom-tabs";
import {HOME_TAB_COLOR, FEED_TAB_COLOR, UPLOAD_TAB_COLOR, NOTE_TAB_COLOR, PROFILE_TAB_COLOR} from "../config";
const AppNavigator = createStackNavigator({
Home: {
screen: TextUpload
}
});
You need import your pages on StackNavigator page. This is how i'm using;
import React, { Component } from "react";
import { createStackNavigator, createAppContainer } from 'react-navigation';
import Device from "../pages/device";
import DeviceScreen from "../pages/devices";
const Project= createStackNavigator({
Measures: {
screen: Device
},
Devices: {
screen: DeviceScreen
}
});
export default createAppContainer(Project);
its throw error when you import pages with curly brackets so don't use curly brackets.
I am creating an app in ReactNative and i got this issue. Following are the files containing code
index.js
import React from 'react';
import {AppRegistry} from 'react-native';
import Home from 'MobileApp/src/users/Home';
AppRegistry.registerComponent('MobileApp', () => App);
Home.js
import React, {Component} from 'react';
import { View,Button} from 'react-native';
import Profile from './Profile';
class Home extends Component{
onPressProfile(){
navigate('Profile', { name: 'Profile' })
}
render() {
return(
<View style={styles.viewStyle}>
<View style={styles.buttonStyle}>
<Button
onPress={this.onPressProfile}
title="Profile"
/>
</View>
</View>
);
}
}
const styles= {
viewStyle: {
flex: 1,
justifyContent: 'center',
},
};
export default Home;
Error is in my Home.js. what is the mistake?Thanks in advance.
In your index.js file, you should be using your Home component as entry point of your app.
Index.js
import React from 'react';
import {AppRegistry} from 'react-native';
import Home from 'MobileApp/src/users/Home';
AppRegistry.registerComponent('MobileApp', () => Home);
In your actual code, App is undefined.
You may have error on this line:
navigate('Profile', { name: 'Profile' })
need to define navigate to access it. Assuming you are learning from official documentation
const { navigate } = this.props.navigation;
And import navigation would be like:
import {
StackNavigator,
} from 'react-navigation';
const App = StackNavigator({
Home: { screen: HomeScreen },
Profile: { screen: ProfileScreen },
});
For further information how navigation works, check documentation