36

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?

4
  • 3
    Please provide some code to show what you tried so far. Check how to ask to learn how you can ask a good question. Check style prop for TextInput on how to customize your input.
    – bennygenel
    Sep 9, 2017 at 8:03
  • is your problem solved? Sep 9, 2017 at 10:04
  • 1
    Are you using native base? Sep 12, 2017 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 3, 2021 at 5:14

6 Answers 6

29

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

1
  • did you changed the theme colors? Sep 9, 2017 at 8:42
13

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' />
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}
      />
    );
  }
}
4

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>
}
1
  • I had to use linear gradient text component instead of simple text. this saved my day! Jun 13, 2022 at 0:47
3
//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",
  },
0
1

you can set the color props just like placeholderTextColor, though color is not a props displayed in documents, but it works in rn 0.61.5

<TextInput color='#FEFFFF' />

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.