It's been two days that I'm stuck in this problem. I can't figure how to resolve this. I know the error is that I can't use this.porps there, but I don't know how to fix. I couldn't find a solution anywhere.
This is my Navigator config:
import React from 'react';
import {createStackNavigator, createAppContainer} from 'react-navigation';
import LoginScreen from './screens/auth/Login';
import CadastroScreen from './screens/auth/Cadastro';
class Login extends React.Component {
render() {
return (
<LoginScreen />
);
}
}
class Cadastro extends React.Component {
render()
{
return (
<CadastroScreen />
);
}
}
const AppNavigator = {
Cadastro: {
screen: Cadastro,
navigationOptions: { header: null }
},
Login: {
screen: Login,
navigationOptions: { header: null }
},
};
const Config = {
initialRouteName: 'Login'
}
const AppNavigation = createStackNavigator(AppNavigator, Config);
export default createAppContainer(AppNavigation);
This is how I'm trying to change screens:
import React from 'react';
import {Text, View, Button, Alert, TextInput, Image, TouchableOpacity} from 'react-native';
import { StackActions, NavigationActions } from 'react-navigation';
import Patern from '../style/Style';
class LoginScreen extends React.Component {
render() {
return (
<View style={Patern.container}>
<TouchableOpacity onPress={() =>
this.props.navigation.dispatch(
StackActions.reset({
routeName: 'Cadastro',
index: 0,
actions:
NavigationActions.navigate({ routeName: 'Cadastro' })
}))}>
</TouchableOpacity>
</View>
);
}
}
export default LoginScreen;
class Login extends React.Component {
render() {
return (
<LoginScreen navigatoin={this.props.navigation} />
);
}
}
You need to pass the props from Login to LoginScreen.
Navigation prop is only passed to one depth from Navigator.
Related
I got react native app with such structure:
./App.js
./screens/AppNavigator.js
./screens/SignInScreen.js
./screens/HomeScreen.js
./screens/FavoritesScreen.js
App.js:
import { createAppContainer } from "react-navigation";
import AppNavigator from './screens/AppNavigator';
const AppContainer = createAppContainer(AppNavigator);
export default class App extends React.Component {
render() {
return (
<View>
<AppContainer/>
</View>
);
}
}
screens/AppNavigator.js:
import { createSwitchNavigator, createBottomTabNavigator } from 'react-navigation';
import SignInScreen from './SignInScreen';
import HomeScreen from './HomeScreen';
import FavoritesScreen from './FavoritesScreen';
const AppBottomTabNavigator = createBottomTabNavigator({
Home: {
screen: HomeScreen
},
Favorites: {
screen: FavoritesScreen
}
},
{
initialRouteName: 'Home',
});
export default createSwitchNavigator(
{
App: AppBottomTabNavigator,
Auth: SignInScreen
},
{
initialRouteName: 'SignInScreen',
}
);
screens/SignInScreen.js:
export default class SignInScreen extends React.Component {
render() {
return (
<View>
<Button title="Continue w/o sing in..." onPress={this.toApp} />
</View>
);
}
toApp = () => {
this.props.navigation.navigate('App'); // from here I try to navigate to Home screen
};
}
And when I try to navigate to HomeScreen from SignInScreen I see white screen instead of HomeScreen, though all other navigation works well.
The problem do not occur if in screens/AppNavigator.js I change createBottomTabNavigator to createSwitchNavigator, got no idea why. A problem also do not appear if in screens/AppNavigator.js I navigate direct to HomeScreen or FavoritesScreen instead of AppBottomTabNavigator.
I found this thread on github, but, as I understand, it's not related for me, because both AppBottomTabNavigator and SignInScreen are childs of AppNavigator.
So, what is weong with my code?
The problem is in de App.js. For some reason you can't put a BottomTabNavitation inside a View Component, so remove. Like this:
export default class App extends React.Component {
render() {
return (
<AppContainer/>
);
}
}
You should also change the parameter initialRoutName in createSwitchNavigator. You have to put the routName, in this case Auth.
export default createSwitchNavigator(
{
App: AppBottomTabNavigator,
Auth: SignInScreen
},
{
initialRouteName: 'Auth',
}
);
My problem is That I want to access a Container in a component but it seems to be undefined.
undefined alert image
I am using Unstated and as you can see this is my code in the container file (login-container.js):
import { Container } from 'unstated'
class LoginContainer extends Container {
constructor(props){
super(props)
this.state = {
stepNumber: 0,
}
}
}
export default new LoginContainer()
And this is app.js:
import React, { Component } from 'react'
import { createStackNavigator, createSwitchNavigator } from 'react-navigation'
import { Provider } from 'unstated'
import LoginContainer from './containers/login-container'
import Home from './screens/home'
import Splash from './screens/splash'
import Login from './screens/login'
import Intro from './screens/intro'
export default class App extends Component {
render() {
return (
<Provider inject={[LoginContainer]}>
<AuthStack/>
</Provider>
)
}
}
const SplashStack = createStackNavigator(...)
const AppStack = createStackNavigator(...)
const AuthStack = createStackNavigator(
{
Intro: { screen: Intro},
Login: { screen: Login}
},
{
headerMode: "none",
initialRouteName: "Intro"
}
)
const SwitchNavigator = createSwitchNavigator(...)
And this would be login.js:
import React, { Component } from 'react'
import { Text, View } from 'react-native'
export default class Login extends Component {
constructor(props){
super(props)
}
render() {
// const { state: {stepNumber} } = this.props.loginContainer
alert(this.props.LoginContainer)
return (
<View>
<Text> someText </Text>
</View>
)
}
}
I previously tried to use Subscribe component to inject the container to my app but I got the same thing I am getting here.
Using
- react-native 0.58.6
- react-navigation 2.13.0 (due to some bugs in v3)
- unstated 2.1.1
What's really great about Unstated is how simple it is to implement.
Just wrap your render component in Unstated's <Subscribe to></Subscribe> tags and you're good to go. Whenever you setState() in the Container, all Components that Subscribe to it get re-rendered with the Container's updated state property values available to them.
import React, { Component } from 'react';
import { Text, View } from 'react-native';
import { Subscribe } from 'unstated';
import LoginContainer from './containers/login-container';
export default class Login extends Component {
constructor(props){
super(props)
}
render() {
return (
<Subscribe to={[LoginContainer, AnotherContainer]}>
{(container, another) => (
<View>
<Text>{container.state.stepNumber}</Text>
</View>
})
</Subscribe>
);
}
}
UPDATE: Or do it in this HOC way. After creating this:
WithUnstated.js
import React, { PureComponent } from "react";
import { Subscribe } from "unstated";
import DefaultStore from "../store/DefaultStore";
const withUnstated = (
WrappedComponent,
Stores = [DefaultStore],
navigationOptions
) =>
class extends PureComponent {
static navigationOptions = navigationOptions;
render() {
return (
<Subscribe to={Stores}>
{(...stores) => {
const allStores = stores.reduce(
(acc, v) => ({ ...acc, [v.displayName]: { ...v } }),
{}
);
return <WrappedComponent {...allStores} {...this.props} />;
}}
</Subscribe>
);
}
};
export default withUnstated;
Then wrap your component like so:
import React, { Component } from 'react';
import { Text, View } from 'react-native';
import { Subscribe } from 'unstated';
import LoginContainer from './containers/login-container';
import AnotherContainer from './containers/another-container';
class Login extends Component {
constructor(props){
super(props)
}
render() {
const {LoginContainer: container} = this.props;
return (
<View>
<Text>{container.state.stepNumber}</Text>
</View>
);
}
}
export default withUnstated(Login, [LoginContainer, AnotherContainer])
My code is as follows:
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import {LoginNavigator} from './src/components/login/LoginNavigator'
import {MainNavigator} from './src/components/main/MainNavigator'
import FBSDK from 'react-native-fbsdk'
import {createSwitchNavigator} from 'react-navigation'
const { AccessToken } = FBSDK
export default class App extends Component {
constructor(props) {
super(props)
this.state = {
accessToken: null
}
}
componentDidMount() {
AccessToken.getCurrentAccessToken()
.then((data) => {
this.setState({
accessToken: data.accessToken
})
})
.catch(error => {
console.log(error)
})
}
render() {
const Navigator = makeRootNavigator(this.state.accessToken)
return <Navigator />
}
}
const makeRootNavigator = (isLoggedIn) => {
return createSwitchNavigator(
{
LoginNavigator: {
screen: LoginNavigator
},
MainNavigator: {
screen: MainNavigator
}
},
{
initialRouteName: isLoggedIn ? "MainNavigator" : "LoginNavigator"
}
)
}
and I'm getting the error above. Since my Navigators depend on the variables created in construtor, I needed to do it via render(). Following react-native documentation on application containers didn't help.
In react-navigation v3, you must wrap makeRootNavigator with createAppContainer. Change your code to :
render() {
const Navigator = createAppContainer(makeRootNavigator(this.state.accessToken));
return <Navigator />
}
and don't forget to import createAppContainer on top of the file
import {createSwitchNavigator, createAppContainer} from 'react-navigation'
This is working solution for above problem
import { createStackNavigator } from 'react-navigation-stack'
import Login from './src/Login';
import Fruits from './src/Fruits';
import FruitZoom from './src/FruitZoom';
import {createAppContainer } from 'react-navigation';
import React from 'react';
const AppNavigator = createStackNavigator({
Login: { screen:Login},
Fruits: { screen: Fruits},
FruitZoom: { screen: FruitZoom}
}, {
initialRouteName: 'Login',
headerMode: 'none'
});
const Apps = createAppContainer(AppNavigator);
export default class App extends React.Component {
render() {
return <Apps />;
}
}
I am new to react native. Please help.
Below code is from https://reactnavigation.org/docs/intro/
import React from 'react';
import {
AppRegistry,
Text,
} from 'react-native';
import { StackNavigator } from 'react-navigation';
class HomeScreen extends React.Component {
static navigationOptions = {
title: 'Welcome',
};
render() {
return <Text>Hello, Navigation!</Text>;
}
}
export default const SimpleApp = StackNavigator({
Home: { screen: HomeScreen },
});
// if you are using create-react-native-app you don't need this line
AppRegistry.registerComponent('SimpleApp', () => SimpleApp);
and it show
C:/Users/user/Desktop/AwesomeProject/App.js: Unexpected token (42:15) at C:\Users\user\Desktop\AwesomeProject\App.js:42:15
you should remove export default
import React from 'react';
import {
AppRegistry,
Text,
} from 'react-native';
import { StackNavigator } from 'react-navigation';
class HomeScreen extends React.Component {
static navigationOptions = {
title: 'Welcome',
};
render() {
return <Text>Hello, Navigation!</Text>;
}
}
const SimpleApp = StackNavigator({ // remove export default
Home: { screen: HomeScreen },
});
// if you are using create-react-native-app you don't need this line
AppRegistry.registerComponent('SimpleApp', () => SimpleApp);
I try to use navigation between screen in my RN app. This is my code :
INDEX.ANDROID.JS :
import React, { Component } from 'react';
import {
AppRegistry,
Text,
View ,
Button
} from 'react-native';
import {StackNavigator} from 'react-navigation';
import Login from './app/components/Todo';
const SimpleApp = StackNavigator({
Login: { screen: Todo },
});
export default class aap extends Component {
static navigationOptions = { title: 'Welcome', };
render() {
const { navigate } = this.props.navigation;
return (
<Button onPress ={() => navigate('Todo') } title="go"/>
);
}
}
AppRegistry.registerComponent('aap', () => aap);
here is the code of the second screen TODO.JS
import React, { Component } from 'react';
import {
AppRegistry,
Text,
View ,
Button
} from 'react-native';
export default class Todo extends Component {
render() {
return (
<View>
<Text>
Here is my text
</Text>
</View>
);
}
}
When running my code i get an error : undefined is not an object this.props.naviagtion.
Any help is appreciated
You are not using StackNavigator correctly.
Like #xght said, you should be registering SimpleApp instead of aap. Also, you should be using aap as the initial route to your StackNavigator SimpleApp.
This should look something like this:
import React, { Component } from 'react';
import {
AppRegistry,
Text,
View ,
Button
} from 'react-native';
import {StackNavigator} from 'react-navigation';
import Todo from './app/components/Todo';
class aap extends Component {
static navigationOptions = { title: 'Welcome', };
render() {
const { navigate } = this.props.navigation;
return (
<Button onPress ={() => navigate('Todo') } title="go"/>
);
}
}
const SimpleApp = StackNavigator({
Login: { screen: aap },
Todo: { screen: Todo },
});
AppRegistry.registerComponent('aap', () => SimpleApp);
You registered the wrong component, so the navigator SimpleApp doesn't pass the navigation prop to your component.
Replace
AppRegistry.registerComponent('aap', () => aap); by:
AppRegistry.registerComponent('aap', () => SimpleApp);
And also you forgot to add your aap component in SimpleApp routes. And your import Login from './app/components/Todo';is wrong: Login is the name of the route in SimpleApp, and Todo is the name of the component, so you need to replace it by import Todo...