Weird UI behavior of Text Input with Dark Mode

Current behaviour

With Dark Mode on, some Text Input outlined are ok, others with same code have a white line on the label.

The code is the same for “Nome Garage*” and “Email”:

<TextInput
              label="Nome Garage*"
              mode={'outlined'}
              value={garageDoc.name}
              onChangeText={text => setGarageDoc({...garageDoc, name: text})}
/>

<TextInput
              label="Email"
              value={garageDoc.email}
              mode={'outlined'}
              onChangeText={text => setGarageDoc({ ...garageDoc, email: text })} 
/>

The started value is undefined for both, I tried to change the order, modify the style, change the label name with so many tries and I still can’t understand what is causing this behaviour.

This behaviour is shared in all part of my application where there is a Text Input oulined.

Expected behaviour

I’d expect to not have a white line on Text Input label outlined in dark mode.

Code sample

<SafeAreaView>
      <ScrollView
        contentInsetAdjustmentBehavior="automatic"
        nestedScrollEnabled
        keyboardShouldPersistTaps={'handled'}>
        <Card>
          <Card.Content>
          <TextInput
              label="Nome Garage*"
              mode={'outlined'}
              value={garageDoc.name}
              onChangeText={text => setGarageDoc({...garageDoc, name: text})}
          />
          <TextInput
              label="Email"
              value={garageDoc.email}
              mode={'outlined'}
              onChangeText={text => setGarageDoc({ ...garageDoc, email: text })} 
           />
          </Card.Content>
       </Card>
     </ScrollView>
</SafeAreaView>

What have you tried

This behaviour is all

Your Environment

software	version
ios or android	android
react-native	0…67.3
react-native-paper	4.11.2
node	14.x
npm or yarn	yarn
expo sdk	no

[sunnycreature]

@gsbelarus could you please try to reproduce it on the expo snack?

this is on behalf of @gsbelarus. we can’t reproduce as the dark mode couldn’t be set for the screen in question within expo snack.

But we observe that this bug is present only for short labels. When label has 10-12 characters or longer everything works fine.

BTW, could it be because of this style:

https://github.com/callstack/react-native-paper/blob/62996571bd2fa7c850f5e70ab8cfd79c6e02bf1d/src/components/TextInput/Label/LabelBackground.tsx#L91

[lukewalczak]

@gsbelarus could you please try to reproduce it on the expo snack?