How to Change the Placeholder Text Color of TextInput Component in React Native

We use the TextInput component in almost all React Native applications. Because of that, we usually try to customize or stylize textinput to the maximum extent. In this blog post, I will tell you how to change the placeholder color in TextInput.

The TextInput comes with the placeholderTextColor property and you can change the color of placeholder text with it. See the code snippet given below.

<TextInput
        style={styles.input}
        placeholder="username"
        placeholderTextColor="red"
        onChangeText={onChangeText}
        value={text}
      />

You will get the following output.

Following is the complete code for reference.

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

const App = () => {
  const [text, onChangeText] = React.useState('');
  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        placeholder="username"
        placeholderTextColor="red"
        onChangeText={onChangeText}
        value={text}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  input: {
    height: 40,
    width: '80%',
    margin: 12,
    borderWidth: 1,
    padding: 10,
  },
});

export default App;

That’s how you change the placeholder text color of TextInput in react native.