visual studio code react-native: Current workspace is not a React Native project

Question

I am struggling trying to setup a simple application with visual studio code and react-native. I have followed the getting started tutorial https://github.com/Microsoft/vscode-react-native. I have installed the required extensions into visual studio code (mainly react native tools). I have also setup various global variables (ANDROID_HOME, JAVA_HOME). I am using genymotion as my emulator.

After having setup my environment, I create a react-native project using react-native-cli:

react-native init my_project

First of all, from Visual studio code, Debug page, I select React-Native as my debug environment. A launch.json file is generated. But I see that the file launchReactNative.js is not generated.

Second if I execute this command (within vs code, Ctrl+Shift+p):

React-native: run-android

I get this message "Current workspace is not a React Native project"

I cannot figure out what I am doing wrong. I have searche through google and stackoverflow but I cannot find a solution to my problem.

Why is my workspace not recognized as a React-native project?

Here is my package.json file:

{
    "name": "poxx",
    "version": "0.0.1",
    "private": true,
    "scripts": {
        "start": "node node_modules/react-native/local-cli/cli.js start",
        "test": "jest"
    },
    "dependencies": {
        "react": "15.4.1",
        "react-native": "0.39.2"
    },
    "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"
    }
}{
    "name": "poxx",
    "version": "0.0.1",
    "private": true,
    "scripts": {
        "start": "node node_modules/react-native/local-cli/cli.js start",
        "test": "jest"
    },
    "dependencies": {
        "react": "15.4.1",
        "react-native": "0.39.2"
    },
    "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"
    }
}

Edit:

Edit 2: react-native package within node_modules

Answer 1

This is a known bug in [email protected] and there is already a PR waiting to be merged. This should be fixed in the next release of react-native-cli. For now, the workaround is to revert to an earlier version, eg. [email protected].

As suggested before, you can install it with npm i -g [email protected]

More about the bug can be found here: react-native/issues/11463 and here: vscode-react-native/issues/365

Answer 2

sometimes u need to eject ur project to be able to run it. A typical react native project will have the following characteristics, in the order of how accurately it indicates that this is a react-native project.

React-native mentioned as a dependency in package.json A react-native folder inside node_modules An “android” and an “ios” folder at the top level Usually an index.android.js and index.ios.js at top level

-----U shouldn't manually add these folders!!!! follow these steps :

1-

npm i -g react-native-cli

or

yarn global add react-native-cli

2- your app.json should be like :

{
"name": "AwesomeProject", //or whatever your project's name is


 "displayName": "AwesomeProject"
}

3- run $ react-native eject