Unexpected token at line with tag in React Native

Question

<Image source={require('./cat.jpeg')}/>

I have this line inside the render function, and when I run the code, I get an error Unexpected token at this line.How to resolve this? The image cat.jpeg is in the same folder as the current component.

Here is the full code:

'use strict'
import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Navigator,
  Text,
  View,
  Image
} from 'react-native';

import { Actions } from 'react-native-router-flux';


export default class HomeScreen extends Component{



  render() {
    return (
            <View style={styles.container}>
            <View style={styles.rowcontainer}>
            // <Image style={{width: 50, height:50}}
            // source={{uri: 'https://facebook.github.io/react/img/logo_small.png'}}/>
            <Image source={require('./cat.jpeg')}/>

            <Text onPress={Actions.MarkAttendance}style={styles.welcome}>
          Mark Attendance
        </Text>


        <Text onPress={Actions.AttendanceDetails}style={styles.welcome}>
          View Attendance
        </Text>

        </View>

        <View style={styles.rowcontainer}>

        <Text onPress={Actions.Test}style={styles.welcome}>
          Test
        </Text>


        <Text onPress={Actions.NewActivation}style={styles.welcome}>
          New Activation
        </Text>

        </View>
        <View style={styles.rowcontainer}>

        <Text onPress={Actions.PendingAttendance}style={styles.welcome}>
          Pending Attendance
        </Text>


        <Text onPress={Actions.Checkout}style={styles.welcome}>
          Checkout
        </Text>

        </View>
        <View style={styles.rowcontainer}>

        <Text onPress={Actions.Settings}style={styles.welcome}>
          Settings
        </Text>

        <Text style={styles.welcome}>
          Logout
        </Text>

        </View>
        </View>
       )

  }


}


var styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop:50,
    backgroundColor: '#FFFFFF',
  },
  rowcontainer:{
    alignItems:'stretch',
    flexDirection:'row',
    justifyContent:'space-between',
    margin: 10,
  },
  welcome:{
    fontSize:15,
  }
});

Can you add some more code to your question, in that case? That line seems to be fine. You might have forgotten a bracket somewhere else though. — stinodes, Feb 09 '17 at 12:44
Are you importing image component? `import {Image} from 'react-native';` — milkersarac, Feb 09 '17 at 12:46
@mustafailkersarac no i have not imported it, thats the problem let me try it — Siddarth G, Feb 09 '17 at 12:48

score 1 · Accepted Answer · answered Feb 09 '17 at 12:55

1

You can't use // to comment out pieces of code inside of your render function while using the HTML-like syntax. Instead try wrapping whatever you're trying to comment out inside of {} and using the javascript blockcomments there.
e.g.

{/*
    <Image
        source=.../>
*/}

answered Feb 09 '17 at 12:55

stinodes

1,269
10
15

i think this along with adding import {Image} from 'react-native'; is the answer – Siddarth G Feb 09 '17 at 13:01
It surely helped you get your app running, but would've thrown another error, as a missing variable/import is not the same as an unexpected token. Glad to have helped out, though. – stinodes Feb 09 '17 at 13:12

Unexpected token at line with tag in React Native

1 Answers1