All Projects → APSL → React Native Button

APSL / React Native Button

Licence: mit
A React Native button component customizable via props

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to React Native Button

Ahdownloadbutton
Customizable download button with progress and transition animations. It is based on Apple's App Store download button.
Stars: ✭ 370 (-48.54%)
Mutual labels:  button
React Native Platform Touchable
A wrapper around the various Touchable* components built into React Native core with platform defaults
Stars: ✭ 440 (-38.8%)
Mutual labels:  button
Holdingbutton
Button which is visible while user holds it. Main use case is controlling audio recording state (like in Telegram, Viber, VK).
Stars: ✭ 595 (-17.25%)
Mutual labels:  button
Android Commonshapebutton
To remove all shape files from the project, provide a generic shape style button.
Stars: ✭ 404 (-43.81%)
Mutual labels:  button
Nfdownloadbutton
Revamped Download Button. It's kinda a reverse engineering of Netflix's app download button.
Stars: ✭ 429 (-40.33%)
Mutual labels:  button
React Native Button Component
A Beautiful, Customizable React Native Button component for iOS & Android
Stars: ✭ 513 (-28.65%)
Mutual labels:  button
Flexiblebutton
灵活的按键处理库(Flexible Button)| 按键驱动 | 支持单击、双击、连击、长按、自动消抖 | 灵活适配中断和低功耗 | 按需实现组合按键
Stars: ✭ 322 (-55.22%)
Mutual labels:  button
Progressbutton
Android Progress Button
Stars: ✭ 662 (-7.93%)
Mutual labels:  button
Badgebutton
带有徽标(数字,小红点)的按钮
Stars: ✭ 434 (-39.64%)
Mutual labels:  button
Materialfavoritebutton
Animated favorite/star/like button
Stars: ✭ 586 (-18.5%)
Mutual labels:  button
Submitbutton
A submit button with a fun animation for Android.
Stars: ✭ 419 (-41.72%)
Mutual labels:  button
Shinebutton
This is a UI lib for Android. Effects like shining.
Stars: ✭ 4,105 (+470.93%)
Mutual labels:  button
React Progress Button
🌀 Simple react.js component for an inline progress indicator
Stars: ✭ 516 (-28.23%)
Mutual labels:  button
Squishbutton
A button that squishes when pressed. As seen in the Clips app.
Stars: ✭ 401 (-44.23%)
Mutual labels:  button
Front End Daily Challenges
As of October 2020, 170+ works have been accomplished, challenge yourself each day!
Stars: ✭ 598 (-16.83%)
Mutual labels:  button
Segmentedbutton
Segmented Control with animation for Android API 12+
Stars: ✭ 352 (-51.04%)
Mutual labels:  button
Hapticbutton
A button that is triggered based on the 3D Touch pressure, similar to the iOS 11 control center.
Stars: ✭ 501 (-30.32%)
Mutual labels:  button
Amazon Dash
Hack your Amazon Dash to run what you want.
Stars: ✭ 703 (-2.23%)
Mutual labels:  button
Pmsuperbutton
🔥 PMSuperButton is a powerful UIButton coming from the countryside, but with super powers! 😎
Stars: ✭ 653 (-9.18%)
Mutual labels:  button
Esp Dash
A blazing fast library to create a functional dashboard for ESP8266 and ESP32
Stars: ✭ 548 (-23.78%)
Mutual labels:  button

apsl-react-native-button

A React Native button component customizable via style props.

Button component screenshot Android Button component screenshot

Renders a TouchableOpacity under iOS and a TouchableNativeFeedback under Android.

Install

apsl-react-native-button>=2.6.0 needs React Native 0.28 or higher. apsl-react-native-button>=2.5.0 needs React Native 0.25 or higher. apsl-react-native-button<=2.4.2 needs React Native 0.16 or higher.

Install the package:

$ npm i apsl-react-native-button --save

Import the Button component:

import Button from 'apsl-react-native-button'

Usage

Provide TouchableWithoutFeedback' props to the component (including style), textStyle's StyleSheet to customize the inner text and a children node to render. You can also provide the isLoading prop that will dim the button and disable it to prevent accidental taps.

<Button style={{backgroundColor: 'red'}} textStyle={{fontSize: 18}}>
  Hello!
</Button>

You can also provide a <Button> element with nested children that are not strings or <Text> elements as long as they are valid React elements or numbers. This helps if your project is using another library that provides easy icon integration utilizing the <i> tag, for instance, as well as various other cases where you are creating visually complex buttons. You may omit the textStyle property and apply your own styles to your child elements as you see fit. Multiple children are allowed.

<Button style={{backgroundColor: 'blue'}}>
  <View style={styles.nestedViewStyle}>
    <Text style={styles.nestedTextStyle}>Nested views!</Text>
  </View>
</Button>

API

Prop Type Description
onPress func Function to execute when the onPress event is triggered.
onPressIn func Function to execute when the onPressIn event is triggered.
onPressOut func Function to execute when the onPressOut event is triggered.
onLongPress func Function to execute when the onLongPress event is triggered.
textStyle TextStylePropTypes The StyleSheet to apply to the inner button text.
disabledStyle TextStylePropTypes The StyleSheet to apply when disabled.
children string, number, React.Element,or array The child nodes to render inside the button. If child is string or number, it will be rendered inside of a <Text> element with textStyle applied if present. Multiple children are allowed (array).
isLoading bool Renders an inactive state dimmed button with a spinner if true.
isDisabled bool Renders an inactive state dimmed button if true.
activeOpacity Number The button onpressing transparency (Usually with a point value between 0 and 1).
activityIndicatorColor string Sets the button of the ActivityIndicatorIOS or ProgressBarAndroid in the loading state.
background TouchableNativeFeedback.propTypes.background Android only. The background prop of TouchableNativeFeedback.
Check the included example for more options.

Similar projects

James Ide's react-native-button https://github.com/ide/react-native-button/

License

MIT.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].