diff --git a/docs/Accessibility.md b/docs/Accessibility.md index f97f892f66a6c1..9ff6e18c53ddc9 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 326828a7f6e366..5b6ecb90b82bc4 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 bcb50863c0c903..ad93309e6e4ac3 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 a735a1a718f87f..05bf08f0d8301a 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 bd696b84bc8d87..7a8177819c0054 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 a2298188018b50..1b7b4c8c0179c9 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 dc25e2ade6ed87..1982d2b7d26872 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 a53faef6c59d26..52c22533ccf8a5 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 767b0d968dcc52..a6f2b4df693b68 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 c295b12537177a..0b1416cb32ce2f 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 +[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: -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. +```javascript +