Search code examples
javascriptreact-nativeuniversal

can't view react native

I'm trying to create a simple application using react-native for platform independent use, I'm using Webstorm IDE on test purpose.

Now here is my project structure:

HelloTest:
    |---node_modules
    |---src
    |     |---index.js
    |---package.json
    |package_lock.json

Now here is my index.js :

import React, { Component } from 'react';
import { Text, View } from 'react-native';

export default class HelloWorldApp extends Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
        <Text>Hello, world!</Text>
      </View>
    );
  }
}

And her is my package.json :

{
  "name": "HelloTest",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start"
  },
  "dependencies": {
    "node_module": "^0.0.0",
    "react-native": "^0.61.3"
  }
}

And I'm using start, the application starts running at port:8081

I go to that address, and what I get is this :

react-native-no-preview

**I'm not getting any preview, what should I do, do I need to change any configuration? **

The command webstorm used is this :

E:\node\node.exe E:\node\node_modules\npm\bin\npx-cli.js --package react-native-cli react-native init HelloTest

Solution

  • To get a "preview" you need to run the app as follow:

    • iOS: npx react-native run-ios
    • Android: npx react-native run-android