React Native with Native Base (Unexpected Token Error)

1k views Asked by At

I have React Native and Native Base configured. When I deploy the app for Android it throws me an error stating that an unexpected token was found near where Container component is present in my code.

My package.json file is:

{
  "name": "React Native POC",
  "version": "0.0.1",
  "private": true,
  "scripts": {
  "start": "node node_modules/react-native/local-cli/cli.js start",
  "test": "jest"
},
  "dependencies": {
  "native-base": "^0.5.18",
  "react": "15.4.1",
  "react-native": "0.39.2",
  "react-redux": "^4.4.6",
  "redux": "^3.6.0"
},
  "devDependencies": {
  "babel-jest": "17.0.2",
  "babel-preset-react-native": "1.9.0",
  "jest": "17.0.3",
  "react-test-renderer": "15.4.1"
},
  "jest": {
  "preset": "react-native"
}
}

Could it be that certain versions are not working well with the other? Additionally (if it matters) I am using Node version 6.8.1, npm version 3.10.8 and react-native-cli 2.0.0. Also, I have yarn, sinopia and browserify installed globally.

Still a beginner with React Native and I cannot tell if any dependency clashes may be present (obvious or otherwise)

My js file is:

import React, {Component} from 'react';
import {Container, Content} from 'native-base';

export default class ReactNativePOC extends Component {
  render() {
    return {
        <Container> // Error here
            <Content>
            </Content>
        </Container>
    }
  }
}

There does not seem to be any problem with my setup (excluding native base) as I can run a react native app with default controls however I seem to be getting this error only for native base controls

2

There are 2 answers

2
max23_ On BEST ANSWER

The return statement should use parentheses instead of braces.

render() {
  return (
    <Container>
      <Content>
      </Content>
    </Container>
  );
}
1
Supriya Kalghatgi On

Please check the basic syntax from docs of React Native

Check NativeBase KitchenSink - An example app with all the UI components of NativeBase.

Since you said you are beginner in React Native, you can check Native Starter Kit - A Starter Kit for React Native + NativeBase + Navigation Experimental + Redux + CodePush Apps