I'm having trouble nesting a react-navigation StackNavigator within a component - as detailed here https://reactnavigation.org/docs/intro/nesting#Nesting-a-Navigator-in-a-Component
However, even after following the guide to a T, I'm getting the following error -
route 'Home' should declare a screen
Here is my "GoHome.js" component which, in reference to the guide on https://reactnavigation.org, is the "NavigatorWrappingScreen"
/* #flow */
import React, { Component } from 'react';
import {
View,
Text,
StyleSheet,
} from 'react-native';
import { Constants, Location, Permissions } from 'expo';
import MainNavigator from '../navigation/MainNavigator';
import AppInfo from '../components/AppInfo/AppInfo';
import { MainStyle } from '../stylesheets/MainStyle';
export default class GoHome extends Component {
constructor(props){
super(props);
}
static navigationOptions = {
header: null,
};
componentWillMount(){
this._getLocationAsync();
}
_getLocationAsync = async () => {
let { status } = await Permissions.askAsync(Permissions.LOCATION);
if (status !== 'granted') {
console.log('Error - location access denied');
}else{
let location = await Location.getCurrentPositionAsync({});
console.log(location);
}
}
render() {
return (
<Image style = {MainStyle.imageContainer} source = {require('../assets/bg/bg_main.jpg')}>
<AppInfo />
<MainNavigator navigation = {this.props.navigation} />
</Image>
);
}
}
const styles = StyleSheet.create({
});
GoHome.router = MainNavigator.router;
And here is my MainNavigator.js component, which is the "MainScreenNavigator" component in the guide.
/* #flow */
import React, { Component } from 'react';
import {
View,
Text,
StyleSheet,
Image
} from 'react-native';
import { StackNavigator } from 'react-navigation';
import Register from '../components/Register/Register';
import Password from '../components/Password/Password';
import AppInfo from '../components/AppInfo/AppInfo';
import { MainStyle } from '../stylesheets/MainStyle';
import GoHome from '../screens/GoHome';
const NavigatorMain = StackNavigator({
Home: {
screen: GoHome
},
Register: {
screen: Register
},
Password: {
screen: Password
}
});
// export default class MainNavigator extends Component {
// render() {
// return (
// <NavigatorMain />
// );
// }
// }
const styles = StyleSheet.create({
});
export default NavigatorMain;
Any help AT ALL would be greatly appreciated.
TIA
Related
I am attempting to write a sign in screen within React-Native, but I got the error following:
enter image description here
my SignInScreen code:
import React from 'react';
import {
View,
Text,
TouchableOpacity,
TextInput,
Platform,
StyleSheet ,
StatusBar,
Alert
} from 'react-native';
import * as Animatable from 'react-native-animatable';
import LinearGradient from 'react-native-linear-gradient';
import FontAwesome from 'react-native-vector-icons/FontAwesome';
import Feather from 'react-native-vector-icons/Feather';
import { useTheme } from 'react-native-paper';
import { AuthContext } from '../components/context';
import Users from '../model/users';
const SignInScreen = ({navigation}) => {
const [data, setData] = React.useState({
username: '',
password: '',
check_textInputChange: false,
secureTextEntry: true,
isValidUser: true,
isValidPassword: true,
});
const { colors } = useTheme();
const { signIn } = React.useContext(AuthContext);
const textInputChange = (val) => {
if( val.trim().length >= 4 ) {
setData({
...data,
username: val,
check_textInputChange: true,
isValidUser: true
});
} else {
setData({
...data,
username: val,
check_textInputChange: false,
isValidUser: false
});
}
}
my context.js:
import React from 'react';
export const AuthContext = React.createContext();
my app.js:
import * as React from 'react';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
import SignInScreen from "./screens/SignInScreen";
export default function App() {
return <SignInScreen/>;
}
I am just wondering is it missing some components and how do I fix it? And I already tried to reinstall my packages.
You need to provide the signIn function to the context somewhere. Typically, this is achieved with a context provider. You can find some more information in the docs. It may look something like this:
import React from 'react';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
import SignInScreen from "./screens/SignInScreen";
export const AuthContext = React.createContext();
const signIn = () => {
// ... sign into an account or something
}
export default function App() {
return (
<AuthContext.Provider value={{signIn}}>
<SignInScreen/>
</AuthContext.Provider>
)
}
However, it may be worth reading through the docs and considering why you are using context here as this is not often how a sign-in function works in React/React-Native.
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);
running my react app gives error in navigationOptions() but it is working fine in render() function
App.js
import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';
import AppNavigator from './routs.js'
class App extends Component {
render() {
return (
<AppNavigator />
)
}
}
export default App
routs.js
import React from 'react'
import Home from './home.js'
import Phone from './phone.js'
import PhoneScreen from './phoneScreen.js'
import {createStackNavigator, createAppContainer} from 'react-navigation';
const MainNavigator = createStackNavigator({
home: {screen: Home},
add: {screen: Phone},
userScreen: {screen: PhoneScreen},
});
const AppNavigator = createAppContainer(MainNavigator);
export default AppNavigator;
home.js
import React from 'react'
import { TouchableOpacity, Text, View, TouchableHighlight, StyleSheet, Button } from 'react-native';
import { Actions } from 'react-native-router-flux';
import {AsyncStorage} from 'react-native';
class Home extends React.Component {
constructor(props) {
super(props);
}
static navigationOptions = {
headerTitle: 'Contacts',
headerRight: (
<Button
onPress={() => this.props.navigation.navigate('add')}
title="create new contact"
color="#000000"
size="20"
/>
),
};
}
export default Home;
"undefind is not an object(evaluating '_this3.props.navigation')"
please give solution
From the React Navigation Docs:
The binding of this in navigationOptions is not the HomeScreen
instance, so you can't call setState or any instance methods on it.
This is pretty important because it's extremely common to want the
buttons in your header to interact with the screen that the header
belongs to.
So, as you can see, this is not what you think it is in this case. Here's more from the docs detailing a working example:
class HomeScreen extends React.Component {
static navigationOptions = ({ navigation }) => {
return {
headerTitle: <LogoTitle />,
headerRight: (
<Button
onPress={navigation.getParam('increaseCount')}
title="+1"
color="#fff"
/>
),
};
};
componentDidMount() {
this.props.navigation.setParams({ increaseCount: this._increaseCount });
}
state = {
count: 0,
};
_increaseCount = () => {
this.setState({ count: this.state.count + 1 });
};
/* later in the render function we display the count */
}
As you can see, changing navigationOptions from an object into a function allows you to grab the navigation reference. From there you can successfully navigate.
I want to navigate a splash screen to next screen after certain timeout. Splash screen have an animation, done with the help of Airbnb Lottie for React Native.
The splashscreen code goes as follows:
import React from "react";
import { Animated, Easing } from "react-native";
import LottieView from "lottie-react-native";
import { NavigationActions } from "react-navigation";
export default class SplashScreen extends React.Component {
static navigationOptions = {
header: null
};
constructor() {
super();
this.state = {
progress: new Animated.Value(0),
}
}
componentDidMount() {
setTimeout(() => {
this.navigateToWalkthrough()
}, 3500);
Animated.timing(this.state.progress, {
toValue: 1,
duration: 3000,
easing: Easing.linear,
}).start();
}
navigateToWalkthrough = () => {
const navigateAction = NavigationActions.reset({
index: 0,
actions: [NavigationActions.navigate({ routeName: "Walkthrough" })],
});
this.props.navigation.dispatch(navigateAction);
}
render() {
return(
<LottieView
source={require("../assets/splash/SplashScreenAnimation.json")}
progress={this.state.progress}
/>
);
}
}
After I run the app following errors comes up:
undefined is not a function (evaluating'_reactNavigation.NavigationActions.reset')
The Main.js file looks like as follows:
import React from "react";
import { View, Text } from "react-native";
import { createStackNavigator } from "react-navigation";
import SplashScreen from "./screens/SplashScreen";
import Walkthrough from "./screens/Walkthrough";
const Routes = createStackNavigator({
Home: {
screen: SplashScreen
},
Walkthrough: {
screen: Walkthrough
}
});
export default class Main extends React.Component {
render() {
return <Routes />;
}
}
Any help/feedback?
reset action is removed from NavigationActions and there is StackActions specific to StackNavigator in v2 of react-navigation.
StackActions is an object containing methods for generating actions
specific to stack-based navigators. Its methods expand upon the
actions available in NavigationActions.
The following actions are supported:
Reset - Replace current state with a new state
Replace - Replace a route at a given key with another route
Push - Add a route on the top of the stack, and navigate forward to it
Pop - Navigate back to previous routes
PopToTop - Navigate to the top route of the stack, dismissing all other routes
import { StackActions, NavigationActions } from 'react-navigation';
navigateToWalkthrough = () => {
const navigateAction = StackActions.reset({
index: 0,
actions: [NavigationActions.navigate({ routeName: "Walkthrough" })],
});
this.props.navigation.dispatch(navigateAction);
}