Question 88685 in React native Question posted in
The official React Native documentation can be found here.

Custom React Native text input with placeholder

I’m trying to style my TextInput placeholder with 2 colors so I’ve set it up in the following manner.

<TextInput
    { ...props }
    style={[styles.textBox]}
>
    {!value && required && 
        <Text style={{ color: placeholderTextColor }}>
            <Text style={{ color: 'red' }}>*</Text>
            {placeholderText}
        </Text>
    }
</TextInput>

This looks fine for the most part but there are a few issues.

The cursor is placed at the end of the placehoderText. And when I type something it is appended to the placeholderText.

How do I stop the Text element inside the TextInput from being an active entity?

Edit
The props being sent are

{
    placeholder={'Enter here'}
    placeholderTextColor={'gray'}
    autoCapitalize = 'sentences'
    value={firstName}
    maxLength= {15}
    required={true}
    returnKeyType="next"
    onSubmitEditing={() => this._next ('lastName')}
    onChangeText={(firstName) => updateFirstName ({ firstName }) }
}
Tags:

2

Answers


  1. 0

    Since I can’t comment, I’ll answer here instead!

    Please provide more informations what’s in {...props} inside the TextInput props. Make sure you didn’t give the value prop the value of placeholderText.

    Login or Signup to reply.
  2. 0

    The Text element that you have used inside the TextInput is not a placeholder. It is an actual text that is being rendered on top of the TextInput, which is why the cursor is appearing at the end of the placeholderText.

    Use the placeholder prop of the TextInput to set the placeholder text, and use the placeholderTextColor prop to set the color of the placeholder text. Then you can use the style prop to apply any additional styling

    Here’s an updated version of your code:

    <TextInput
{ ...props }
style={[styles.textBox]}
placeholderTextColor={placeholderTextColor}
placeholder={required ? * ${placeholderText} : placeholderText}
/>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search