Add react-native-web examples

EXAMPLE.md

@@ -0,0 +1,54 @@
+
+<h1 name="#see-examples">Examples</h1>
+
+Get `rn-placeholder` on your computer by cloning this repo :
+
+```
+$ git clone https://github.com/mfrachet/rn-placeholder
+$ cd rn-placeholder
+```
+
+## Usage with Expo
+
+#### Using the Expo projects tool
+
+If you're familliar with Expo, you can take a look at the [rn-placeholder-demo](https://expo.io/@mfrachet/rn-placeholder-demo) app.
+
+You can also scan the following QR using [Expo app](https://expo.io/) :
+
+<img src="https://img4.hostingpics.net/pics/589414Capturedecran20170716a122129.png" width="200"/>
+
+#### Expo XDE
+
+If you're currently using [Expo XDE](https://github.com/expo/xde), simply open `./ExampleExpo` inside of it, and share your project as usual (don't forget to `npm install`).
+
+#### create-react-native-app
+
+If you're currently using [`create-react-native-app`](https://facebook.github.io/react-native/docs/getting-started.html#getting-started)
+
+```
+$ cd ExampleExpo
+$ npm install
+$ npm start
+```
+
+And then scan the QR inside of the [Expo app](https://expo.io/)
+
+## Usage with react-native-cli
+
+If you're currently using [`react-native-cli`](https://facebook.github.io/react-native/docs/getting-started.html#the-react-native-cli), inside of `rn-placeholder` root folder :
+
+```
+$ cd Example
+$ npm install
+$ react-native run-ios
+$ react-native run-android
+```
+
+## Example with [react-native-web](https://github.com/necolas/react-native-web)
+
+```
+$ cd ExampleWeb
+$ npm install
+$ npm start
+```

ExampleWeb/.babelrc

@@ -0,0 +1,5 @@
+{
+  "presets": [
+    "react-native-stage-0"
+  ]
+}

ExampleWeb/.eslintrc

@@ -0,0 +1 @@
+{}

ExampleWeb/.gitignore

@@ -0,0 +1,48 @@
+# OSX
+#
+.DS_Store
+
+# Xcode
+#
+build/
+*.pbxuser
+!default.pbxuser
+*.mode1v3
+!default.mode1v3
+*.mode2v3
+!default.mode2v3
+*.perspectivev3
+!default.perspectivev3
+xcuserdata
+*.xccheckout
+*.moved-aside
+DerivedData
+*.hmap
+*.ipa
+*.xcuserstate
+project.xcworkspace
+
+# Android/IJ
+#
+.idea
+.gradle
+local.properties
+
+# node.js
+#
+node_modules/
+npm-debug.log
+yarn-error.log
+
+# BUCK
+buck-out/
+\.buckd/
+android/app/libs
+android/keystores/debug.keystore
+
+# WEB
+#
+dist/
+
+# OTHERS
+notes.txt

ExampleWeb/README.md

@@ -0,0 +1,53 @@
+![React Native Web](/app/assets/react-native-web.png "Logo React Native Web")
+
+# React Native for Web Starter
+
+React Native for Web Starter aims at:
+- Providing the leanest code base to bootstrap a React Native for Web project.
+- Following the standard React Native project structure close so someone becoming familiar with React Native may quickly find its way in a RN4Web project, and vice-versa.
+- Benefit from the React community dev-tools, such as Storybook.
+
+## Presentation
+You can find a presentation of React Native for Web and this starter here.
+[![React Native for Web Starter](https://img.youtube.com/vi/eV4pZ6vv1VE/0.jpg)](https://www.youtube.com/watch?v=eV4pZ6vv1VE)
+
+## Getting *quickly* started
+
+As of today, React Native for Web, let's call it RN4Web, is still pretty recent, and could use some more documentations, along with contributions.
+
+This repo is an attempt to make it easier for anyone to launch, experiment and publish a RN4Web App.
+
+### Install
+```
+git clone https://github.com/grabcode/react-native-web-starter.git projectname
+cd projectname
+rm -rf .git
+npm install
+```
+
+### Run
+`npm run dev` - your app is accessible at `http://localhost:3000`
+
+You can also enjoy [React Storybook](https://github.com/kadirahq/react-storybook) running `npm run storybook` and open `http://localhost:9001`
+
+
+### Build
+TODO
+
+## Tools
+
+React Native for Web runs in the browser, hence get out of the box full dev tools supports.
+
+In the future, RN4Web Starter may come with some flavour such as Redux and its amazing [tool suite](https://github.com/gaearon/redux-devtools).
+
+## About React Native for Web
+
+[React Native for Web](https://github.com/necolas/react-native-web) is born from the brilliant mind of a member of the React Native community. Some would say it had to happen, many reasons begging for such project to get started.
+
+React Native tends to unify iOS and Android, and soon Universal Windows developer under one banner, sort of the Wardens of the Native.
+
+Well, following that GoT analogy, React Native for Web is the Wardens of the Web, unifying any React developer under a common set of values.
+
+## License
+
+React Native for Web Starter is [BSD licensed](LICENSE).

ExampleWeb/index.web.js

@@ -0,0 +1,12 @@
+/**
+ * React Native for Web Starter App
+ * Follow me https://twitter.com/grabthecode
+ */
+
+import { AppRegistry } from 'react-native';
+import { App } from './src/scenes';
+
+AppRegistry.registerComponent('App', () => App);
+AppRegistry.runApplication('App', {
+  rootTag: document.getElementById('react-root')
+});

ExampleWeb/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "ExampleWeb",
+  "version": "1.1.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "start": "webpack-dev-server --port 3000 --config web/webpack.config.dev.js --inline --hot --colors --quiet",
+    "lint": "eslint src"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "react": "15.3.2",
+    "react-native-web": "0.0.49",
+    "rn-placeholder": "file:../",
+    "url-loader": "0.5.7"
+  },
+  "devDependencies": {
+    "babel-cli": "^6.14.0",
+    "babel-core": "^6.14.0",
+    "babel-eslint": "^6.1.2",
+    "babel-loader": "^6.2.5",
+    "babel-preset-react-native-stage-0": "^1.0.0",
+    "eslint": "^3.4.0",
+    "eslint-plugin-jsx-a11y": "^2.2.0",
+    "eslint-plugin-promise": "^2.0.1",
+    "eslint-plugin-react": "^6.1.2",
+    "react-hot-loader": "2.0.0-alpha-4",
+    "webpack": "1.13.2",
+    "webpack-dev-server": "1.14.1"
+  }
+}

ExampleWeb/src/components/Appbar.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+
+const styles = StyleSheet.create({
+  container: {
+    paddingLeft: 20,
+    paddingRight: 20,
+    paddingTop: 30,
+    paddingBottom: 10,
+    backgroundColor: '#3F51B5',
+  },
+  text: {
+    color: '#ffffff',
+    fontSize: 20,
+  },
+});
+
+export default function Appbar() {
+  return (
+    <View style={styles.container}>
+      <Text style={styles.text}>Rn Placeholder</Text>
+    </View>
+  );
+}

ExampleWeb/src/components/Card.js

@@ -0,0 +1,74 @@
+import React, { PropTypes } from 'react';
+import Placeholder from 'rn-placeholder';
+import { View, Text, Image, StyleSheet } from 'react-native';
+
+const DEFAULT_SIZE = 12;
+const IMAGE_SIZE = 40;
+const styles = StyleSheet.create({
+  card: {
+    padding: 20,
+    backgroundColor: '#ffffff',
+    borderRadius: 2,
+    marginBottom: DEFAULT_SIZE,
+    marginRight: DEFAULT_SIZE,
+    marginLeft: DEFAULT_SIZE,
+    borderColor: '#efefef',
+    borderWidth: 1,
+  },
+  media: {
+    height: IMAGE_SIZE,
+    width: IMAGE_SIZE,
+    marginRight: DEFAULT_SIZE,
+  },
+  container: {
+    flex: 1,
+    flexDirection: 'row',
+  },
+  username: {
+    flex: 1,
+    color: '#3F51B5',
+    fontSize: 16,
+  },
+  date: {
+    color: '#aaaaaa',
+    fontSize: 12,
+  },
+  content: {
+    marginTop: DEFAULT_SIZE,
+    lineHeight: DEFAULT_SIZE * 2,
+    color: '#444444',
+  },
+});
+
+export default function Card({ image, username, content, isLoaded, date }) {
+  const heightStyle = { height: 150 };
+  return (
+    <View style={[styles.card, !isLoaded && heightStyle]}>
+      <Placeholder.ImageContent
+        onReady={isLoaded}
+        lineNumber={2}
+        animate="shine"
+        lastLineWidth="40%"
+      >
+        <View>
+          <View style={styles.container}>
+            <Image source={{ uri: image }} style={styles.media} />
+            <View>
+              <Text style={styles.username}>{username}</Text>
+              <Text style={styles.date}>{date}</Text>
+            </View>
+          </View>
+          <Text style={styles.content}>{content}</Text>
+        </View>
+      </Placeholder.ImageContent>
+    </View>
+  );
+}
+
+Card.propTypes = {
+  image: PropTypes.string.isRequired,
+  username: PropTypes.string.isRequired,
+  content: PropTypes.string.isRequired,
+  date: PropTypes.string.isRequired,
+  isLoaded: PropTypes.bool.isRequired,
+};

ExampleWeb/src/components/CustomPlaceholder.js

@@ -0,0 +1,19 @@
+import React, { PropTypes } from 'react';
+import { Text } from 'react-native';
+import Placeholder from 'rn-placeholder';
+
+const customPlaceholder = (props) => {
+  const style = { backgroundColor: props.bgColor };
+  return <Text style={style}>I m a custom loader with props bgColor = {props.bgColor}</Text>;
+};
+
+
+customPlaceholder.propTypes = {
+  bgColor: PropTypes.string,
+};
+
+customPlaceholder.defaultProps = {
+  bgColor: '',
+};
+
+export default Placeholder.connect(customPlaceholder);

ExampleWeb/src/components/List.js

@@ -0,0 +1,47 @@
+import React, { Component } from 'react';
+import { View } from 'react-native';
+import Card from './Card';
+import data from './data';
+/**
+ * The ReactComponent class definition
+ */
+export default class List extends Component {
+  constructor(props) {
+    super(props);
+    this.renderItem = this.renderItem.bind(this);
+    this.state = { items: [], isLoading: false };
+  }
+
+  componentWillMount() {
+    this.setState({
+      items: data,
+      isLoading: true,
+    });
+
+    setTimeout(() => {
+      this.setState({ isLoading: false });
+    }, 4000);
+  }
+
+  renderItem({ item }) {
+    return (
+      <Card
+        image={item.image}
+        isLoaded={!this.state.isLoading}
+        content={item.content}
+        username={item.username}
+        date={item.date}
+      />
+    );
+  }
+
+  render() {
+    return (
+      <View style={{ flex: 1, marginTop: 12 }}>
+        {
+          data.map((d) => this.renderItem({ item: d }))
+        }
+      </View>
+    );
+  }
+}