Categories
JavaScript Answers React Native Answers

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

Spread the love

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.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *