34

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?

Joe Lloyd
  • 19,471
  • 7
  • 53
  • 81
Syuzanna
  • 509
  • 2
  • 8
  • 14
  • 3
    Please provide some code to show what you tried so far. Check [how to ask](https://stackoverflow.com/help/how-to-ask) to learn how you can ask a good question. Check [style prop](https://facebook.github.io/react-native/docs/textinput.html#style) for `TextInput` on how to customize your input. – bennygenel Sep 09 '17 at 08:03
  • is your problem solved? – Vahid Boreiri Sep 09 '17 at 10:04
  • 1
    Are you using native base? – Wanda Ichsanul Isra Sep 12 '17 at 17:35
  • Just in case if anyone trying to change the colour of the placeholder. To change color of the placeholder adds props called placeholderTextColor = "grey". – sophin May 03 '21 at 05:14

5 Answers5

28

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

Mohamed Khalil
  • 3,036
  • 1
  • 20
  • 26
12

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' />
Zubair Akber
  • 2,760
  • 13
  • 30
6

If you want to change the TextInput colour add a color in styles.

below is the example give you the TextInput color as blue:

export default class UselessTextInput extends Component {
  constructor(props) {
    super(props);
    this.state = { text: 'Useless Placeholder' };
  }

  render() {
    return (
      <TextInput
        style=
        {{
          height: 40, borderColor: 'gray', borderWidth: 1, color : "blue"
        }}
        onChangeText={(text) => this.setState({text})}
        value={this.state.text}
      />
    );
  }
}
bashIt
  • 1,006
  • 1
  • 10
  • 26
3

after trying many different solutions, I implemented a custom TextInput component where I placed a Text component that changes the color as a background and a TextInput over it that has a transparent font color. I hope this issue can be fixed soon in a better way.

updateText(v) {
  const { onChange } = this.props;
  this.setState({ text: v});
  onChange(v);
}
render() {
  const { changeColor } = this.props;
  const { text } = this.state;
  return  <View style={{ position: 'relative', flex: 1 }}>
            <Text style={ [ { flex: 1, position: 'absolute', zIndex: 1 }, changeColor? { color: red } : null ]}>
              {text}
            </Text>
            <RTextInput
              onChangeText={v => this.updateText(v)}
              style={[{ flex: 1, color: 'transparent', zIndex: 100 }]}
              {...props}
            />
          </View>
}
David Barinas
  • 31
  • 1
2
//Here is my input text 

<TextInput
            style={styles.txtinp1}
            placeholder="Password"
            placeholderTextColor={"grey"}
          />

// here are my styles you just need to add color in styles 


txtinp1: {
    backgroundColor: "#000000",
    height: "15%",
    width: "90%",
    marginBottom: 10,
    borderRadius: 25,
    paddingLeft: 20,
    color: "grey",
  },
MST intern2
  • 21
  • 3