How to add red asterisk in react native TextInput placeholder?

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?

You could overlay your own component on top of the input and give it the same behavior as a placeholder. Ie, only visible when input has not yet been selected. — windowsill, Feb 15 '22 at 04:54

score 1 · Accepted Answer · answered Mar 25 '22 at 12:03

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.

score 0 · Answer 2 · answered Feb 15 '22 at 05:36

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.

score 0 · Answer 3 · answered Jul 11 '23 at 08:37

customize a TextInput in component

import { StyleSheet, Text, TextInput, TouchableOpacity, View } from 'react-native'
import React, { useRef, useState } from 'react'

const PADDING_HORIZONTAL = 15;
const TextInputCustom = ({ value, onChangeText = () => { }, placeholder, require = false }) => {
    const textInputRef = useRef(null);
    return (
        <View>
            <TextInput
                ref={textInputRef}
                style={{ marginHorizontal: PADDING_HORIZONTAL, backgroundColor: "#ebeef473", borderRadius: 7, minHeight: 44, marginTop: 19, paddingVertical: 7, paddingHorizontal: 14, borderColor: "#93acbd1c", borderWidth: 1, fontFamily: "Barlow-Regular", fontSize: 11 }}

                placeholderTextColor='#5883A6'
                autoCapitalize="characters"
                // placeholder={placeholder}
                value={value}
                onChangeText={(text) => {
                    onChangeText(text)
                }}
            />
            {value ? null :
                <TouchableOpacity activeOpacity={1} onPress={() => {
                    textInputRef?.current?.focus()
                }}
                    style={{ position: "absolute", top: 15, left: 15, zIndex: 1, flexDirection: "row" }}>
                    <Text style={{ marginVertical: 19, paddingLeft: 14, fontFamily: "Barlow-Regular", fontSize: 11, color: "#5883A6" }}
                    >{placeholder}</Text>
                    {require && (
                        <Text style={{ marginVertical: 19, fontFamily: "Barlow-Regular", fontSize: 11, color: "red", marginLeft: 3 }}
                        >*</Text>
                    )}
                </TouchableOpacity>
            }
        </View>
    )
}

export default TextInputCustom

call TextInputCustom

const [note, setNote] = useState(null);

return (

        <TextInputCustomDescription
             value={note}
             onChangeText={setNote}
             placeholder='Note'
             require
        />
)

How to add red asterisk in react native TextInput placeholder?

3 Answers3

Linked