@@ -7,22 +8,31 @@ a cross platform stylish numeric input for react native
## Working example
+
you can check out the very simple react native example app
just click [here](https://github.com/himelbrand/react-native-numeric-input/tree/master/Example) and follow the instructions
enjoy!
## Installation
+
### Latest version
+
v1.9.0
+
#### if you have react-native-vector-icons installed in your project
+
```bash
yarn add react-native-numeric-input
```
+
or with npm
+
```bash
npm install react-native-numeric-input --save
```
+
#### if you don't have react-native-vector-icons installed in your project
+
```bash
yarn add react-native-numeric-input react-native-vector-icons
react-native link
@@ -34,6 +44,7 @@ or with npm
npm install react-native-numeric-input react-native-vector-icons --save
react-native link
```
+
if you're experiencing issues with `react-native link` which is used to install react-native-vector-icons
please refer to [react-native-vector-icons](https://github.com/oblador/react-native-vector-icons) to see manual installation steps
@@ -52,92 +63,122 @@ so you can create your own responsive size function and use it to set your custo
## Usage
### import Component
+
```javascript
-import NumericInput from 'react-native-numeric-input'
+import NumericInput from "react-native-numeric-input";
```
+
### Basic Usage
+
```javascript
- console.log(value)} />
+ console.log(value)} />
```
**or basic up-down**
```javascript
- console.log(value)} />
+ console.log(value)} />
```
+
### Keep State Value
+
```javascript
- this.setState({value})} />
+ this.setState({ value })}
+/>
```
+
### Advanced Usage
+
```javascript
- this.setState({value})}
- onLimitReached={(isMax,msg) => console.log(isMax,msg)}
- totalWidth={240}
- totalHeight={50}
- iconSize={25}
- step={1.5}
- valueType='real'
- rounded
- textColor='#B0228C'
- iconStyle={{ color: 'white' }}
- rightButtonBackgroundColor='#EA3788'
- leftButtonBackgroundColor='#E56B70'/>
+ this.setState({ value })}
+ onLimitReached={(isMax, msg) => console.log(isMax, msg)}
+ totalWidth={240}
+ totalHeight={50}
+ iconSize={25}
+ step={1.5}
+ valueType="real"
+ rounded
+ textColor="#B0228C"
+ iconStyle={{ color: "white" }}
+ rightButtonBackgroundColor="#EA3788"
+ leftButtonBackgroundColor="#E56B70"
+/>
```
-
## Props
-Name | Type | Default
-------------------------------------|-------------------------------------|:-------:
-**value** |`number` | none
-**minValue** |`number` | none
-**maxValue** |`number` | none
-**step** |`number` | 1
-**valueType** |`'integer'` or `'real'` | `'integer'`
-**initValue** |`number` | null if not used will start at 0
-**iconSize** |`number` | calcSize(30)
-**borderColor** |`string` | `'#d4d4d4'`
-**iconStyle** |`object` | none
-**totalWidth** |`number` | calcSize(220)
-**separatorWidth** |`number` | 1
-**type** |`'plus-minus'` or `'up-down'` | `'plus-minus'`
-**rounded** |`boolean` | false
-**textColor** |`string` | `'black'`
-**containerStyle** |`object` | none
-**inputStyle** |`object` | none
-**upDownButtonsBackgroundColor** |`string` | `'white'`
-**rightButtonBackgroundColor** |`string` | `'white'`
-**leftButtonBackgroundColor** |`string` | `'white'`
-**totalHeight** |`number` | none
-**onChange** |`function` | none - required prop
-**onLimitReached** |`function` | none (empty function)
-**editable** |`boolean` | true
-**validateOnBlur** |`boolean` | true
-**reachMaxIncIconStyle** |`object` | none
-**reachMaxDecIconStyle** |`object` | none
-**reachMinIncIconStyle** |`object` | none
-**reachMinDecIconStyle** |`object` | none
-**extraTextInputProps** |`object` | none
+
+| Name | Type | Default |
+| -------------------------------- | ----------------------------- | :------------------------------: |
+| **value** | `number` | none |
+| **minValue** | `number` | none |
+| **maxValue** | `number` | none |
+| **disableDecButtonOnMinReach** | `boolean` | `'false'` |
+| **disableIncButtonOnMaxReach** | `boolean` | `'false'` |
+| **step** | `number` | 1 |
+| **valueType** | `'integer'` or `'real'` | `'integer'` |
+| **initValue** | `number` | null if not used will start at 0 |
+| **iconSize** | `number` | calcSize(30) |
+| **borderColor** | `string` | `'#d4d4d4'` |
+| **iconStyle** | `object` | none |
+| **totalWidth** | `number` | calcSize(220) |
+| **separatorWidth** | `number` | 1 |
+| **type** | `'plus-minus'` or `'up-down'` | `'plus-minus'` |
+| **rounded** | `boolean` | false |
+| **textColor** | `string` | `'black'` |
+| **containerStyle** | `object` | none |
+| **inputStyle** | `object` | none |
+| **upDownButtonsBackgroundColor** | `string` | `'white'` |
+| **rightButtonBackgroundColor** | `string` | `'white'` |
+| **leftButtonBackgroundColor** | `string` | `'white'` |
+| **totalHeight** | `number` | none |
+| **onChange** | `function` | none - required prop |
+| **onLimitReached** | `function` | none (empty function) |
+| **editable** | `boolean` | true |
+| **validateOnBlur** | `boolean` | true |
+| **reachMaxIncIconStyle** | `object` | none |
+| **reachMaxDecIconStyle** | `object` | none |
+| **reachMinIncIconStyle** | `object` | none |
+| **reachMinDecIconStyle** | `object` | none |
+| **reachMaxIncButtonStyle** | `object` | none |
+| **reachMinIncButtonStyle** | `object` | none |
+| **reachMaxDecButtonStyle** | `object` | none |
+| **reachMinDecButtonStyle** | `object` | none |
+| **extraTextInputProps** | `object` | none |
### notes about props
-* **value prop** - this component uses it's own state to hold value if value is not given as a prop
-* **style props** - this component has a default style and the styles props are to override the default style or add more fields
-* **totalWidth prop** - this prop is for the entire component width, and all other sizes are derived from it , unless given other size props
-* **initValue prop** - if using value prop, this is not needed and the initial value can be given by the value prop
-* **validateOnBlur** - added on version 1.3.2, if set to false the text input will validate while typing, not recommended, so just keep it true unless there is a good reason not to use the default functionallity
-* **reachMaxIncIconStyle** - added on version 1.4.0, used to set style to the increment button icon in case maxValue is reached - **optional**
-* **reachMaxDecIconStyle** - added on version 1.4.0, used to set style to the decrement button icon in case maxValue is reached - **optional**
-* **reachMinIncIconStyle** - added on version 1.4.0, used to set style to the increment button icon in case minValue is reached - **optional**
-* **reachMinDecIconStyle** - added on version 1.4.0, used to set style to the decrement button icon in case minValue is reached - **optional**
-* **onLimitReached** - added on version 1.7.0, used to handle event of min/max reached, **this function receives 2 arguments: (isMas:Boolean, msg:String)** like in the advanced example above - **optional**
-* **extraTextInputProps** - added on version 1.8.0, used to add props used for the original TextInput component that are not used/supported in this component explicitly - **optional**
+- **value prop** - this component uses it's own state to hold value if value is not given as a prop
+- **style props** - this component has a default style and the styles props are to override the default style or add more fields
+- **totalWidth prop** - this prop is for the entire component width, and all other sizes are derived from it , unless given other size props
+- **initValue prop** - if using value prop, this is not needed and the initial value can be given by the value prop
+- **validateOnBlur** - added on version 1.3.2, if set to false the text input will validate while typing, not recommended, so just keep it true unless there is a good reason not to use the default functionallity
+- **reachMaxIncIconStyle** - added on version 1.4.0, used to set style to the increment button icon in case maxValue is reached - **optional**
+- **reachMaxDecIconStyle** - added on version 1.4.0, used to set style to the decrement button icon in case maxValue is reached - **optional**
+- **reachMinIncIconStyle** - added on version 1.4.0, used to set style to the increment button icon in case minValue is reached - **optional**
+- **reachMinDecIconStyle** - added on version 1.4.0, used to set style to the decrement button icon in case minValue is reached - **optional**
+- **onLimitReached** - added on version 1.7.0, used to handle event of min/max reached, **this function receives 2 arguments: (isMas:Boolean, msg:String)** like in the advanced example above - **optional**
+- **extraTextInputProps** - added on version 1.8.0, used to add props used for the original TextInput component that are not used/supported in this component explicitly - **optional**
+
+- **disableDecButtonOnMinReach** - used to disable the decrement value button when the minimum value set is reached - **optional**
+- **disableIncButtonOnMaxReach** - used to disable the increment value button when the maximum value set is reached - **optional**
+
+- **reachMaxIncButtonStyle** - used to style the increment button when the max value set is reached - **optional**
+
+- **reachMinIncButtonStyle** - used to style the increment button when the min value set is reached - **optional**
+
+- **reachMaxDecButtonStyle** - used to style the decrement button when the max value set is reached - **optional**
+
+- **reachMinDecButtonStyle** - used to style the decrement button when the min value set is reached - **optional**
## Versioning
-We use [SemVer](http://semver.org/) for versioning. For the versions available, see the [tags on this repository](https://github.com/himelbrand/react-native-numeric-input/tags).
+
+We use [SemVer](http://semver.org/) for versioning. For the versions available, see the [tags on this repository](https://github.com/himelbrand/react-native-numeric-input/tags).
## License
+
This project is licensed under the MIT License
diff --git a/index.d.ts b/index.d.ts
index b128e179..a8423ff9 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -1,42 +1,46 @@
-declare module 'react-native-numeric-input' {
- import { ViewStyle } from 'react-native'
- import { Color } from 'csstype'
+declare module "react-native-numeric-input" {
+ import { ViewStyle } from "react-native";
+ import { Color } from "csstype";
export interface INumericInputProps {
- value?: number
- minValue?: number
- maxValue?: number
- step?: number
- valueType?: 'integer' | 'real'
- initValue?: number
- iconSize?: number
- borderColor?: Color
- iconStyle?: ViewStyle
- totalWidth?: number
- separatorWidth?: number
- type?: 'plus-minus' | 'up-down'
- rounded?: boolean
- textColor?: Color
- containerStyle?: ViewStyle
- inputStyle?: ViewStyle
- upDownButtonsBackgroundColor?: Color
- rightButtonBackgroundColor?: Color
- leftButtonBackgroundColor?: Color
- totalHeight?: number
- onChange: (value: number) => void
- onLimitReached?: (isMax: boolean, msg: string) => void
- editable?: boolean
- validateOnBlur?: boolean
- reachMaxIncIconStyle?: ViewStyle
- reachMaxDecIconStyle?: ViewStyle
- reachMinIncIconStyle?: ViewStyle
- reachMinDecIconStyle?: ViewStyle
- extraTextInputProps?: object
+ value?: number;
+ minValue?: number;
+ maxValue?: number;
+ step?: number;
+ valueType?: "integer" | "real";
+ initValue?: number;
+ iconSize?: number;
+ borderColor?: Color;
+ iconStyle?: ViewStyle;
+ totalWidth?: number;
+ separatorWidth?: number;
+ type?: "plus-minus" | "up-down";
+ rounded?: boolean;
+ textColor?: Color;
+ containerStyle?: ViewStyle;
+ inputStyle?: ViewStyle;
+ upDownButtonsBackgroundColor?: Color;
+ rightButtonBackgroundColor?: Color;
+ leftButtonBackgroundColor?: Color;
+ totalHeight?: number;
+ onChange: (value: number) => void;
+ onLimitReached?: (isMax: boolean, msg: string) => void;
+ editable?: boolean;
+ validateOnBlur?: boolean;
+ reachMaxIncIconStyle?: ViewStyle;
+ reachMaxDecIconStyle?: ViewStyle;
+ reachMinIncIconStyle?: ViewStyle;
+ reachMinDecIconStyle?: ViewStyle;
+ reachMaxIncButtonStyle?: ViewStyle;
+ reachMinIncButtonStyle?: ViewStyle;
+ reachMaxDecButtonStyle?: ViewStyle;
+ reachMinDecButtonStyle?: ViewStyle;
+ disableDecButtonOnMinReach?: boolean;
+ disableIncButtonOnMaxReach?: boolean;
+ extraTextInputProps?: object;
}
- export default class NumericInput extends React.Component<
- INumericInputProps
- > {}
+ export default class NumericInput extends React.Component {}
- export const DIMENTIONS: { height: number; width: number }
+ export const DIMENTIONS: { height: number; width: number };
}