CODEWITHSUNDEEP
javascriptreact-nativereact-native-ios
DrueTrue
DrueTrue

Reputation: 175

Syntax Error Unexpected Token, React Native

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

Upvotes: 3

Views: 15713

Answers (2)

Rajat Gupta
Rajat Gupta

Reputation: 1954

I have encountered to mistakes in your code

  1. You have used this._navigateToRegister function in onPress and defined navigateToRegister as a function.

  2. And you forgot to close Text tag 

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

Upvotes: 0

Shubhanu Sharma
Shubhanu Sharma

Reputation: 2132

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

Upvotes: 2

Related Questions