Weird UI behavior of Text Input with Dark Mode

[francesco-clementi-92]

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

[github-actions[bot]]

Hey! Thanks for opening the issue. The issue doesn't seem to contain a link to a repro (a snack.expo.dev link or link to a GitHub repo under your username).

Can you provide a minimal repro which demonstrates the issue? A repro will help us debug the issue faster. Please try to keep the repro as small as possible and make sure that we can run it without additional setup.

[github-actions[bot]]

Couldn't find version numbers for the following packages in the issue:

• react-native
• react-native-vector-icons
• npm
• yarn
• expo

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

[lukewalczak]

Hello @francesco-clementi-92 could you please try to reproduce it on expo snack?

[francesco-clementi-92]

Hi Luca,

Already tried on expo, but can't find a way to reproduce it. I'll try without it

Il lun 28 mar 2022, 19:48 Luke Walczak @.***> ha scritto:

Hello @francesco-clementi-92 https://github.com/francesco-clementi-92 could you please try to reproduce it on expo snack http://snack.expo.dev

— Reply to this email directly, view it on GitHub https://github.com/callstack/react-native-paper/issues/3122#issuecomment-1080960068, or unsubscribe https://github.com/notifications/unsubscribe-auth/AHHCV3SVRFA5XOK36CLL3JTVCHWGRANCNFSM5Q6AUXKQ . You are receiving this because you were mentioned.Message ID: @.***>

[celciusjj]

Same issue

[francesco-clementi-92]

@celciusjj did you find a way to replicate the issue?

[celciusjj]

@celciusjj did you find a way to replicate the issue?

The application is being tested on other cell phones from another country, and it is a darkmode error in the latest version of react native paper. but I myself could not replicate it on my cell phone.

What I did for now was remove the dark mode in my application

[raajnadar]

Share your theme object

[gsbelarus]

We have encountered the same problem.

[lukewalczak]

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

[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]

Please try to use that snack where you can switch between themes and add your specific code for reproducing the issue.

[sunnycreature]

When I use this snack, I get this result phone mode is dark:
phone mode is light:

[raajnadar]

@lukewalczak you can see this snack demo, the issue can be seen in RTL mode, https://snack.expo.dev/R4JM_Hf5v