skip to Main Content

I am trying to create a ios react JSX app but I keep getting this error and I dont know why. I coppied the ts file from my homescreen file that works so I’m confused on why I’m getting it in this file.

I think it maybe a jest.config.js error so I tried updating config file but that didnt help either.

I greatly appreciate any help you can give me.


PillScanner.ts: Unexpected token, expected "," (14:6)

  12 |   return (
  13 |     <ImageBackground
> 14 |       source={require('../assets/background.jpg')} 
     |       ^
  15 |       style={styles.background}
  16 |     >
  17 |       <View style={styles.bottomNav}>]

Here is my entire file:

import { View, StyleSheet, ImageBackground, TouchableOpacity, Image } from 'react-native';

const PillScanner: React.FC = () => {
  return (
    <ImageBackground
      source={require('../assets/background.jpg')} 
      style={styles.background}
    >
      <View style={styles.bottomNav}>
        <TouchableOpacity>
          <Image
            source={require('../assets/home-icon.png')} // Example image for home icon
            style={styles.navIcon}
          />
        </TouchableOpacity>
        <TouchableOpacity>
          <Image
            source={require('../assets/calendar-icon.png')} // Calendar icon image
            style={styles.navIcon}
          />
        </TouchableOpacity>
        <TouchableOpacity>
          <Image
            source={require('../assets/user-icon.png')} // Example image for user icon
            style={styles.navIcon}
          />
        </TouchableOpacity>
        <TouchableOpacity>
          <Image
            source={require('../assets/list-icon.png')} // Example image for list icon
            style={styles.navIcon}
          />
        </TouchableOpacity>
      </View>
    </ImageBackground>
  );
};

const styles = StyleSheet.create({
  background: {
    flex: 1,
    resizeMode: 'cover',
  },
  bottomNav: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    position: 'absolute',
    bottom: 20,
    left: 0,
    right: 0,
    padding: 10,
    backgroundColor: 'rgba(255, 255, 255, 0.7)', 
    borderRadius: 15,
    marginHorizontal: 10,
  },
  navIcon: {
    width: 24,
    height: 24,
  },
});

export default PillScanner;

2

Answers


  1. Maybe the above error is occurred due to you unintentionally added ] symbol at the end of the

    <View style={styles.bottomNav}>]
    

    this View.

    Please let me know if it is resolved. if not then also ping me.

    Login or Signup to reply.
  2. The error you’re seeing, "Unexpected token, expected ‘,’", is likely due to a small syntax mistake in your PillScanner.ts file. This kind of error usually happens when there’s a typo or a missing bracket or comma in the code. It’s a common issue that can be easily overlooked, but fixing these small errors should resolve the problem.

    ]

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search