React Native Paper 文本输入更改颜色

Question

This is my React Native code using React Native Paper to generate a text input.

import * as React from 'react';
import { TextInput } from 'react-native-paper';

class MyComponent extends React.Component {
  state = {
    text: ''
  };

  render(){
    return (
      <TextInput
        label='Email'
        value={this.state.text}
        onChangeText={text => this.setState({ text })}
      />
    );
  }
}

It will generate the following text input :

How can I change the text color of "Input label" from blue to red ?

this is the official documentation : https://callstack.github.io/react-native-paper/1.0/text-input.html but can't seem to find a way to change the color from blue to red.

Answer 1

According to their documentation, you have to change the Theme . If you want to replace the blue everywhere you can change the primary color here:

const theme = {
  ...DefaultTheme,
  roundness: 2,
  colors: {
    ...DefaultTheme.colors,
    primary: '#ff0000',
  },
};

You should also be able to modify the color of your input only with:

<TextInput theme={{ colors: { primary: #ff0000 } }}/>

Answer 2

i have this theme, but it does not change the color of the inputs

export const theme = {
  ...DefaultTheme,
  colors: {
    ...DefaultTheme.colors,
    text: '#000000',
    primary: '#1cb0f6',
    secondary: '#e5e5e5',
    error: '#f13a59',
  },
}

you can change like this:

 <Input
    style={styles.input}
    selectionColor={theme.colors.primary}
    underlineColor="transparent"
    mode="outlined"
    theme={{ colors: { primary: theme.colors.primary } }}
    {...props}
  />