React-native syntax error – unexpected token colon “:”

Fixing unexpected token colon in react-native

In React Native there is a non-obvious error, which says about syntax error – unexpected token in the place of a colon, more often in the object that is passed to StyleSheet.create() method. Let’s fix that.

This error is caused by the lack of programmer’s attention. And the problem is, that the console is pointing not to the correct place.

Fixing unexpected token colon in react-native

In the most cases this error appears when your forget to close JSX tags in the JS functions (e.g. render method).

This is an example of code that reproduces this error:

class TestApp extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View>
          <Text>Header</Text>
        <View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center'
  }
});

Here you can see that inner View tag is NOT CLOSED. This causes an error in parsing JSX and leads to a syntax error of unexpected colon.

If this is not your case, still keep looking for a mistake somewhere near the problem line.

Leave a Reply

Be the First to Comment!