React Native support

[n-ts]

This is just informative "issue" with React Native examples and instructions that can be used in documentation/readme later.

If you are new to React Native, first follow this guideline from Facebook https://facebook.github.io/react-native/docs/getting-started.html

After installing React Native and all necessary SDKs, cd to directory you want to place your project and start new project (we will call it asynctest in this example)

react-native init asynctest

cd asynctest

npm install async-reactor --save

Create new file in root directory, name it asyncTest.js and paste following code inside

import React, { Component } from 'react';
import { Text, ListView, View, StyleSheet } from 'react-native';
import { asyncReactor } from 'async-reactor';

async function AsyncPosts() {
    const data = await fetch('https://jsonplaceholder.typicode.com/posts');
    const posts = await data.json();

    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}).cloneWithRows(posts);

    return (
        <ListView
            dataSource={ds}
            renderRow={(rowData) =>
            <View style={styles.rowStyle}>
                <Text>#{rowData.id}</Text>
                <Text numberOfLines={1}>{rowData.title}</Text>
            </View>
            }
        />
    );
}

const styles = StyleSheet.create({
  rowStyle: {
      alignSelf: "stretch",
      height: 50,
      backgroundColor: "#fff",
      borderBottomColor: "#999",
      borderBottomWidth: 1,
      padding: 10
  }
});

export default asyncReactor(AsyncPosts);

Open index.android.js and index.ios.js files, remove original code and paste following code in both files

import React, { Component } from 'react';
import { AppRegistry, View, Text, StyleSheet } from 'react-native';
import AsyncTest from './asyncTest';

export default class asynctest extends Component {
  render() {
    return (
      <View>
          <View style={styles.header}>
            <Text style={styles.title}>async-reactor Example</Text>
          </View>
          <AsyncTest />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  header: {
      padding: 30,
      backgroundColor: "#ddd"
  },
  title: {
      textAlign: 'center',
      fontSize: 18
  }
});

AppRegistry.registerComponent('asynctest', () => asynctest);

Run react-native run-ios or react-native run-android in root directory and that's it!

You should see something like following screenshot if everything went well on both platforms:

Note:
For async-reactor version 1.0.2, open node_modules/async-reactor after installation and remove .babelrc file. Without this step, build will fail.

[xtuc]

Thanks for your work 👍. I will include this in the documentation and as example.

[xtuc]

The .babelrc file has been removed in [email protected].

I added a folder for the examples (/examples), would you mind doing a PR? Don't forget to add you as author.