Security News
The Push to Ban Ransom Payments Is Gaining Momentum
Ransomware costs victims an estimated $30 billion per year and has gotten so out of control that global support for banning payments is gaining momentum.
react-native-numeric-input-counter
Advanced tools
Readme
a cross platform stylish numeric input for react native
you can check out the very simple react native example app just click here and follow the instructions enjoy!
v1.9.0
yarn add react-native-numeric-input
or with npm
npm install react-native-numeric-input --save
yarn add react-native-numeric-input react-native-vector-icons
react-native link
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 to see manual installation steps
this component uses the react-native-pixel-perfect
and the defualt style is using base resolution for iphone7, in case you want to use the default design but, using a different base resolution, I added a function called updateBaseResolution(width,height) to use it you need to access it via a ref to the component.
since the component is dependant on react-native-pixel-perfect, when installing this package you install also react-native-pixel-perfect if it's not already installed.
so you can create your own responsive size function and use it to set your custom style.
import NumericInput from 'react-native-numeric-input'
<NumericInput onChange={value => console.log(value)} />
or basic up-down
<NumericInput type='up-down' onChange={value => console.log(value)} />
<NumericInput value={this.state.value} onChange={value => this.setState({value})} />
<NumericInput
value={this.state.value}
onChange={value => 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'/>
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 |
We use SemVer for versioning. For the versions available, see the tags on this repository.
This project is licensed under the MIT License
FAQs
a stylish numeric input for react native
The npm package react-native-numeric-input-counter receives a total of 5 weekly downloads. As such, react-native-numeric-input-counter popularity was classified as not popular.
We found that react-native-numeric-input-counter demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Ransomware costs victims an estimated $30 billion per year and has gotten so out of control that global support for banning payments is gaining momentum.
Application Security
New SEC disclosure rules aim to enforce timely cyber incident reporting, but fear of job loss and inadequate resources lead to significant underreporting.
Security News
The Python Software Foundation has secured a 5-year sponsorship from Fastly that supports PSF's activities and events, most notably the security and reliability of the Python Package Index (PyPI).