Sometimes, we want to change the styling of TextInput placeholder in React Native.

In this article, we’ll look at how to change the styling of TextInput placeholder in React Native.

How to change the styling of TextInput placeholder in React Native?

To change the styling of TextInput placeholder in React Native, we can set the placeholderTextColor prop.

For instance, we write:

import * as React from 'react';
import { Text, View, TextInput } from 'react-native';
import Constants from 'expo-constants';
import AssetExample from './components/AssetExample';
import { Card } from 'react-native-paper';
import { Icon } from 'react-native-elements';

export default function App() {
  return (
    <View style={{ flex: 1 }}>
      <TextInput placeholderTextColor="red" placeholder="Name" />
    </View>
  );
}

to set the placeholderTextColor to 'red' to set the placeholder color of the input to red.

Conclusion

To change the styling of TextInput placeholder in React Native, we can set the placeholderTextColor prop.