|
---
@@ -116,9 +116,9 @@ The foreground color of the spinner.
Whether the indicator should hide when not animating.
-| Type | Required | Default |
-| ---- | -------- | ------- |
-| bool | No | `true` |
+| Type | Default |
+| ---- | ------- |
+| bool | `true` |
---
@@ -126,6 +126,6 @@ Whether the indicator should hide when not animating.
Size of the indicator.
-| Type | Required | Default |
-| ------------------------------------------------------------------------------ | -------- | --------- |
-| enum(`'small'`, `'large'`)number
Android
| No | `'small'` |
+| Type | Default |
+| ------------------------------------------------------------------------------ | --------- |
+| enum(`'small'`, `'large'`)number
**`onPress`**
-Handler to be called when the user taps the button. The first function argument is an event in form of [PressEvent](pressevent).
+Handler to be called when the user taps the button.
-| Type | Required |
-| -------- | -------- |
-| function | Yes |
+| Type |
+| ---------------------------------- |
+| function([PressEvent](pressevent)) |
---
-### **`title`**
+###
Required
**`title`**
Text to display inside the button. On Android the given title will be converted to the uppercased form.
-| Type | Required |
-| ------ | -------- |
-| string | Yes |
+| Type |
+| ------ |
+| string |
---
@@ -132,9 +132,9 @@ Text to display inside the button. On Android the given title will be converted
Text to display for blindness accessibility features.
-| Type | Required |
-| ------ | -------- |
-| string | No |
+| Type |
+| ------ |
+| string |
---
@@ -142,9 +142,9 @@ Text to display for blindness accessibility features.
Color of the text (iOS), or background color of the button (Android).
-| Type | Required | Default |
-| --------------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [color](colors) | No | `'#2196F3'`
|
---
@@ -152,9 +152,9 @@ Color of the text (iOS), or background color of the button (Android).
If `true`, disable all interactions for this component.
-| Type | Required | Default |
-| ---- | -------- | ------- |
-| bool | No | `false` |
+| Type | Default |
+| ---- | ------- |
+| bool | `false` |
---
@@ -162,9 +162,9 @@ If `true`, disable all interactions for this component.
TV preferred focus.
-| Type | Required | Default |
-| ---- | -------- | ------- |
-| bool | No | `false` |
+| Type | Default |
+| ---- | ------- |
+| bool | `false` |
---
@@ -172,9 +172,9 @@ TV preferred focus.
Designates the next view to receive focus when the user navigates down. See the [Android documentation](https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusDown).
-| Type | Required |
-| ------ | -------- |
-| number | No |
+| Type |
+| ------ |
+| number |
---
@@ -182,9 +182,9 @@ Designates the next view to receive focus when the user navigates down. See the
Designates the next view to receive focus when the user navigates forward. See the [Android documentation](https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusForward).
-| Type | Required |
-| ------ | -------- |
-| number | No |
+| Type |
+| ------ |
+| number |
---
@@ -192,9 +192,9 @@ Designates the next view to receive focus when the user navigates forward. See t
Designates the next view to receive focus when the user navigates left. See the [Android documentation](https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusLeft).
-| Type | Required |
-| ------ | -------- |
-| number | No |
+| Type |
+| ------ |
+| number |
---
@@ -202,9 +202,9 @@ Designates the next view to receive focus when the user navigates left. See the
Designates the next view to receive focus when the user navigates right. See the [Android documentation](https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusRight).
-| Type | Required |
-| ------ | -------- |
-| number | No |
+| Type |
+| ------ |
+| number |
---
@@ -212,9 +212,9 @@ Designates the next view to receive focus when the user navigates right. See the
Designates the next view to receive focus when the user navigates up. See the [Android documentation](https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusUp).
-| Type | Required |
-| ------ | -------- |
-| number | No |
+| Type |
+| ------ |
+| number |
---
@@ -222,9 +222,9 @@ Designates the next view to receive focus when the user navigates up. See the [A
Used to locate this view in end-to-end tests.
-| Type | Required |
-| ------ | -------- |
-| string | No |
+| Type |
+| ------ |
+| string |
---
@@ -232,6 +232,6 @@ Used to locate this view in end-to-end tests.
If `true`, doesn't play system sound on touch.
-| Type | Required | Default |
-| ------- | -------- | ------- |
-| boolean | No | `false` |
+| Type | Default |
+| ------- | ------- |
+| boolean | `false` |
diff --git a/docs/pressable.md b/docs/pressable.md
index f30b1e1b582..adbddaaa9ac 100644
--- a/docs/pressable.md
+++ b/docs/pressable.md
@@ -1,228 +1,228 @@
----
-id: pressable
-title: Pressable
----
-
-Pressable is a Core Component wrapper that can detect various stages of press interactions on any of its defined children.
-
-```jsx
-
- I'm pressable!
-
-```
-
-## How it works
-
-On an element wrapped by `Pressable`:
-
-- [`onPressIn`](#onpressin) is called when a press is activated.
-- [`onPressOut`](#onpressout) is called when the press gesture is deactivated.
-
-After pressing [`onPressIn`](#onpressin), one of two things will happen:
-
-1. The person will remove their finger, triggering [`onPressOut`](#onpressout) followed by [`onPress`](#onpress).
-2. If the person had left their finger longer than 370 milliseconds before removing it, [`onLongPress`](#onlongpress) is triggered. ([`onPressOut`](#onpressout) will still fire when they remove their finger.)
-
-
-
-Fingers are not the most precise instruments, and it is common for users to accidentally activate the wrong element or miss the activation area. To help, `Pressable` has an optional `HitRect` you can use to define how far a touch can register away from the wrapped element. Presses can start anywhere within a `HitRect`.
-
-`PressRect` allows presses to move beyond the element and its `HitRect` while maintaining activation and being eligible for a "press"—think of sliding your finger slowly away from a button you're pressing down on.
-
-> The touch area never extends past the parent view bounds and the Z-index of sibling views always takes precedence if a touch hits two overlapping views.
-
-
-
-
- You can set HitRect with hitSlop and set PressRect with pressRetentionOffset.
-
-
-
-> `Pressable` uses React Native's `Pressability` API. For more information around the state machine flow of Pressability and how it works, check out the implementation for [Pressability](https://github.com/facebook/react-native/blob/16ea9ba8133a5340ed6751ec7d49bf03a0d4c5ea/Libraries/Pressability/Pressability.js#L347).
-
-## Example
-
-```js
-import React, { useState } from 'react';
-import { Pressable, StyleSheet, Text, View } from 'react-native';
-
-const App = () => {
- const [timesPressed, setTimesPressed] = useState(0);
-
- let textLog = '';
- if (timesPressed > 1) {
- textLog = timesPressed + 'x onPress';
- } else if (timesPressed > 0) {
- textLog = 'onPress';
- }
-
- return (
-
- {
- setTimesPressed((current) => current + 1);
- }}
- style={({ pressed }) => [
- {
- backgroundColor: pressed
- ? 'rgb(210, 230, 255)'
- : 'white'
- },
- styles.wrapperCustom
- ]}>
- {({ pressed }) => (
-
- {pressed ? 'Pressed!' : 'Press Me'}
-
- )}
-
-
- {textLog}
-
-
- );
-};
-
-const styles = StyleSheet.create({
- text: {
- fontSize: 16
- },
- wrapperCustom: {
- borderRadius: 8,
- padding: 6
- },
- logBox: {
- padding: 20,
- margin: 10,
- borderWidth: StyleSheet.hairlineWidth,
- borderColor: '#f0f0f0',
- backgroundColor: '#f9f9f9'
- }
-});
-
-export default App;
-```
-
-## Props
-
-### `android_disableSound`
Android
-
-If true, doesn't play Android system sound on press.
-
-| Type | Required | Default |
-| ------- | -------- | ------- |
-| boolean | No | `false` |
-
-### `android_ripple`
Android
-
-Enables the Android ripple effect and configures its properties.
-
-| Type | Required |
-| -------------------------------------- | -------- |
-| [RippleConfig](pressable#rippleconfig) | No |
-
-### `children`
-
-Either children or a function that receives a boolean reflecting whether the component is currently pressed.
-
-| Type | Required |
-| ------------------------ | -------- |
-| [React Node](react-node) | No |
-
-### `delayLongPress`
-
-Duration (in milliseconds) from `onPressIn` before `onLongPress` is called.
-
-| Type | Required | Default |
-| ------ | -------- | ------- |
-| number | No | 370 |
-
-### `disabled`
-
-Whether the press behavior is disabled.
-
-| Type | Required | Default |
-| ------- | -------- | ------- |
-| boolean | No | `false` |
-
-### `hitSlop`
-
-Sets additional distance outside of element in which a press can be detected.
-
-| Type | Required |
-| ---------------------- | -------- |
-| [Rect](rect) or number | No |
-
-### `onLongPress`
-
-Called if the time after `onPressIn` lasts longer than 370 milliseconds. This time period can be customized with [`delayLongPress`](#delaylongpress).
-
-| Type | Required |
-| ------------------------ | -------- |
-| [PressEvent](pressevent) | No |
-
-### `onPress`
-
-Called after `onPressOut`.
-
-| Type | Required |
-| ------------------------ | -------- |
-| [PressEvent](pressevent) | No |
-
-### `onPressIn`
-
-Called immediately when a touch is engaged, before `onPressOut` and `onPress`.
-
-| Type | Required |
-| ------------------------ | -------- |
-| [PressEvent](pressevent) | No |
-
-### `onPressOut`
-
-Called when a touch is released.
-
-| Type | Required |
-| ------------------------ | -------- |
-| [PressEvent](pressevent) | No |
-
-### `pressRetentionOffset`
-
-Additional distance outside of this view in which a touch is considered a press before `onPressOut` is triggered.
-
-| Type | Required | Default |
-| ---------------------- | -------- | ---------------------------------------------- |
-| [Rect](rect) or number | No | `{ bottom: 30, left: 20, right: 20, top: 20 }` |
-
-### `style`
-
-Either view styles or a function that receives a boolean reflecting whether the component is currently pressed and returns view styles.
-
-| Type | Required |
-| --------------------------------- | -------- |
-| [ViewStyleProp](view-style-props) | No |
-
-### `testOnly_pressed`
-
-Used only for documentation or testing (e.g. snapshot testing).
-
-| Type | Required | Default |
-| ------- | -------- | ------- |
-| boolean | No | `false` |
-
-## Type Definitions
-
-### RippleConfig
-
-Ripple effect configuration for the `android_ripple` property.
-
-| Type |
-| ------ |
-| object |
-
-**Properties:**
-
-| Name | Type | Required | Description |
-| ---------- | --------------- | -------- | --------------------------------------------------- |
-| color | [color](colors) | No | Defines the color of the ripple effect. |
-| borderless | boolean | No | Defines if ripple effect should not include border. |
-| radius | number | No | Defines the radius of the ripple effect. |
+---
+id: pressable
+title: Pressable
+---
+
+Pressable is a Core Component wrapper that can detect various stages of press interactions on any of it's defined children.
+
+```jsx
+
+ I'm pressable!
+
+```
+
+## How it works
+
+On an element wrapped by `Pressable`:
+
+- [`onPressIn`](#onpressin) is called when a press is activated.
+- [`onPressOut`](#onpressout) is called when the press gesture is deactivated.
+
+After pressing [`onPressIn`](#onpressin), one of two things will happen:
+
+1. The person will remove their finger, triggering [`onPressOut`](#onpressout) followed by [`onPress`](#onpress).
+2. If the person leaves their finger longer than 370 milliseconds before removing it, [`onLongPress`](#onlongpress) is triggered. ([`onPressOut`](#onpressout) will still fire when they remove their finger.)
+
+
+
+Fingers are not the most precise instruments, and it is common for users to accidentally activate the wrong element or miss the activation area. To help, `Pressable` has an optional `HitRect` you can use to define how far a touch can register away from the the wrapped element. Presses can start anywhere within a `HitRect`.
+
+`PressRect` allows presses to move beyond the element and its `HitRect` while maintaining activation and being eligible for a "press"—think of sliding your finger slowly away from a button you're pressing down on.
+
+> The touch area never extends past the parent view bounds and the Z-index of sibling views always takes precedence if a touch hits two overlapping views.
+
+
+
+
+ You can set HitRect with hitSlop and set PressRect with pressRetentionOffset.
+
+
+
+> `Pressable` uses React Native's `Pressability` API. For more information around the state machine flow of Pressability and how it works, check out the implementation for [Pressability](https://github.com/facebook/react-native/blob/16ea9ba8133a5340ed6751ec7d49bf03a0d4c5ea/Libraries/Pressability/Pressability.js#L347).
+
+## Example
+
+```js
+import React, { useState } from 'react';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+
+const App = () => {
+ const [timesPressed, setTimesPressed] = useState(0);
+
+ let textLog = '';
+ if (timesPressed > 1) {
+ textLog = timesPressed + 'x onPress';
+ } else if (timesPressed > 0) {
+ textLog = 'onPress';
+ }
+
+ return (
+
+ {
+ setTimesPressed((current) => current + 1);
+ }}
+ style={({ pressed }) => [
+ {
+ backgroundColor: pressed
+ ? 'rgb(210, 230, 255)'
+ : 'white'
+ },
+ styles.wrapperCustom
+ ]}>
+ {({ pressed }) => (
+
+ {pressed ? 'Pressed!' : 'Press Me'}
+
+ )}
+
+
+ {textLog}
+
+
+ );
+};
+
+const styles = StyleSheet.create({
+ text: {
+ fontSize: 16
+ },
+ wrapperCustom: {
+ borderRadius: 8,
+ padding: 6
+ },
+ logBox: {
+ padding: 20,
+ margin: 10,
+ borderWidth: StyleSheet.hairlineWidth,
+ borderColor: '#f0f0f0',
+ backgroundColor: '#f9f9f9'
+ }
+});
+
+export default App;
+```
+
+## Props
+
+### `android_disableSound`
Android
+
+If true, doesn't play Android system sound on press.
+
+| Type | Required | Default |
+| ------- | -------- | ------- |
+| boolean | No | `false` |
+
+### `android_ripple`
Android
+
+Enables the Android ripple effect and configures its properties.
+
+| Type | Required |
+| -------------------------------------- | -------- |
+| [RippleConfig](pressable#rippleconfig) | No |
+
+### `children`
+
+Either children or a function that receives a boolean reflecting whether the component is currently pressed.
+
+| Type | Required |
+| ------------------------ | -------- |
+| [React Node](react-node) | No |
+
+### `delayLongPress`
+
+Duration (in milliseconds) from `onPressIn` before `onLongPress` is called.
+
+| Type | Required | Default |
+| ------ | -------- | ------- |
+| number | No | 370 |
+
+### `disabled`
+
+Whether the press behavior is disabled.
+
+| Type | Required | Default |
+| ------- | -------- | ------- |
+| boolean | No | `false` |
+
+### `hitSlop`
+
+Sets additional distance outside of element in which a press can be detected.
+
+| Type | Required |
+| ---------------------- | -------- |
+| [Rect](rect) or number | No |
+
+### `onLongPress`
+
+Called if the time after `onPressIn` lasts longer than 370 milliseconds. This time period can be customized with [`delayLongPress`](#delaylongpress).
+
+| Type | Required |
+| ------------------------ | -------- |
+| [PressEvent](pressevent) | No |
+
+### `onPress`
+
+Called after `onPressOut`.
+
+| Type | Required |
+| ------------------------ | -------- |
+| [PressEvent](pressevent) | No |
+
+### `onPressIn`
+
+Called immediately when a touch is engaged, before `onPressOut` and `onPress`.
+
+| Type | Required |
+| ------------------------ | -------- |
+| [PressEvent](pressevent) | No |
+
+### `onPressOut`
+
+Called when a touch is released.
+
+| Type | Required |
+| ------------------------ | -------- |
+| [PressEvent](pressevent) | No |
+
+### `pressRetentionOffset`
+
+Additional distance outside of this view in which a touch is considered a press before `onPressOut` is triggered.
+
+| Type | Required | Default |
+| ---------------------- | -------- | ---------------------------------------------- |
+| [Rect](rect) or number | No | `{ bottom: 30, left: 20, right: 20, top: 20 }` |
+
+### `style`
+
+Either view styles or a function that receives a boolean reflecting whether the component is currently pressed and returns view styles.
+
+| Type | Required |
+| --------------------------------- | -------- |
+| [ViewStyleProp](view-style-props) | No |
+
+### `testOnly_pressed`
+
+Used only for documentation or testing (e.g. snapshot testing).
+
+| Type | Required | Default |
+| ------- | -------- | ------- |
+| boolean | No | `false` |
+
+## Type Definitions
+
+### RippleConfig
+
+Ripple effect configuration for the `android_ripple` property.
+
+| Type |
+| ------ |
+| object |
+
+**Properties:**
+
+| Name | Type | Required | Description |
+| ---------- | --------------- | -------- | --------------------------------------------------- |
+| color | [color](colors) | No | Defines the color of the ripple effect. |
+| borderless | boolean | No | Defines if ripple effect should not include border. |
+| radius | number | No | Defines the radius of the ripple effect. |
diff --git a/website/static/css/docs.css b/website/static/css/docs.css
index 2b17037cc00..3e8ae268ab8 100644
--- a/website/static/css/docs.css
+++ b/website/static/css/docs.css
@@ -221,6 +221,8 @@ figcaption {
border-radius: 0 2px 2px 0;
}
+/* Label sharp end */
+
.label:before {
content: "";
position: absolute;
@@ -231,6 +233,8 @@ figcaption {
border-width: 12px 12px 12px 0;
}
+/* Label skeuomorphic hole */
+
.label:after {
content: "";
position: absolute;
@@ -242,6 +246,21 @@ figcaption {
background: #fff;
}
+/* Label withouth sharp end */
+
+.label.basic {
+ border-radius: 3px;
+ border-style: solid;
+ border-width: 2px;
+}
+
+.label.basic:before,
+.label.basic:after {
+ display: none;
+}
+
+/* Label variants */
+
.label.android {
background: #a4c936;
}
@@ -256,6 +275,13 @@ figcaption {
border-right-color: #222;
}
+.label.required {
+ margin-left: 0;
+ margin-right: 16px;
+ color: #fa5035;
+ border-color: #fa5035;
+}
+
.label.tv {
background: #6170af;
}
@@ -263,6 +289,8 @@ figcaption {
border-right-color: #6170af;
}
+/* Label inside other tags */
+
h2 .label {
top: -6px;
margin-left: 12px;
@@ -306,9 +334,16 @@ td .label.required {
white-space: nowrap;
overflow: hidden;
color: transparent;
+ float: initial;
top: -1px;
}
+.onPageNav .label.required {
+ margin-left: 0;
+ margin-right: 6px;
+ border-width: 3px;
+}
+
/* Custom */
.content-banner {
- 
-
-Fingers are not the most precise instruments, and it is common for users to accidentally activate the wrong element or miss the activation area. To help, `Pressable` has an optional `HitRect` you can use to define how far a touch can register away from the wrapped element. Presses can start anywhere within a `HitRect`.
-
-`PressRect` allows presses to move beyond the element and its `HitRect` while maintaining activation and being eligible for a "press"—think of sliding your finger slowly away from a button you're pressing down on.
-
-> The touch area never extends past the parent view bounds and the Z-index of sibling views always takes precedence if a touch hits two overlapping views.
-
-