From f42f2dff3726eea0faa874e89ca9a6f32010ad05 Mon Sep 17 00:00:00 2001 From: Hector Ramos Date: Wed, 7 Jun 2017 11:40:26 -0700 Subject: [PATCH] New Handling Touches Tutorial Summary: Finally, a place where `Button` is properly introduced. This is based on the old Handling Touches guide, which has been simplified (with some content moved over to the scroll views tutorial). I've also updated the ordering of the guides into something that makes more sense to someone just getting started with React Native. Closes https://github.com/facebook/react-native/pull/14371 Differential Revision: D5201127 Pulled By: hramos fbshipit-source-id: 819192e2db9febb8a315f51693dae557752b6002 --- docs/Accessibility.md | 2 +- docs/AndroidBuildingFromSource.md | 4 +- docs/Animations.md | 4 +- docs/BuildingForAppleTV.md | 6 +- docs/Colors.md | 6 +- docs/Debugging.md | 4 +- docs/DirectManipulation.md | 3 +- docs/GestureResponderSystem.md | 2 +- docs/HandlingTextInput.md | 2 +- docs/HandlingTouches.md | 170 ++++++++++++++++++++---- docs/Images.md | 6 +- docs/IntegrationWithExistingApps.md | 2 +- docs/JavaScriptEnvironment.md | 2 +- docs/MoreResources.md | 8 +- docs/NativeModulesAndroid.md | 2 +- docs/Navigation.md | 9 +- docs/Networking.md | 3 +- docs/Performance.md | 2 +- docs/PlatformSpecificInformation.md | 8 +- docs/RunningOnDevice.md | 2 + docs/Testing.md | 6 +- docs/Timers.md | 2 +- docs/Tutorial.md | 20 ++- docs/UnderstandingCLI.md | 4 +- docs/Upgrading.md | 4 +- docs/UsingAListView.md | 2 +- docs/UsingAScrollView.md | 10 +- website/src/react-native/css/prism.css | 1 - website/src/react-native/img/Button.png | Bin 0 -> 19232 bytes website/src/react-native/support.js | 126 +++++++++++++++--- 30 files changed, 317 insertions(+), 105 deletions(-) create mode 100644 website/src/react-native/img/Button.png diff --git a/docs/Accessibility.md b/docs/Accessibility.md index f97f892f6..9ff6e18c5 100644 --- a/docs/Accessibility.md +++ b/docs/Accessibility.md @@ -5,7 +5,7 @@ layout: docs category: Guides permalink: docs/accessibility.html next: timers -previous: debugging +previous: animations --- ## Native App Accessibility (iOS and Android) diff --git a/docs/AndroidBuildingFromSource.md b/docs/AndroidBuildingFromSource.md index 326828a7f..5b6ecb90b 100644 --- a/docs/AndroidBuildingFromSource.md +++ b/docs/AndroidBuildingFromSource.md @@ -153,11 +153,11 @@ Start by following the `Point Gradle to your Android SDK` section of this page. ./gradlew ReactAndroid:installArchives ``` -This will package everything that would typically be included in the `android` directory of your `node_modules/react-native/` installation in the root directory of your React Native checkout. +This will package everything that would typically be included in the `android` directory of your `node_modules/react-native/` installation in the root directory of your React Native checkout. ## Testing -If you made changes to React Native and submit a pull request, all tests will run on your pull request automatically. To run the tests locally, see [Testing](docs/testing.html). +If you made changes to React Native and submit a pull request, all tests will run on your pull request automatically. To run the tests locally, see [Running Tests](docs/testing.html). ## Troubleshooting diff --git a/docs/Animations.md b/docs/Animations.md index bcb50863c..ad93309e6 100644 --- a/docs/Animations.md +++ b/docs/Animations.md @@ -4,8 +4,8 @@ title: Animations layout: docs category: Guides permalink: docs/animations.html -next: navigation -previous: handling-touches +next: accessibility +previous: images --- Animations are very important to create a great user experience. diff --git a/docs/BuildingForAppleTV.md b/docs/BuildingForAppleTV.md index a735a1a71..05bf08f0d 100644 --- a/docs/BuildingForAppleTV.md +++ b/docs/BuildingForAppleTV.md @@ -2,7 +2,7 @@ id: building-for-apple-tv title: Building For Apple TV layout: docs -category: Guides (Apple TV) +category: Guides (iOS) permalink: docs/building-for-apple-tv.html banner: ejected next: native-modules-android @@ -84,12 +84,10 @@ class Game2048 extends React.Component { ``` -- *TV remote animations*: `RCTTVView` native code implements Apple-recommended parallax animations to help guide the eye as the user navigates through views. The animations can be disabled or adjusted with new optional view properties. +- *TV remote animations*: `RCTTVView` native code implements Apple-recommended parallax animations to help guide the eye as the user navigates through views. The animations can be disabled or adjusted with new optional view properties. - *Back navigation with the TV remote menu button*: The `BackHandler` component, originally written to support the Android back button, now also supports back navigation on the Apple TV using the menu button on the TV remote. - *Known issues*: - [ListView scrolling](https://github.com/facebook/react-native/issues/12793). The issue can be easily worked around by setting `removeClippedSubviews` to false in ListView and similar components. For more discussion of this issue, see [this PR](https://github.com/facebook/react-native/pull/12944). - - diff --git a/docs/Colors.md b/docs/Colors.md index bd696b84b..7a8177819 100644 --- a/docs/Colors.md +++ b/docs/Colors.md @@ -1,11 +1,11 @@ --- id: colors -title: Colors +title: Color Reference layout: docs category: Guides permalink: docs/colors.html -next: platform-specific-code -previous: images +next: integration-with-existing-apps +previous: direct-manipulation --- Components in React Native are [styled using JavaScript](docs/style.html). Color properties usually match how [CSS works on the web](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value). diff --git a/docs/Debugging.md b/docs/Debugging.md index a22981880..1b7b4c8c0 100644 --- a/docs/Debugging.md +++ b/docs/Debugging.md @@ -4,8 +4,8 @@ title: Debugging layout: docs category: Guides permalink: docs/debugging.html -next: accessibility -previous: platform-specific-code +next: performance +previous: timers --- ## Enabling Keyboard Shortcuts diff --git a/docs/DirectManipulation.md b/docs/DirectManipulation.md index dc25e2ade..1982d2b7d 100644 --- a/docs/DirectManipulation.md +++ b/docs/DirectManipulation.md @@ -4,7 +4,7 @@ title: Direct Manipulation layout: docs category: Guides permalink: docs/direct-manipulation.html -next: performance +next: colors previous: javascript-environment --- @@ -267,4 +267,3 @@ Requests focus for the given input or view. The exact behavior triggered will de ### blur() Removes focus from an input or view. This is the opposite of `focus()`. - diff --git a/docs/GestureResponderSystem.md b/docs/GestureResponderSystem.md index a53faef6c..52c22533c 100644 --- a/docs/GestureResponderSystem.md +++ b/docs/GestureResponderSystem.md @@ -4,7 +4,7 @@ title: Gesture Responder System layout: docs category: Guides permalink: docs/gesture-responder-system.html -next: testing +next: javascript-environment previous: performance --- diff --git a/docs/HandlingTextInput.md b/docs/HandlingTextInput.md index 767b0d968..a6f2b4df6 100644 --- a/docs/HandlingTextInput.md +++ b/docs/HandlingTextInput.md @@ -4,7 +4,7 @@ title: Handling Text Input layout: docs category: The Basics permalink: docs/handling-text-input.html -next: using-a-scrollview +next: handling-touches previous: flexbox --- diff --git a/docs/HandlingTouches.md b/docs/HandlingTouches.md index c295b1253..0b1416cb3 100644 --- a/docs/HandlingTouches.md +++ b/docs/HandlingTouches.md @@ -2,41 +2,97 @@ id: handling-touches title: Handling Touches layout: docs -category: Guides +category: The Basics permalink: docs/handling-touches.html -next: animations -previous: components +next: using-a-scrollview +previous: handling-text-input --- -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. +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 all sorts of common gestures, as well as a comprehensive [gesture responder system](docs/gesture-responder-system.html) to allow for more advanced gesture recognition, but the one component you will most likely be interested in is the basic Button. -React Native provides components to handle common gestures, such as taps and swipes, as well as a comprehensive [gesture responder system](docs/gesture-responder-system.html) to allow for more advanced gesture recognition. +## Displaying a basic button -## 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: +[Button](docs/button.html) provides a basic button component that is rendered nicely on all platforms. The minimal example to display a button looks like this: ```javascript -class MyButton extends Component { +