Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to change the text color of text input in react native?

Tags:

The placeholder of the input is green but I want also make the green text input (when I am typing the text text color shows black which is not visible enough in my UI). How can I make it Green as well?

like image 438
Syuzanna Avatar asked Sep 09 '17 07:09

Syuzanna


People also ask

How do I change text input text color in React Native?

To change the text color of text input in React Native, we can set the color style to the text color. to set the color style to 'green' on the TextInput . Therefore, we see that the color of the text we typed into the TextInput is green.

How do you change the color of text input?

<input type="text" placeholder="A red placeholder text..">

How do I change text input placeholder color in React Native?

To change the styling of TextInput placeholder in React Native, we can set the placeholderTextColor prop. to set the placeholderTextColor to 'red' to set the placeholder color of the input to red.

How do I change text color in React?

Use inline styles to set the text color of an element in React. js, e.g. <span style={{color: 'green'}}>colorful</span> . The text color will only be applied to the element to which it was added and its children.


2 Answers

add color: 'green'; in your TextInput style will change the color

<TextInput style={styles.textInput} />  const styles = StyleSheet.create({  textInput: {   color: 'green',  }, });` 

in native-base you will need to take care also of theming see docs

like image 191
Mohamed Khalil Avatar answered Sep 17 '22 16:09

Mohamed Khalil


Simply create a style for your input and set color as green

const styles = StyleSheet.create({     textInputStyle: {     color: 'green',     } }); 

and assign it to your textInput

<TextInput      style={styles.textInputStyle}     placeholderTextColor='green'     underlineColorAndroid='green' /> 
like image 43
Zubair Akber Avatar answered Sep 21 '22 16:09

Zubair Akber