Counter Input with fully customizable options for React Native
npm version npm Platform - Android and iOS License: MIT styled with prettier
React Native Counter Input React Native Counter Input
Add the dependency:
npm i react-native-counter-input
"@freakycoder/react-native-bounceable": ">= 0.1.1",
import CounterInput from "react-native-counter-input";
<CounterInput onChange={(counter) => { console.log("onChange Counter:", counter); }} />
| Property | Type | Default | Description |
|---|---|---|---|
| style | style | default | change/override the main container style |
| horizontal | boolean | false | make the button horizontal design |
| initial | number | 0 | set the initial value for the counter input |
| onChange | function | undefined | set your own logic for onChange method, it triggers on any change |
| onChangeText | function | undefined | it triggers when the TextInput changes |
| onIncreasePress | function | undefined | it triggers when the increase button is pressed |
| onDecreasePress | function | undefined | it triggers when the decrease button is pressed |
| backgroundColor | string | #fff | change the CounterInput's background color |
| min | number | undefined | set a minimum input value |
| max | number | undefined | set a maximum input value |
| reverseCounterButtons | boolean | false | reverse the counter buttons |
| increaseButtonBackgroundColor | string | #0b349a | change the CounterInput's active increase button background color |
| decreaseButtonBackgroundColor | string | #0b349a | change the CounterInput's active decrease button background color |
| ImageComponent | component | Image | set your own Image component instead of default RN Image component such as; FastImage |
-
(削除) LICENSE (削除ここまで) -
(削除) Horizontal Feature (削除ここまで) - Animation
-
(削除) Reverse Horizontal +/- Buttons Option (削除ここまで) - Write an article about the lib on Medium
Heavily Inspired by Enes Kargıcı, thank you so much!
FreakyCoder, kurayogun@gmail.com
React Native Counter Input is available under the MIT license. See the LICENSE file for more info.