From 8068c65f12913a77747279184def973707ba42d9 Mon Sep 17 00:00:00 2001
From: Christopher Chedeau <vjeux@fb.com>
Date: Tue, 24 Mar 2015 16:12:05 -0700
Subject: [PATCH] Initial pass at the front-page

---
 website/src/react-native/_index.js | 78 +++++++++++++++++++++++++++++-
 1 file changed, 77 insertions(+), 1 deletion(-)

diff --git a/website/src/react-native/_index.js b/website/src/react-native/_index.js
index b9c8a41ca58b6f..5b84e7f1ea0cb3 100644
--- a/website/src/react-native/_index.js
+++ b/website/src/react-native/_index.js
@@ -7,6 +7,7 @@
  * of patent rights can be found in the PATENTS file in the same directory.
  */
 
+var Prism = require('Prism');
 var React = require('React');
 var Site = require('Site');
 
@@ -29,7 +30,82 @@ var index = React.createClass({
               <a href="docs/getting-started.html#content" className="button">Learn more about React Native</a>
             </div>
           </section>
-          <p></p>
+
+          <h2>Native iOS Components</h2>
+          <p>With React Native, you can use the platform components such as iOS UITabBar and UINavigationController.</p>
+          <Prism>
+{`var React = require('react-native');
+var { TabBarIOS, NavigatorIOS } = React;
+module.exports = React.createClass({
+  render: function() {
+    return (
+      <TabBarIOS>
+        <TabBarIOS.Item title="React Native" selected={true}>
+          <NavigatorIOS initialRoute={{ title: 'React Native' }} />
+        </TabBarIOS.Item>
+      </TabBarIOS>
+    );
+  },
+});`}
+          </Prism>
+
+          <h2>Async</h2>
+
+          <p>Decoding images off of the main thread... Asynchronous bridge, Chrome Dev Tools...</p>
+
+          <h2>Touch Handling</h2>
+          <p>iOS has a very powerful system called Responder to handle touches which the web lacks. React Native implements iOS responder system and provides high level components such as TouchableHighlight that work well right off the bat.</p>
+
+          <Prism>
+{`var React = require('react-native');
+var { ScrollView, TouchableHighlight, Text } = React;
+module.exports = React.createClass({
+  render: function() {
+    return (
+      <ScrollView>
+        <TouchableHighlight underlayColor="#cccccc">
+          <Text>Proper Touch Handling</Text>
+        </TouchableHighlight>
+      </ScrollView>
+    );
+  },
+});`}
+          </Prism>
+
+          <h2>Flexbox</h2>
+          <p>Laying out views should be easy</p>
+
+          <Prism>
+{`var React = require('react-native');
+var { Image, StyleSheet, Text, View } = React;
+module.exports = React.createClass({
+  render: function() {
+    return (
+      <View style={styles.row}>
+        <Image
+          source={{uri: 'http://facebook.github.io/react/img/logo_og.png'}}
+          style={styles.image}
+        />
+        <View style={styles.text}>
+          <Text style={styles.title}>React Native</Text>
+          <Text style={styles.subtitle}>Build high quality mobile apps using React</Text>
+        </View>
+      </View>
+    );
+  },
+});
+var styles = StyleSheet.create({
+  row: { flexDirection: 'row', margin: 40 },
+  image: { width: 40, height: 40, marginRight: 10 },
+  text: { flex: 1, justifyContent: 'center'},
+  title: { fontSize: 11, fontWeight: 'bold' },
+  subtitle: { fontSize: 10 },
+});`}
+          </Prism>
+
+          <h2>Polyfills</h2>
+          <p>React Native attempts to innovate on the view layer, for the rest, it polyfills web standards. You can use npm to install JavaScript dependencies, XMLHttpRequest, requestAnimationFrame, navigator.geolocation...</p>
+
         </section>
       </Site>
     );