react-native-paper: TextInput outlined mode: label has unknown shadow
Current behaviour
Please see attached:
Expected behaviour
There should not be any weird shadow.
Code sample
Here’s what I’m using to render this input field:
<TextInput
label='Name'
testID="input"
mode="outlined"
theme={{ colors: { placeholder: 'grey', background: '#f5f6f5', text: 'grey', primary: '#5d5d5d' }}}
style={styles.input}
value={ this.state.name === undefined ? name : this.state.name }
onChangeText={name => this.setState({ name })}
/>
and here’s the parent config:
const theme = {
...DefaultTheme,
colors: {
...DefaultTheme.colors,
text: '#565656',
disabled: '#ffffff',
primary: '#3f51b5'
},
fonts: {
regular: "AirbnbCereal"+fontSuffix+"-Book",
medium: "AirbnbCereal"+fontSuffix+"-Medium",
bold: "AirbnbCereal"+fontSuffix+"-Bold"
}
}
Screenshots (if applicable)
What have you tried
Your Environment
software | version |
---|---|
ios or android | android |
react-native | 0.57.3 |
react-native-paper | 2.2.4 |
node | 8.9 |
npm or yarn | yarn |
About this issue
- Original URL
- State: closed
- Created 6 years ago
- Reactions: 5
- Comments: 23 (2 by maintainers)
This is happening because there are TWO labels on top of each other. One of them has color of background.
But it doesn’t work on android because even if your background is white and color text is white, you will still see the text.
The second label is used to “cut” the border. I recommend to calculate the width of background from label, not just insert it with background color.