diff --git a/native-playground/src/routes/components/Picker.js b/native-playground/src/routes/components/Picker.js index 299f7bc15..4224f3850 100644 --- a/native-playground/src/routes/components/Picker.js +++ b/native-playground/src/routes/components/Picker.js @@ -1,6 +1,7 @@ import React from 'react'; import { Box, Heading } from 'bumbag-native'; import { Picker } from '@bumbag-native/picker'; +import { PickerIOS } from '@bumbag-native/picker/PickerIOS'; import { Preview } from '../../components/Preview'; import { PreviewSection } from '../../components/PreviewSection'; @@ -22,6 +23,88 @@ export default function App() { /> + + + setValue(value)} + value={value} + /> + + + + + setValue(value)} + value={value} + /> + setValue(value)} + value={value} + /> + + + + + setValue(value)} + value={value} + /> + + + + + setValue(value)} + value={value} + /> + setValue(value)} + value={value} + /> + + ); } diff --git a/packages/bumbag-native-picker/src/Picker/Picker.styles.ts b/packages/bumbag-native-picker/src/Picker/Picker.styles.ts index 28d9c7ac9..e48e960a8 100644 --- a/packages/bumbag-native-picker/src/Picker/Picker.styles.ts +++ b/packages/bumbag-native-picker/src/Picker/Picker.styles.ts @@ -1,119 +1,20 @@ import { Box } from 'bumbag-native/Box'; -import { Icon } from 'bumbag-native/Icon'; -import { Text } from 'bumbag-native/Text'; +import { Menu, MenuOptionGroup, MenuOptionItem } from 'bumbag-native/Menu'; import { styled } from 'bumbag-native/styled'; -import { palette, space, theme } from 'bumbag-native/utils/theme'; +import { theme } from 'bumbag-native/utils/theme'; -export const StyledPicker = styled(Box)` +export const Picker = styled(Box)` ${theme('native.Picker', 'styles.base')}; `; -export const StyledPickerItem = styled(Box.Touchable)` - flex-direction: row; - align-items: center; - height: ${(props) => `${space('major-6')(props)}px`}; - padding-left: ${(props) => (props.alignCheckIcon === 'left' ? `${space('major-1')(props)}px` : `0px`)}; - - ${(props) => - !props.disabled - ? ` - cursor: pointer; - ` - : ''} - - ${(props) => - props.hover && !props.disabled - ? ` - background-color: ${palette('white600')(props)}; - - ${theme('native.Picker', 'Item.styles.hover')}; - ` - : ''} - - ${(props) => - props.hoveractive && !props.disabled - ? ` - background-color: ${palette('white700')(props)}; - - ${theme('native.Picker', 'Item.styles.hoveractive')}; - ` - : ''} - - ${(props) => - props.focus && !props.disabled - ? ` - background-color: ${palette('white600')(props)}; - - ${theme('native.Picker', 'Item.styles.focus')}; - ` - : ''} - - ${(props) => - props.disabled - ? ` - opacity: 0.5; - ` - : ''} - - ${theme('native.Picker', 'Item.styles.base')}; +export const PickerMenu = styled(Menu)` + ${theme('native.Picker', 'Menu.styles.base')}; `; -export const StyledPickerItemLabel = styled(Text)` - font-weight: 500; - - ${(props) => - props.checked - ? ` - color: ${palette(props.palette || 'primary')(props)}; - - ${theme('native.Picker', 'ItemLabel.styles.checked')(props)}; - ` - : ''} - - ${theme('native.Picker', 'ItemLabel.styles.base')}; -`; - -export const StyledPickerItemLabelWrapper = styled(Box)` - flex: 1; - flex-direction: row; - align-items: center; - justify-content: space-between; - height: 100%; - padding-right: ${(props) => - props.alignCheckIcon === 'left' ? `${space('major-1')(props)}px` : `${space('major-2')(props)}px`}; - padding-left: ${(props) => (props.alignCheckIcon === 'left' ? `0px` : `${space('major-2')(props)}px`)}; - - ${(props) => - props.hasDivider - ? ` - border-bottom-width: 1px; - border-bottom-color: ${palette('white800')(props)}; - ` - : ''} - - ${theme('native.Picker', 'ItemLabelWrapper.styles.base')}; -`; - -export const StyledPickerItemIconWrapper = styled(Box)` - width: ${(props) => `${space('major-2')(props)}px`}; - - ${(props) => - props.alignCheckIcon === 'left' - ? ` - margin-right: ${space('major-1')(props)}px; - ` - : ''}; - - ${(props) => - props.alignCheckIcon === 'right' - ? ` - margin-left: ${space('major-1')(props)}px; - ` - : ''}; - - ${theme('native.Picker', 'ItemIconWrapper.styles.base')}; +export const PickerMenuOptionGroup = styled(MenuOptionGroup)` + ${theme('native.Picker', 'OptionGroup.styles.base')}; `; -export const StyledPickerItemIcon = styled(Icon)` - ${theme('native.Picker', 'ItemIcon.styles.base')}; +export const PickerMenuOptionItem = styled(MenuOptionItem)` + ${theme('native.Picker', 'OptionItem.styles.base')}; `; diff --git a/packages/bumbag-native-picker/src/Picker/Picker.tsx b/packages/bumbag-native-picker/src/Picker/Picker.tsx index f63e6e40e..abd341e5e 100644 --- a/packages/bumbag-native-picker/src/Picker/Picker.tsx +++ b/packages/bumbag-native-picker/src/Picker/Picker.tsx @@ -1,71 +1,68 @@ import * as React from 'react'; -import { PickerProps as RNPickerProps } from '@react-native-picker/picker'; +import { ViewProps as RNViewProps } from 'react-native'; import { createComponent, createElement, createHook } from 'bumbag/utils'; -import { Box, BoxProps, BoxTouchableProps } from 'bumbag-native/Box'; -import { Palette } from 'bumbag/types'; +import { Box, BoxProps } from 'bumbag-native/Box'; +import { MenuProps, MenuOptionGroupProps, MenuOptionItemProps } from 'bumbag-native/Menu'; import * as styles from './Picker.styles'; export type LocalPickerProps = { - alignCheckIcon?: 'left' | 'right'; + alignCheck?: 'left' | 'right'; defaultValue?: string; disabled?: boolean; + disableLeftPadding?: boolean; hasDividers?: boolean; - height?: string; - options: Array<{ label: string; value: any; disabled?: boolean }>; onChange?: (value: string) => void; - palette?: Palette; + options: Array<{ key?: string; label: string; value: any; disabled?: boolean } & Partial>; value?: string; - pickerProps?: Partial; + menuProps?: Partial; + menuOptionGroupProps?: Partial; }; -export type PickerProps = BoxProps & LocalPickerProps; +export type PickerProps = BoxProps & RNViewProps & LocalPickerProps; const useProps = createHook( (props) => { - const { alignCheckIcon, defaultValue, disabled, hasDividers, onChange, options, palette, value: _value } = props; - - ///////////////////////////////////////////// - + const { + alignCheck, + disabled, + disableLeftPadding, + hasDividers, + onChange, + options, + overrides, + value, + menuProps, + menuOptionGroupProps, + } = props; const boxProps = Box.useProps(props); - - ///////////////////////////////////////////// - - const [controlledValue, setControlledValue] = React.useState(defaultValue || []); - const value = typeof _value !== 'undefined' ? _value : controlledValue; - - ///////////////////////////////////////////// - - const handleChange = React.useCallback( - (value) => { - if (onChange && typeof _value !== 'undefined') { - onChange(value); - } else { - setControlledValue(value); - } - }, - [_value, onChange] - ); - - ///////////////////////////////////////////// - return { ...boxProps, children: ( - - {options.map((option, index) => ( - (!disabled ? handleChange(option.value) : null)} - palette={palette} - label={option.label} - overrides={props.overrides} - /> - ))} - + + + {options.map((option, index) => ( + + {option.label} + + ))} + + ), }; }, @@ -76,7 +73,8 @@ export const Picker = createComponent( (props) => { const htmlProps = useProps(props); return createElement({ - component: styles.StyledPicker, + children: props.children, + component: styles.Picker, htmlProps, }); }, @@ -88,98 +86,3 @@ export const Picker = createComponent( themeKey: 'native.Picker', } ); - -////////////////////////////////////////////////////////// - -export type LocalPickerItemProps = { - alignCheckIcon?: 'left' | 'right'; - checked?: boolean; - disabled?: boolean; - label: string; - hasDivider?: boolean; - palette?: Palette; -}; -export type PickerItemProps = BoxTouchableProps & LocalPickerItemProps; - -const usePickerItemProps = createHook( - (props) => { - const { alignCheckIcon, checked, hasDivider, label } = props; - const boxProps = Box.useProps(props); - - return { - ...boxProps, - children: ( - <> - {alignCheckIcon === 'left' && ( - /* @ts-ignore */ - - {checked && ( - - )} - - )} - - {/* @ts-ignore */} - - {label} - - {alignCheckIcon === 'right' && ( - /* @ts-ignore */ - - {checked && ( - - )} - - )} - - - ), - }; - }, - { - defaultProps: { _hover: true, _active: true, _hoveractive: true, _focus: true, alignCheckIcon: 'left' }, - themeKey: 'native.PickerItem', - } -); - -export const PickerItem = createComponent( - (props) => { - const htmlProps = usePickerItemProps(props); - return createElement({ - component: styles.StyledPickerItem, - htmlProps, - }); - }, - { - attach: { - useProps: usePickerItemProps, - displayName: 'native.PickerItem', - }, - themeKey: 'native.PickerItem', - } -); diff --git a/packages/bumbag-native/src/Menu/Menu.styles.ts b/packages/bumbag-native/src/Menu/Menu.styles.ts index 5401ef176..e2e9bf510 100644 --- a/packages/bumbag-native/src/Menu/Menu.styles.ts +++ b/packages/bumbag-native/src/Menu/Menu.styles.ts @@ -59,7 +59,7 @@ export const MenuItemContent = styled(Box)` justify-content: space-between; padding: ${(props) => `${space(4)(props)}px 0px`}; padding-right: ${(props) => `${space(4)(props)}px`}; - width: 100%; + flex: 1; ${(props) => (props.disableLeftPadding ? `padding-left: ${space(4)(props)}px` : '')}; ${(props) => diff --git a/packages/bumbag-native/src/Menu/MenuOptionItem.tsx b/packages/bumbag-native/src/Menu/MenuOptionItem.tsx index 605a128d2..0848511bf 100644 --- a/packages/bumbag-native/src/Menu/MenuOptionItem.tsx +++ b/packages/bumbag-native/src/Menu/MenuOptionItem.tsx @@ -26,14 +26,18 @@ const useProps = createHook( color: checked ? palette : undefined, ...restProps.contentTextProps, }, - iconBefore: props.iconBefore || alignCheck === 'left' ? (checked ? checkIcon : {}) : undefined, - iconBeforeProps: props.iconBeforeProps || { - color: checked && alignCheck === 'left' ? palette : undefined, - }, - iconAfter: props.iconAfter || alignCheck === 'right' ? (checked ? checkIcon : {}) : undefined, - iconAfterProps: props.iconAfterProps || { - color: checked && alignCheck === 'right' ? palette : undefined, - }, + iconBefore: props.iconBefore ? props.iconBefore : alignCheck === 'left' ? (checked ? checkIcon : {}) : undefined, + iconBeforeProps: props.iconBeforeProps + ? props.iconBeforeProps + : { + color: checked ? palette : undefined, + }, + iconAfter: props.iconAfter ? props.iconAfter : alignCheck === 'right' ? (checked ? checkIcon : {}) : undefined, + iconAfterProps: props.iconAfterProps + ? props.iconAfterProps + : { + color: checked ? palette : undefined, + }, onPress: () => onChange && onChange({ checked: !checked, value }), }; }, diff --git a/packages/bumbag-native/src/types/theme.ts b/packages/bumbag-native/src/types/theme.ts index 905a89cab..cc1dbab7d 100644 --- a/packages/bumbag-native/src/types/theme.ts +++ b/packages/bumbag-native/src/types/theme.ts @@ -14,7 +14,7 @@ import { IconProps } from '../Icon'; import { InputProps, InputFieldProps } from '../Input'; import { ImageProps } from '../Image'; import { LevelProps } from '../Level'; -import { MenuProps, MenuItemProps } from '../Menu'; +import { MenuProps, MenuItemProps, MenuOptionItemProps, MenuOptionGroupProps } from '../Menu'; import { PressableProps } from '../Pressable'; import { RadioProps, RadioGroupProps, RadioGroupFieldProps } from '../Radio'; import { SpinnerProps } from '../Spinner'; @@ -444,6 +444,22 @@ export type MenuThemeConfig = { variants?: Variant; modes?: Variant; }; + OptionItem?: { + styles?: { + base?: ThemeAttribute; + }; + defaultProps?: Partial; + variants?: Variant; + modes?: Variant; + }; + OptionGroup?: { + styles?: { + base?: ThemeAttribute; + }; + defaultProps?: Partial; + variants?: Variant; + modes?: Variant; + }; defaultProps?: Partial; variants?: Variant; modes?: Variant; diff --git a/packages/website/src/_temp/picker.mdx b/packages/website/src/_temp/picker.mdx deleted file mode 100644 index 4fec7ea33..000000000 --- a/packages/website/src/_temp/picker.mdx +++ /dev/null @@ -1,99 +0,0 @@ ---- -title: Picker -path: /native/form/picker ---- - -# Picker - -## Install - -``` -yarn add @bumbag-native/picker -// or npm -npm install @bumbag-native/picker -``` - -## Import - -```js -import { Picker } from '@bumbag-native/picker' -``` - -## Usage - -```jsx-live - -``` - -### Dividers - -```jsx-live - -``` - -### Disabled - -```jsx-live - -``` - -```jsx-live - -``` - -### Check icon alignment - -```jsx-live - -``` - -### Icons - -```jsx-live - -``` - -## Props - -### Picker Props - - diff --git a/packages/website/src/docs/native/form/picker.mdx b/packages/website/src/docs/native/form/picker.mdx index 823de4617..7104e6bff 100644 --- a/packages/website/src/docs/native/form/picker.mdx +++ b/packages/website/src/docs/native/form/picker.mdx @@ -1,9 +1,657 @@ --- title: Picker path: /native/form/picker -wip: true --- +import { Picker as BNPicker } from "@bumbag-native/picker"; + # Picker -## [Coming soon](https://github.com/bumbag/bumbag-ui/pull/110) 👀 +## Install + +``` +yarn add @bumbag-native/picker +// or npm +npm install @bumbag-native/picker +``` + +## Import + +```js +import { Picker } from "@bumbag-native/picker"; +``` + +## Usage + +```jsx-live + +``` + +### Dividers + +```jsx-live + +``` + +### Disabled + +```jsx-live + +``` + +```jsx-live + +``` + +### Check icon alignment + +```jsx-live + +``` + +### Icons + +```jsx-live + +``` + +## Props + +### Picker Props + + + +**alignCheck** "right" | "left" + + + +**defaultValue** string + + + +**disabled** boolean + + + +**disableLeftPadding** boolean + + + +**hasDividers** boolean + + + +**onChange** (value: string) => void + + + +**options** any[] Required + + + +**value** string + + + +**menuProps** any + + + +**menuOptionGroupProps** any + + + +
Inherits React Native's View props + +**hitSlop** Insets + +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. 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}} +NOTE 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. + + + +**onLayout** (event: LayoutChangeEvent) => void + +Invoked on mount and layout changes with + +{nativeEvent: { layout: {x, y, width, height}}}. + + + +**pointerEvents** "auto" | "none" | "box-none" | "box-only" + +In the absence of auto property, none is much like CSS's none value. box-none is as if you had applied the CSS class: + +.box-none { + pointer-events: none; +} +.box-none * { + pointer-events: all; +} + +box-only is the equivalent of + +.box-only { + pointer-events: all; +} +.box-only * { + pointer-events: none; +} + +But 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. + + + +**removeClippedSubviews** boolean + +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). + + + +**style** + + +{`false + | ViewStyle + | RegisteredStyle + | RecursiveArray>`} + + + + +**testID** string + +Used to locate this view in end-to-end tests. + + + +**nativeID** string + +Used to reference react managed views from native code. + + + +**collapsable** boolean + +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. + + + +**needsOffscreenAlphaCompositing** boolean + +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 Views, 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. + + + +**renderToHardwareTextureAndroid** boolean + +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. + + + +**focusable** boolean + +Whether this `View` should be focusable with a non-touch input device, eg. receive focus with a hardware keyboard. + + + +**shouldRasterizeIOS** boolean + +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. + + + +**isTVSelectable** boolean + +*(Apple TV only)* When set to true, this view will be focusable +and navigable using the Apple TV remote. + + + +**hasTVPreferredFocus** boolean + +*(Apple TV only)* May be set to true to force the Apple TV focus engine to move focus to this view. + + + +**tvParallaxProperties** + + +{`{ + enabled?: boolean; + shiftDistanceX?: number; + shiftDistanceY?: number; + tiltAngle?: number; + magnification?: number; + pressMagnification?: number; + pressDuration?: number; + pressDelay?: number; +}`} + + +*(Apple TV only)* Object with properties to control Apple TV parallax effects. + + + +**tvParallaxShiftDistanceX** number + +*(Apple TV only)* May be used to change the appearance of the Apple TV parallax effect when this view goes in or out of focus. Defaults to 2.0. + + + +**tvParallaxShiftDistanceY** number + +*(Apple TV only)* May be used to change the appearance of the Apple TV parallax effect when this view goes in or out of focus. Defaults to 2.0. + + + +**tvParallaxTiltAngle** number + +*(Apple TV only)* May be used to change the appearance of the Apple TV parallax effect when this view goes in or out of focus. Defaults to 0.05. + + + +**tvParallaxMagnification** number + +*(Apple TV only)* May be used to change the appearance of the Apple TV parallax effect when this view goes in or out of focus. Defaults to 1.0. + + + +**onStartShouldSetResponder** (event: GestureResponderEvent) => boolean + +Does this view want to become responder on the start of a touch? + + + +**onMoveShouldSetResponder** (event: GestureResponderEvent) => boolean + +Called for every touch move on the View when it is not the responder: does this view want to "claim" touch responsiveness? + + + +**onResponderEnd** (event: GestureResponderEvent) => void + +If the View returns true and attempts to become the responder, one of the following will happen: + + + +**onResponderGrant** (event: GestureResponderEvent) => void + +The View is now responding for touch events. +This is the time to highlight and show the user what is happening + + + +**onResponderReject** (event: GestureResponderEvent) => void + +Something else is the responder right now and will not release it + + + +**onResponderMove** (event: GestureResponderEvent) => void + +The user is moving their finger + + + +**onResponderRelease** (event: GestureResponderEvent) => void + +Fired at the end of the touch, ie "touchUp" + + + +**onResponderStart** (event: GestureResponderEvent) => void + + + +**onResponderTerminationRequest** (event: GestureResponderEvent) => boolean + +Something else wants to become responder. +Should this view release the responder? Returning true allows release + + + +**onResponderTerminate** (event: GestureResponderEvent) => void + +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 (happens with control center/ notification center on iOS) + + + +**onStartShouldSetResponderCapture** (event: GestureResponderEvent) => boolean + +onStartShouldSetResponder and onMoveShouldSetResponder are called with a bubbling pattern, +where the deepest node is called first. +That means that the deepest component will become responder when multiple Views return true for *ShouldSetResponder handlers. +This is desirable in most cases, because it makes sure all controls and buttons are usable. + +However, sometimes a parent will want to make sure that it becomes responder. +This can be handled by using the capture phase. +Before the responder system bubbles up from the deepest component, +it will do a capture phase, firing on*ShouldSetResponderCapture. +So if a parent View wants to prevent the child from becoming responder on a touch start, +it should have a onStartShouldSetResponderCapture handler which returns true. + + + +**onMoveShouldSetResponderCapture** (event: GestureResponderEvent) => boolean + +onStartShouldSetResponder and onMoveShouldSetResponder are called with a bubbling pattern, +where the deepest node is called first. +That means that the deepest component will become responder when multiple Views return true for *ShouldSetResponder handlers. +This is desirable in most cases, because it makes sure all controls and buttons are usable. + +However, sometimes a parent will want to make sure that it becomes responder. +This can be handled by using the capture phase. +Before the responder system bubbles up from the deepest component, +it will do a capture phase, firing on*ShouldSetResponderCapture. +So if a parent View wants to prevent the child from becoming responder on a touch start, +it should have a onStartShouldSetResponderCapture handler which returns true. + + + +**onTouchStart** (event: GestureResponderEvent) => void + + + +**onTouchMove** (event: GestureResponderEvent) => void + + + +**onTouchEnd** (event: GestureResponderEvent) => void + + + +**onTouchCancel** (event: GestureResponderEvent) => void + + + +**onTouchEndCapture** (event: GestureResponderEvent) => void + + + +**accessible** boolean + +When true, indicates that the view is an accessibility element. +By default, all the touchable elements are accessible. + + + +**accessibilityActions** + + +{`readonly Readonly<{ name: string; label?: string; }>[]`} + + +Provides an array of custom actions available for accessibility. + + + +**accessibilityLabel** string + +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. + + + +**accessibilityRole** + + +{`"none" + | "text" + | "search" + | "button" + | "link" + | "menu" + | "alert" + | "checkbox" + | "radio" + | "image" + | "keyboardkey" + | "adjustable" + | "imagebutton" + | "header" + | "summary" + | "combobox" + | ... 10 more ... + | "toolbar"`} + + +Accessibility Role tells a person using either VoiceOver on iOS or TalkBack on Android the type of element that is focused on. + + + +**accessibilityState** AccessibilityState + +Accessibility State tells a person using either VoiceOver on iOS or TalkBack on Android the state of the element currently focused on. + + + +**accessibilityHint** string + +An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not obvious from the accessibility label. + + + +**accessibilityValue** AccessibilityValue + +Represents the current value of a component. It can be a textual description of a component's value, or for range-based components, such as sliders and progress bars, +it contains range information (minimum, current, and maximum). + + + +**onAccessibilityAction** (event: AccessibilityActionEvent) => void + +When `accessible` is true, the system will try to invoke this function when the user performs an accessibility custom action. + + + +**accessibilityLiveRegion** "none" | "assertive" | "polite" + +Indicates to accessibility services whether the user should be notified when this view changes. +Works for Android API >= 19 only. +See http://developer.android.com/reference/android/view/View.html#attr_android:accessibilityLiveRegion for references. + + + +**importantForAccessibility** "auto" | "yes" | "no" | "no-hide-descendants" + +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. See http://developer.android.com/reference/android/R.attr.html#importantForAccessibility for references. + +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. + + + +**accessibilityElementsHidden** boolean + +A Boolean value indicating whether the accessibility elements contained within this accessibility element +are hidden to the screen reader. + + + +**accessibilityViewIsModal** boolean + +A Boolean value indicating whether VoiceOver should ignore the elements within views that are siblings of the receiver. + + + +**onAccessibilityEscape** () => void + +When accessibile is true, the system will invoke this function when the user performs the escape gesture (scrub with two fingers). + + + +**onAccessibilityTap** () => void + +When `accessible` is true, the system will try to invoke this function when the user performs accessibility tap gesture. + + + +**onMagicTap** () => void + +When accessible is true, the system will invoke this function when the user performs the magic tap gesture. + + + +**accessibilityIgnoresInvertColors** boolean + +https://reactnative.dev/docs/accessibility#accessibilityignoresinvertcolorsios + + + +
+ + +
Inherits Box props + +**animated** boolean + + + +**children** + + +{`string + | number + | boolean + | {} + | ReactElement ReactElement Component)>) + | (new (props: any) => Component<...>)> + | ReactNodeArray + | ReactPortal + | ((props: BoxProps) => ReactNode)`} + + + + +**alignX** "right" | "left" | "center" + + + +**alignY** "top" | "bottom" | "center" + + + +**altitude** string + + + +**variant** string + + + +**colorMode** string + + + +**overrides** + + +{`{ + altitudes?: AltitudesThemeConfig; + borders?: BordersThemeConfig; + borderRadii?: BorderRadiiThemeConfig; + breakpoints?: { + ... + }; ... 35 more ...; + Text?: TextThemeConfig; +}`} + + + + +**elementRef** ((instance: any) => void) | RefObject<any> + + + +**themeKey** string + + + +
+ diff --git a/packages/website/src/docs/native/utilities/list.mdx b/packages/website/src/docs/native/utilities/list.mdx index 34ca6b927..d0ed8d313 100644 --- a/packages/website/src/docs/native/utilities/list.mdx +++ b/packages/website/src/docs/native/utilities/list.mdx @@ -126,7 +126,7 @@ function Example() { -
Inherits React Native's FlatList props +
Inherits React Native's FlatList props **ItemSeparatorComponent** ComponentClass<any, any> | FunctionComponent<any> @@ -1471,7 +1471,7 @@ Causes the scrollbars not to turn transparent when they are not in use. The defa -
Inherits React Native's SectionList props +
Inherits React Native's SectionList props **ItemSeparatorComponent** ComponentClass<any, any> | FunctionComponent<any> @@ -2818,7 +2818,7 @@ Causes the scrollbars not to turn transparent when they are not in use. The defa -
Inherits React Native's VirtualizedList props +
Inherits React Native's VirtualizedList props **renderItem** Required