Comments (23)
To make this work with React Native all you have to do is to provide custom renderText method:
import NumberFormat from 'react-number-format';
<NumberFormat
value={2456981}
displayType={'text'}
thousandSeparator={true}
prefix={'$'}
renderText={value => <Text>{value}</Text>} <--- This
/>
from react-number-format.
Just to add to @questionablequestion response, to get this working for an asYouType formatter, you can render a TextInput
<NumberFormat
value={amount}
displayType={'text'}
thousandSeparator={true}
prefix={'$ '}
renderText={value => (
<TextInput
underlineColorAndroid="transparent"
style={styles.input}
onChangeText={this.handleChange}
value={value}
keyboardType="numeric"
/>
)}
/>
where handleChange basically just changes state for your controlled component.
Ex
handleChange = amount => {
this.setState({ amount })
}
from react-number-format.
Any progress on React Native support?
from react-number-format.
Just to add to @questionablequestion response, to get this working for an asYouType formatter, you can render a TextInput
<NumberFormat value={amount} displayType={'text'} thousandSeparator={true} prefix={'$ '} renderText={value => ( <TextInput underlineColorAndroid="transparent" style={styles.input} onChangeText={this.handleChange} value={value} keyboardType="numeric" /> )} />
where handleChange basically just changes state for your controlled component.
ExhandleChange = amount => { this.setState({ amount }) }
This works in terms of display but, for some reason, I can no longer input decimal places. It keeps deleting them. The thousandSeparator function works though.
from react-number-format.
Yes, we would like to have this for React Native, even for simple usage like adding a thousands separator.
from react-number-format.
@khalidchawtany
It's work only one direction. After '.' was added invalue
I can't delete '.'...Got it to work by extending @khalidchawtany 's approach. Basically, added another condition checker that removes the decimal when the passed value does not end with a decimal (found this by logging the values and checking what value is passed depending on various inputs). Not sure if all cases are covered though.
<NumberFormat value={amount} displayType={"text"} thousandSeparator={true} decimalSeparator={"."} decimalScale={2} prefix={""} renderText={value => { if (amount.endsWith(".") && !value.includes(".")) { value = value + "."; } if (!amount.endsWith(".") && value.endsWith(".")) { value = value.slice(0,-1); } return ( <TextInput underlineColorAndroid="transparent" value={value} style={styles.textInput} onChangeText={handleAmountChange} keyboardType="numeric" /> ); } } />
This works for me but it won't allow me to put a decimal point followed by a 0
for example 10.05 or 10.50 both won't work but 10.55 works fine
from react-number-format.
@cenaHara I ended up using react-native-masked-text
from react-number-format.
I'm having what I think is a react-native issue. I'm using the example from the docs (and wrapping it in a Text component for some styling, omitted here). I'm getting:
"Invariant Violation: View config not found for name span", which means that the 'span' isn't capitalized, so I'm guessing the issue is with something that NumberFormat is doing under the hood? Any ideas? Thanks!
import NumberFormat from 'react-number-format'
<Text>
<NumberFormat value={2456981} displayType={'text'} thousandSeparator={true} prefix={'$'} />
</Text>
from react-number-format.
It is not supported on react native yet. But I guess it should be an easy one to implement. I will be happy if someone can fork and work on react-native piece.
from react-number-format.
I was working on the similar module for React Native – https://github.com/ivanzotov/react-native-text-input-mask, it's not easy to implement text input mask in React Native, here I described why – https://blog.cloudboost.io/text-input-mask-for-react-native-3c04e82843a6
hope it helps.
from react-number-format.
Nice @ivanzotov. Is this only for masked input or does it have other formatting options?
And yes I agree that it will be not as easy as this library is depended a lot in input selection attributes, which I am not sure how much react-native provide.
from react-number-format.
@s-yadav thanks, yes it's only masked input yet, working on other options.
from react-number-format.
NumberFormat component does not have a problem on web but in react native it doesnt work or i couldnt,
My configuration;
<NumberFormat
decimalSeparator=","
thousandSeparator="."
// isNumericString={true}
// allowNegative={false}
decimalScale={AMOUNT_FIELD_COMMA_INDEXES.ONE}
fixedDecimalScale={true}
// placeholder={${PLACEHOLDER.AMOUNT} ${this.props.currency}
}
suffix={ ${this.props.currency}
}
value={this.state.amountValue}
displayType={'text'}
renderText={(value) => {
return <NativeTextInput
onChangeText={this.handleChange}
value={value}
keyboardType="numeric"
placeholder={${PLACEHOLDER.AMOUNT} ${this.props.currency}
}
/>;
}
}
/>
And handleChange simple is
handleChange = (value) => {
this.setState({ amountValue: value}); }
In native cursor position changes after a new comma comes
When first number is entered cursor stay the end of input
from react-number-format.
I have the same issue as @Baran10. Using @questionablequestion & @DrJid 's method I see the control but the caret is stuck at the end. I cannot backspace anything other than the last character. Are there caret settings I am missing?
from react-number-format.
An I have the same issue as @thegoldenmule .
My component looks like this
`
<NumberFormat
value={information.areasecure!= null ? information.areasecure: ""}
format="#.##"
displayType={'text'}
thousandSeparator={true}
renderText={value => (
<TextInput
onChangeText={(value) => {this.setState({information: {...information, areasecure: value}})}}
value={value}
keyboardType="numeric"
/>
)}
/>
`
It looks like it renders few times, when i typ "1" I put the number "1" but then it render second time and add a space and looks like this "1 ". When add next number looks like "1.8 " (with space at the end). It is not possible to delete the characters.
from react-number-format.
@dnlnvl I can get around the issue of decimal places using the following:
<NumberFormat
value={amount}
displayType={'text'}
thousandSeparator={true}
decimalSeparator={'.'}
decimalScale={2}
prefix={''}
renderText={value => {
if (amount.endsWith('.') && !value.includes('.')) {
value = value + '.';
}
return (
<TextInput
underlineColorAndroid="transparent"
value={value}
style={styles.textInput}
onChangeText={handleAmountChange}
keyboardType="numeric"
/>
);
}
}
/>
from react-number-format.
It's work only one direction. After '.' was added in value
I can't delete '.'...
from react-number-format.
It's work only one direction. After '.' was added in
value
I can't delete '.'...
Got it to work by extending @khalidchawtany 's approach. Basically, added another condition checker that removes the decimal when the passed value does not end with a decimal (found this by logging the values and checking what value is passed depending on various inputs). Not sure if all cases are covered though.
<NumberFormat value={amount} displayType={"text"} thousandSeparator={true} decimalSeparator={"."} decimalScale={2} prefix={""} renderText={value => { if (amount.endsWith(".") && !value.includes(".")) { value = value + "."; } if (!amount.endsWith(".") && value.endsWith(".")) { value = value.slice(0,-1); } return ( <TextInput underlineColorAndroid="transparent" value={value} style={styles.textInput} onChangeText={handleAmountChange} keyboardType="numeric" /> ); } } />
from react-number-format.
I have the same issue as @Baran10. Using @questionablequestion & @DrJid 's method I see the control but the caret is stuck at the end. I cannot backspace anything other than the last character. Are there caret settings I am missing?
I have the same problem. Did you find any solution to this?
from react-number-format.
same issue @samuelpetroline any solution ?
from react-number-format.
hi @samuelpetroline Thank you, but when I use this lib, number jumps when input, will you be the same as me
<TextInputMask
type={'money'}
placeholder={"$0.00"}
autoCorrect={false}
autoCapitalize="none"
keyboardType='decimal-pad'
returnKeyType="next"
value={value}
placeholderTextColor={ colors.GRAY}
style={[styles.inputStyle]}
maxLength={17}
onChangeText={handleChangeText}
options={{
precision: 2,
separator: '.',
delimiter: ',',
unit: '$',
suffixUnit: ''
}}
/>
from react-number-format.
on using suffix instead of prefix currency is overlapping over number, how can i resolve it?
from react-number-format.
@cenaHara I ended up using react-native-masked-text
I also ended up using this one, it's working fine, totally recommend
from react-number-format.
Related Issues (20)
- 5.3.1 Regression: Typing "." leads to "^0.00" where "^" is location of caret HOT 1
- NumericFormat: customInput Antd Input is not working properly HOT 9
- Rounding with decimalScale={1} HOT 1
- IPv4 Address Mask HOT 1
- NumericFormat suffix is not allowing antdesign input to handle suffix HOT 1
- Support IME japanese keyboard HOT 2
- Not able to delete negative sign using backspace button HOT 1
- Intl.NumberFormat with fraction digits. input box <=> form state mismatch HOT 2
- percentage formatting, input box <=> form state mismatch
- Controlled Input will convert -0 to 0 HOT 2
- Problem with default value doesnt override mask, but add this value to end mask HOT 1
- Package should not throw errors when `thousandSeparator` and `decimalSeparator` are similar
- Caret moved at the end when used with Ant Design library HOT 2
- The caret position isn't set properly when I use the `removeFormatting` function to use the Persian numbers with the `thousandSeparator` prop HOT 3
- Removing last number with trailing zeros deletes all the right side zeros, when integrating with `react-hook-form` HOT 5
- TypeError: Cannot read property 'length' of undefined, js engine: hermes
- Decimal rounding up HOT 3
- Caret focus in empty place with format value HOT 3
- Type error preventing app from deploying 'No inputs were found in config file '.../node_modules/react-number-format/tsconfig.json'. HOT 2
- Why NumericFormat is not working with react-hook-form refs? HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-number-format.