Native Quick Start, Link Documentation, and Examples (#4678)

* Add Link, new Basic Example, and Quick Start

* Add Prompt documentation

* Remove my Prompt and reference original core Prompt

* Add native examples

packages/react-router-dom/docs/api/Prompt.md

@@ -1,3 +1,3 @@
 # <Prompt>
 
-TODO
+Re-exported from core [`Prompt`](../../../react-router/docs/api/Prompt.md)

packages/react-router-native/docs/api/Link.md

@@ -1,3 +1,49 @@
 # <Link>
 
-TODO
+Provide declarative, accessible navigation around your application.
+
+```js
+import { Link } from 'react-router-native'
+
+<Link to='/about'>About</Link>
+```
+
+## to: string
+
+The pathname or location to link to.
+
+```js
+<Link to='/courses'/>
+```
+
+## to: object
+
+The location to link to.
+
+```js
+<Link to={{
+  pathname: '/courses',
+  search: '?sort=name',
+  hash: '#the-hash',
+  state: { fromDashboard: true }
+}}/>
+```
+
+## replace: bool
+
+When `true`, clicking the link will replace the current entry in the history stack instead of adding a new one.
+
+```js
+<Link to="/courses" replace />
+```
+
+## component: func
+
+A component for making `Link` respond properly to touches. Typically will be one React Native's "touchable" components (`TouchableHighlight`, `TouchableOpacity`, etc). All props passed to `Link` will be passed along to this component. Defaults to `TouchableHighlight`.
+
+```js
+<Link
+  to='/about'
+  component={TouchableOpacity}
+  activeOpacity={0.8} />
+```

packages/react-router-native/docs/api/Prompt.md

@@ -0,0 +1,3 @@
+# <Prompt>
+
+Re-exported from core [`Prompt`](../../../react-router/docs/api/Prompt.md)

packages/react-router-native/docs/guides/quick-start.md

@@ -1,18 +1,137 @@
 # Quick Start
 
-Gimme 10 minutes, you'll be up and running.
-
-## Exponent
-
-Easiest way to get started is probably with Exponent.
+If this is your first time building a React Native app, we recommend you check out the official ["Getting Started"](https://facebook.github.io/react-native/docs/getting-started.html) guide.
 
 ## Installation
 
-React Router Native is published to [npm](https://npm.im/react-router-native) so you can install it with either `npm` or [`yarn`](https://yarnpkg.com).
+React Router Native is published to [npm](https://npm.im/react-router-native). You can install it with either `npm` or [`yarn`](https://yarnpkg.com).
 
 ```sh
 npm install react-router-native@next
 # or
 yarn add react-router-native@next
 ```
 
+Once you've initialized a new React Native project, you can copy/paste any of the examples into your `index.ios.js` or `index.android.js` files to play around with them.
+
+Here's the basic example:
+
+```jsx
+import React from 'react'
+import {
+  StyleSheet,
+  Text,
+  View,
+  AppRegistry,
+} from 'react-native'
+
+import { NativeRouter, Route, Link } from 'react-router-native'
+
+const Home = () => (
+  <Text style={styles.header}>
+    Home
+  </Text>
+)
+
+const About = () => (
+  <Text style={styles.header}>
+    About
+  </Text>
+)
+
+const Topic = ({ match }) => (
+  <Text style={styles.topic}>
+    {match.params.topicId}
+  </Text>
+)
+
+const Topics = ({ match }) => (
+  <View>
+    <Text style={styles.header}>Topics</Text>
+    <View>
+      <Link
+        to={`${match.url}/rendering`}
+        style={styles.subNavItem}
+        underlayColor='#f0f4f7'>
+          <Text>Rendering with React</Text>
+      </Link>
+      <Link
+        to={`${match.url}/components`}
+        style={styles.subNavItem}
+        underlayColor='#f0f4f7'>
+          <Text>Components</Text>
+      </Link>
+      <Link
+        to={`${match.url}/props-v-state`}
+        style={styles.subNavItem}
+        underlayColor='#f0f4f7'>
+          <Text>Props v. State</Text>
+      </Link>
+    </View>
+
+    <Route path={`${match.url}/:topicId`} component={Topic}/>
+    <Route exact path={match.url} render={() => (
+      <Text style={styles.topic}>Please select a topic.</Text>
+    )} />
+  </View>
+)
+
+const nativeRouterExamples = () => (
+  <NativeRouter>
+    <View style={styles.container}>
+      <View style={styles.nav}>
+        <Link
+          to="/"
+          underlayColor='#f0f4f7'
+          style={styles.navItem}>
+            <Text>Home</Text>
+        </Link>
+        <Link
+          to="/about"
+          underlayColor='#f0f4f7'
+          style={styles.navItem}>
+            <Text>About</Text>
+        </Link>
+        <Link
+          to="/topics"
+          underlayColor='#f0f4f7'
+          style={styles.navItem} >
+            <Text>Topics</Text>
+        </Link>
+      </View>
+
+      <Route exact path="/" component={Home}/>
+      <Route path="/about" component={About}/>
+      <Route path="/topics" component={Topics}/>
+    </View>
+  </NativeRouter>
+)
+
+const styles = StyleSheet.create({
+  container: {
+    marginTop: 25,
+    padding: 10,
+  },
+  header: {
+    fontSize: 20,
+  },
+  nav: {
+    flexDirection: 'row',
+    justifyContent: 'space-around'
+  },
+  navItem: {
+    flex: 1,
+    alignItems: 'center',
+    padding: 10,
+  },
+  subNavItem: {
+    padding: 5,
+  },
+  topic: {
+    textAlign: 'center',
+    fontSize: 15,
+  }
+})
+
+AppRegistry.registerComponent('MyApp', () => App);
+```

packages/react-router-native/examples/Ambiguous.js

@@ -0,0 +1,61 @@
+import React from 'react'
+import { StyleSheet, Text, AppRegistry, View } from 'react-native'
+import { NativeRouter, Route, Link, Switch } from 'react-router-native'
+
+const About = () => <Text style={styles.header}>About</Text>
+const Company = () => <Text style={styles.header}>Company</Text>
+const User = ({ match }) => (
+  <Text style={styles.header}>User: {match.params.user}</Text>
+)
+
+const AmbiguousExample = () => (
+  <NativeRouter>
+    <View style={styles.container}>
+      <View>
+        <Link to="/about" underlayColor='#f0f4f7'>
+          <Text>About Us (static)</Text>
+        </Link>
+        <Link to="/company" underlayColor='#f0f4f7'>
+          <Text>Company (static)</Text>
+        </Link>
+        <Link to="/kim" underlayColor='#f0f4f7'>
+          <Text>Kim (dynamic)</Text>
+        </Link>
+        <Link to="/chris" underlayColor='#f0f4f7'>
+          <Text>Chris (dynamic)</Text>
+        </Link>
+      </View>
+
+      {/*
+          Sometimes you want to have a whitelist of static paths
+          like "/about" and "/company" but also allow for dynamic
+          patterns like "/:user". The problem is that "/about"
+          is ambiguous and will match both "/about" and "/:user".
+          Most routers have an algorithm to decide for you what
+          it will match since they only allow you to match one
+          "route". React Router lets you match in multiple places
+          on purpose (sidebars, breadcrumbs, etc). So, when you
+          want to clear up any ambiguous matching, and not match
+          "/about" to "/:user", just wrap your <Route>s in a
+          <Switch>. It will render the first one that matches.
+      */}
+      <Switch>
+        <Route path="/about" component={About}/>
+        <Route path="/company" component={Company}/>
+        <Route path="/:user" component={User}/>
+      </Switch>
+    </View>
+  </NativeRouter>
+)
+
+const styles = StyleSheet.create({
+  container: {
+    marginTop: 25,
+    padding: 10,
+  },
+  header: {
+    fontSize: 20,
+  },
+})
+
+export default AmbiguousExample