Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

How to Change the Background Color in TextInput React Native Paper

See original GitHub issue

Ask your Question

I have this code

<TextInput
                  style={{
                    borderRadius: 50,
                    padding:'offset'
                  }}
                  label='Password'
                  mode='outlined'
                  theme={{
                    roundness: 50,
                    colors: {
                      primary:'green',
                      underlineColor:'transparent',
                      
                    }
                  }}
                  underlineColorAndroid='transparent'
                  placeholder="password"
                  keyboardType='default'
                  autoCorrect='false'
                  autoCapitalize='none'
                  secureTextEntry='true'
                  onChangeText={formikProps.handleChange('password')}
                  onBlur={formikProps.handleBlur('password')}
                />

and I want to change the color or the textfield https://prnt.sc/o8gpc4

Issue Analytics

State:
Created 4 years ago
Comments:7 (3 by maintainers)

Top GitHub Comments

7reactions

pan-pawelcommented, Jun 30, 2019

Hello, @maheraldous Did you try to add background Color to your TextInput component style? <TextInput style={{ backgroundColor: 'yourColor' borderRadius: 50, padding:'offset' }}

6reactions

maheraldouscommented, Jun 30, 2019

Your code will work if the TextInput from react-native not from react-native-paper that’s why I am here. Because it you try your code with react-natove-paper the background color with get out of the outline and the border radius will create another circle border over the outline border.

Top Results From Across the Web

Change text color of TextInput in React Native Paper

Just add this line theme={{colors: {text: 'Your Color' }}} to the < ...

TextInput · React Native Paper

Callback that is called when the text input's text changes. Changed text is passed as an argument to the callback handler. selectionColor. Type:...

TextInput - React Native

The highlight and cursor color of the text input. Type, Required. color, No. selectTextOnFocus . If true , all text will ...

React-native-paper TextInput background color

PlaceHolder Text Color can be modified using placeholderTextColor = “” prop, This prop would allow us to set Change TextInput PlaceHolder Text Color...

Change text color of TextInput in React Native Paper - iTecNote

However I want to control text color through passed props from a parent component. Strangely, passing backgroundColor works but color does not. Removing...