This post is about the Warning: Invalid prop ‘value’ of type ‘number’ supplied to ‘TextInput’, expected ‘string’. You will see this warning while working with TextInput.
Warning: Failed Prop type: Invalid prop ‘value’ of type ‘number’ supplied to ‘TextInput’, expected ‘string’
If you will see the code of the TextInput you will find we directly pass the value from the state/variable to the value prop.
<TextInput
value={this.state.dynamicIndex}
numericvalue
keyboardType={'numeric'}
onChangeText={dynamicIndex => this.setState({ dynamicIndex })}
placeholder={'Enter the index to scroll'}
style={{ flex: 1, backgroundColor: 'white', padding: 10 }}
/>
But the prop value
requires the value to be set in the string. Sometimes values in the state will be numeric and sometimes it will be alphanumeric. In this case when the value is alphanumeric then the value is treated as a string but in the case of numeric, it becomes pure numbers. So for the best practic, we have to try every time to convert the value into the string before assigning to the value prop.
you can use String()
to convert the value into a string. Here is some example code below.
<TextInput
value={String(this.state.dynamicIndex)}
numericvalue
keyboardType={'numeric'}
onChangeText={dynamicIndex => this.setState({ dynamicIndex })}
placeholder={'Enter the index to scroll'}
style={{ flex: 1, backgroundColor: 'white', padding: 10 }}
/>
This is how you can solve Warning: Failed Prop type: Invalid prop ‘value’ of type ‘number’ supplied to ‘TextInput’, expected ‘string’. For more please follow this thread.
Thanks. It resolve me.
Welcome