Weird UI behavior of Text Input with Dark Mode

francesco-clementi-92 commented 2 years ago

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] commented 2 years ago

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] commented 2 years ago

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 commented 2 years ago

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

francesco-clementi-92 commented 2 years ago

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 commented 2 years ago

Same issue

francesco-clementi-92 commented 2 years ago

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

celciusjj commented 2 years ago

@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

0F594A7D-7F45-41B7-A942-5D373D45B3C8