How to add red asterisk in react native TextInput placeholder? - react-native

Question

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?

Answer 1

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.

Answer 2

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.