CODEWITHSUNDEEP
react-nativevisual-studio-code
TheSoul
TheSoul

Reputation: 5376

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

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: File structure

Edit 2: react-native package within node_modules

enter image description here

Upvotes: 6

Views: 12388

Answers (4)

Kuhbaar
Kuhbaar

Reputation: 103

Bug caused by react-native-cli 2.0.0

fixed in react-native-cli 2.0.1

Upvotes: 0

Mahgolsadat Fathi
Mahgolsadat Fathi

Reputation: 3325

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

Upvotes: 1

Jakub Synowiec
Jakub Synowiec

Reputation: 5969

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

Upvotes: 2

max23_
max23_

Reputation: 6689

I am able to simulate the issue, it is due to react-native-cli v2.0.0.

Try uninstall it with npm uninstall -g react-native-cli. Then, reinstall v1.0.0 with npm install -g [email protected].

Probably there is something wrong between v2.0.0 and react native tools extension in vs code.

Upvotes: 0

Related Questions