0.0.1-alpha.2 • Published 4 years ago
react-native-number-ticker-input v0.0.1-alpha.2
react-native-number-ticker-input
A numeric input in the style of a ticker, which supports Android, iOS and Web.
Getting Started
Using npm:
npm install --save react-native-number-ticker-inputUsing yarn:
yarn add react-native-number-ticker-inputUsage
The component works very similarly to a <TextInput/>, since it is after all, just an animated wrapper of one!
import React, { useState } from "react";
import NumberTickerInput from "react-native-number-ticker-input";
export default () => {
const [value, setValue] = useState(0);
return (
<NumberTickerInput
height={100}
significantContainerStyle={{
backgroundColor: 'white',
}}
decimalContainerStyle={{
backgroundColor: 'lightgrey',
}}
significantTickerStyle={{
fontSize: 60,
fontFamily: 'monospace',
}}
decimalTickerStyle={{
fontSize: 60,
fontFamily: 'monospace',
color: 'red',
}}
decimalDigits={1}
value={value}
onChange={setValue}
/>
);
};Props
| Property | Type | Required | Default value | Description |
|---|---|---|---|---|
| height | number | no | 100 | Defines the component height. |
| value | number | no | 0 | Defines the current value. |
| onChange | func | no | () => null | Callback to update the value. |
| significantDigits | number | no | 4 | The number of digits to show before the decimal point. |
| significantContainerStyle | style | no | undefined | The style of the outer container for a significant digit. |
| significantTickerStyle | style | no | undefined | The style of an individual number ticker for a significant digit. |
| decimalDigits | number | no | 2 | The number of decimal digits. |
| decimalContainerStyle | style | no | undefined | The style of the outer container for a decimal digit. |
| decimalTickerStyle | style | no | undefined | The style of an individual number ticker for a decimal digit. |
| DecimalPoint | elementType | no | DecimalPoint | The component to use when rendering the decimal point. This will not be rendered if decimalDigits === 0. |