How to Change the Background Color in TextInput React Native Paper

[maheraldous]

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

[pan-pawel]

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

[maheraldous]

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.

[jainkunal40]

Same question from me too

[lukewalczak]

We are supporting the TextInput only following the Material Design guidelines (your approach is a custom one).

[maheraldous]

Can't you update with a version to change it. I mean the background color is transparent by default so I can't use it like that so I started to use the default TextInput from the React Native Expo. I liked your job but I hope you can update it to open more options. :)

[NickFoden]

Old thread, but for anyone else landing here first before the docs, I think this question is answered by theming. Say you want all your text inputs to have a background color of white one way is to set the default theme background color. And pass into your provider at the root level.

import {DefaultTheme, Provider} from 'react-native-paper';

const theme = {
  ...DefaultTheme,
  colors: {
    ...DefaultTheme.colors,
    background: 'white',
  },
};

export default function Main() {
  return (
    <Provider theme={theme}>
       <App />
    </Provider

https://callstack.github.io/react-native-paper/1.0/theming.html

[maheraldous]

Thank you but I just moved on but it's good to mark it as an answer.

[WillSmithTE]

anyone finding this looking to change the flat TextInput background color, the property is surfaceVariant, from here

[awkward-minion]

Old thread, but for anyone else landing here first before the docs, I think this question is answered by theming. Say you want all your text inputs to have a background color of white one way is to set the default theme background color. And pass into your provider at the root level.

import {DefaultTheme, Provider} from 'react-native-paper';

const theme = {
  ...DefaultTheme,
  colors: {
    ...DefaultTheme.colors,
    background: 'white',
  },
};

export default function Main() {
  return (
    <Provider theme={theme}>
       <App />
    </Provider

https://callstack.github.io/react-native-paper/1.0/theming.html

This is broken in the current version

"react-native-paper": "^5.12.3",

[sekhuat]

Old thread, but for anyone else landing here first before the docs, I think this question is answered by theming. Say you want all your text inputs to have a background color of white one way is to set the default theme background color. And pass into your provider at the root level.

import {DefaultTheme, Provider} from 'react-native-paper';

const theme = {
  ...DefaultTheme,
  colors: {
    ...DefaultTheme.colors,
    background: 'white',
  },
};

export default function Main() {
  return (
    <Provider theme={theme}>
       <App />
    </Provider

https://callstack.github.io/react-native-paper/1.0/theming.html

This is broken in the current version

"react-native-paper": "^5.12.3",

Use the surfaceVariant instead for ver 5.12.3.

const theme = {
  ...DefaultTheme,
  colors: {
    ...DefaultTheme.colors,
    surfaceVariant: '#fff'
  },
};