Changing Text Input Placeholder Color in React Native

React Native provides default styling for placeholders, developers often need to customize these styles to align with their app’s design. In this article, we’ll explore how to change the text input placeholder color in React Native with examples.

Text Input Placeholder Color in React Native

Before customization, make sure you have a React Native development environment set up on your machine. If not, you can follow the official React Native documentation to install the necessary dependencies and set up a new project.

Below is a simple example of a text input component:

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

const CustomTextInput = () => {
const [text, setText] = useState('');

  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        placeholder="Enter text here"
        onChangeText={setText}
        value={text}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  input: {
    height: 40,
    width: 300,
    borderColor: 'gray',
    borderWidth: 1,
    paddingLeft: 10,
    borderRadius: 5,
  },
});

export default CustomTextInput;

This component renders a simple text input field with a placeholder and handles changes to its text value using the useState hook.

Customizing Placeholder Color:

To customize the placeholder color, we can use the placeholderTextColor prop available in the TextInput component. Here’s how you can modify the placeholder color – set the placeholder text color to blue:

<TextInput
  style={styles.input}
  placeholder= "Enter text here"
  placeholderTextColor= "blue" // Change placeholder color here
  onChangeText={setText}
  value={text}
/>

Full Code:

Let’s put everything together. Below is the updated CustomTextInput component with placeholder text color customization:

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

const CustomTextInput = () => {
const [text, setText] = useState('');

  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        placeholder="Enter text here"
        placeholderTextColor= "blue" // Change placeholder color here
        onChangeText={setText}
        value={text}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  input: {
    height: 40,
    width: 300,
    borderColor: 'gray',
    borderWidth: 1,
    paddingLeft: 10,
    borderRadius: 5,
  },
});

export default CustomTextInput;