Syntax Error Unexpected Token, React Native

Question

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);

Just correct your navigateToRegister method name is onPress={ this.navigateToRegister } it will work fine — Syed Zain Ali
– Syed Zain Ali, Commented Jun 12, 2018 at 19:49

Shubhanu Sharma · Accepted Answer · 2018-06-12 19:19:45Z

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

Rajat Gupta · Accepted Answer · 2018-06-12 19:39:59Z

0

I have encountered to mistakes in your code

You have used this._navigateToRegister function in onPress and defined navigateToRegister as a function.
And you forgot to close Text tag

<Text
    style={{ color: "blue" }}
    nPress={this._navigateToRegister}>

answered Jun 12, 2018 at 19:39

Rajat Gupta

1,9541 gold badge11 silver badges17 bronze badges

Collectives™ on Stack Overflow

Syntax Error Unexpected Token, React Native

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related