React-native-paper: Stylization of TextInput

Created on 12 May 2020  路  1Comment  路  Source: callstack/react-native-paper

I can't change the color of the label, the characters inside the input, the borders. What procedure to style TextInput?

question

Most helpful comment

You can use the Theme property in the TextInput

Here I have changed the color to red

theme={{
  colors: {
    primary: "red",
  },
}}

Output
image

Full TextInput Code for Reference

<TextInput
  mode="outlined"
  label="Name*"
  value={this.state.name}
  theme={{
    colors: {
      primary: "red",
    },
  }}
  onChangeText={(name) => {
    this.setState({
      name,
    });
  }}
  style={styles.customStyles}
/>

>All comments

You can use the Theme property in the TextInput

Here I have changed the color to red

theme={{
  colors: {
    primary: "red",
  },
}}

Output
image

Full TextInput Code for Reference

<TextInput
  mode="outlined"
  label="Name*"
  value={this.state.name}
  theme={{
    colors: {
      primary: "red",
    },
  }}
  onChangeText={(name) => {
    this.setState({
      name,
    });
  }}
  style={styles.customStyles}
/>
Was this page helpful?
0 / 5 - 0 ratings

Related issues

timothystewart6 picture timothystewart6  路  4Comments

scottybo picture scottybo  路  3Comments

makhataibar picture makhataibar  路  4Comments

ZhengYuTay picture ZhengYuTay  路  3Comments

ferrannp picture ferrannp  路  4Comments