async-reactor
async-reactor copied to clipboard
React Native support
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.
Thanks for your work :+1:. I will include this in the documentation and as example.
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.