React Native: Unable to change color of text within <TextInput> component

Question

I'm not sure why but when using the <TextInput> component I am unable to alter the color of the input text using the standard style={{color: '#HEX'}}.

Here is an example:

          <TextInput
            style={{
              backgroundColor: 'transparent',
              color: '#fff',
              borderBottomWidth: 0,
            }}
            keyboardAppearance={'dark'}
            keyboardType={'numeric'}
            selectionColor='#fff'
            underlineColor="rgba(0,0,0,0)"
            underlineColorAndroid="rgba(0,0,0,0)"

            placeholderTextColor="#fff"

          />

There is also a very annoying purple underline which I can not seem to get rid of. Is there some kind of special property I need to be using for this?

Marik Ishtar · Accepted Answer · 2020-06-30 22:24:37Z

1

For the text color try this theme={{ colors: { text: '#fff' } }}; and for the underline try autoCorrect={false}

code


<TextInput
   theme={{ colors: { text: '#fff' } }}
   autoCorrect={false}
  />

answered Jun 30, 2020 at 22:24

Marik Ishtar

3,0691 gold badge17 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

GrapeJam Over a year ago

You're a hero - the color change worked - unfortunately the autoCorrect={false} did not manage to fix the purple underline though

Marik Ishtar Over a year ago

check this answer might help: stackoverflow.com/questions/40478246/…

GrapeJam Over a year ago

Unfortunately not - it's an issue on iOS for me. I will give you the answer for fixing the text coloring though :) Thanks for your help

Collectives™ on Stack Overflow

React Native: Unable to change color of text within <TextInput> component

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related