Quantcast
Channel: Active questions tagged react-native+android - Stack Overflow
Viewing all articles
Browse latest Browse all 29449

Having trouble navigating screen to screen. React Native

$
0
0

Not able to navigate within screens. I'm building an app on visual studio code with Android studio. Please tell me if I'm missing something. Getting error: Unable to resolve "./views/Header/Header" from "node_modules\react-navigation-stack\lib\module\index.js"What am i doing wrong?I need help please. Thanks

App.js

```import React from 'react';import { StyleSheet, Text, View, StatusBar, Platform, YellowBox} from 'react-native';import Register from './app/components/Register';import Login from './app/components/Login';import MenteApr from './app/components/MenteApr';import { createStackNavigator } from 'react-navigation-stack';const Navigator = createStackNavigator( {        initialRouteName: 'Register',      },  {    Register: {      screen: Register    },     Login: {      screen: Login,    },    MenteApr: {      screen: MenteApr,      },        }    );export default class App extends React.Component {  render(){  return <Navigator />;}}```This is the register file **Register.js**```import React from 'react';import {     StyleSheet,     Text,     View,    TextInput,    TouchableOpacity,    Image,    Button} from 'react-native';export default class Register extends React.Component {  static navigationOptions = {    title: 'Register',  };  render(){  return(<View style={styles.register}><Text> Welcome to MentorMe</Text><Text> Sign Up </Text><TextInput} placeholder = "Student ID"        underlineColorAndroid= {'transparent'} /><Button         title = "Register"         onPress={()=>            this.props.navigation.push('MenteApr')  }           /><View ><Text> Already have an account? </Text><Button           title  = "Login"          onPress={()=>            this.props.navigation.navigate('Login') }         /></View></View>  );}}const styles = StyleSheet.create({  register: {    alignSelf: 'stretch',    flex: 1,    justifyContent: 'center',    backgroundColor: '#36485f',    paddingLeft: 60,    paddingRight: 60,  }```This is the Login file **Login.js**import React from 'react';import {     StyleSheet,     Text,     View,    TextInput,    TouchableOpacity,    Button} from 'react-native';export default class Login extends React.Component {static navigationOptions ={    title: "Login",  };  render(){  return(<View style = {styles.login}><Text> Welcome Back!</Text><TextInput placeholder = "Student ID"        underlineColorAndroid={'transparent'} /><Button           title="Login"          onPress ={() =>            this.props.navigation.push('MenteApr')            } /><View><Text> Don't have an account? </Text><Button          title="Sign Up"          onPress ={() =>            this.props.navigation.navigate("Register")}         /></View></View>  );}}const styles = StyleSheet.create({    login: {      alignSelf: 'stretch',      flex: 1,      justifyContent: 'center',      backgroundColor: '#36485f',      paddingLeft: 60,      paddingRight: 60,    }

Viewing all articles
Browse latest Browse all 29449

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>