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

[dakzh]

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.

[jbinda]

In 3.0 branch (current master) it should not be a problem anymore.