![]() If you have a list with clickable items or have an action button that need to display as a separate UI block (vs being inlined in a text) you should use RectButton. In all the remaining cases you can always rely on BaseButton which is a superclass for the other button classes and can be used as a generic Touchable replacement that can be customized to your needs.īelow we list some of the common usecases for button components to be used along with the type of button that should be used according to the platform specific design guidelines. If you do not wish to implement custom design approach, RectButton and BorderlessButton seem to be absolutely enough and there's no need to use anything else. ![]() This library allows to use native components with native feedback in adequate situations. If you wish to get specific information about platforms design patterns, visit official Apple docs and Material.io guideline, which widely describe how to implement coherent design. Design patterns Ĭomponents listed here were not designed to behave and look in the same way on both platforms but rather to be used for handling similar behaviour on iOS and Android taking into consideration their's design concepts. Opacity applied to the button when it is in an active state. Set this to false if you want the ripple animation to render only within view bounds. In addition to the props of BaseButton, it accepts the following:īelow is a list of properties specific to BorderlessButton component: borderless ( Android only) The interaction will be different depending on platform: on Android a borderless ripple will be rendered (it means that the ripple will animate into a circle that can span outside of the view bounds), whereas on iOS the button will be dimmed (similar to how TouchableOpacity works). This type of button component should be used with simple icon-only or text-only buttons. Opacity applied to the underlay when button is in active state. This is the background color that will be dimmed when button is in active state. In addition to the props of BaseButton, it accepts the following:īelow is a list of properties specific to RectButton component: underla圜olor This component provides a platform specific interaction, rendering a rectangular ripple on Android or highlighting the background on iOS and on older versions of Android. This type of button component should be used when you deal with rectangular elements or blocks of content that can be pressed, for example table rows or buttons with text and icons. delayLongPress ĭefines the delay, in milliseconds, after which the onLongPress callback gets called. exclusive ĭefines if more than one button could be pressed simultaneously. rippleColor ( Android only) ĭefines color of native ripple animation used since API level 21. onLongPress įunction that gets triggered when the button gets pressed for at least delayLongPress milliseconds. onPress įunction that gets triggered when the button gets pressed (analogous to onPress in TouchableHighlight from RN core). It passes active state as a boolean variable as a first parameter for that method. BaseButton Ĭan be used as a base class if you'd like to implement some custom interaction for when the button is pressed.īelow is a list of properties specific to BaseButton component: onActiveStateChange įunction that gets triggered when button changes from inactive to active and vice versa. On iOS, you won't be able to even select the button, on Android you won't be able to click it in accessibility mode. It is applicable for both iOS and Android platform. IMPORTANT: In order to make buttons accessible, you have to wrap your children in a View with accessible and accessibilityRole="button" props. On top of that all the buttons are wrapped with NativeViewGestureHandler and therefore allow for all the common gesture handler properties and NativeViewGestureHandler's extra properties to be applied to them. Gesture handler's buttons recognize touches in native which makes the recognition process deterministic, allows for rendering ripples on Android in highly performant way ( TouchableNativeFeedback requires that touch event does a roundtrip to JS before we can update ripple effect, which makes ripples lag a bit on older phones), and provides native and platform default interaction for buttons that are placed in a scrollable container (in which case the interaction is slightly delayed to prevent button from highlighting when you fling).Ĭurrently Gesture handler library exposes three components that render native touchable elements under the hood: ![]() These can be treated as a replacement to TouchableHighlight or TouchableOpacity from RN core. Gesture handler library provides native components that can act as buttons. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |