I am writing my 1st React-native application and I got the below error message on executing code,
App.js:
import React, { Component } from 'react';
import { StyleSheet, Text, TextInput, View} from 'react-native';
import { StackNavigator } from 'react-navigation';
import Login from './App/components/Login.js';
const Application = StackNavigator({
Home: { screen: Login },
}, {
navigationOptions: {
header: false,
}
});
export default class App extends Component {
render() {
return (
<Application />
);
}
}
Login.js:
import React,{Component} from 'react';
import{
View,
Text,
Stylesheet
} from 'react-native';
import { StackNavigator } from 'react-navigation';
export default class Login extends Component{
render(){
return(
<Text>Test</Text>
);
}
}
You have to export createAppContainer and also StackNavigator is deprecated use createStackNavigator
Try this:
import React, { Component } from 'react';
import { StyleSheet, Text, TextInput, View} from 'react-native';
import { createStackNavigator, createAppContainer } from "react-navigation";
import Login from './App/components/Login.js';
const Application = createStackNavigator({
Home: { screen: Login },
}, {
navigationOptions: {
header: false,
}
});
class App extends Component {
render() {
return (
<Application />
);
}
}
export default createAppContainer(Application);
Related
iam using createMaterialTopTabNavigator and i have function (aa()) in it there is a touchableOpacity btn , and when press it can't go to another page i dont know what's the problm , so anyone can help me ? , nd also i have Route file for the routes ,
Thanks
// this is the App.js :
const App=()=>{
return <AppContainer />;
}
export default App;
// AppContainer
import { createAppContainer } from "react-navigation";
import React from "react";
import {
View,
Text,
Image,
StyleSheet,
Alert,
TouchableOpacity,
} from "react-native";
import { createMaterialTopTabNavigator } from "react-navigation-tabs";
import Header from "./Header";
import ListProch from "./ListProch";
import ListeEnCours from "./ListeEnCours";
import ListeTermines from "./ListeTermines";
function aa({ navigation }){
return(
<TouchableOpacity
onPressIn={()=>navigation.navigate("Buy")}
style={{width:200,height:200,backgroundColor:"red"}}>
</TouchableOpacity>
)
}
const TopBarMenu= createMaterialTopTabNavigator(
{
Prochaines: {
screen: aa
},
"En cours": {
screen: ListeEnCours
},
Terminés: {
screen: ListeTermines
},
},
{
tabBarComponent: Header,
tabBarOptions: {
activeTintColor: "#30A6CA",
inactiveTintColor: "#333333",
},
initialRouteName: "Prochaines"
}
);
const AppContainer = createAppContainer(TopBarMenu);
export default (AppContainer)
// Routes.js
import { createStackNavigator } from "react-navigation-stack";
import { createAppContainer } from "react-navigation";
import Login from "../Components/Login";
import ForgetPassword from "../Components/ForgetPassword";
import Register from "../Components/Register";
import Terms from "../Components/Terms";
import Home from "../Components/Home";
import ListProch from "../Components/ListProch";
import TopBar from "../Components/TopBar";
import Encheres from "../Components/Encheres";
import Favoris from "../Components/Favoris";
import Profil from "../Components/Profil";
import UpdateInfo from "../Components/UpdateInfo";
import ChangePassword from "../Components/ChangePassword";
import InfoSecurity from "../Components/InfoSecurity";
import InfoLegales from "../Components/InfoLegales";
import Partenariat from "../Components/Partenariat";
import CommentMarche from "../Components/CommentMarche";
import Autres from "../Components/Autres";
import Notification from "../Components/Notification";
import Buy from "../Components/Buy";
import DetailsProduit from "../Components/DetailsProduit";
import EncheresEndirect from "../Components/EncheresEndirect";
import Header from "../Components/Header";
import AppContainer from "../Components/TopBarMenu";
import HomeScreen from "../Components/TopBarMenu";
import Tabs from "../Components/Tabs";
import Index from "../Components/Index";
import IndexAutres from "../Components/IndexAutres";
import IndexProch from "../Components/IndexProch";
const screens = {
AppContainer: {
screen: AppContainer,
navigationOptions: {
headerShown: null,
},
},
Header: {
screen: Header,
navigationOptions: {
headerShown: null,
},
},
Buy: {
screen: Buy,
navigationOptions: {
headerShown: null,
},
},
};
const RouteStack = createStackNavigator(screens);
const Routes = createAppContainer(RouteStack);
export default Routes;
You may also try in app.js
import { NavigationContainer } from '#react-navigation/native';
const App=()=>{
return(
<NavigationContainer independent={true} >
<AppContainer />
</NavigationContainer>
)
}
export default App;
import { useNavigation } from '#react-navigation/native'
function aa(){
const navigation = useNavigation();
return(
<TouchableOpacity
onPressIn={()=>navigation.navigate("Buy")}
style={{width:200,height:200,backgroundColor:"red"}}>
</TouchableOpacity>
)
}
Just started the project and sucked
Code:
import React, {Component} from 'react';
import { Text, View } from 'react-native';
export default class SignUp extends Component() {
constructor(props){
super(props);
}
render() {
return (
<View>
<Text>SignUp</Text>
</View>
);
}
}
stack navigator:
import { createStackNavigator } from "react-navigation";
import SignUp from "../screens/SignUpScreen";
export default AuthStackNavigator = createStackNavigator({
SignUp: SignUp,
})
Getting this error:
error pic
It’s because you should write
export default class SignUp extends Component { ... }
Instead of
export default class SignUp extends Component() { ... }
I want to create navigation for my react native app, but it shows me this error. I don't know how to fix it. At the bottom I have my JS files:
I tried all the codes, for example, I write export className and import {className}
App.js:
import React, { Component } from 'react'
import { Text, View } from 'react-native'
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack'
import Login from './screens/Login'
import Signup from './screens/Signup'
import Home from './screens/home'
export default class App extends Component {
render() {
return (
<AppRoot />
)
}
}
const Container = createAppContainer({
Login: { screen: Login },
Signup: { screen: Signup },
Home: { screen: Home },
}, {
initialRouteName: 'Login'
})
const AppRoot = createStackNavigator(Container)
Login.js:
import React, { Component } from 'react'
import { Text, View } from 'react-native'
export default class Login extends Component {
render() {
return (
<View>
<Text> login </Text>
</View>
)
}
}
Signup.js
import React, { Component } from 'react'
import { Text, View } from 'react-native'
export default class Signup extends Component {
render() {
return (
<View>
<Text> Signup </Text>
</View>
)
}
}
home.js:
import React, { Component } from 'react'
import { Text, View } from 'react-native'
export default class Home extends Component {
render() {
return (
<View>
<Text> Home </Text>
</View>
)
}
}
I don't know what is the problem.
It seems you use react-navigation functions in wrong order. First you have to create stack navigator and then create app container with it:
const Container = createStackNavigator({
Login: { screen: Login },
Signup: { screen: Signup },
Home: { screen: Home },
}, {
initialRouteName: 'Login'
})
const AppRoot = createAppContainer(Container)
remove import { createStackNavigator } from 'react-navigation-stack' and use
import { createAppContainer,createStackNavigator } from 'react-navigation';
App.js
import React, { Component } from 'react'
import { Text, View } from 'react-native'
import { createAppContainer, createStackNavigator } from 'react-navigation';
import Login from './screens/Login'
import Signup from './screens/Signup'
import Home from './screens/home'
export default class App extends Component {
render() {
return (
<AppRoot />
)
}
}
let RootStack = createStackNavigator({
Login: Login,
Signup: Signup,
Home: Home,
})
const AppRoot = createAppContainer(RootStack)
Now Navigation props are present across all your screens Login,Signup,Home. To navigate from Login to home for example
Login.js
import React, { Component } from 'react'
import { Text, View, TouchableOpacity } from 'react-native'
export default class Login extends Component {
render() {
return (
<TouchableOpacity onPress={()=>this.props.navigation.navigate('Home')}>
<Text> Home </Text>
</TouchableOpacity>
)
}
}
Hope this helps. Let me know if you have any further queries.
I'm getting below error when im trying to navigate to different screen from home screen. i defined initial loading screen in routes. From initial screen trying to navigate to different screen then getting below error.
this.props is returning just {}. Not really sure why.
login.component.js
import React, {Component} from 'react';
import {NavigationActions} from 'react-navigation';
import {
Platform,
StyleSheet,
Text,
View,
TextInput,
TouchableOpacity,
Touchable,
Image,
Button
} from 'react-native';
import { handleFbLogin } from '../../config/authConfig/';
class Login extends Component {
render () {
console.log("this.props")
console.log(this.props)
return (
<View style={{flex: 1,backgroundColor: '#37afa6'}}>
<Button
title="Go to Details"
onPress={() => this.props.navigation.navigate('setupProfile')}
/>
</View>
);
}
}
export default Login;
routes/index.js
import {StackNavigator} from 'react-navigation';
import Login from '../pages/Login.page';
import SetupProfile from '../pages/setupProfile.page';
const Config = {
navigation: {
login: {
screen: Login
},
setupProfile: {
screen: SetupProfile,
}
}
}
export default Config;
App.container.js
import React, {Component} from 'react';
import Login from './pages/Login.page';
import {connect} from 'react-redux';
import Router from './routes';
import {
Platform,
StyleSheet,
Text,
View,
TextInput
} from 'react-native';
class App extends Component {
render () {
return (
<Router />
);
}
}
export default App;
index.js(startup point):
import { AppRegistry } from 'react-native';
import { StackNavigator } from 'react-navigation';
import app from './app/index';
import Config from './app/routes/index';
export const AppNavigator = StackNavigator(Config.navigation,{initialRouteName : 'login'});
AppRegistry.registerComponent('BuddApp', () => AppNavigator);
export default app;
i'm able to load initalscreen after these changes but when trying to navigate still getting the same error.
EDIT :
I got it. You forgot the constructor in your login screen, that's why your props are empty :
constructor(props) {
super(props);
}
PREVIOUS ANSWER :
Without the full code, i can't see what the exact problem is, but i will give you an exemple of use of react-navigation :
In your index.js (start point of your app) :
import { AppRegistry } from 'react-native';
import { StackNavigator } from 'react-navigation';
export const AppNavigator = StackNavigator(Config.navigation);
AppRegistry.registerComponent('appName', () => AppNavigator);
In the navigation config :
const Config = {
navigation: {
login: {
screen: Login
},
setupProfile: {
screen: SetupProfile,
}
}
}
The first object found in the navigation config is the start of your app.
Now you can use your navigation function in the "login" page with navigate :
this.props.navigation.navigate('setupProfile')
If the AppRegistry is filled everything should run fine.
I hope it help !
I got expected a component class got object error when I try to use loginPage component which I created.
here is index.ios.js
import React, {Component} from 'react';
import {
AppRegistry,
View
} from 'react-native';
import loginPage from './pages/loginPage'
class app extends Component {
render() {
return (
<View>
<loginPage/>
</View>
);
}
}
AppRegistry.registerComponent('app', () => app);
and here is the loginPage.js
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View
} from 'react-native';
export default class loginPage extends Component {
render() {
return (
<View>
<Text>
Welcome to React Native!
</Text>
</View>
);
}
}
You need to rename your loginPage class to LoginPage, the class must be capitalize
loginPage.js
import React from 'react';
import {
Text,
View
} from 'react-native';
const LoginPage = () => {
return (
<View>
<Text>
Welcome to React Native!
</Text>
</View>
);
}
export default LoginPage;
index.ios.js
import React, {Component} from 'react';
import {
AppRegistry,
View
} from 'react-native';
import LoginPage from './pages/loginPage'
class app extends Component {
render() {
return (
<View>
<LoginPage/>
</View>
);
}
}
remove the tags in index.ios.js
import React, {Component} from 'react';
import {
AppRegistry,
View
} from 'react-native';
import loginPage from './pages/loginPage'
class app extends Component {
render() {
return (
<loginPage/>
);
}
}
AppRegistry.registerComponent('app', () => app);