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 !
Related
Hello Every one I am new to react native I am building a very simple navigation system but i am getting this error.Please any one guide me
enter image description here
The screenshot attached above is the error i am running on my physical android phone S7 edge Oreo 8.0
***Homescreen.js***
import React from "react";
import { Text, StyleSheet } from "react-native";
const HomeScreen = () => {
return <Text style={styles.text}>Hello World</Text>;
};
const styles = StyleSheet.create({
text: {
fontSize: 30
}
});
***App.js***
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import HomeScreen from './src/screens/HomeScreen'
import ComponentsScreen from './src/screens/ComponentsScreen'
const navigator = createStackNavigator(
{
Home: HomeScreen,
Components:ComponentsScreen
},
{
initialRouteName: 'Components',
defaultNavigationOptions: {
title: "App"
}
}
);
export default createAppContainer(navigator);
***ComponentsScreen.js***
import React from 'react'
import {Text,StyleSheet} from 'react-native'
const ComponentsScreen=function(){
return <Text style={styles.textStyle}>This is the Components Screen</Text>
}
const styles=StyleSheet.create({
textStyle:{
fontSize:30
}
})
I had tried you code its working perfectly just add exports in your HomeScreen and ComponentsScreen:
import React from "react";
import { Text, StyleSheet } from "react-native";
const HomeScreen = () => {
return <Text style={styles.text}>Hello World</Text>;
};
export default HomeScreen;
const styles = StyleSheet.create({
text: {
fontSize: 30
}
});
ComponentsScreen:
import React from 'react'
import {Text,StyleSheet} from 'react-native'
const ComponentsScreen=function(){
return <Text style={styles.textStyle}>This is the Components Screen</Text>
}
export default ComponentsScreen;
const styles=StyleSheet.create({
textStyle:{
fontSize:30
}
})
And make sure you have correct name declaration you had declared Homescreen component as Homescreen, where s is small but you are importing in your App.js with caps, check this.
Hope this helps!
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 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);
I've recently ran into an issue with React Native Navigation that I cannot seem to solve.
I'm trying to organize my stacks by placing different stacks for different components in different files and then bringing them all together in the router.js file that I have created in config/router.js.
I keep getting this error
undefined is not a function (near '...(0, _reactNativeNavigation.createStackManager)...')
My router.js looks like this
import { createBottomTabNavigator } from 'react-navigation';
import Icon from 'react-native-vector-icons/Ionicons';
import { MapStack } from '../components/MapStack';
export const HomeViewTabs = createBottomTabNavigator({
Map: {
screen: MapStack,
navigationOptions: {
tabBarIcon: ({tintColor}) => (
<Icon name="ios-navigate" size={24} color={tintColor}/>
)
}},
}, {
initialRouteName: 'Map',
});
and my imported MapStack.js
import { createStackNavigator } from 'react-native-navigation';
import Map from '../screens/Map';
import BoxOverview from '../screens/BoxOverview';
export const MapStack = createStackNavigator({
Map: { screen: Map },
BoxOverview: { screen: BoxOverview},
});
My index.js
import React, { Component } from 'react';
import { HomeViewTabs } from './config/router';
class App extends Component {
render() {
return <HomeViewTabs />;
}
}
export default App;
Any help would be appreciated and any tips on my styling is also appreciated!
Edit:
Added photo of error for clarity
File Structure
app/
+--components/
+----MapStack.js
+--config/
+----router.js
+--screens/
+----Box.js
+----BoxOverview.js
Solution:
I was importing the wrong React Navigation module in my MapStack.js file. It was supposed to be import { createStackNavigation } from 'react-navigation' and I had the module set as 'react-native-navigation'...
In MapStack.js change this
import { createStackNavigator } from 'react-native-navigation';
To this
import { createStackNavigator } from 'react-navigation';
Found this solution after my friend pointed out that my imported module name was incorrect...
Looks like you're not importing the proper navigator in your router:
import { createStackNavigator } from 'react-navigation';
should be: import { createBottomTabNavigator } from 'react-navigation';
I am currently working on a app which works with react native and I tried to make a flow using react-navigation working on this tutorial but I am having trouble at the point of running my project, I've done a lot of research and i just cant get to the solution, first for all I am using react-native-cli: 2.0.1 and react-native: 0.48.3, this is my code:
App.js:
import React, { Component } from 'react';
import { Text, Button, View } from 'react-native';
import {
StackNavigator,
} from 'react-navigation';
class App extends Component {
static navigationOptions = {
title: 'Welcome',
};
render() {
console.log(this.props.navigation);
const { navigate } = this.props.navigation;
return (
<View>
<Text>Go to maps!</Text>
<Button
onPress={() => navigate('Map')}
title="MAP"
/>
</View>
);
}
}
export default App;
my Router.js
import {
StackNavigator,
} from 'react-navigation';
import MapMarker from './MapMarker';
import App from './App';
export const UserStack = StackNavigator({
ScreenMap:
{
screen: MapMarker,
navigationOptions:
{
title: "Map",
header:null
},
},
ScreenHome:
{
screen: App,
navigationOptions:
{
title: "Home",
headerLeft:null
},
},
});
As you can see this is a pretty basic App which i just cant make work, this is a screenshot of my error on the simulator:
I would really really appreciate if you guys could help me with this.
Thanks.
You should change the code onPress={() => navigate('Map')} to onPress={() => navigate('ScreenMap')} and ScreenHome should be the first screen then ScreenMap as you want to navigate from App to MapMarker. Or you can set initialRouteName: ScreenHome in the stacknavigator.
You create your StackNavigator, but where do you use it? You should have something like
import React, { Component } from 'react';
import {
AppRegistry,
View
} from 'react-native';
import {
StackNavigator,
} from 'react-navigation';
export default class MyApp extends Component {
render() {
return (
<View style={{flex:1}}>
<StackNavigator/>
</View>
);
}
}
AppRegistry.registerComponent('MyApp', () => MyApp);
Now that your StackNavigator is controlling what is shown, your App component will have navigation in its props. Note, you do not "pass" the navigation prop. This is handled for you.