RNDynamicButton
A dynamically scaling & responding button component for React Native
Installing
npm install --save rndynamicbutton
Import it as a namespace import:
import DynamicButton from 'rndynamicbutton';Features
- Dynamically scales to a circular button when there is little text (e.g. a
+symbol) - Based on ReactNative#TouchableComponent. Can dynamically be returned by setting the
touchableprop.
API
View an example The component is a pure stateless component, which takes the following props. Children is the only required prop, all the rest is optional.
| Prop | Type | Values |
|---|---|---|
touchable |
String | 'opacity', 'disabled', 'highlight' |
action |
Function | A function to be passed to the Touchable's onPress prop |
style |
Object | Object or StyleSheet to be passed on to TouchAble's style prop |
textStyle |
Object | Object or StyleSheet to be passed on to Text's style prop |
shadow |
Boolean | true (default) or false |
children |
String, Number, React.Element | A string or number to be rendered inside of a Text component, or any other valid React element to be rendered directly nested inside the Touchable. |
Why another button?
Anthony, Jonas and I were working on the end assignment for our bachelor degree Devine and dived into React Native for this one.
We couldn't find a button which did everything we wanted. Our best fit was APSL's button but this one always scaled up the full width of the container and used old React syntax. Surely, I could've submitted a PR to this but as a practice I wanted to release something that would be more dynamic. This is the result of another 1AM side project.
License & contribution
First let's thank APSL, which this module is heavily inspired on.
This project is released as public domain. Do whatever you want with it.
Contributions very welcome! My React Native days will probably be short lived, so any people keeping this alive are a godsend!
