React Native Increment Decrement UI

A simple view that increment and decrement integer value

It has following functionalities:

1. Initial value set (default 0)
2. MIN - MAX value set, and once MIN - MAX value reach disable control
3. Increment and Decrement value by specific integer value (default 1)
4. Handle increment and decrement specific controls click event
5. Disable specific control
6. Swipe controls
7. Custom style apply for root view, controls and specific control too
8. Add vector icons for controls

Example

Installation

if you have already install react-native-elements and react-native-vector-icons

npm install react-native-increment-decrement-ui

if you don't have already install react-native-elements and react-native-vector-icons

npm install react-native-increment-decrement-ui react-native-elements react-native-vector-icons --save

If you face any difficulties or error refer react-native-elements and react-native-vector-icons this links

Usage

Import

import IncrementDecrementView from 'react-native-increment-decrement-ui'

Default: Without any properties

<IncrementDecrementView />

Add: value, minValue, maxValue properties

<IncrementDecrementView 
    value={0}
    minValue={-10}
    maxValue={10}
/>

Add: Swipe control, disable specific control properties

<IncrementDecrementView 
    buttonSize={50}
    decrementDisable={true}
    isSwipeControl={true}
/>

Add: custom styling properties

<IncrementDecrementView 
    buttonSize={50}
    style={{
        borderColor: 'orange',
        borderWidth: 4
    }}
    valueStyle={{
        fontSize: 24,
        color: 'blue'
    }}
    incrementStyle={{
        backgroundColor: 'red'
    }}
    decrementStyle={{
        backgroundColor: 'green'
    }}
/>

Add: controls with icons properties

• For icon you need to import react-native-vector-icons

import Icon from 'react-native-vector-icons/FontAwesome5';

<IncrementDecrementView 
    buttonSize={50}
    valueStyle={{
        fontSize: 24
    }}
    incrementStyle={{
        backgroundColor: 'red'
    }}
    decrementStyle={{
        backgroundColor: 'green'
    }}
    decrementIcon={
        <Icon name="user-minus" size={16} color="#FFF" />
    }
    incrementIcon={
        <Icon name="user-plus" size={16} color="#FFF" />
    }
/>

Add: All properties

<IncrementDecrementView 
    value={this.state.value}
    incrementDecrementBy={5}
    minValue={-50}
    maxValue={50}
    buttonSize={50}
    incrementTapHandler={() => {
        this.setState({ value: this.state.value + 5 })
    }}
    decrementTapHandler={() => {
        this.setState({ value: this.state.value - 5 })
    }}
    incrementStyle={{
        backgroundColor: 'red'
    }}
    valueStyle={{
        fontSize: 24
    }}
    decrementIcon={
        <Icon name="user-minus" size={16} color="#FFF" />
    }
    incrementIcon={
        <Icon name="user-plus" size={16} color="#FFF" />
    }
/>

PROPS

Name | Type | Description -----|------|-------- value|number (default 0)|value for initial set number minValue|number (default ∞ infinite)|set minimum value maxValue|number (default ∞ infinite)|set maximum value buttonSize|number (default 44)|set increment & decrement control size incrementDisable|bool (default false)|disable increment control decrementDisable|bool (default false)|disable decrement control isSwipeControl|bool (default false)|swipe increment & decrement control positions incrementDecrementBy|number (default 1)|increment or decrement by specific value style|object|set style of the root view valueStyle|object|customizing the style of the text view buttonStyle|object|customizing style for both increment & decrement control view incrementStyle|object|customizing the style of the increment control view decrementStyle|object|customizing the style of the decrement control view incrementTapHandler|function|custom increment control click handle decrementTapHandler|function|custom decrement control click handle incrementIcon|object|set icon instead of '+' in increment control decrementIcon|object|set icon instead of '-' in decrement control