Navigate back to the homepage

How to change textinput placeholder text color in react native?

Infinitbility
React Native
December 30th, 2021 · 1 min read
How to change textinput placeholder text color in react native?

Hello Friends 👋,

Welcome to Infinitbility.

React Native textinput provide placeholderTextColor props to change placeholder text color and other style will inherit props same like you do for input value for example fontSize, fontFamily, and others.

Now, we are going to change textinput placeholder text color with example of code.

First we will create sample Textinput component and will try to change placeholder color using placeholderTextColor.

1import React from "react";
2import { SafeAreaView, StyleSheet, TextInput } from "react-native";
3
4const UselessTextInput = () => {
5 const [number, onChangeNumber] = React.useState(null);
6
7 return (
8 <SafeAreaView>
9 <TextInput
10 style={styles.input}
11 onChangeText={onChangeNumber}
12 value={number}
13 placeholderTextColor={'#283'}
14 placeholder="Placeholder with green color"
15 keyboardType="numeric"
16 />
17 </SafeAreaView>
18 );
19};
20
21const styles = StyleSheet.create({
22 input: {
23 height: 40,
24 margin: 12,
25 borderWidth: 1,
26 padding: 10,
27 },
28});
29
30export default UselessTextInput;

Output

React native textinput placeholder text color example
React native textinput placeholder text color example

In above example, we are use hexadecimal code to change placeholder text color but you can also use others type like color names, rgb and others like below.

  1. colors name example

    1<TextInput
    2 ...
    3 placeholderTextColor={'black'}
    4 ...
    5/>
  2. RGB color example

    1<TextInput
    2 ...
    3 placeholderTextColor={'rgb(0, 103, 102)'}
    4 ...
    5/>
  3. Hexadecimal color example

    1<TextInput
    2 ...
    3 placeholderTextColor={'#845783'}
    4 ...
    5/>

Thanks for reading…

Follow me on Twitter

Join our email list and get notified about new content

No worries, I respect your privacy and I will never abuse your email.

Every week, on Tuesday, you will receive a list of free tutorials I made during the week (I write one every day) and news on other training products I create.

Looking For React Native Tutorial?

we are trying to create the best Tutorial for react native developers.

When you want a daily updates about React Native Tutorial or infinitbility update subscribe to our newsletter.

Read React Native Tutorial

Request New Tutorial or Article on mail [email protected]

Guide book

Guidebook: The Javascript Monorepo

Tutorials

Categories

More articles from Infinitbility

How to provide custom input value in autocomplete textfield in react material UI?

How to provide custom input value in autocomplete textfield in react material UI?

React Material UI ( MUI ), Provide custom input value in Autocomplete Textfield.

December 29th, 2021 · 1 min read
How to find the index of an object in an array in javascript?

How to find the index of an object in an array in javascript?

Javascript, find index of object in array example.

December 22nd, 2021 · 1 min read
© 2020–2022 Infinitbility
About
Link to $https://medium.com/infinitbilityLink to $https://www.facebook.com/InfinitbilityLink to $https://github.com/infinitbilityLink to $https://twitter.com/infinitbilityLink to $https://www.buymeacoffee.com/infinitbilityLink to $mailto:[email protected]