React Native TextInput does not display number type value

Question

I have a pre-rendered value that always has to be a number type. I set the TextInput value to this number but it does not display in the input field unless I convert the number to a string. However, when the number is converted to a string using toString() or String(value), editing the TextInput by clearing out the field causes NaN to display in the field which becomes impossible to wipe out as it keeps recurring after every attempt.

Here is how the TextInput looks:

<TextInput value={5}/> 
//displays nothing in the field unless when like this: 

<TextInput value="5"/>

<TextInput value={value.toString()}/>  and <TextInput value={String(value}/> cause NaN when the field is cleared completely

It also does not emit a number value, but not rendering a number value is the more serious problem.

Please can anyone tell me how I can solve this?

polcats · Accepted Answer · 2020-08-09 03:07:53Z

4

You could simplify this by using string literals.

You have

const [num, setNum] = React.useState(0);

And then,

<TextInput 
   keyboardType="numeric" 
   onChangeText={(newNum) => setNum(newNum)} 
   defaultValue={`${num}`} />

answered Aug 9, 2020 at 3:07

polcats

1441 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Muhammad Iqbal · Accepted Answer · 2020-08-08 23:40:20Z

2

not rendering a number value is the more serious problem.

TextInput's value prop type is string ,that's why you must explicitly convert it while passing it as prop to your TextInput.

for more info

you can achieve this by using state and onTextChange method check code snippet.

import * as React from 'react';
import { Text, View, StyleSheet ,TextInput} from 'react-native';
import Constants from 'expo-constants';


export default function App() {
  const [numValue,setNumValue] = React.useState(9991122)
  return (
    <View style={styles.container}>
      <TextInput value={numValue.toString()} keyboardType={'numeric'} style={{margin:100,borderWidth:2}} onChangeText={(e)=>setNumValue(e)}/> 
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
 
});

answered Aug 8, 2020 at 23:40

Muhammad Iqbal

1,5151 gold badge17 silver badges36 bronze badges

1 Comment

Efosa Over a year ago

Thanks @muhammad. This worked for useState. However, I am using formik. Please do you know how I can use handleChange to emit number instead of string? Or any other method?

Collectives™ on Stack Overflow

React Native TextInput does not display number type value

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related