How to change placeholder color in react native?

Hi Friends 👋,

Welcome To aGuideHub!

To change the placeholder text color of TextInput in react native, you can use the placeholderTextColor attribute in the TextInput component it will change the placeholder color based on the placeholderTextColor attribute value.

See a short example of the placeholderTextColor attribute to change placeholder text color.

<TextInput
  style={styles.input}
  onChangeText={onChangeText}
  placeholder="Placeholder Color"
  placeholderTextColor="#483"
  value={text}
/>

Pro Tip: in the placeholderTextColor attribute you can pass color value in hex decimal, RGB, rgba, hsl, and hwb. For more check out React Native Color Reference.

In this article, you will get a complete example change react native text input placeholder text color using the placeholderTextColor attribute.

Let’s start today’s tutorial Example of change placeholder color of react native textinput

In the below example, I used TextInput from react-native and provided two examples of text input with different placeholder colors.

import React from 'react';
import {SafeAreaView, StyleSheet, TextInput} from 'react-native';

const TextInputExample = () => {
  const [text, onChangeText] = React.useState('');
  const [number, onChangeNumber] = React.useState('');

  return (
    <SafeAreaView>
      <TextInput
        style={styles.input}
        onChangeText={onChangeText}
        placeholder="Placeholder Color"
        placeholderTextColor="#483"
        value={text}
      />
      <TextInput
        style={styles.input}
        onChangeText={onChangeNumber}
        value={number}
        placeholder="Placeholder Color"
        placeholderTextColor="#845"
        keyboardType="numeric"
      />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  input: {
    height: 40,
    margin: 12,
    borderWidth: 1,
    padding: 10,
  },
});

export default TextInputExample;

Here, we are provided code expo links for the above program change placeholder color of textinput. Then you can use it whenever you want and make the changes per your requirements.

You can also use the below link to check the output of the above program.

Try it Yourself

All the best 👍