Add a new Handling Touches guide

Summary:
The new Handling Touches guide provides an overall view of how touches can be handled. It is meant to be a higher level discussion of basic touch handling, e.g. "how do I implement a button?". The existing Gesture Responder System guide has been moved to the end of the docs and is still available for reference when building custom gesture handlers.

Reference: #8160

![handlingtouchesguide](https://cloud.githubusercontent.com/assets/165856/16256634/50a20c92-3808-11e6-8a5b-b49f2cda9fca.png)
Closes https://github.com/facebook/react-native/pull/8299

Differential Revision: D3469681

Pulled By: JoelMarcey

fbshipit-source-id: 3bc18e759b26c2d5c141b626acb433c5e973cef0

docs/GestureResponderSystem.md

@@ -4,7 +4,7 @@ title: Gesture Responder System
 layout: docs
 category: Guides
 permalink: docs/gesture-responder-system.html
-next: animations
+next: native-modules-ios
 ---
 
 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/HandlingTouches.md

@@ -0,0 +1,66 @@
+---
+id: handling-touches
+title: Handling Touches
+layout: docs
+category: Guides
+permalink: docs/handling-touches.html
+next: animations
+---
+
+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.
+
+React Native provides components to handle common gestures, such as taps and swipes, as well as a comprehensive [gesture responder system](/docs/gesturerespondersystem.html) to allow for more advanced gesture recognition.
+
+## Tappable Components
+
+You can use "Touchable" components when you want to capture a tapping gesture. They take a function through the `onPress` props which will be called when the touch begins and ends within the bounds of the component.
+
+Example:
+
+```javascript
+class MyButton extends Component {
+  _onPressButton() {
+    console.log("You tapped the button!");
+  }
+
+  render() {
+    return (
+      <TouchableHighlight onPress={this._onPressButton}>
+        <Text>Button</Text>
+      </TouchableHighlight>
+    );
+  }
+}
+```
+
+Tappable components should provide feedback that show the user what is handling their touch, and what will happen when they lift their finger. The user should also be able to cancel a tap by dragging their finger away.
+
+Which component you use will depend on what kind of feedback you want to provide:
+
+- Generally, you can use [**TouchableHighlight**](/docs/touchablehighlight.html) anywhere you would use a button or link on web. The view's background will be darkened when the user presses down on the button.
+
+- You may consider using [**TouchableNativeFeedback**](/docs/touchablenativefeedback.html) on Android to display ink surface reaction ripples that respond to the user's touch.
+
+- [**TouchableOpacity**](/docs/touchableopacity.html) can be used to provide feedback by reducing the opacity of the button, allowing the background to be seen through while the user is pressing down.
+
+- If you need to handle a tap gesture but you don't want any feedback to be displayed, use [**TouchableWithoutFeedback**](/docs/touchablewithoutfeedback.html).
+
+### Long presses
+
+In some cases, you may want to detect when a user presses and holds a view for a set amount of time. These long presses can be handled by passing a function to the `onLongPress` props of any of the touchable components listed above.
+
+## Scrolling lists and swiping views
+
+A common pattern to many mobile apps is the scrollable list of items. Users interact with these using panning or swiping gestures. The [ScrollView](/docs/basics-component-scrollview.html) component displays a list of items that can be scrolled using these gestures.
+
+ScrollViews can scroll vertically or horizontally, and can be configured to allow paging through views using swiping gestures by using the `pagingEnabled` props. Swiping horizontally between views can also be implemented on Android using the [ViewPagerAndroid](/docs/viewpagerandroid.html) component.
+
+A [ListView](/docs/basics-component-listview.html) is a special kind of ScrollView that is best suited for displaying long vertical lists of items. It can also display section headers and footers, similar to `UITableView`s on iOS.
+
+### Pinch-to-zoom
+
+A ScrollView with a single item can be used to allow the user to zoom content. Set up the `maximumZoomScale` and `minimumZoomScale` props and your user will be able to use pinch and expand gestures to zoom in and out.
+
+## Handling additional gestures
+
+If you want to allow a user to drag a view around the screen, or you want to implement your own custom pan/drag gesture, take a look at the [PanResponder](/docs/panresponder.html) API or the [gesture responder system docs](/docs/gesturerespondersystem.html).

docs/Images.md

@@ -4,7 +4,7 @@ title: Images
 layout: docs
 category: Guides
 permalink: docs/images.html
-next: gesture-responder-system
+next:  handling-touches
 ---
 
 ## Static Image Resources

docs/PlatformSpecificInformation.md

@@ -4,7 +4,7 @@ title: Platform Specific Code
 layout: docs
 category: Guides
 permalink: docs/platform-specific-code.html
-next: native-modules-ios
+next: gesture-responder-system
 ---
 
 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.