I have a Login screen. When I press on a blue Text, I want it to navigate to the Register screen.
However, it always shows me the same Syntax Error: Unexpected Token.
import React, { Component } from 'react';
import {
ScrollView,
Text,
TextInput,
View,
Button
} from 'react-native';
import { StackNavigator } from 'react-navigation';
import Register from './src/screens/Register';
export default class Login extends Component {
static navigationOptions = {
title: 'Welcome',
}
navigateToRegister = () => {
this.props.navigation.navigate('Register');
}
render() {
return (
<ScrollView style={{padding: 20}}>
<Text
style={{fontSize: 27}}>
Login
</Text>
<TextInput placeholder='Username' />
<TextInput placeholder='Password' />
<View style={{margin:7}} />
<Button
onPress={this.props.onLoginPress}
title="Submit"
/>
<Text style={{color: 'blue'}}
onPress={ this._navigateToRegister }
Register
</Text>
</ScrollView>
);
}
}
const App = StackNavigator({
Login: { screen: Login },
Register: { screen: Register },
Secured: { screen: Secured },
});
AppRegistry.registerComponent('App', () => App);
you have and syntax error in code.
second last text is not having closing angle bracket
>
import React, { Component } from "react";
import { ScrollView, Text, TextInput, View, Button } from "react-native";
import { StackNavigator } from "react-navigation";
import Register from "./src/screens/Register";
export default class Login extends Component {
static navigationOptions = {
title: "Welcome"
};
navigateToRegister = () => {
this.props.navigation.navigate("Register");
};
render() {
return (
<ScrollView style={{ padding: 20 }}>
<Text style={{ fontSize: 27 }}>Login</Text>
<TextInput placeholder="Username" />
<TextInput placeholder="Password" />
<View style={{ margin: 7 }} />
<Button onPress={this.props.onLoginPress} title="Submit" />
<Text
style={{ color: "blue" }}
onPress={this._navigateToRegister}
Register
/>
</ScrollView>
);
}
}
const App = StackNavigator({
Login: { screen: Login },
Register: { screen: Register },
Secured: { screen: Secured }
});
AppRegistry.registerComponent("App", () => App);
you can setup prettier and eslint they will provide you syntax error straight white editing code so that you don't need to waist time on finding this kinda errors. This is good guide to setup everything
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With