I have 2 views and I want to move from the first one to the second one without using createStackNavigator
There´s no need to use navigation because the first view is just a welcome screen
import React from 'react';
import { View, Text, Button } from 'react-native';
class HomeScreen extends React.Component {
render() {
const { navigate } = this.props.navigation;
return (
<View>
<Text>Welcome!</Text>
<Button
title="sign In"
onPress={() => navigate('SignInScreen')}
/>
</View>
);
}
}
class SignInScreen extends React.Component {
render() {
return (
<View>
<Text>Sign In screen</Text>
</View>
);
}
}
export default HomeScreen
the error I´m getting is
TypeError: undefined is not an object (evaluating 'this.props.navigation.navigate')
thank you.
Use a flag on state. When you click the button on HomeScreen, it will change the flag to true, which will allow the conditional statement to call the SignInScreen to be rendered.
import React from 'react';
import { View, Text, Button } from 'react-native';
class HomeScreen extends React.Component {
state = {
loggedIn: false,
};
render() {
const { navigate } = this.props.navigation;
return this.loggedIn ? (
<SignInScreen />
) : (
<View>
<Text>Welcome!</Text>
<Button
title="sign In"
onPress={() => this.setState({ loggedIn: true })}
/>
</View>
);
}
}
class SignInScreen extends React.Component {
render() {
return (
<View>
<Text>Sign In screen</Text>
</View>
);
}
}
export default HomeScreen;
Related
I currently building a simple react native app which has two screens. I am using a react navigation to navigate between screens and when I tried following this guide https://reactnavigation.org/docs/en/hello-react-navigation.html, It doesn't render anything, just displaying a blank screen. Maybe I'm missing something that's why it doesn't render. Here's my js files:
App.js
import React, { Component } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import Login from './src/components/screens/login';
import Order from './src/components/screens/order';
const AppNavigator = createStackNavigator(
{
Login: Login,
Order: Order
},
{
initialRouteName: 'Login',
}
);
export default class Sales extends Component {
render() {
return (
<View>
<App />
</View>
);
}
}
login.js
class Login extends Components {
static navigationOptions = {
headerShown: false,
};
render() {
return(
<View>
<Button title="Login"
onPress={() => this.props.navigation.navigate('Order')}
/>
</View >
);
}
}
order.js
class Order extends Component {
static navigationOptions = {
headerShown: false,
};
render() {
return (
<View>
<View style={styles.button}>
<Button
title="Create Order"
color='#65639E'
/>
</View>
</View>
);
}
}
const AppNavigator = createStackNavigator(
{
Login: Login,
Order: Order
},
{
initialRouteName: 'Login',
}
);
export default class Sales extends Component {
render() {
return (
<View>
<App /> // this is worng.. As there is no app component. Never wrap
//AppNavigator inside a view
</View>
);
}
}
The right thing should be. Just trying to tempelate your requirement.
class Login extends React.Component {
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Login Screen</Text>
</View>
);
}
}
class Order extends React.Component {
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Order Screen</Text>
</View>
);
}
}
const AppNavigator = createStackNavigator({
Login: Login,
Order: Order
});
export default createAppContainer(AppNavigator);
I hope I'm able to make my point. If any confusion do mention in the comment. More than happy to help you out.
export default class Sales extends Component {
render() {
return (
<View>
<App /> // This code right here
</View>
);
}
}
You're rendering <App /> but you don't have an App Component. Maybe try using <Login />
try this
import React, { Component } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import Login from './src/components/screens/login';
import Order from './src/components/screens/order';
const AppNavigator = createStackNavigator(
{
Login: Login,
Order: Order
},
{
initialRouteName: 'Login',
}
);
class Sales extends Component {
render() {
return (
<View>
<AppNavigator /> --> pass here your navigation
</View>
);
}
}
export default createAppContainer(AppNavigator);
I'm receiving - undefined is not an object (evaluating 'this.props.navigation.navigate'). I know there are already some answers about this issue but I didn't find any for Drawer Navigator, all I found were for Stack Navigator. (I'm using react-navigation V3)
So here is my DrawerNavigator.js :
import React from 'react';
import { Platform, Dimensions, Button, View, Text } from 'react-native';
import { createDrawerNavigator, createAppContainer, StackNavigator, withNavigation } from 'react-navigation';
import {Header} from 'react-native-elements';
import Hamburger from 'react-native-animated-hamburger';
class MenuButton1 extends React.Component {
constructor(props)
{
super(props);
this.state = {
active: false,
}
}
render () {
const { navigate } = this.props.navigation;
return (
<React.Fragment>
<Hamburger active={this.state.active}
type="cross"
onPress={() => this.setState({active: !this.state.active}) || navigate('DrawerOpen')}
/>
</React.Fragment>
)
}
}
class HomeScreen extends React.Component {
render() {
return (
<React.Fragment>
<Header
leftComponent={<MenuButton1 />}
/>
<View style={{top: 30 }}>
<Text> Hello </Text>
</View>
</React.Fragment>
);
}
}
const WIDTF = Dimensions.get('window').width;
const DrawerConfig = {
drawerWidth: WIDTF*0.80,
draertType: 'slide'
}
const DrawerNavigator = createDrawerNavigator ({
HomeScreen: {
screen: HomeScreen,
}
},
DrawerConfig
);
export default createAppContainer (DrawerNavigator);
And my App.js :
import React, {Component} from 'react';
import DrawerNavigator from './components/DrawerNavigator';
export default class App extends React.Component {
render() {
return (
<React.Fragment>
<DrawerNavigator />
</React.Fragment>
);
}
}
And the issue :
enter image description here
navigation object is only available on screens that are direct children of your drawer navigator
You could wrap your MenuButton1 with withNavigation to get access to the navigation object ... or simply wrap your navigation logic in a method and pass it as a prop to your MenuButton like:
class MenuButton1 extends React.Component {
constructor(props) {
// ...
}
render() {
const { onDrawerOpen } = this.props;
return (
<React.Fragment>
<Hamburger
active={this.state.active}
type="cross"
onPress={() => this.setState({ active: !this.state.active }) || onDrawerOpen()
}
/>
</React.Fragment>
);
}
}
-
class HomeScreen extends React.Component {
render() {
return (
<React.Fragment>
<Header
leftComponent={(
<MenuButton1
onDrawerOpen={() => this.props.navigation.openDrawer()}
/>
)}
/>
<View style={{ top: 30 }}>
<Text> Hello </Text>
</View>
</React.Fragment>
);
}
}
I made a Flatlist navigate to the detail screen when a row is clicked.
I created 4 files.
file1:
index.js
import React from 'react';
import List from "./list";
import Detail from "./detail";
import { createStackNavigator, createAppContainer } from "react-navigation";
const AppNavigator = createStackNavigator({
ListScreen: {
screen: List,
},
DetailScreen: {
screen: Detail,
},
}, {
initialRouteName: 'ListScreen',
});
export default createAppContainer(AppNavigator);
And detail.js
export default class DetailScreen extends React.PureComponent {
render() {
return (
<View
<Text>Home Details!</Text>
</View>
);
}
}
list.js
import Products from "./products";
export default class ListScreen extends React.PureComponent {
...
renderItem({ item }) {
return <Products product={item}/>
}
render() {
return (
<View style={{margin:5}}>
<FlatList
data={this.state.products}
renderItem={this.renderItem}
keyExtractor={(item,index) => item.id.toString()}
/>
</View>
);
}
And Finally
products.js
export default class ProductsType2 extends React.PureComponent {
_onPress = () => {
this.props.navigation.navigate('DetailScreen', this.props.product.id);
};
render() {
const { product} = this.props;
//const { navigate } = this.props.navigation; //get error w
return (
<Card>
<CardItem cardBody button onPress={this._onPress}>
<Image
style={{height: 140, width: 140, flex: 1}}
source={{uri: product.thumbnail}} />
</CardItem>
</Card>
);
}
}
when I press it I can't get the details screen to show up.
I get this error:
Cannot read property 'navigate' of underfined
use withNavigation (HOC) to access navigation props from products.js. That component not inside of the createStackNavigator, so export your class with withNavigation method and you can access the navigation props.
import { withNavigation } from 'react-navigation';
...
export default withNavigation(ProductsType2)
https://reactnavigation.org/docs/en/connecting-navigation-prop.html
I have defined all my routes/navigations in my root component (App.js) and am trying to access one of those screens (UserScreen) from a child component(LoginScreen) on click of a button.
Here is my App.js
import React from 'react';
import { StyleSheet, Text, View, TextInput, TouchableHighlight, Button } from 'react-native';
import LoginComponent from './components/LoginComponent';
import { StackNavigator } from 'react-navigation';
class MainWelcome extends React.Component {
render() {
return (
<View>
<Text>Welcome Page</Text>
<Button
title="Login"
onPress={() => this.props.navigation.navigate('Login')}
/>
</View>
);
}
}
class LoginScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<LoginComponent />
</View>
);
}
}
class UserScreen extends React.Component {
render() {
return (
<View>
<Text>Details Screen</Text>
</View>
);
}
}
const RootStack = StackNavigator(
{
Register: {
screen: RegisterScreen,
},
Login: {
screen: LoginScreen,
},
UserPage: {
screen: UserScreen,
},
Welcome: {
screen: MainWelcome,
},
},
{
initialRouteName: 'Welcome',
}
);
export default class App extends React.Component {
render() {
return (
<RootStack />
);
}
}
This is my LoginComponent.js
import React from 'react';
import { StyleSheet, Text, View, TouchableHighlight, TextInput, StackNavigator } from 'react-native';
class LoginComponent extends React.Component {
constructor(){
super();
this.state = {
loginusername: '',
loginpassword: '',
isloggedin: false,
loggedinuser: null,
}
}
render() {
return (
<View>
<Text>Please Log In</Text>
<View>
<TextInput
placeholder="USERNAME"
placeholderTextColor = 'black'
onChangeText={(loginusername) => this.setState({loginusername})}
/>
<TextInput
placeholder="Password"
placeholderTextColor = 'black'
onChangeText={(loginpassword) => this.setState({loginpassword})}
/>
<TouchableHighlight onPress={() => {
{this.props.navigation.navigate('UserPage')}
}
}>
<View>
<Text>Login</Text>
</View>
</TouchableHighlight>
</View>
</View>
);
}
}
export default LoginComponent;
Here in LoginComponent.js, I am doing {this.props.navigation.navigate('UserPage')} to redirect to the userscreen on click of a button but it says TypeError: undefined is not an object (evaluating 'this.props.navigation.navigate'). I am not sure what I am doing wrong and if I should be passing something from the App.js to LoginComponent.js.
If you tried to print your LoginComponent's props you would end up with nothing!,
But what if you pass the navigation as prop to your component like this! :
// App.js
class LoginScreen extends React.Component {
...
<LoginComponent navigation={this.props.navigation}/>
...
}
You will end up with functional navigation prop.
Happy user details navigation :)
i'm React Native newbie. What i'm trying to do is added react navigation to my login page where user can click a button and navigate to the sign up page but i'm getting an error Cannot read property 'navigate' of Undefined. I've already searched the solution over an internet but no luck. This So does not help me - React Navigation - cannot read property 'navigate' of undefined and same with others .
Here is my code
index.ios.js
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
import {StackNavigator} from 'react-navigation';
import Login from './src/screens/Login';
import Signup from './src/screens/Signup';
export default class tapak extends Component {
constructor(props) {
super(props);
this.buttonPress = this.buttonPress.bind(this);
}
render() {
return (
<View style={styles.container}>
<Text style={{color: 'blue'}} onPress={this.buttonPress}>sign up</Text>
</View>
);
}
buttonPress() {
console.log('called');
this.props.navigation.navigate('Signup');
}
}
const Stacks = StackNavigator({
Login: {
screen: Login
},
Signup:{
screen: Signup
}
});
Render the StackNavigator in your index.ios.js and move the button to the Login component:
const Stacks = StackNavigator({
Login: {
screen: Login
},
Signup:{
screen: Signup
}
});
class tapak extends Component {
render() {
return (
<Stacks />
);
}
}
Login.js :
export default class Login extends Component {
constructor(props) {
super(props);
this.buttonPress = this.buttonPress.bind(this);
}
buttonPress() {
console.log('called');
this.props.navigation.navigate('Signup');
}
render() {
return (
<View style={styles.container}>
<Text style={{color: 'blue'}} onPress={this.buttonPress}>sign up</Text>
</View>
);
}
}
Working example
here.
Write this code to index.ios.js
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
import {StackNavigator} from 'react-navigation';
import Login from './src/screens/Login';
import Signup from './src/screens/Signup';
const Stacks = StackNavigator({
Login: {
screen: Login
},
Signup:{
screen: Signup
}
});
Login.js
import React ,{Component} from 'react';
import {
Text, View , Button,Image,
} from 'react-native';
export default class HomeScreen extends Component {
render() {
const { navigate } = this.props.navigation;
return (
<View>
<Text
onPress={() => navigate('Signup')}
> SignUp</Text>
</View>
);
}
}
Hope this help you.
I think you need to include navigationOptions, for example:
class MyComponent extends React.Component {
static navigationOptions = {
title: 'Great',
// other configurations
}
render() {
return (
// your view
)
}
}
Also yu need to make sure you use AppRegistry.registerComponent('glfm', () => Stacks); rather than AppRegistry.registerComponent('glfm', () => tapak);
The only answer to this question is to just put const { navigate } = this.props.navigation in your render() function and then you can use it in any component that you need
For Example
render() {
const { navigate } = this.props.navigation;
return (
<View>
<Text>This is the home screen of the app</Text>
<Button
onPress={() => navigate('Profile', { name: 'Brent' })}
title="Go to Brent's profile"
/>
</View>
);
}
Please read this doc for https://reactnavigation.org/docs/en/navigation-prop.html