diff --git a/Libraries/Components/AccessibilityInfo/AccessibilityInfo.android.js b/Libraries/Components/AccessibilityInfo/AccessibilityInfo.android.js index 47afbe2a3ed36c..2fb4517714a588 100644 --- a/Libraries/Components/AccessibilityInfo/AccessibilityInfo.android.js +++ b/Libraries/Components/AccessibilityInfo/AccessibilityInfo.android.js @@ -24,6 +24,16 @@ type ChangeEventName = $Enum<{ var _subscriptions = new Map(); +/** + * Sometimes it's useful to know whether or not the device has a screen reader + * that is currently active. The `AccessibilityInfo` API is designed for this + * purpose. You can use it to query the current state of the screen reader as + * well as to register to be notified when the state of the screen reader + * changes. + * + * See http://facebook.github.io/react-native/docs/accessibilityinfo.html + */ + var AccessibilityInfo = { fetch: function(): Promise { diff --git a/Libraries/Components/AccessibilityInfo/AccessibilityInfo.ios.js b/Libraries/Components/AccessibilityInfo/AccessibilityInfo.ios.js index 65f7af70d17d26..fb3ce8095c0e61 100644 --- a/Libraries/Components/AccessibilityInfo/AccessibilityInfo.ios.js +++ b/Libraries/Components/AccessibilityInfo/AccessibilityInfo.ios.js @@ -28,61 +28,23 @@ type ChangeEventName = $Enum<{ var _subscriptions = new Map(); /** - * Sometimes it's useful to know whether or not the device has a screen reader that is currently active. The - * `AccessibilityInfo` API is designed for this purpose. You can use it to query the current state of the - * screen reader as well as to register to be notified when the state of the screen reader changes. + * Sometimes it's useful to know whether or not the device has a screen reader + * that is currently active. The `AccessibilityInfo` API is designed for this + * purpose. You can use it to query the current state of the screen reader as + * well as to register to be notified when the state of the screen reader + * changes. * - * Here's a small example illustrating how to use `AccessibilityInfo`: - * - * ```javascript - * class ScreenReaderStatusExample extends React.Component { - * state = { - * screenReaderEnabled: false, - * } - * - * componentDidMount() { - * AccessibilityInfo.addEventListener( - * 'change', - * this._handleScreenReaderToggled - * ); - * AccessibilityInfo.fetch().done((isEnabled) => { - * this.setState({ - * screenReaderEnabled: isEnabled - * }); - * }); - * } - * - * componentWillUnmount() { - * AccessibilityInfo.removeEventListener( - * 'change', - * this._handleScreenReaderToggled - * ); - * } - * - * _handleScreenReaderToggled = (isEnabled) => { - * this.setState({ - * screenReaderEnabled: isEnabled, - * }); - * } - * - * render() { - * return ( - * - * - * The screen reader is {this.state.screenReaderEnabled ? 'enabled' : 'disabled'}. - * - * - * ); - * } - * } - * ``` + * See http://facebook.github.io/react-native/docs/accessibilityinfo.html */ var AccessibilityInfo = { /** - * Query whether a screen reader is currently enabled. Returns a promise which - * resolves to a boolean. The result is `true` when a screen reader is enabled - * and `false` otherwise. + * Query whether a screen reader is currently enabled. + * + * Returns a promise which resolves to a boolean. + * The result is `true` when a screen reader is enabledand `false` otherwise. + * + * See http://facebook.github.io/react-native/docs/accessibilityinfo.html#fetch */ fetch: function(): Promise { return new Promise((resolve, reject) => { @@ -100,10 +62,13 @@ var AccessibilityInfo = { * to the event handler is a boolean. The boolean is `true` when a screen * reader is enabled and `false` otherwise. * - `announcementFinished`: iOS-only event. Fires when the screen reader has - * finished making an announcement. The argument to the event handler is a dictionary - * with these keys: + * finished making an announcement. The argument to the event handler is a + * dictionary with these keys: * - `announcement`: The string announced by the screen reader. - * - `success`: A boolean indicating whether the announcement was successfully made. + * - `success`: A boolean indicating whether the announcement was + * successfully made. + * + * See http://facebook.github.io/react-native/docs/accessibilityinfo.html#addeventlistener */ addEventListener: function ( eventName: ChangeEventName, @@ -130,7 +95,11 @@ var AccessibilityInfo = { }, /** - * iOS-Only. Set accessibility focus to a react component. + * Set accessibility focus to a react component. + * + * @platform ios + * + * See http://facebook.github.io/react-native/docs/accessibilityinfo.html#setaccessibilityfocus */ setAccessibilityFocus: function( reactTag: number @@ -139,7 +108,11 @@ var AccessibilityInfo = { }, /** - * iOS-Only. Post a string to be announced by the screen reader. + * Post a string to be announced by the screen reader. + * + * @platform ios + * + * See http://facebook.github.io/react-native/docs/accessibilityinfo.html#announceforaccessibility */ announceForAccessibility: function( announcement: string @@ -149,6 +122,8 @@ var AccessibilityInfo = { /** * Remove an event handler. + * + * See http://facebook.github.io/react-native/docs/accessibilityinfo.html#removeeventlistener */ removeEventListener: function( eventName: ChangeEventName, diff --git a/Libraries/Components/ActivityIndicator/ActivityIndicator.js b/Libraries/Components/ActivityIndicator/ActivityIndicator.js index c16a9f61e91908..6ea90069cdb125 100644 --- a/Libraries/Components/ActivityIndicator/ActivityIndicator.js +++ b/Libraries/Components/ActivityIndicator/ActivityIndicator.js @@ -38,45 +38,7 @@ type DefaultProps = { /** * Displays a circular loading indicator. * - * ### Example - * - * ```ReactNativeWebPlayer - * import React, { Component } from 'react' - * import { - * ActivityIndicator, - * AppRegistry, - * StyleSheet, - * Text, - * View, - * } from 'react-native' - * - * class App extends Component { - * render() { - * return ( - * - * - * - * - * - * - * ) - * } - * } - * - * const styles = StyleSheet.create({ - * container: { - * flex: 1, - * justifyContent: 'center' - * }, - * horizontal: { - * flexDirection: 'row', - * justifyContent: 'space-around', - * padding: 10 - * } - * }) - * - * AppRegistry.registerComponent('App', () => App) - * ``` + * See http://facebook.github.io/react-native/docs/activityindicator.html */ const ActivityIndicator = createReactClass({ displayName: 'ActivityIndicator', @@ -86,15 +48,21 @@ const ActivityIndicator = createReactClass({ ...ViewPropTypes, /** * Whether to show the indicator (true, the default) or hide it (false). + * + * See http://facebook.github.io/react-native/docs/activityindicator.html#animating */ animating: PropTypes.bool, /** * The foreground color of the spinner (default is gray). + * + * See http://facebook.github.io/react-native/docs/activityindicator.html#color */ color: ColorPropType, /** * Size of the indicator (default is 'small'). * Passing a number to the size prop is only supported on Android. + * + * See http://facebook.github.io/react-native/docs/activityindicator.html#size */ size: PropTypes.oneOfType([ PropTypes.oneOf([ 'small', 'large' ]), @@ -104,6 +72,8 @@ const ActivityIndicator = createReactClass({ * Whether the indicator should hide when not animating (true by default). * * @platform ios + * + * See http://facebook.github.io/react-native/docs/activityindicator.html#hideswhenstopped */ hidesWhenStopped: PropTypes.bool, }, diff --git a/Libraries/Components/View/View.js b/Libraries/Components/View/View.js index 954ecc0412ac59..f10f183c08f06f 100644 --- a/Libraries/Components/View/View.js +++ b/Libraries/Components/View/View.js @@ -28,50 +28,9 @@ import type {ViewProps} from 'ViewPropTypes'; export type Props = ViewProps; /** - * The most fundamental component for building a UI, `View` is a container that supports layout with - * [flexbox](docs/flexbox.html), [style](docs/style.html), - * [some touch handling](docs/handling-touches.html), and - * [accessibility](docs/accessibility.html) controls. `View` maps directly to the - * native view equivalent on whatever platform React Native is running on, whether that is a - * `UIView`, `
`, `android.view`, etc. + * The most fundamental component for building a UI. * - * `View` is designed to be nested inside other views and can have 0 to many children of any type. - * - * This example creates a `View` that wraps two colored boxes and a text component in a row with - * padding. - * - * ```javascript - * class ViewColoredBoxesWithText extends Component { - * render() { - * return ( - * - * - * - * Hello World! - * - * ); - * } - * } - * ``` - * - * > `View`s are designed to be used with [`StyleSheet`](docs/style.html) for clarity - * > and performance, although inline styles are also supported. - * - * ### Synthetic Touch Events - * - * For `View` responder props (e.g., `onResponderMove`), the synthetic touch event passed to them - * are of the following form: - * - * - `nativeEvent` - * - `changedTouches` - Array of all touch events that have changed since the last event. - * - `identifier` - The ID of the touch. - * - `locationX` - The X position of the touch, relative to the element. - * - `locationY` - The Y position of the touch, relative to the element. - * - `pageX` - The X position of the touch, relative to the root element. - * - `pageY` - The Y position of the touch, relative to the root element. - * - `target` - The node id of the element receiving the touch event. - * - `timestamp` - A time identifier for the touch, useful for velocity calculation. - * - `touches` - Array of all current touches on the screen. + * See http://facebook.github.io/react-native/docs/view.html */ const View = createReactClass({ displayName: 'View', diff --git a/Libraries/Components/View/ViewPropTypes.js b/Libraries/Components/View/ViewPropTypes.js index 30cfc2020083d9..d6510a388279ba 100644 --- a/Libraries/Components/View/ViewPropTypes.js +++ b/Libraries/Components/View/ViewPropTypes.js @@ -44,7 +44,7 @@ export type ViewLayoutEvent = { } } -// There's no easy way to create a different type if(Platform.isTVOS): +// There's no easy way to create a different type if (Platform.isTVOS): // so we must include TVViewProps export type ViewProps = { accessible?: bool, @@ -83,15 +83,19 @@ module.exports = { ...PlatformViewPropTypes, /** - * When `true`, indicates that the view is an accessibility element. By default, - * all the touchable elements are accessible. + * When `true`, indicates that the view is an accessibility element. + * By default, all the touchable elements are accessible. + * + * See http://facebook.github.io/react-native/docs/view.html#accessible */ accessible: PropTypes.bool, /** * Overrides the text that's read by the screen reader when the user interacts - * with the element. By default, the label is constructed by traversing all the - * children and accumulating all the `Text` nodes separated by space. + * with the element. By default, the label is constructed by traversing all + * the children and accumulating all the `Text` nodes separated by space. + * + * See http://facebook.github.io/react-native/docs/view.html#accessibilitylabel */ accessibilityLabel: PropTypes.node, @@ -99,30 +103,19 @@ module.exports = { * Indicates to accessibility services to treat UI component like a * native one. Works for Android only. * - * Possible values are one of: - * - * - `'none'` - * - `'button'` - * - `'radiobutton_checked'` - * - `'radiobutton_unchecked'` - * * @platform android + * + * See http://facebook.github.io/react-native/docs/view.html#accessibilitycomponenttype */ accessibilityComponentType: PropTypes.oneOf(AccessibilityComponentTypes), /** * Indicates to accessibility services whether the user should be notified * when this view changes. Works for Android API >= 19 only. - * Possible values: - * - * - `'none'` - Accessibility services should not announce changes to this view. - * - `'polite'`- Accessibility services should announce changes to this view. - * - `'assertive'` - Accessibility services should interrupt ongoing speech to immediately announce changes to this view. - * - * See the [Android `View` docs](http://developer.android.com/reference/android/view/View.html#attr_android:accessibilityLiveRegion) - * for reference. * * @platform android + * + * See http://facebook.github.io/react-native/docs/view.html#accessibilityliveregion */ accessibilityLiveRegion: PropTypes.oneOf([ 'none', @@ -135,19 +128,9 @@ module.exports = { * fires accessibility events and if it is reported to accessibility services * that query the screen. Works for Android only. * - * Possible values: - * - * - `'auto'` - The system determines whether the view is important for accessibility - - * default (recommended). - * - `'yes'` - The view is important for accessibility. - * - `'no'` - The view is not important for accessibility. - * - `'no-hide-descendants'` - The view is not important for accessibility, - * nor are any of its descendant views. - * - * See the [Android `importantForAccessibility` docs](http://developer.android.com/reference/android/R.attr.html#importantForAccessibility) - * for reference. - * * @platform android + * + * See http://facebook.github.io/react-native/docs/view.html#importantforaccessibility */ importantForAccessibility: PropTypes.oneOf([ 'auto', @@ -162,30 +145,9 @@ module.exports = { * * You can provide one trait or an array of many traits. * - * Possible values for `AccessibilityTraits` are: - * - * - `'none'` - The element has no traits. - * - `'button'` - The element should be treated as a button. - * - `'link'` - The element should be treated as a link. - * - `'header'` - The element is a header that divides content into sections. - * - `'search'` - The element should be treated as a search field. - * - `'image'` - The element should be treated as an image. - * - `'selected'` - The element is selected. - * - `'plays'` - The element plays sound. - * - `'key'` - The element should be treated like a keyboard key. - * - `'text'` - The element should be treated as text. - * - `'summary'` - The element provides app summary information. - * - `'disabled'` - The element is disabled. - * - `'frequentUpdates'` - The element frequently changes its value. - * - `'startsMedia'` - The element starts a media session. - * - `'adjustable'` - The element allows adjustment over a range of values. - * - `'allowsDirectInteraction'` - The element allows direct touch interaction for VoiceOver users. - * - `'pageTurn'` - Informs VoiceOver that it should scroll to the next page when it finishes reading the contents of the element. - * - * See the [Accessibility guide](docs/accessibility.html#accessibilitytraits-ios) - * for more information. - * * @platform ios + * + * See http://facebook.github.io/react-native/docs/view.html#accessibilitytraits */ accessibilityTraits: PropTypes.oneOfType([ PropTypes.oneOf(AccessibilityTraits), @@ -197,22 +159,25 @@ module.exports = { * within views that are siblings of the receiver. * Default is `false`. * - * See the [Accessibility guide](docs/accessibility.html#accessibilitytraits-ios) - * for more information. - * * @platform ios + * + * See http://facebook.github.io/react-native/docs/view.html#accessibilityviewismodal */ accessibilityViewIsModal: PropTypes.bool, /** * When `accessible` is true, the system will try to invoke this function * when the user performs accessibility tap gesture. + * + * See http://facebook.github.io/react-native/docs/view.html#onaccessibilitytap */ onAccessibilityTap: PropTypes.func, /** * When `accessible` is `true`, the system will invoke this function when the * user performs the magic tap gesture. + * + * See http://facebook.github.io/react-native/docs/view.html#onmagictap */ onMagicTap: PropTypes.func, @@ -220,6 +185,8 @@ module.exports = { * Used to locate this view in end-to-end tests. * * > This disables the 'layout-only view removal' optimization for this view! + * + * See http://facebook.github.io/react-native/docs/view.html#testid */ testID: PropTypes.string, @@ -227,6 +194,8 @@ module.exports = { * Used to locate this view from native classes. * * > This disables the 'layout-only view removal' optimization for this view! + * + * See http://facebook.github.io/react-native/docs/view.html#nativeid */ nativeID: PropTypes.string, @@ -237,90 +206,111 @@ module.exports = { */ /** - * The View is now responding for touch events. This is the time to highlight and show the user - * what is happening. + * The View is now responding for touch events. This is the time to highlight + * and show the user what is happening. * - * `View.props.onResponderGrant: (event) => {}`, where `event` is a synthetic touch event as - * described above. + * `View.props.onResponderGrant: (event) => {}`, where `event` is a synthetic + * touch event as described above. + * + * See http://facebook.github.io/react-native/docs/view.html#onrespondergrant */ onResponderGrant: PropTypes.func, /** * The user is moving their finger. * - * `View.props.onResponderMove: (event) => {}`, where `event` is a synthetic touch event as - * described above. + * `View.props.onResponderMove: (event) => {}`, where `event` is a synthetic + * touch event as described above. + * + * See http://facebook.github.io/react-native/docs/view.html#onrespondermove */ onResponderMove: PropTypes.func, /** - * Another responder is already active and will not release it to that `View` asking to be - * the responder. + * Another responder is already active and will not release it to that `View` + * asking to be the responder. * - * `View.props.onResponderReject: (event) => {}`, where `event` is a synthetic touch event as - * described above. + * `View.props.onResponderReject: (event) => {}`, where `event` is a + * synthetic touch event as described above. + * + * See http://facebook.github.io/react-native/docs/view.html#onresponderreject */ onResponderReject: PropTypes.func, /** * Fired at the end of the touch. * - * `View.props.onResponderRelease: (event) => {}`, where `event` is a synthetic touch event as - * described above. + * `View.props.onResponderRelease: (event) => {}`, where `event` is a + * synthetic touch event as described above. + * + * See http://facebook.github.io/react-native/docs/view.html#onresponderrelease */ onResponderRelease: PropTypes.func, /** - * The responder has been taken from the `View`. Might be taken by other views after a call to - * `onResponderTerminationRequest`, or might be taken by the OS without asking (e.g., happens - * with control center/ notification center on iOS) + * The responder has been taken from the `View`. Might be taken by other + * views after a call to `onResponderTerminationRequest`, or might be taken + * by the OS without asking (e.g., happens with control center/ notification + * center on iOS) * - * `View.props.onResponderTerminate: (event) => {}`, where `event` is a synthetic touch event as - * described above. + * `View.props.onResponderTerminate: (event) => {}`, where `event` is a + * synthetic touch event as described above. + * + * See http://facebook.github.io/react-native/docs/view.html#onresponderterminate */ onResponderTerminate: PropTypes.func, /** - * Some other `View` wants to become responder and is asking this `View` to release its - * responder. Returning `true` allows its release. + * Some other `View` wants to become responder and is asking this `View` to + * release its responder. Returning `true` allows its release. * - * `View.props.onResponderTerminationRequest: (event) => {}`, where `event` is a synthetic touch - * event as described above. + * `View.props.onResponderTerminationRequest: (event) => {}`, where `event` + * is a synthetic touch event as described above. + * + * See http://facebook.github.io/react-native/docs/view.html#onresponderterminationrequest */ onResponderTerminationRequest: PropTypes.func, /** * Does this view want to become responder on the start of a touch? * - * `View.props.onStartShouldSetResponder: (event) => [true | false]`, where `event` is a - * synthetic touch event as described above. + * `View.props.onStartShouldSetResponder: (event) => [true | false]`, where + * `event` is a synthetic touch event as described above. + * + * See http://facebook.github.io/react-native/docs/view.html#onstartshouldsetresponder */ onStartShouldSetResponder: PropTypes.func, /** - * If a parent `View` wants to prevent a child `View` from becoming responder on a touch start, - * it should have this handler which returns `true`. + * If a parent `View` wants to prevent a child `View` from becoming responder + * on a touch start, it should have this handler which returns `true`. * - * `View.props.onStartShouldSetResponderCapture: (event) => [true | false]`, where `event` is a - * synthetic touch event as described above. + * `View.props.onStartShouldSetResponderCapture: (event) => [true | false]`, + * where `event` is a synthetic touch event as described above. + * + * See http://facebook.github.io/react-native/docs/view.html#onstartshouldsetrespondercapture */ onStartShouldSetResponderCapture: PropTypes.func, /** - * Does this view want to "claim" touch responsiveness? This is called for every touch move on - * the `View` when it is not the responder. + * Does this view want to "claim" touch responsiveness? This is called for + * every touch move on the `View` when it is not the responder. * - * `View.props.onMoveShouldSetResponder: (event) => [true | false]`, where `event` is a - * synthetic touch event as described above. + * `View.props.onMoveShouldSetResponder: (event) => [true | false]`, where + * `event` is a synthetic touch event as described above. + * + * See http://facebook.github.io/react-native/docs/view.html#onmoveshouldsetresponder */ onMoveShouldSetResponder: PropTypes.func, /** - * If a parent `View` wants to prevent a child `View` from becoming responder on a move, - * it should have this handler which returns `true`. - * - * `View.props.onMoveShouldSetResponderCapture: (event) => [true | false]`, where `event` is a - * synthetic touch event as described above. + * If a parent `View` wants to prevent a child `View` from becoming responder + * on a move, it should have this handler which returns `true`. + * + * `View.props.onMoveShouldSetResponderCapture: (event) => [true | false]`, + * where `event` is a synthetic touch event as described above. + * + * See http://facebook.github.io/react-native/docs/view.html#onMoveShouldsetrespondercapture */ onMoveShouldSetResponderCapture: PropTypes.func, @@ -329,12 +319,11 @@ module.exports = { * Typical interface guidelines recommend touch targets that are at least * 30 - 40 points/density-independent pixels. * - * For example, if a touchable view has a height of 20 the touchable height can be extended to - * 40 with `hitSlop={{top: 10, bottom: 10, left: 0, right: 0}}` - * * > 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. + * + * See http://facebook.github.io/react-native/docs/view.html#hitslop */ hitSlop: EdgeInsetsPropType, @@ -346,41 +335,15 @@ module.exports = { * This event is fired immediately once the layout has been calculated, but * the new layout may not yet be reflected on the screen at the time the * event is received, especially if a layout animation is in progress. + * + * See http://facebook.github.io/react-native/docs/view.html#onlayout */ onLayout: PropTypes.func, /** * Controls whether the `View` can be the target of touch events. - * - * - `'auto'`: The View can be the target of touch events. - * - `'none'`: The View is never the target of touch events. - * - `'box-none'`: The View is never the target of touch events but it's - * subviews can be. It behaves like if the view had the following classes - * in CSS: - * ``` - * .box-none { - * pointer-events: none; - * } - * .box-none * { - * pointer-events: all; - * } - * ``` - * - `'box-only'`: The view can be the target of touch events but it's - * subviews cannot be. It behaves like if the view had the following classes - * in CSS: - * ``` - * .box-only { - * pointer-events: all; - * } - * .box-only * { - * pointer-events: none; - * } - * ``` - * > Since `pointerEvents` does not affect layout/appearance, and we are - * > already deviating from the spec by adding additional modes, we opt to not - * > include `pointerEvents` on `style`. On some platforms, we would need to - * > implement it as a `className` anyways. Using `style` or not is an - * > implementation detail of the platform. + * + * See http://facebook.github.io/react-native/docs/view.html#pointerevents */ pointerEvents: PropTypes.oneOf([ 'box-none', @@ -388,6 +351,10 @@ module.exports = { 'box-only', 'auto', ]), + + /** + * See http://facebook.github.io/react-native/docs/style.html + */ style: stylePropType, /** @@ -397,6 +364,8 @@ module.exports = { * view that contains many subviews that extend outside its bound. The * subviews must also have `overflow: hidden`, as should the containing view * (or one of its superviews). + * + * See http://facebook.github.io/react-native/docs/view.html#removeclippedsubviews */ removeClippedSubviews: PropTypes.bool, @@ -404,31 +373,18 @@ module.exports = { * Whether this `View` should render itself (and all of its children) into a * single hardware texture on the GPU. * - * On Android, this is useful for animations and interactions that only - * modify opacity, rotation, translation, and/or scale: in those cases, the - * view doesn't have to be redrawn and display lists don't need to be - * re-executed. The texture can just be re-used and re-composited with - * different parameters. The downside is that this can use up limited video - * memory, so this prop should be set back to false at the end of the - * interaction/animation. - * * @platform android + * + * See http://facebook.github.io/react-native/docs/view.html#rendertohardwaretextureandroid */ renderToHardwareTextureAndroid: PropTypes.bool, /** * Whether this `View` should be rendered as a bitmap before compositing. * - * On iOS, this is useful for animations and interactions that do not - * modify this component's dimensions nor its children; for example, when - * translating the position of a static view, rasterization allows the - * renderer to reuse a cached bitmap of a static view and quickly composite - * it during each frame. - * - * Rasterization incurs an off-screen drawing pass and the bitmap consumes - * memory. Test and measure when using this property. - * * @platform ios + * + * See http://facebook.github.io/react-native/docs/view.html#shouldrasterizeios */ shouldRasterizeIOS: PropTypes.bool, @@ -439,29 +395,18 @@ module.exports = { * ensure that this `View` exists in the native view hierarchy. * * @platform android + * + * See http://facebook.github.io/react-native/docs/view.html#collapsable */ collapsable: PropTypes.bool, /** - * Whether this `View` needs to rendered offscreen and composited with an alpha - * in order to preserve 100% correct colors and blending behavior. The default - * (`false`) falls back to drawing the component and its children with an alpha - * applied to the paint used to draw each element instead of rendering the full - * component offscreen and compositing it back with an alpha value. This default - * may be noticeable and undesired in the case where the `View` you are setting - * an opacity on has multiple overlapping elements (e.g. multiple overlapping - * `View`s, or text and a background). - * - * Rendering offscreen to preserve correct alpha behavior is extremely - * expensive and hard to debug for non-native developers, which is why it is - * not turned on by default. If you do need to enable this property for an - * animation, consider combining it with renderToHardwareTextureAndroid if the - * view **contents** are static (i.e. it doesn't need to be redrawn each frame). - * If that property is enabled, this View will be rendered off-screen once, - * saved in a hardware texture, and then composited onto the screen with an alpha - * each frame without having to switch rendering targets on the GPU. + * Whether this `View` needs to rendered offscreen and composited with an + * alpha in order to preserve 100% correct colors and blending behavior. * * @platform android + * + * See http://facebook.github.io/react-native/docs/view.html#needsoffscreenalphacompositing */ needsOffscreenAlphaCompositing: PropTypes.bool, }; diff --git a/docs/accessibilityinfo.md b/docs/accessibilityinfo.md index d1d7625c21867f..1e0e0559bb93ff 100644 --- a/docs/accessibilityinfo.md +++ b/docs/accessibilityinfo.md @@ -78,7 +78,7 @@ class ScreenReaderStatusExample extends React.Component { ### `fetch()` ```javascript -AccessibilityInfo.fetch() +AccessibilityInfo.fetch(): Promise ``` @@ -94,22 +94,10 @@ and `false` otherwise. ### `addEventListener()` ```javascript -AccessibilityInfo.addEventListener(eventName, handler) +AccessibilityInfo.addEventListener(eventName: ChangeEventName, handler: Function): Object ``` - -Add an event handler. Supported events: - -- `change`: Fires when the state of the screen reader changes. The argument - to the event handler is a boolean. The boolean is `true` when a screen - reader is enabled and `false` otherwise. -- `announcementFinished`: iOS-only event. Fires when the screen reader has - finished making an announcement. The argument to the event handler is a dictionary - with these keys: - - `announcement`: The string announced by the screen reader. - - `success`: A boolean indicating whether the announcement was successfully made. - - +Add an event handler. See [Change Event Names](docs/accessibilityinfo.html#changeeventnames). --- @@ -117,11 +105,15 @@ Add an event handler. Supported events: ### `setAccessibilityFocus()` ```javascript -AccessibilityInfo.setAccessibilityFocus(reactTag) +AccessibilityInfo.setAccessibilityFocus(reactTag: number): void ``` +Set accessibility focus to a React component. + -iOS-Only. Set accessibility focus to a react component. +| Platform | +| - | +| iOS | @@ -131,12 +123,14 @@ iOS-Only. Set accessibility focus to a react component. ### `announceForAccessibility()` ```javascript -AccessibilityInfo.announceForAccessibility(announcement) +AccessibilityInfo.announceForAccessibility(announcement: string): void ``` +Post a string to be announced by the screen reader. -iOS-Only. Post a string to be announced by the screen reader. - +| Platform | +| - | +| iOS | @@ -145,12 +139,26 @@ iOS-Only. Post a string to be announced by the screen reader. ### `removeEventListener()` ```javascript -AccessibilityInfo.removeEventListener(eventName, handler) +AccessibilityInfo.removeEventListener(eventName: ChangeEventName, handler) ``` +Remove an event handler. See [Change Event Names](docs/accessibilityinfo.html#changeeventnames). + + + +## Change Event Names + +### `change` -Remove an event handler. +Fires when the state of the screen reader changes. The argument to the event handler is a boolean. The boolean is `true` when a screen reader is enabled and `false` otherwise. +### `announcementFinished` +Fires when the screen reader has finished making an announcement. The argument to the event handler is a dictionary with these keys: + - `announcement`: The string announced by the screen reader. + - `success`: A boolean indicating whether the announcement was successfully made. +| Platform | +| - | +| iOS | diff --git a/docs/activityindicator.md b/docs/activityindicator.md index 4b6f22d9046ca6..4cb00f56312deb 100644 --- a/docs/activityindicator.md +++ b/docs/activityindicator.md @@ -5,8 +5,8 @@ layout: docs category: components permalink: docs/activityindicator.html next: button -previous: null --- + Displays a circular loading indicator. ### Example @@ -51,17 +51,13 @@ AppRegistry.registerComponent('App', () => App) ### Props -- [View props...](docs/view-props.html) +- [`View` props...](docs/view.html#props) - [`animating`](docs/activityindicator.html#animating) - [`color`](docs/activityindicator.html#color) - [`size`](docs/activityindicator.html#size) - [`hidesWhenStopped`](docs/activityindicator.html#hideswhenstopped) - - - - --- # Reference @@ -70,15 +66,12 @@ AppRegistry.registerComponent('App', () => App) ### `animating` -Whether to show the indicator (true, the default) or hide it (false). +Whether to show the indicator (`true`, the default) or hide it (`false`). | Type | Required | | - | - | | bool | No | - - - --- ### `color` @@ -89,22 +82,17 @@ The foreground color of the spinner (default is gray). | - | - | | [color](docs/colors.html) | No | - - - --- ### `size` Size of the indicator (default is 'small'). + Passing a number to the size prop is only supported on Android. | Type | Required | | - | - | -| enum('small', 'large'), ,number | No | - - - +| enum('small', 'large'), number | No | --- @@ -113,13 +101,6 @@ Passing a number to the size prop is only supported on Android. Whether the indicator should hide when not animating (true by default). - | Type | Required | Platform | | - | - | - | | bool | No | iOS | - - - - - - diff --git a/docs/checkbox.md b/docs/checkbox.md index 679b5df885a98c..08f047949183a6 100644 --- a/docs/checkbox.md +++ b/docs/checkbox.md @@ -19,7 +19,7 @@ the supplied `value` prop instead of the expected result of any user actions. ### Props -- [View props...](docs/view-props.html) +- [View props...](docs/view.html#props) - [`disabled`](docs/checkbox.html#disabled) - [`onChange`](docs/checkbox.html#onchange) - [`onValueChange`](docs/checkbox.html#onvaluechange) diff --git a/docs/datepickerios.md b/docs/datepickerios.md index 43795a3321d6f6..fbd98fdf3e6460 100644 --- a/docs/datepickerios.md +++ b/docs/datepickerios.md @@ -15,7 +15,7 @@ source of truth. ### Props -- [View props...](docs/view-props.html) +- [View props...](docs/view.html#props) - [`date`](docs/datepickerios.html#date) - [`onDateChange`](docs/datepickerios.html#ondatechange) - [`maximumDate`](docs/datepickerios.html#maximumdate) diff --git a/docs/drawerlayoutandroid.md b/docs/drawerlayoutandroid.md index 0a2a393f0635f3..6bde444af6d3de 100644 --- a/docs/drawerlayoutandroid.md +++ b/docs/drawerlayoutandroid.md @@ -39,7 +39,7 @@ render: function() { ### Props -- [View props...](docs/view-props.html) +- [View props...](docs/view.html#props) - [`renderNavigationView`](docs/drawerlayoutandroid.html#rendernavigationview) - [`onDrawerClose`](docs/drawerlayoutandroid.html#ondrawerclose) - [`drawerPosition`](docs/drawerlayoutandroid.html#drawerposition) diff --git a/docs/maskedviewios.md b/docs/maskedviewios.md index 0de578a532ef64..c566ed0195627d 100644 --- a/docs/maskedviewios.md +++ b/docs/maskedviewios.md @@ -43,7 +43,7 @@ transparent pixels block that content. ### Props -- [View props...](docs/view-props.html) +- [View props...](docs/view.html#props) - [`maskElement`](docs/maskedviewios.html#maskelement) diff --git a/docs/picker.md b/docs/picker.md index 3ce067f96643c3..f2914f03fb0a65 100644 --- a/docs/picker.md +++ b/docs/picker.md @@ -19,7 +19,7 @@ Renders the native picker component on iOS and Android. Example: ### Props -- [View props...](docs/view-props.html) +- [View props...](docs/view.html#props) - [`onValueChange`](docs/picker.html#onvaluechange) - [`selectedValue`](docs/picker.html#selectedvalue) - [`enabled`](docs/picker.html#enabled) diff --git a/docs/pickerios.md b/docs/pickerios.md index 75734e46f530e8..6a8394fa78d142 100644 --- a/docs/pickerios.md +++ b/docs/pickerios.md @@ -10,7 +10,7 @@ previous: picker ### Props -- [View props...](docs/view-props.html) +- [View props...](docs/view.html#props) - [`itemStyle`](docs/pickerios.html#itemstyle) - [`onValueChange`](docs/pickerios.html#onvaluechange) - [`selectedValue`](docs/pickerios.html#selectedvalue) diff --git a/docs/progressbarandroid.md b/docs/progressbarandroid.md index b316ea1224130a..d5e27ec15c12f0 100644 --- a/docs/progressbarandroid.md +++ b/docs/progressbarandroid.md @@ -31,7 +31,7 @@ render: function() { ### Props -- [View props...](docs/view-props.html) +- [View props...](docs/view.html#props) - [`animating`](docs/progressbarandroid.html#animating) - [`color`](docs/progressbarandroid.html#color) - [`indeterminate`](docs/progressbarandroid.html#indeterminate) diff --git a/docs/progressviewios.md b/docs/progressviewios.md index b9c9bdedb27ece..ed6ff075042bb9 100644 --- a/docs/progressviewios.md +++ b/docs/progressviewios.md @@ -11,7 +11,7 @@ Use `ProgressViewIOS` to render a UIProgressView on iOS. ### Props -- [View props...](docs/view-props.html) +- [View props...](docs/view.html#props) - [`progress`](docs/progressviewios.html#progress) - [`progressImage`](docs/progressviewios.html#progressimage) - [`progressTintColor`](docs/progressviewios.html#progresstintcolor) diff --git a/docs/refreshcontrol.md b/docs/refreshcontrol.md index 6302f46297bb9e..1ac7c4d7bd7ad0 100644 --- a/docs/refreshcontrol.md +++ b/docs/refreshcontrol.md @@ -53,7 +53,7 @@ in the `onRefresh` function otherwise the refresh indicator will stop immediatel ### Props -- [View props...](docs/view-props.html) +- [View props...](docs/view.html#props) - [`refreshing`](docs/refreshcontrol.html#refreshing) - [`onRefresh`](docs/refreshcontrol.html#onrefresh) - [`colors`](docs/refreshcontrol.html#colors) diff --git a/docs/scrollview.md b/docs/scrollview.md index c73e45955333b0..9af144cf93d31a 100644 --- a/docs/scrollview.md +++ b/docs/scrollview.md @@ -43,7 +43,7 @@ supports out of the box. ### Props -- [View props...](docs/view-props.html) +- [View props...](docs/view.html#props) - [`alwaysBounceVertical`](docs/scrollview.html#alwaysbouncevertical) - [`contentContainerStyle`](docs/scrollview.html#contentcontainerstyle) - [`keyboardDismissMode`](docs/scrollview.html#keyboarddismissmode) diff --git a/docs/segmentedcontrolios.md b/docs/segmentedcontrolios.md index 65d764193094a3..a0d38d9c6f7b3e 100644 --- a/docs/segmentedcontrolios.md +++ b/docs/segmentedcontrolios.md @@ -28,7 +28,7 @@ selects a value and changes the index, as shown in the example below. ### Props -- [View props...](docs/view-props.html) +- [View props...](docs/view.html#props) - [`enabled`](docs/segmentedcontrolios.html#enabled) - [`momentary`](docs/segmentedcontrolios.html#momentary) - [`onChange`](docs/segmentedcontrolios.html#onchange) diff --git a/docs/slider.md b/docs/slider.md index c3768149ccfa1a..815248749caf6f 100644 --- a/docs/slider.md +++ b/docs/slider.md @@ -67,7 +67,7 @@ const styles = StyleSheet.create({ ### Props -- [View props...](docs/view-props.html) +- [View props...](docs/view.html#props) - [`style`](docs/slider.html#style) - [`disabled`](docs/slider.html#disabled) - [`maximumValue`](docs/slider.html#maximumvalue) diff --git a/docs/snapshotviewios.md b/docs/snapshotviewios.md index 7048f257a266db..e8dfd235e4c4d1 100644 --- a/docs/snapshotviewios.md +++ b/docs/snapshotviewios.md @@ -10,7 +10,7 @@ previous: slider ### Props -- [View props...](docs/view-props.html) +- [View props...](docs/view.html#props) - [`onSnapshotReady`](docs/snapshotviewios.html#onsnapshotready) - [`testIdentifier`](docs/snapshotviewios.html#testidentifier) diff --git a/docs/switch.md b/docs/switch.md index bac4b702f5aab5..a4bc3c33fafd9b 100644 --- a/docs/switch.md +++ b/docs/switch.md @@ -16,7 +16,7 @@ This is a controlled component that requires an `onValueChange` callback that up ### Props -- [View props...](docs/view-props.html) +- [View props...](docs/view.html#props) - [`disabled`](docs/switch.html#disabled) - [`onTintColor`](docs/switch.html#ontintcolor) - [`onValueChange`](docs/switch.html#onvaluechange) diff --git a/docs/tabbarios.md b/docs/tabbarios.md index 8c1d83a5321dc1..122a6eaa7ad23b 100644 --- a/docs/tabbarios.md +++ b/docs/tabbarios.md @@ -9,7 +9,7 @@ previous: switch --- ### Props -- [View props...](docs/view-props.html) +- [View props...](docs/view.html#props) - [`barStyle`](docs/tabbarios.html#barstyle) - [`barTintColor`](docs/tabbarios.html#bartintcolor) - [`itemPositioning`](docs/tabbarios.html#itempositioning) diff --git a/docs/textinput.md b/docs/textinput.md index e032d386c703bb..f14556a7ff1208 100644 --- a/docs/textinput.md +++ b/docs/textinput.md @@ -118,7 +118,7 @@ or control this param programmatically with native code. ### Props -- [View props...](docs/view-props.html) +- [View props...](docs/view.html#props) - [`placeholderTextColor`](docs/textinput.html#placeholdertextcolor) - [`allowFontScaling`](docs/textinput.html#allowfontscaling) - [`autoCorrect`](docs/textinput.html#autocorrect) diff --git a/docs/toolbarandroid.md b/docs/toolbarandroid.md index ba37cb65c903e9..ee9be291b7caf2 100644 --- a/docs/toolbarandroid.md +++ b/docs/toolbarandroid.md @@ -43,7 +43,7 @@ onActionSelected: function(position) { ### Props -- [View props...](docs/view-props.html) +- [View props...](docs/view.html#props) - [`overflowIcon`](docs/toolbarandroid.html#overflowicon) - [`actions`](docs/toolbarandroid.html#actions) - [`contentInsetStart`](docs/toolbarandroid.html#contentinsetstart) diff --git a/docs/view-props.md b/docs/view-props.md index 3ab3c2b3cd1c4e..65f14ceb564443 100644 --- a/docs/view-props.md +++ b/docs/view-props.md @@ -1,657 +1,8 @@ ---- +--- id: view-props title: View Props -layout: docs -category: APIs +layout: redirect permalink: docs/view-props.html -next: view-style-props -previous: shadow-props ---- -### Props - -- [`onStartShouldSetResponder`](docs/view-props.html#onstartshouldsetresponder) -- [`accessibilityLabel`](docs/view-props.html#accessibilitylabel) -- [`hitSlop`](docs/view-props.html#hitslop) -- [`nativeID`](docs/view-props.html#nativeid) -- [`onAccessibilityTap`](docs/view-props.html#onaccessibilitytap) -- [`onLayout`](docs/view-props.html#onlayout) -- [`onMagicTap`](docs/view-props.html#onmagictap) -- [`onMoveShouldSetResponder`](docs/view-props.html#onmoveshouldsetresponder) -- [`onMoveShouldSetResponderCapture`](docs/view-props.html#onmoveshouldsetrespondercapture) -- [`onResponderGrant`](docs/view-props.html#onrespondergrant) -- [`onResponderMove`](docs/view-props.html#onrespondermove) -- [`onResponderReject`](docs/view-props.html#onresponderreject) -- [`onResponderRelease`](docs/view-props.html#onresponderrelease) -- [`onResponderTerminate`](docs/view-props.html#onresponderterminate) -- [`onResponderTerminationRequest`](docs/view-props.html#onresponderterminationrequest) -- [`accessible`](docs/view-props.html#accessible) -- [`onStartShouldSetResponderCapture`](docs/view-props.html#onstartshouldsetrespondercapture) -- [`pointerEvents`](docs/view-props.html#pointerevents) -- [`removeClippedSubviews`](docs/view-props.html#removeclippedsubviews) -- [`style`](docs/view-props.html#style) -- [`testID`](docs/view-props.html#testid) -- [`accessibilityComponentType`](docs/view-props.html#accessibilitycomponenttype) -- [`accessibilityLiveRegion`](docs/view-props.html#accessibilityliveregion) -- [`collapsable`](docs/view-props.html#collapsable) -- [`importantForAccessibility`](docs/view-props.html#importantforaccessibility) -- [`needsOffscreenAlphaCompositing`](docs/view-props.html#needsoffscreenalphacompositing) -- [`renderToHardwareTextureAndroid`](docs/view-props.html#rendertohardwaretextureandroid) -- [`accessibilityTraits`](docs/view-props.html#accessibilitytraits) -- [`accessibilityViewIsModal`](docs/view-props.html#accessibilityviewismodal) -- [`shouldRasterizeIOS`](docs/view-props.html#shouldrasterizeios) - - - - - - ---- - -# Reference - -## Props - -### `onStartShouldSetResponder` - -Does this view want to become responder on the start of a touch? - -`View.props.onStartShouldSetResponder: (event) => [true | false]`, where `event` is a -synthetic touch event as described above. - -| Type | Required | -| - | - | -| function | No | - - - - ---- - -### `accessibilityLabel` - -Overrides the text that's read by the screen reader when the user interacts -with the element. By default, the label is constructed by traversing all the -children and accumulating all the `Text` nodes separated by space. - -| Type | Required | -| - | - | -| node | No | - - - - ---- - -### `hitSlop` - -This defines how far a touch event can start away from the view. -Typical interface guidelines recommend touch targets that are at least -30 - 40 points/density-independent pixels. - -For example, if a touchable view has a height of 20 the touchable height can be extended to -40 with `hitSlop={{top: 10, bottom: 10, left: 0, right: 0}}` - -> 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. - -| Type | Required | -| - | - | -| object: {top: number, left: number, bottom: number, right: number} | No | - - - - ---- - -### `nativeID` - -Used to locate this view from native classes. - -> This disables the 'layout-only view removal' optimization for this view! - -| Type | Required | -| - | - | -| string | No | - - - - ---- - -### `onAccessibilityTap` - -When `accessible` is true, the system will try to invoke this function -when the user performs accessibility tap gesture. - -| Type | Required | -| - | - | -| function | No | - - - - ---- - -### `onLayout` - -Invoked on mount and layout changes with: - -`{nativeEvent: { layout: {x, y, width, height}}}` - -This event is fired immediately once the layout has been calculated, but -the new layout may not yet be reflected on the screen at the time the -event is received, especially if a layout animation is in progress. - -| Type | Required | -| - | - | -| function | No | - - - - ---- - -### `onMagicTap` - -When `accessible` is `true`, the system will invoke this function when the -user performs the magic tap gesture. - -| Type | Required | -| - | - | -| function | No | - - - - ---- - -### `onMoveShouldSetResponder` - -Does this view want to "claim" touch responsiveness? This is called for every touch move on -the `View` when it is not the responder. - -`View.props.onMoveShouldSetResponder: (event) => [true | false]`, where `event` is a -synthetic touch event as described above. - -| Type | Required | -| - | - | -| function | No | - - - - ---- - -### `onMoveShouldSetResponderCapture` - -If a parent `View` wants to prevent a child `View` from becoming responder on a move, -it should have this handler which returns `true`. - -`View.props.onMoveShouldSetResponderCapture: (event) => [true | false]`, where `event` is a -synthetic touch event as described above. - -| Type | Required | -| - | - | -| function | No | - - - - ---- - -### `onResponderGrant` - -The View is now responding for touch events. This is the time to highlight and show the user -what is happening. - -`View.props.onResponderGrant: (event) => {}`, where `event` is a synthetic touch event as -described above. - -| Type | Required | -| - | - | -| function | No | - - - - ---- - -### `onResponderMove` - -The user is moving their finger. - -`View.props.onResponderMove: (event) => {}`, where `event` is a synthetic touch event as -described above. - -| Type | Required | -| - | - | -| function | No | - - - - ---- - -### `onResponderReject` - -Another responder is already active and will not release it to that `View` asking to be -the responder. - -`View.props.onResponderReject: (event) => {}`, where `event` is a synthetic touch event as -described above. - -| Type | Required | -| - | - | -| function | No | - - - - ---- - -### `onResponderRelease` - -Fired at the end of the touch. - -`View.props.onResponderRelease: (event) => {}`, where `event` is a synthetic touch event as -described above. - -| Type | Required | -| - | - | -| function | No | - - - - ---- - -### `onResponderTerminate` - -The responder has been taken from the `View`. Might be taken by other views after a call to -`onResponderTerminationRequest`, or might be taken by the OS without asking (e.g., happens -with control center/ notification center on iOS) - -`View.props.onResponderTerminate: (event) => {}`, where `event` is a synthetic touch event as -described above. - -| Type | Required | -| - | - | -| function | No | - - - - ---- - -### `onResponderTerminationRequest` - -Some other `View` wants to become responder and is asking this `View` to release its -responder. Returning `true` allows its release. - -`View.props.onResponderTerminationRequest: (event) => {}`, where `event` is a synthetic touch -event as described above. - -| Type | Required | -| - | - | -| function | No | - - - - ---- - -### `accessible` - -When `true`, indicates that the view is an accessibility element. By default, -all the touchable elements are accessible. - -| Type | Required | -| - | - | -| bool | No | - - - - ---- - -### `onStartShouldSetResponderCapture` - -If a parent `View` wants to prevent a child `View` from becoming responder on a touch start, -it should have this handler which returns `true`. - -`View.props.onStartShouldSetResponderCapture: (event) => [true | false]`, where `event` is a -synthetic touch event as described above. - -| Type | Required | -| - | - | -| function | No | - - - - ---- - -### `pointerEvents` - -Controls whether the `View` can be the target of touch events. - - - `'auto'`: The View can be the target of touch events. - - `'none'`: The View is never the target of touch events. - - `'box-none'`: The View is never the target of touch events but it's - subviews can be. It behaves like if the view had the following classes - in CSS: -``` -.box-none { - pointer-events: none; -} -.box-none * { - pointer-events: all; -} -``` - - `'box-only'`: The view can be the target of touch events but it's - subviews cannot be. It behaves like if the view had the following classes - in CSS: -``` -.box-only { - pointer-events: all; -} -.box-only * { - pointer-events: none; -} -``` -> Since `pointerEvents` does not affect layout/appearance, and we are -> already deviating from the spec by adding additional modes, we opt to not -> include `pointerEvents` on `style`. On some platforms, we would need to -> implement it as a `className` anyways. Using `style` or not is an -> implementation detail of the platform. - -| Type | Required | -| - | - | -| enum('box-none', 'none', 'box-only', 'auto') | No | - - - - ---- - -### `removeClippedSubviews` - -This is a special performance property exposed by `RCTView` and is useful -for scrolling content when there are many subviews, most of which are -offscreen. For this property to be effective, it must be applied to a -view that contains many subviews that extend outside its bound. The -subviews must also have `overflow: hidden`, as should the containing view -(or one of its superviews). - -| Type | Required | -| - | - | -| bool | No | - - - - ---- - -### `style` - - - -| Type | Required | -| - | - | -| style | No | - - - - ---- - -### `testID` - -Used to locate this view in end-to-end tests. - -> This disables the 'layout-only view removal' optimization for this view! - -| Type | Required | -| - | - | -| string | No | - - - - ---- - -### `accessibilityComponentType` - -Indicates to accessibility services to treat UI component like a -native one. Works for Android only. - -Possible values are one of: - -- `'none'` -- `'button'` -- `'radiobutton_checked'` -- `'radiobutton_unchecked'` - - - -| Type | Required | Platform | -| - | - | - | -| AccessibilityComponentTypes | No | Android | - - - - ---- - -### `accessibilityLiveRegion` - -Indicates to accessibility services whether the user should be notified -when this view changes. Works for Android API >= 19 only. -Possible values: - -- `'none'` - Accessibility services should not announce changes to this view. -- `'polite'`- Accessibility services should announce changes to this view. -- `'assertive'` - Accessibility services should interrupt ongoing speech to immediately announce changes to this view. - -See the [Android `View` docs](http://developer.android.com/reference/android/view/View.html#attr_android:accessibilityLiveRegion) -for reference. - - - -| Type | Required | Platform | -| - | - | - | -| enum('none', 'polite', 'assertive') | No | Android | - - - - ---- - -### `collapsable` - -Views that are only used to layout their children or otherwise don't draw -anything may be automatically removed from the native hierarchy as an -optimization. Set this property to `false` to disable this optimization and -ensure that this `View` exists in the native view hierarchy. - - - -| Type | Required | Platform | -| - | - | - | -| bool | No | Android | - - - - ---- - -### `importantForAccessibility` - -Controls how view is important for accessibility which is if it -fires accessibility events and if it is reported to accessibility services -that query the screen. Works for Android only. - -Possible values: - - - `'auto'` - The system determines whether the view is important for accessibility - - default (recommended). - - `'yes'` - The view is important for accessibility. - - `'no'` - The view is not important for accessibility. - - `'no-hide-descendants'` - The view is not important for accessibility, - nor are any of its descendant views. - -See the [Android `importantForAccessibility` docs](http://developer.android.com/reference/android/R.attr.html#importantForAccessibility) -for reference. - - - -| Type | Required | Platform | -| - | - | - | -| enum('auto', 'yes', 'no', 'no-hide-descendants') | No | Android | - - - - ---- - -### `needsOffscreenAlphaCompositing` - -Whether this `View` needs to rendered offscreen and composited with an alpha -in order to preserve 100% correct colors and blending behavior. The default -(`false`) falls back to drawing the component and its children with an alpha -applied to the paint used to draw each element instead of rendering the full -component offscreen and compositing it back with an alpha value. This default -may be noticeable and undesired in the case where the `View` you are setting -an opacity on has multiple overlapping elements (e.g. multiple overlapping -`View`s, or text and a background). - -Rendering offscreen to preserve correct alpha behavior is extremely -expensive and hard to debug for non-native developers, which is why it is -not turned on by default. If you do need to enable this property for an -animation, consider combining it with renderToHardwareTextureAndroid if the -view **contents** are static (i.e. it doesn't need to be redrawn each frame). -If that property is enabled, this View will be rendered off-screen once, -saved in a hardware texture, and then composited onto the screen with an alpha -each frame without having to switch rendering targets on the GPU. - - - -| Type | Required | Platform | -| - | - | - | -| bool | No | Android | - - - - ---- - -### `renderToHardwareTextureAndroid` - -Whether this `View` should render itself (and all of its children) into a -single hardware texture on the GPU. - -On Android, this is useful for animations and interactions that only -modify opacity, rotation, translation, and/or scale: in those cases, the -view doesn't have to be redrawn and display lists don't need to be -re-executed. The texture can just be re-used and re-composited with -different parameters. The downside is that this can use up limited video -memory, so this prop should be set back to false at the end of the -interaction/animation. - - - -| Type | Required | Platform | -| - | - | - | -| bool | No | Android | - - - - ---- - -### `accessibilityTraits` - -Provides additional traits to screen reader. By default no traits are -provided unless specified otherwise in element. - -You can provide one trait or an array of many traits. - -Possible values for `AccessibilityTraits` are: - -- `'none'` - The element has no traits. -- `'button'` - The element should be treated as a button. -- `'link'` - The element should be treated as a link. -- `'header'` - The element is a header that divides content into sections. -- `'search'` - The element should be treated as a search field. -- `'image'` - The element should be treated as an image. -- `'selected'` - The element is selected. -- `'plays'` - The element plays sound. -- `'key'` - The element should be treated like a keyboard key. -- `'text'` - The element should be treated as text. -- `'summary'` - The element provides app summary information. -- `'disabled'` - The element is disabled. -- `'frequentUpdates'` - The element frequently changes its value. -- `'startsMedia'` - The element starts a media session. -- `'adjustable'` - The element allows adjustment over a range of values. -- `'allowsDirectInteraction'` - The element allows direct touch interaction for VoiceOver users. -- `'pageTurn'` - Informs VoiceOver that it should scroll to the next page when it finishes reading the contents of the element. - -See the [Accessibility guide](docs/accessibility.html#accessibilitytraits-ios) -for more information. - - - -| Type | Required | Platform | -| - | - | - | -| AccessibilityTraits, ,array of AccessibilityTraits | No | iOS | - - - - ---- - -### `accessibilityViewIsModal` - -A value indicating whether VoiceOver should ignore the elements -within views that are siblings of the receiver. -Default is `false`. - -See the [Accessibility guide](docs/accessibility.html#accessibilitytraits-ios) -for more information. - - - -| Type | Required | Platform | -| - | - | - | -| bool | No | iOS | - - - - +destinationUrl: view.html --- - -### `shouldRasterizeIOS` - -Whether this `View` should be rendered as a bitmap before compositing. - -On iOS, this is useful for animations and interactions that do not -modify this component's dimensions nor its children; for example, when -translating the position of a static view, rasterization allows the -renderer to reuse a cached bitmap of a static view and quickly composite -it during each frame. - -Rasterization incurs an off-screen drawing pass and the bitmap consumes -memory. Test and measure when using this property. - - - -| Type | Required | Platform | -| - | - | - | -| bool | No | iOS | - - - - - - +Redirecting... diff --git a/docs/view.md b/docs/view.md index c00b327a440a68..6d252759e9752a 100644 --- a/docs/view.md +++ b/docs/view.md @@ -33,7 +33,7 @@ class ViewColoredBoxesWithText extends Component { ### Synthetic Touch Events For `View` responder props (e.g., `onResponderMove`), the synthetic touch event passed to them are of the following form: - + - `nativeEvent` - `changedTouches` - Array of all touch events that have changed since the last event. - `identifier` - The ID of the touch. @@ -45,9 +45,11 @@ For `View` responder props (e.g., `onResponderMove`), the synthetic touch event - `timestamp` - A time identifier for the touch, useful for velocity calculation. - `touches` - Array of all current touches on the screen. +For most touch interactions, you'll simply want to wrap your component in [`TouchableHighlight`](docs/touchablehighlight.html) or [`TouchableOpacity`](docs/touchableopacity.html). + + ### Props -- [View props...](docs/view-props.html) - [`onStartShouldSetResponder`](docs/view.html#onstartshouldsetresponder) - [`accessibilityLabel`](docs/view.html#accessibilitylabel) - [`hitSlop`](docs/view.html#hitslop) @@ -385,30 +387,27 @@ Controls whether the `View` can be the target of touch events. - `'box-none'`: The View is never the target of touch events but it's subviews can be. It behaves like if the view had the following classes in CSS: -``` -.box-none { - pointer-events: none; -} -.box-none * { - pointer-events: all; -} -``` + ``` + .box-none { + pointer-events: none; + } + .box-none * { + pointer-events: all; + } + ``` - `'box-only'`: The view can be the target of touch events but it's subviews cannot be. It behaves like if the view had the following classes in CSS: -``` -.box-only { - pointer-events: all; -} -.box-only * { - pointer-events: none; -} -``` -> Since `pointerEvents` does not affect layout/appearance, and we are -> already deviating from the spec by adding additional modes, we opt to not -> include `pointerEvents` on `style`. On some platforms, we would need to -> implement it as a `className` anyways. Using `style` or not is an -> implementation detail of the platform. + ``` + .box-only { + pointer-events: all; + } + .box-only * { + pointer-events: none; + } + ``` + +> Since `pointerEvents` does not affect layout/appearance, and we are already deviating from the spec by adding additional modes, we opt to not include `pointerEvents` on `style`. On some platforms, we would need to implement it as a `className` anyways. Using `style` or not is an implementation detail of the platform. | Type | Required | | - | - | @@ -421,12 +420,7 @@ Controls whether the `View` can be the target of touch events. ### `removeClippedSubviews` -This is a special performance property exposed by `RCTView` and is useful -for scrolling content when there are many subviews, most of which are -offscreen. For this property to be effective, it must be applied to a -view that contains many subviews that extend outside its bound. The -subviews must also have `overflow: hidden`, as should the containing view -(or one of its superviews). +This is a special performance property exposed by `RCTView` and is useful for scrolling content when there are many subviews, most of which are offscreen. For this property to be effective, it must be applied to a view that contains many subviews that extend outside its bound. The subviews must also have `overflow: hidden`, as should the containing view (or one of its superviews). | Type | Required | | - | - | @@ -443,7 +437,7 @@ subviews must also have `overflow: hidden`, as should the containing view | Type | Required | | - | - | -| stylePropType | No | +| [style](docs/style.html) | No | @@ -470,7 +464,7 @@ Used to locate this view in end-to-end tests. Indicates to accessibility services to treat UI component like a native one. Works for Android only. -Possible values are one of: +Possible values for `AccessibilityComponentTypes`: - `'none'` - `'button'` @@ -538,15 +532,12 @@ that query the screen. Works for Android only. Possible values: - - `'auto'` - The system determines whether the view is important for accessibility - - default (recommended). - - `'yes'` - The view is important for accessibility. - - `'no'` - The view is not important for accessibility. - - `'no-hide-descendants'` - The view is not important for accessibility, - nor are any of its descendant views. +- `'auto'` - The system determines whether the view is important for accessibility - default (recommended). +- `'yes'` - The view is important for accessibility. +- `'no'` - The view is not important for accessibility. +- `'no-hide-descendants'` - The view is not important for accessibility, nor are any of its descendant views. -See the [Android `importantForAccessibility` docs](http://developer.android.com/reference/android/R.attr.html#importantForAccessibility) -for reference. +See the [Android `importantForAccessibility` docs](http://developer.android.com/reference/android/R.attr.html#importantForAccessibility) for reference. @@ -648,7 +639,7 @@ for more information. | Type | Required | Platform | | - | - | - | -| AccessibilityTraits, ,array of AccessibilityTraits | No | iOS | +| AccessibilityTraits, array of AccessibilityTraits | No | iOS | @@ -697,15 +688,14 @@ memory. Test and measure when using this property. - - ## Type Definitions ### Props | Type | | - | -| ViewProps | +| [ViewProps](docs/view.html#props) | + diff --git a/docs/viewpagerandroid.md b/docs/viewpagerandroid.md index 8b4006445f33db..d9df7651c93b69 100644 --- a/docs/viewpagerandroid.md +++ b/docs/viewpagerandroid.md @@ -49,7 +49,7 @@ var styles = { ### Props -- [View props...](docs/view-props.html) +- [View props...](docs/view.html#props) - [`initialPage`](docs/viewpagerandroid.html#initialpage) - [`keyboardDismissMode`](docs/viewpagerandroid.html#keyboarddismissmode) - [`onPageScroll`](docs/viewpagerandroid.html#onpagescroll) diff --git a/docs/webview.md b/docs/webview.md index bb2b5eea59160e..0675c3f5666203 100644 --- a/docs/webview.md +++ b/docs/webview.md @@ -30,7 +30,7 @@ history and configure various properties for the web content. ### Props -- [View props...](docs/view-props.html) +- [View props...](docs/view.html#props) - [`source`](docs/webview.html#source) - [`automaticallyAdjustContentInsets`](docs/webview.html#automaticallyadjustcontentinsets) - [`injectJavaScript`](docs/webview.html#injectjavascript)