I can not find the outline text color change option

[jaamaalxyz]

is there any way to change the outline color

The above screenshot I would like to change the Select Payment Type color to white

[srivastavaanurag79]

try this React Native Paper Text Input default props

there is an option to change outline color as mentioned in the reference table

underlineColor | string | underline color (if input mode is flat) | black | no -- | -- | -- | -- | -- activeUnderlineColor | string | active underline color (if input mode is flat) | black | no activeOutlineColor | string | active border color (if input mode is outlined) | black | no outlineColor | string | border color (if input mode is outlined) | black|no

[srivastavaanurag79]

@Thodor12 can you look into this one ?

[Thodor12]

@Thodor12 can you look into this one ?

I will a bit later when I'm done with work for the day, this doesn't look like a particularly difficult one

[Thodor12]

This is a bug with react native paper it's TextInput component, in testing I found that the outline colour does not affect the label text, it only works when the component is focused.

Please forward this issue to https://github.com/callstack/react-native-paper/issues

Min repro on react-native-paper 4.12.4 (latest)

import React from 'react';

import { StyleSheet, View } from 'react-native';
import { TextInput } from 'react-native-paper';

export default function App() {
  return (
    <View style={styles.container}>
      <TextInput
        label='test'
        defaultValue="hi"
        outlineColor='blue'
        activeOutlineColor='blue'
        mode='outlined'
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    height: "100%",
    padding: 16,
    backgroundColor: "red"
  },
});

Can be used for them.

[srivastavaanurag79]

This is a bug with react native paper it's TextInput component, in testing I found that the outline colour does not affect the label text, it only works when the component is focused.

Yes, that is what I found whatever colour one uses it only affects when it's focused.

[Thodor12]

Unfortunately I do not see a simple solution for this, I could overwrite the styles to force the label to show correctly, but that gives problems as I cannot detect if the input is "active" or not, so I could not change the styles based on that.

This would have to be fixed in react-native-paper first

[srivastavaanurag79]

@jaamaalxyz Please try this method. Please go through this method once.

<TextInput
    mode="outlined"
    label="Outlined input"
    placeholder="Type something"
    // it will change the color of the label, placeholder and inactive outline
    theme={{
      colors: {
        placeholder: 'white',
      },
    }}
    // it will change the inactive outline color
    outlineColor="green"
  />

[jaamaalxyz]

Yes, I have tested your given solutions and they work. thanks

[jaamaalxyz]