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}
/>
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.
<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/
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 suspect that I may not be able to do this at the moment.. but it doesn't hurt to ask for some ideas! I have multiple multiline TextInputs on a single page, that I would like to be able to use the "next" button in order to switch to the next TextInput.
I can switch inputs without issue, however... I have to choose between using "blurOnSubmit" - which does not add a new line, but it does dismiss the keyboard. This makes the android experience really poor when the next input is focused. It does the same for iOS, but iOS handles it a little better.
Or, I can not use blurOnSubmit, and then I need to ensure I update the state myself to manually remove the '\n' that is added...
Does anyone have a better solution?
A typical page looks something like this (cleared all decoration and view vs edit logic):
<View>
<TextInput
autoCapitalize="none"
autoCorrect={false}
multiline={true}
onChangeText={(valueA) => this.setState({ valueA })}
onSubmitEditing={() => this._onSubmitEditing(this.refs.B)}
returnKeyType={"next"}
value={this.state.valueA}
ref="A"
/>
<TextInput
autoCapitalize="none"
autoCorrect={false}
multiline={true}
onChangeText={(valueB) => this.setState({ valueB })}
onSubmitEditing={() => this._onSubmitEditing(this.refs.C)}
returnKeyType={"next"}
value={this.state.valueB}
ref="B"
/>
<TextInput
autoCapitalize="none"
autoCorrect={false}
multiline={true}
onChangeText={(valueC) => this.setState({ valueC })}
onSubmitEditing={this._validateAndSave}
returnKeyType={"done"}
value={this.state.valueC}
ref="C"
/>
</View>
Related Function:
_onSubmitEditing (nextRef) {
if(!!nextRef && nextRef.focus) {
nextRef.focus();
}
}
Came here since I had TextInput was adding a newline when hitting done.
In your TextInput add:
blurOnSubmit={true}
or just
blurOnSubmit.
Default value for single-line fields is true, but, for multiline fields it's false.
Found here: https://github.com/wix/react-native-autogrow-textinput/issues/25#issuecomment-328243174