How to initialize React Native project

Question

Please note I have read the documentation and I'm referencing the point where the error happens as well as the steps I have taken. Please don't advice me to follow the instructions that I have already indicated I have followed.

After following the documentation of React Native to the best of my ability, I have been unable to get React Native to run. I have installed jdk, node, and Android Studio as instructed (using Chocolatey and links). The Android Emulator runs from Android Studio. I'm using npm version 6.1.0, node version 8.4.0, jdk 8, Android Studio 3.1.3. The error I get after react-native init AwesomeProject is SyntaxError: Unexpected token import. What did I do wrong? How can I fix this? Running react-native run-android also gives the same error.

To be clear, I'm in the proper directory. ANDROID_HOME is set to the proper sdk folder. There is a heading, Running your React Native application, and running the first command leaves me with the error, but I don't get an error before that point.

Incogitant

You cannot run react-native run-android without first cd-ing to you React Native project and you cannot have a have a React Native project until successfully running react-native init YourProjectName. Since it sounds like import is not defined, I would make sure your project is using Node version 8.4.0. What happens when you run node -v? – Stila

@MichaelL. I'm using npm version 6.1.0, node version 8.4.0, jdk 8, Android Studio 3.1.3. – Incogitant

initializing a React Native project shouldn't have anything to do with Android Studio. My only answer would either be you did not follow the directions exactly or you have an environment variable (probably at the root of your computer) that overrides something during React Native init. If the problem seems hopeless, you could try using snack.expo.io. – Stila

First Create a Folder on your any drive then navigate to that folder from command prompt/ terminal the fire command react-native init (ProjectName) this will start building project for you. – Forewarn

The project builds, but I get an error at AwesomeProject\node_modules\react-native\local-cli\cliEntry.js:30, namely the line import type {CommandT} from './commands';. – Incogitant

I was able to get my Linux box to run the code, and run modified code. I used npm i within the project's top-level directory then I was able to run npm start. I don't know if this is repeatable. After performing the same undocumented step, my project on my PC almost works. I'll check the firewall now. – Incogitant

Answer 1

1. install npm
2. install react native cli => npm install -g
   react-native-cli && npm install -g react-native (admin or sudo)
   3. react-native init MyProject
   4. cd Myproject
   5. react-native run-ios or run-android

Figureground

Answer 2

1. Update node to the latest version.
2. npm install -g react-native-cli.
3. npx react-native init newProject.

Since you install react native globally you don't need to use npx packages anymore just try

react-native init newProject

Askins

Answer 3

Update Sep, 2024.

If you previously installed a global react-native-cli package, please remove it as it may cause unexpected issues:

npm uninstall -g react-native-cli @react-native-community/cli

npx @react-native-community/cli@latest init AwesomeProject

[Optional] Using a specific version or template

npx @react-native-community/[email protected] init AwesomeProject --version X.XX.X

Related Docs (https://reactnative.dev/docs/getting-started-without-a-framework)

Brinkema

Answer 4

Assuming that you have Node 14 LTS or greater installed, you can use npm to install the Expo CLI command line utility:

npm install -g expo-cli

Then run the following commands to create a new React Native project called "AwesomeProject":

expo init AwesomeProject

cd AwesomeProject
npm start

Source: React Native Environment Setup

Runofthemill