Make prev links work in guides and APIs.

Summary:
We had rendering support for prev links, but we never had any previous links in our metadata. Only next links. This adds that support to both Guides and APIs.

**For guides**: `previous` is manually inserted into the metadata of the actual markdown file.
**For APIs/Components**: `previous` is established via code within `extractDocs.js`

> This isn't totally perfect. For example, the transition from the last guide to the first API/component has a next link from the guide, but not a previous link from the API since the way you get the previous links are different from guides and APIs. But this gets us really close.
Closes https://github.com/facebook/react-native/pull/8754

Differential Revision: D3557972

Pulled By: hramos

fbshipit-source-id: e270bb51e7a4f59f61dad28ae0928d27d0af3d4a

docs/Accessibility.md

@@ -5,6 +5,7 @@ layout: docs
 category: Guides
 permalink: docs/accessibility.html
 next: timers
+previous: animations
 ---
 
 ## Native App Accessibility (iOS and Android)

docs/AndroidBuildingFromSource.md

@@ -5,6 +5,7 @@ layout: docs
 category: Guides (Android)
 permalink: docs/android-building-from-source.html
 next: activityindicator
+previous: android-ui-performance
 ---
 
 You will need to build React Native from source if you want to work on a new feature/bug fix, try out the latest features which are not released yet, or maintain your own fork with patches that cannot be merged to the core.

docs/AndroidUIPerformance.md

@@ -5,6 +5,7 @@ layout: docs
 category: Guides (Android)
 permalink: docs/android-ui-performance.html
 next: android-building-from-source
+previous: signed-apk-android
 ---
 
 We try our best to deliver buttery-smooth UI performance by default, but sometimes that just isn't possible. Remember, Android supports 10k+ different phones and is generalized to support software rendering: the framework architecture and need to generalize across many hardware targets unfortunately means you get less for free relative to iOS. But sometimes, there are things you can improve (and many times it's not native code's fault at all!).

docs/Animations.md

@@ -5,6 +5,7 @@ layout: docs
 category: Guides
 permalink: docs/animations.html
 next: accessibility
+previous: handling-touches
 ---
 
 Fluid, meaningful animations are essential to the mobile user experience. Like

docs/Colors.md

@@ -5,6 +5,7 @@ layout: docs
 category: Guides
 permalink: docs/colors.html
 next: images
+previous: integration-with-existing-apps
 ---
 
 The following formats are supported:

docs/CommunicationIOS.md

@@ -5,6 +5,7 @@ layout: docs
 category: Guides (iOS)
 permalink: docs/communication-ios.html
 next: native-modules-android
+previous: running-on-simulator-ios
 ---
 
 In [Integrating with Existing Apps guide](docs/embedded-app-ios.html) and [Native UI Components guide](docs/native-components-ios.html) we learn how to embed React Native in a native component and vice versa. When we mix native and React Native components, we'll eventually find a need to communicate between these two worlds. Some ways to achieve that have been already mentioned in other guides. This article summarizes available techniques.

docs/Debugging.md

@@ -5,6 +5,7 @@ layout: docs
 category: Guides
 permalink: docs/debugging.html
 next: testing
+previous: direct-manipulation
 ---
 
 ## Accessing the In-App Developer Menu

docs/DirectManipulation.md

@@ -5,6 +5,7 @@ layout: docs
 category: Guides
 permalink: docs/direct-manipulation.html
 next: debugging
+previous: timers
 ---
 
 It is sometimes necessary to make changes directly to a component

docs/GestureResponderSystem.md

@@ -5,6 +5,7 @@ layout: docs
 category: Guides
 permalink: docs/gesture-responder-system.html
 next: native-modules-ios
+previous: platform-specific-code
 ---
 
 Gesture recognition on mobile devices is much more complicated than web. A touch can go through several phases as the app determines what the user's intention is. For example, the app needs to determine if the touch is scrolling, sliding on a widget, or tapping. This can even change during the duration of a touch. There can also be multiple simultaneous touches.

docs/HandlingTextInput.md

@@ -5,6 +5,7 @@ layout: docs
 category: The Basics
 permalink: docs/handling-text-input.html
 next: using-a-scrollview
+previous: flexbox
 ---
 
 [`TextInput`](/react-native/docs/textinput.html#content) is a basic component that allows the user to enter text. It has an `onChangeText` prop that takes

docs/HandlingTouches.md

@@ -5,6 +5,7 @@ layout: docs
 category: Guides
 permalink: docs/handling-touches.html
 next: animations
+previous: images
 ---
 
 Users interact with mobile apps mainly through touch. They can use a combination of gestures, such as tapping on a button, scrolling a list, or zooming on a map.

docs/HeightAndWidth.md

@@ -5,6 +5,7 @@ layout: docs
 category: The Basics
 permalink: docs/height-and-width.html
 next: flexbox
+previous: style
 ---
 
 A component's height and width determine its size on the screen.

docs/Images.md

@@ -5,6 +5,7 @@ layout: docs
 category: Guides
 permalink: docs/images.html
 next:  handling-touches
+previous: colors
 ---
 
 ## Static Image Resources

docs/IntegrationWithExistingApps.md

@@ -5,6 +5,7 @@ layout: docs
 category: Guides
 permalink: docs/integration-with-existing-apps.html
 next: colors
+previous: more-resources
 ---
 
 <div class="integration-toggler">

docs/JavaScriptEnvironment.md

@@ -5,6 +5,7 @@ layout: docs
 category: Guides
 permalink: docs/javascript-environment.html
 next: navigation
+previous: testing
 ---
 
 ## JavaScript Runtime

docs/LayoutWithFlexbox.md

@@ -5,6 +5,7 @@ layout: docs
 category: The Basics
 permalink: docs/flexbox.html
 next: handling-text-input
+previous: height-and-width
 ---
 
 A component can specify the layout of its children using the flexbox algorithm. Flexbox is designed to provide a consistent layout on different screen sizes.

docs/LinkingLibraries.md

@@ -5,6 +5,7 @@ layout: docs
 category: Guides (iOS)
 permalink: docs/linking-libraries-ios.html
 next: running-on-device-ios
+previous: native-components-ios
 ---
 
 Not every app uses all the native capabilities, and including the code to support

docs/MoreResources.md

@@ -5,6 +5,7 @@ layout: docs
 category: The Basics
 permalink: docs/more-resources.html
 next: integration-with-existing-apps
+previous: using-navigators
 ---
 
 If you just read through this website, you should be able to build a pretty cool React Native app. But React Native isn't just a product made by one company - it's a community of thousands of developers. So if you're interested in React Native, here's some related stuff you might want to check out.

docs/NativeComponentsAndroid.md

@@ -5,6 +5,7 @@ layout: docs
 category: Guides (Android)
 permalink: docs/native-components-android.html
 next: running-on-device-android
+previous: native-modules-android
 ---
 
 There are tons of native UI widgets out there ready to be used in the latest apps - some of them are part of the platform, others are available as third-party libraries, and still more might be in use in your very own portfolio. React Native has several of the most critical platform components already wrapped, like `ScrollView` and `TextInput`, but not all of them, and certainly not ones you might have written yourself for a previous app. Fortunately, it's quite easy to wrap up these existing components for seamless integration with your React Native application.

docs/NativeComponentsIOS.md

@@ -5,6 +5,7 @@ layout: docs
 category: Guides (iOS)
 permalink: docs/native-components-ios.html
 next: linking-libraries-ios
+previous: native-modules-ios
 ---
 
 There are tons of native UI widgets out there ready to be used in the latest apps - some of them are part of the platform, others are available as third-party libraries, and still more might be in use in your very own portfolio.  React Native has several of the most critical platform components already wrapped, like `ScrollView` and `TextInput`, but not all of them, and certainly not ones you might have written yourself for a previous app.  Fortunately, it's quite easy to wrap up these existing components for seamless integration with your React Native application.

docs/NativeModulesAndroid.md

@@ -5,6 +5,7 @@ layout: docs
 category: Guides (Android)
 permalink: docs/native-modules-android.html
 next: native-components-android
+previous: communication-ios
 ---
 
 Sometimes an app needs access to a platform API that React Native doesn't have a corresponding module for yet. Maybe you want to reuse some existing Java code without having to reimplement it in JavaScript, or write some high performance, multi-threaded code such as for image processing, a database, or any number of advanced extensions.

docs/NativeModulesIOS.md

@@ -5,6 +5,7 @@ layout: docs
 category: Guides (iOS)
 permalink: docs/native-modules-ios.html
 next: native-components-ios
+previous: gesture-responder-system
 ---
 
 Sometimes an app needs access to platform API, and React Native doesn't have a corresponding module yet. Maybe you want to reuse some existing Objective-C, Swift or C++ code without having to reimplement it in JavaScript, or write some high performance, multi-threaded code such as for image processing, a database, or any number of advanced extensions.

docs/Navigation.md

@@ -5,6 +5,7 @@ layout: docs
 category: Guides
 permalink: docs/navigation.html
 next: performance
+previous: javascript-environment
 ---
 
 This guide covers the various navigation components available in React Native. If you are just getting started with navigation, you will probably want to use  `Navigator`. If you are only targeting iOS and would like to stick to the native look and feel, check out `NavigatorIOS`. If you are looking for greater control over your navigation stack, you can't go wrong with `NavigationExperimental`.

docs/Networking.md

@@ -5,6 +5,7 @@ layout: docs
 category: The Basics
 permalink: docs/network.html
 next: using-navigators
+previous: using-a-listview
 ---
 
 Many mobile apps need to load resources from a remote URL. You may want to make a POST request to a REST API, or you may simply need to fetch a chunk of static content from another server.

docs/Performance.md

@@ -5,6 +5,7 @@ layout: docs
 category: Guides
 permalink: docs/performance.html
 next: upgrading
+previous: navigation
 ---
 
 A compelling reason for using React Native instead of WebView-based

docs/PlatformSpecificInformation.md

@@ -5,6 +5,7 @@ layout: docs
 category: Guides
 permalink: docs/platform-specific-code.html
 next: gesture-responder-system
+previous: upgrading
 ---
 
 When building a cross-platform app, you'll want to re-use as much code as possible. Scenarios may arise where it makes sense for the code to be different, for example you may want to implement separate visual components for iOS and Android.

docs/Props.md

@@ -5,6 +5,7 @@ layout: docs
 category: The Basics
 permalink: docs/props.html
 next: state
+previous: tutorial
 ---
 
 Most components can be customized when they are created, with different parameters. These creation parameters are called `props`.

docs/RunningOnDeviceAndroid.md

@@ -5,6 +5,7 @@ layout: docs
 category: Guides (Android)
 permalink: docs/running-on-device-android.html
 next: signed-apk-android
+props: native-components-android
 ---
 
 ## Prerequisite: USB Debugging

docs/RunningOnDeviceIOS.md

@@ -5,6 +5,7 @@ layout: docs
 category: Guides (iOS)
 permalink: docs/running-on-device-ios.html
 next: running-on-simulator-ios
+previous: linking-libraries-ios
 ---
 
 Running an iOS app on a device requires an [Apple Developer account](https://developer.apple.com/) and provisioning your iPhone. This guide covers only React Native specific topics.

docs/RunningOnSimulatorIOS.md

@@ -5,6 +5,7 @@ layout: docs
 category: Guides (iOS)
 permalink: docs/running-on-simulator-ios.html
 next: communication-ios
+previous: running-on-device-ios
 ---
 
 ## Starting the simulator

docs/SignedAPKAndroid.md

@@ -5,6 +5,7 @@ layout: docs
 category: Guides (Android)
 permalink: docs/signed-apk-android.html
 next: android-ui-performance
+previous: running-on-device-android
 ---
 
 Android requires that all apps be digitally signed with a certificate before they can be installed, so to distribute your Android application via [Google Play store](https://play.google.com/store), you'll need to generate a signed release APK. The [Signing Your Applications](https://developer.android.com/tools/publishing/app-signing.html) page on Android Developers documentation describes the topic in detail. This guide covers the process in brief, as well as lists the steps required to packaging the JavaScript bundle.

docs/State.md

@@ -5,6 +5,7 @@ layout: docs
 category: The Basics
 permalink: docs/state.html
 next: style
+previous: props
 ---
 
 There are two types of data that control a component: `props` and `state`. `props` are set by the parent and they are fixed throughout the lifetime of a component. For data that is going to change, we have to use `state`.

docs/Style.md

@@ -5,6 +5,7 @@ layout: docs
 category: The Basics
 permalink: docs/style.html
 next: height-and-width
+previous: state
 ---
 
 With React Native, you don't use a special language or syntax for  defining styles. You just style your application using JavaScript. All of the core components accept a prop named `style`. The style names and values usually match how CSS works on the web, except names are written like `backgroundColor` instead of like `background-color`.

docs/Testing.md

@@ -5,6 +5,7 @@ layout: docs
 category: Guides
 permalink: docs/testing.html
 next: javascript-environment
+previous: debugging
 ---
 
 ## Running Tests and Contributing

docs/Timers.md

@@ -5,6 +5,7 @@ layout: docs
 category: Guides
 permalink: docs/timers.html
 next: direct-manipulation
+previous: accessibility
 ---
 
 Timers are an important part of an application and React Native implements the [browser timers](https://developer.mozilla.org/en-US/Add-ons/Code_snippets/Timers).

docs/Tutorial.md

@@ -5,6 +5,7 @@ layout: docs
 category: The Basics
 permalink: docs/tutorial.html
 next: props
+previous: getting-started
 ---
 
 React Native is like React, but it uses native components instead of web components as building blocks. So to understand the basic structure of a React Native app, you need to understand some of the basic React concepts, like JSX, components, `state`, and `props`. If you already know React, you still need to learn some React-Native-specific stuff, like the native components. This

docs/Upgrading.md

@@ -5,6 +5,7 @@ layout: docs
 category: Guides
 permalink: docs/upgrading.html
 next: platform-specific-code
+previous: performance
 ---
 
 Upgrading to new versions of React Native will give you access to more APIs, views, developer tools

docs/UsingAListView.md

@@ -5,6 +5,7 @@ layout: docs
 category: The Basics
 permalink: docs/using-a-listview.html
 next: network
+previous: using-a-scrollview
 ---
 
 The `ListView` component displays a vertically scrolling list of changing, but similarly structured, data.

docs/UsingAScrollView.md

@@ -5,6 +5,7 @@ layout: docs
 category: The Basics
 permalink: docs/using-a-scrollview.html
 next: using-a-listview
+previous: handling-text-input
 ---
 
 The [`ScrollView`](/react-native/docs/scrollview.html) is a generic scrolling container that can host multiple components and views. The scrollable items need not be homogenous, and you can scroll both vertically and horizontally (by setting the `horizontal` property).

docs/UsingNavigators.md

@@ -5,6 +5,7 @@ layout: docs
 category: The Basics
 permalink: docs/using-navigators.html
 next: more-resources
+previous: networking
 ---
 
 Mobile apps rarely consist of just one screen. As soon as you add a second screen to your app, you will have to take into consideration how the user will navigate from one screen to the other.

website/server/extractDocs.js

@@ -165,6 +165,19 @@ function getNextComponent(idx) {
   return null;
 }
 
+function getPreviousComponent(idx) {
+  if (all[idx - 1]) {
+    const previousComponentName = getNameFromPath(all[idx - 1]);
+
+    if (shouldDisplayInSidebar(previousComponentName)) {
+      return slugify(previousComponentName);
+    } else {
+      return getPreviousComponent(idx - 1);
+    }
+  }
+  return null;
+}
+
 function componentsToMarkdown(type, json, filepath, idx, styles) {
   const componentName = getNameFromPath(filepath);
   const componentPlatform = getPlatformFromPath(filepath);
@@ -189,6 +202,7 @@ function componentsToMarkdown(type, json, filepath, idx, styles) {
   // Put styles (e.g. Flexbox) into the API category
   const category = (type === 'style' ? 'apis' : type + 's');
   const next = getNextComponent(idx);
+  const previous = getPreviousComponent(idx);
 
   const res = [
     '---',
@@ -199,6 +213,7 @@ function componentsToMarkdown(type, json, filepath, idx, styles) {
     'permalink: docs/' + slugify(componentName) + '.html',
     'platform: ' + componentPlatform,
     'next: ' + next,
+    'previous: ' + previous,
     'sidebar: ' + shouldDisplayInSidebar(componentName),
     'runnable:' + isRunnable(componentName, componentPlatform),
     'path:' + json.filepath,