Improperly using React ListView

Question

I'm having an issue instantiating react-native to then use its list view.

var ReactNative = require('react-native');

var MyClass = React.createClass({
...
    render: function(){
    ...
    );
    }
}

We have the following inside of react-native-implementation.js

...

  get AccessibilityInfo() { return require('AccessibilityInfo'); },
  get ActivityIndicator() { return require('ActivityIndicator'); },
  get ART() { return require('ReactNativeART'); },
...

It has about 90 of those get statements. When webpack runs, it errors out on every single one of them. Webpack brings up the following error for the first get, and the name corresponds for the rest (AccessibilityInfo, then ActivityIndicator, then ReactNativeART, etc.).

ERROR in C:/Directory/~/react-native/Libraries/react-native/react-native-implementation.js

Module not found: Error: Can't resolve 'AccessibilityInfo' in 'C:\Directory\node_modules\react-native\Libraries\react-native' @ C:/Directory/~/react-native/Libraries/react-native/react-native-implementation.js 31:35-63 @ ./Directory/MyClass.jsx

Where are all of these gets and there corresponding NPM installs coming from? I don't have them installed, but I can't do npm install AccessibilityInfo. So what am I missing?

Furthemore, what is the difference from the following via facebook's github.io:

import { AppRegistry, ListView, Text, View } from 'react-native';

vs

var ReactNative = require('react-native');

I'm assuming that I'm about to pull everything from React-Native instead of just the listview. Is there a better syntax when using var to get ListView? Would I be able do something like the following ( I currently can't test this because of the previous error):?

var {ListView} require('react-native');

Do you have Babel set up? Also, why are you using Webpack? React Native runs on Facebook's Haste packager, it hasn't supported Webpack for a while. Are you trying to create a React Native project without using the React Native CLI? — Pedro Castilho
– Pedro Castilho, Commented Apr 12, 2017 at 17:46
I do have babel setup. I have other components on my webpage already running. I wanted to add a react-native component to my webpage, or is that a big no-no? — user2589339
– user2589339, Commented Apr 12, 2017 at 17:51
I think you're confusing React with React Native. React is a web component framework, React Native is a framework for cross-platform mobile applications. If you want React Native components in the browser, you'll need to use something like react-native-web — Pedro Castilho
– Pedro Castilho, Commented Apr 12, 2017 at 17:53
The failures you are seeing are because a React Native mobile app needs a lot of support code which is usually generated by the CLI. — Pedro Castilho
– Pedro Castilho, Commented Apr 12, 2017 at 17:54

Pedro Castilho · Accepted Answer · 2017-04-12 18:00:08Z

1

You can't just add React Native to a web project and expect it to work. React Native is usually meant to run on a mobile device while supported by native (Java or Objective-C) code (which does the actual rendering). The actual components React Native provides are mostly written in native code.

If you want to use React Native in a web project, you'll need to use some kind of framework that provides web versions of the native components which React Native provides. An example of that would be react-native-web.

As for your second question, the ES6 import

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

is equivalent to the following statement using require:

var { ListView, View, Text } = require('react-native');

However, as this statement uses destructuring assignment, it still requires ES2015 - there is no way to do this using just ES5.

edited Apr 12, 2017 at 18:00

answered Apr 12, 2017 at 17:57

Pedro Castilho

10.6k3 gold badges30 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user2589339 Over a year ago

Thanks! This explains why I've been pulling my hair out.

Collectives™ on Stack Overflow

Improperly using React ListView

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related