react-native-paper: TextInput outlined mode: label has unknown shadow

Current behaviour

Please see attached:

screenshot 2018-11-15 at 7 01 25 pm

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)

Most upvoted comments

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.

2019-01-19 3 48 36

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.