<TextInput
style={styles.input}
onChangeText={(text) => onChangeNumber2(text)}
value={number2}
keyboardType="numeric"
/>
Image
I am mapped this text box dynamically .. while i change the value of one textbox it changed the all textboxes
You're using a controlled TextInput, try instead removing the value prop or using a unique value prop for each item in the list, also as you're mapping this component don't forget to add a unique key prop.
<TextInput
style={styles.input}
onChangeText={(text) => onChangeNumber2(text)}
value={number2}
keyboardType="numeric"
/>
You can read more about controlled inputs on the links down bellow
https://reactnative.dev/docs/handling-text-input
https://goshakkk.name/controlled-vs-uncontrolled-inputs-react/
Related
Good day, I need that when writing a text, the text in uppercase appeared by default. tried but failed
<TextInput
autoCapitalize='none'
autoCorrect={false}
selectTextOnFocus={false}
/>
There could be multiple ways to do it, i can tell you two simple ways to achieve this:
First:
<TextInput
placeholder={'Enter value'}
value={value}
onChangeText={(text) => setValue(text.toUpperCase())}
style={Styles.InputStyle}
/>
so we achieve this with onChangeText and set the props text to toUpperCase (string function). This will capitalize each characters while inserting into text input,
Second:
<TextInput
placeholder={'Enter value'}
value={value}
autoCapitalize='characters'
onChangeText={(text) => setValue(text)}
style={Styles.InputStyle}
/>
autoCapitalize have different properties which we use them for different type of text handling,
e.g
'none' : this will do no change to original text
'characters' : this will capitalize each character.
'sentences' : this will capitalize first character of a sentence.
'words' : this will capitalize first character of each word.
Hope this will help you :)
Inside TextInput, I want to have a red asterisk after placeholder text which is grey in color.
<TextInput
keyboardType="numeric"
placeholder={t('Enter OTP')}
placeholderTextColor="#C4C4C4"
value={inputOTP}
onChangeText={text => setInputOTP(text)}
style={styles.textInput}
/>
I want a red asterisk next to P in EnterOTP.
Is absolute position the only way to do it?
There is no direct method to do this.What I did is add text with asterix in front of the TextInput and show hide conditionally when there is value in TextInput or not,
const [title, setTitle] = useState();
const {
control,
handleSubmit,
formState: {errors},
} = useForm({});
<View style={{flexDirection: 'row',}}>
<Controller
control={control}
rules={{
required: true,
}}
render={({field: {onChange, onBlur, value}}) => (
<TextInput
autoFocus
onChangeText={(val) => {
onChange(val);
setTitle(val);
}}
value={value}
onBlur={onBlur}
placeholder={'Type activity name here'} >
</TextInput>
)}
name="activityName"
/>
{title ? <Text></Text> : <Text style={{color: 'red',fontSize: 17,height: 13,}}>*</Text>}
</View>
The Controller here comes from react-hook-forms which is not related to this question.You can use TextInput without Controller also.
TextInput naturally does not support the behaviour you mentioned (Placeholder with multiple colors) but with a small trick you will be able to achieve what you want!
put a text with red asterisk
<Text style={{ color: 'red' }}>* * *</Text>
try to give it a position which will sit beside your OTP text in placeholder . in TextInput component we have onFocus props which will be triggered when you enter the text input and want to type in!
so here you can make the mentioned text conditional! when it is not focused and there is no character inside you will show the red asterisk text otherwise you won't show it.
I am getting the text of the TextInput using onChangeText event and state.
<View style={styles.inputContainerStyle}>
<TextInput
autoFoucs={true}
ref={inputRef}
style={styles.textInputStyle}
placeholder="type here ..."
placeholderTextColor='#838389'
multiline
underlineColorAndroid="transparent"
onChangeText={text => handleTextChange(text)}
value={selectedText}
/>
<TouchableOpacity style={styles.submitBtnWrapperStyle} onPress={() => handleMsgSend()}>
<Icon name={msgEditMode ? "check" : "paper-plane"} size={20} color="#ffffff" />
</TouchableOpacity>
</View>
...
// handle text change on textinput
const handleTextChange = text => {
channel && channel.typing();
setSelectedText(text);
}
But actually whenever text is changed, the render function also is called because of changing state value and it is making the whole screen more slow.
So I am looking for the alternative way to get the text not using onChangeText event.
Is there any native way to get the text using ref?
I hope kind help.
thanks...
Yes, you can access the value of text input using ref like this
this.inputRef._lastNativeText
I want to add something like a Hint, on the textInput, as in java using android studio, in react native is it possible to do this? I know you have the option to add a Value, defaultValue and the placeholder, but they don't work like hint.
Tanks!
You can use placeholder props
<TextInput
placeholder="Input email"
/>
Yes it is possible, it's called placeholder, Here is an example from docs.:
<TextInput
style={{height: 40}}
placeholder="Type here to translate!"
onChangeText={(text) => this.setState({text})}
value={this.state.text}
/>
The only thing you need to do is to add a the placeholder prop.
<TextInput
...//otherprops
placeholder="enter your hint here"
/>
I highly suggest you to read more about TextInput in React Native docs here
I want to change the placeholder in TextInput to uppercase without affecting the input. I intend to keep the input in lowercase. How do I achieve that?
Did you try to write placeholder value uppercase like below?
<TextInput
placeholder={'TEST'}
onChangeText={(text) => this.setState({ text })}
value={text}
style={styles.input}
/>
If you want to change placeholder case then use javascript functions e.g.toUpperCase() as below:
<TextInput
placeholder={String('test').toUpperCase()}
onChangeText={(text) => this.setState({ text })}
value={text}
style={styles.input}
/>