Navigation outside render function - react-native

I have a function to navigate to different component by checking in Async storage.
Here is my Loading Page Code:
import React from 'react';
import {
View,
Text
} from 'react-native';
import { AsyncStorage } from 'react-native';
export class LoadingScreen extends React.Component{
componentDidMount(){
async()=>{
try{
const usertoken = await AsyncStorage.getItem('token');
if(usertoken !== null ){
return this.props.navigation.navigate('Login');
}else{
return this.props.navigation.navigate('Register');
}
}catch(error){
this.props.navigation.navigate('Register')
}
};
}
render(){
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>This is loading...</Text>
</View>
);
}
}
But while running the app its not navigating to another Screen.
What am I doing wrong?
This is my register component:
import React , { Component } from 'react';
import {
View,
Text
} from 'react-native';
import { withNavigation } from 'react-navigation';
class RegisterScreen extends Component {
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Register Screen</Text>
</View>
);
}
}
export default withNavigation(RegisterScreen);

Export both Login and Register using withNavigation. Like below.
import React, { Component } from 'react'
import { Text, View } from 'react-native'
import { withNavigation } from 'react-navigation';
class Login extends Component {
render() {
return (
<View>
<Text> Login </Text>
</View>
)
}
}
export default withNavigation(Login);

Related

Problem when run onpress fonction : react navigation

I would just like to be redirected to my "Profile" page when I click on the "Enter" button. I don't know if this is the correct method but my homepage is App.js and it contains my button and my image. Sorry for the mistakes I am a beginner and moreover French!
app.js
import 'react-native-gesture-handler';
import React from 'react';
import DisplayAnImage from './Components/DisplayAnImage';
import Profile from './Components/Profile';
import { Enter } from './Components/Enter';
import { StyleSheet, Text, ScrollView } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
export default class App extends React.Component {
render() {
return (
<ScrollView style={{ flex: 1 }}>
<DisplayAnImage/>
<Enter/>
</ScrollView>
)
}
}
enter.js
import React from 'react';
import { Platform, StyleSheet, Text, View, Image, Button, Alert, SafeAreaView } from 'react-native';
import Profile from './Profile.js';
import { createStackNavigator } from '#react-navigation/stack';
import { StackNavigator } from 'react-navigation';
export const Enter = ({ navigation }) => {
return (
<SafeAreaView style={styles.Button}>
<View>
<Button
title="Entrer"
color="#FFFFFF"
onPress={() => this.props.navigation.navigate('Profile')}
/>
</View>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
Button: {
flex: 1,
marginHorizontal: 120,
borderRadius: 20,
backgroundColor: '#1067b3'
},
title: {
textAlign: 'center',
marginVertical: 8,
},
fixToText: {
flexDirection: 'row',
justifyContent: 'space-between',
},
separator: {
marginVertical: 8,
borderBottomColor: '#737373',
borderBottomWidth: StyleSheet.hairlineWidth,
},
});
profile.js
import React, {Component} from 'react';
import { View, Text } from 'react-native';
export default class Profile extends React.Component {
render() {
return (
<View>
<Text>Profile</Text>
</View>
);
}
}
Thank you very much for your help
You are calling "this" from your functional component. Please change this
onPress={() => this.props.navigation.navigate('Profile')}
to
onPress={() => navigation.navigate('Profile')}

Unable to move to required screen using react-navigation?

I want to move to a different screen when I have some AsyncStorage item for authFlow but when I am going to the next screen and construction is calling out the function it is not moving to the next screen.
I tried to use the basic method this.props.navigation.navigate('navigator_name'), but i think it's not moving as blank screen is appearing.
App.js
------
import React from 'react';
import { StyleSheet, View, Text } from 'react-native';
import { createSwitchNavigator, createAppContainer, } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import AuthLoadingScreen from './screens/auth-loading-screen';
import WelcomeScreen from './screens/welcomeScreen';
import AppHomeScreen from './screens/app-home-screen';
const AuthStackNavigator = createStackNavigator({
welcome: WelcomeScreen
})
// export default
const TestContainer = createAppContainer(createSwitchNavigator({
AuthLoading: AuthLoadingScreen,
Auth: AuthStackNavigator,
App: AppHomeScreen,
},
{
initialRouteName: 'AuthLoading',
}
))
export default class App extends React.Component {
constructor () {
super()
this.state = {
loggedIn: 'false',
}
}
render() {
return(
<View style={styles.container}>
<TestContainer />
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
auth-loading-screen
-------------------
import React, { Component } from 'react';
import { View, Text, StyleSheet, ActivityIndicator, AsyncStorage } from 'react-native';
export default class AuthLoadingScreen extends Component {
constructor (props) {
super(props);
console.log('calling _loadApp')
this._loadApp();
}
_loadApp = async() => {
const userToken = await AsyncStorage.getItem('userToken');
console.log('getting value of token ', userToken, JSON.stringify(this.props.navigation.actions))
this.props.navigation.navigate(userToken ? 'App' : 'Auth')
}
render() {
return (
<View style={styles.container}>
<ActivityIndicator />
</View>
)
}
}
const styles = StyleSheet.create ({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
}
})
welcomeScreen
-------------
import React, { Component } from 'react';
import { View, Text, StyleSheet, Button} from 'react-native';
export default class WelcomeScreen extends Component {
constructor (props) {
super(props);
}
render() {
return (
<View style={styles.container}>
<Text>Welcome</Text>
</View>
)
}
}
const styles = StyleSheet.create ({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
}
})
The screen should directly move to the welcomeScreen as item is not set through AsynStorage
Your function is asynchronous. However, the constructor cannot execute the asynchronous function. Therefore, you should change the position of executing the function.
async componentDidMount() {
await this._loadApp();
}

Unable to get tab bar from react-navigation working

I want to show tab bar in my react-native app using react-navigation library. I've tried code from an example provided in the documentation. However, when I run the code on iOS simulator the screen appears to be blank, tab bar doesn't load.
Here's my code so far,
TabNavigator.js
import React from 'react';
import { Text, View } from 'react-native';
import { createBottomTabNavigator, createAppContainer } from 'react-navigation';
class HomeScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Home!</Text>
</View>
);
}
}
class SettingsScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Settings!</Text>
</View>
);
}
}
const TabNavigator = createBottomTabNavigator(
{
Home: HomeScreen,
Settings: SettingsScreen,
},
{
initialRouteName: "Home"
}
);
export default createAppContainer(TabNavigator);
App.js
import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { createBottomTabNavigator } from 'react-navigation';
import TabNavigator from './components/TabNavigator';
const App = () => {
return (
<View>
<TabNavigator />
</View>
);
};
export default App;
Looking at the App.js code, you forgot to put flex:1 to the view, it's one of the common mistakes that react-navigation tells about in his documentation.
const App = () => {
return (
<View style={ { flex:1} }>
<TabNavigator />
</View>
);
};
Source: https://reactnavigation.org/docs/en/common-mistakes.html#wrapping-appcontainer-in-a-view-without-flex

How to correctly import 'NavigatorIOS'

I'm getting an error when trying to load my React-Native App. It seems to be related to NavigatorIOS being undefined. When I try to use a text component, that works fine, so is the problem specific to how I'm using NavigatorIOS?
/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* #format
* #flow
*/
import React, {Fragment, Component} from 'react';
import {
SafeAreaView,
StyleSheet,
ScrollView,
View,
NavigatorIOS,
Text,
StatusBar,
} from 'react-native';
import {
Header,
LearnMoreLinks,
Colors,
DebugInstructions,
ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
class SearchPage extends Component<{}> {
render() {
return (<Text style={styles.description}>Search for houses to buy! (Again)</Text>);
}
};
console.log(NavigatorIOS)
export default class App extends Component<{}> {
render() {
return (
<NavigatorIOS
initialRoute={{
component: SearchPage,
title: 'My Initial Scene',
}}
style={{flex: 1}}
/>
);
}
}
const styles = StyleSheet.create({
description: {
fontSize: 18,
textAlign: 'center',
color: '#656565',
marginTop: 65,
},
container: {
flex: 1,
},
});
I'm getting an error as follows:
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 App.
NavigatorIOS is Deprecated since 0.6.
Learn about alternative navigation solutions at http://facebook.github.io/react-native/docs/navigation.html
Example react-navigation:
/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* #format
* #flow
*/
'use strict';
import React,{Component} from 'react';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import {
SafeAreaView,
StyleSheet,
ScrollView,
View,
Button,
Text,
StatusBar,
} from 'react-native';
import {
Header,
LearnMoreLinks,
Colors,
DebugInstructions,
ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
class HomePage extends Component<{}> {
render() {
return <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
<Button title="Go to SecondPage" onPress={() => this.props.navigation.push('SecondPage')}/>
</View>
}
};
class SecondPage extends Component<{}> {
render() {
return <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
<Text style={styles.description}>Second Page</Text>
<Button title = "Go to Third Page" onPress={() => this.props.navigation.navigate('ThirdPage')}> </Button>
</View>
}
};
class ThirdPage extends Component<{}> {
render() {
return <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
<Text style={styles.description}>Third Page</Text>
<Button title = "Go to Home Page" onPress={() => this.props.navigation.navigate('Home')}> </Button>
</View>
}
};
const AppNavigator = createStackNavigator(
{
Home : HomePage,
SecondPage : SecondPage,
ThirdPage : ThirdPage,
},
{
initialRouteName: 'Home',
}
);
const Appcontainer = createAppContainer(AppNavigator);
export default class App extends Component<{}> {
render() {
return <Appcontainer />;
}
}
const styles = StyleSheet.create({
description: {
fontSize: 18,
textAlign: 'center',
color: '#656565',
marginTop: 65,
},
container: {
flex: 1,
},
});

Trying to navigate to another screen based on text click, but got an error "undefined is not an object (evaluation navigate.navigateToScreen)"

I've been trying to navigate from Text to another screen but this error pops up, can anyone please help
This is a testing sheet for a bigger problem I have posted here Navigate when clicking on image doesn't work , I am trying to structure my code to navigate from an Image to a page. Thanks for helping
import React from 'react';
import { AppRegistry, StyleSheet, View, Image, TouchableOpacity, Text } from "react-native";
import { createAppContainer, createStackNavigator, StackActions, NavigationActions } from 'react-navigation'; // Version can be specified in package.json
import AddDocScreen from './Menu/AddDocScreen'
export default class Mock extends React.Component {
render() {
const navigate = this.props.navigation
return (
<View style={styles.container}>
<TouchableOpacity
onPress={() => navigate.navigateToScreen(navigationAction)}>
<View><Text>Click Me</Text></View>
</TouchableOpacity>
</View>
)
}
}
const navigationAction = NavigationActions.navigate({
routeName: 'AddDocSreen',
})
function navigateToScreen(navigationAction) {
() => {
return navigationAction
}
}
const doc = createStackNavigator({
AddDocScreen: { screen: AddDocScreen },
});
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'rgba(215,215,215,1)',
alignItems: 'center',
justifyContent: 'center',
},
})
Use it like this:
import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { createStackNavigator, createAppContainer } from 'react-navigation';
import AddDocScreen from './Menu/AddDocScreen'
class Mock extends React.Component {
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center',backgroundColor: 'rgba(215,215,215,1)'}}>
<Text>Home Screen</Text>
<TouchableOpacity onPress={() => this.props.navigation.navigate('Details')}>
<View><Text>Click Me</Text></View>
</TouchableOpacity>
</View>
);
}
}
const RootStack = createStackNavigator(
{
Mock: Mock,
AddDocScreen: AddDocScreen,
{
initialRouteName: 'Mock',
}
);
const AppContainer = createAppContainer(RootStack);
export default class App extends React.Component {
render() {
return <AppContainer />;
}
}