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: 'Wele',
}

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

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: 'Wele',
}

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

• javascript
• react-native
• react-native-ios

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

2 Answers 2

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: "Wele"
  };

  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

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}>