UI get Rerender on keyboard dismiss and background color changes in Android on React native V 0.72.12

[Ashutosh26121999]

Description

Hello, I noticed a strange bug in the work TextInput field inside a ScrollView->KeybordAvoidView->TextInput.When we enter something in the input and close the keyboard using the enter button of the keyboard it re-renders the component. and without any background, it will set the gray color background of component.

Steps to reproduce

import { useRef, useState,} from 'react';
import { Text, View, ScrollView, KeyboardAvoidingView,TextInput } from 'react-native';
const CreateUserAccount = () => {
const firstName = useRef();
const lastName = useRef();
const [emailError, setEmailError] = useState(false);
const [firstNameError, setFirstNameError] = useState(false);
const [lastNameError, setLastNameError] = useState(false);
const [emailValue, setEmailValue] = useState('');
const [firstNameValue, setFirstNameValue] = useState('');
const [lastNameValue, setLastNameValue] = useState('');

const LoginDetailsComponent=(props)=>{
const { customStyleEmail, customStyleFirstName, customStyleLastName, ...otherProps } = props;

return (

{props.textValueEmail}

  <Text>{props.textValueFirstName}</Text>
  <TextInput
    placeholder={props.placeholderFirstName}
    placeholderTextColor={props.placeholderTextColorFirstName}
    ref={props.textInputRefFirstName}
    secureTextEntry={props.isSecureTextFirstName}
    keyboardType={props.keyBoardTypeFirstName}
    onSubmitEditing={props.submitEditingFirstName}
    returnKeyType={props.returnTypeFirstName}
    returnKeyLabel={props.returnLableFirstName}
    autoFocus={props.autoFocusValueFirstName}
    maxLength={props.maximumLengthFirstName}
    value={props.valueTextInputFirstName}
    onChangeText={props.onTextChangeFirstName}
    editable={props.isEditableFirstName}
    autoCapitalize={props.isAutoCapitalizeFirstName}
    blurOnSubmit={props.isBlurSubmitFirstName}
  />
  <Text>{props.textValueLastName}</Text>
  <TextInput
    placeholder={props.placeholderLastName}
    placeholderTextColor={props.placeholderTextColorLastName}
    ref={props.textInputRefLastName}
    secureTextEntry={props.isSecureTextLastName}
    keyboardType={props.keyBoardTypeLastName}
    onSubmitEditing={props.submitEditingLastName}
    returnKeyType={props.returnTypeLastName}
    returnKeyLabel={props.returnLableLastName}
    autoFocus={props.autoFocusValueLastName}
    maxLength={props.maximumLengthLastName}
    value={props.valueTextInputLastName}
    onChangeText={props.onTextChangeLastName}
    editable={props.isEditableLastName}
    autoCapitalize={props.isAutoCapitalizeLastName}
    blurOnSubmit={props.isBlurSubmitLastName}
  />
</View>

);
}

<ScrollView showsVerticalScrollIndicator={false} style={{backgroundColor:'red'}}>


<LoginDetailsComponent
textValueEmail={'email_address'}
placeholderEmail={'email_address'}
returnTypeEmail="next"
keyBoardTypeEmail="email-address"
submitEditingEmail={() => {
firstName.current.focus();
}}
isBlurSubmitEmail={false}
onTextChangeEmail={textemail => {
setEmailValue(textemail), setEmailError(false);
}}
valueTextInputEmail={emailValue ? emailValue : ''}
textValueFirstName={'first_name'}
placeholderFirstName={'first_name'}
textInputRefFirstName={firstName}
returnTypeFirstName="next"
submitEditingFirstName={() => {
lastName.current.focus();
}}
isBlurSubmitFirstName={false}
onTextChangeFirstName={textfirstName => {
setFirstNameValue(textfirstName), setFirstNameError(false);
}}
valueTextInputFirstName={firstNameValue ? firstNameValue : ''}
textValueLastName={'last_name'}
placeholderLastName={'last_name'}
textInputRefLastName={lastName}
returnTypeLastName="done"

      onTextChangeLastName={textlastname => {
        setLastNameValue(textlastname), setLastNameError(false);
      }}
      valueTextInputLastName={lastNameValue ? lastNameValue : ''}
    />
  </View>
    </KeyboardAvoidingView>

} export default CreateUserAccount;

React Native Version

0.72.12

Affected Platforms

Runtime - Android

Output of npx react-native info

System:
  OS: Windows 10 10.0.19045
  CPU: (8) x64 11th Gen Intel(R) Core(TM) i5-1135G7 @ 2.40GHz
  Memory: 2.82 GB / 15.74 GB
Binaries:
  Node:
    version: 20.11.1
    path: ~\AppData\Local\Temp\yarn--1714731090737-0.49295193624305766\node.CMD
  Yarn:
    version: 1.22.21
    path: ~\AppData\Local\Temp\yarn--1714731090737-0.49295193624305766\yarn.CMD
  npm:
    version: 10.2.4
    path: C:\Program Files\nodejs\npm.CMD
  Watchman:
    version: 20231008.002904.0
    path: C:\ProgramData\chocolatey\bin\watchman.EXE
SDKs:
  Android SDK:
    API Levels:
      - "29"
      - "31"
      - "33"
      - "34"
    Build Tools:
      - 30.0.3
      - 31.0.0
      - 33.0.0
      - 34.0.0
      - 35.0.0
      - 35.0.0
    System Images:
      - android-30 | Google Play Intel x86 Atom
      - android-30 | Google Play Intel x86_64 Atom
      - android-33 | Intel x86_64 Atom
      - android-33 | Google APIs Intel x86_64 Atom
      - android-33 | Google Play Intel x86_64 Atom
    Android NDK: Not Found
  Windows SDK: Not Found
IDEs:
  Android Studio: AI-232.10300.40.2321.11668458
  Visual Studio: Not Found
Languages:
  Java:
    version: 17.0.10
    path: C:\Program Files\Common Files\Oracle\Java\javapath\javac.EXE
  Ruby: Not Found
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.72.12
    wanted: 0.72.12
  react-native-windows: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

Stacktrace or Logs

No Logs

Reproducer

NA

Screenshots and Videos

Screen_recording_20240501_122505.mp4

[github-actions]

⚠️	Missing Reproducible Example
ℹ️	We could not detect a reproducible example in your issue report. Please provide either: If your bug is UI related: a Snack If your bug is build/update related: use our Reproducer Template. A reproducer needs to be in a GitHub repository under your username.

[github-actions]

⚠️

Newer Version of React Native is Available!

ℹ️

You are on a supported minor version, but it looks like there's a newer patch available - 0.72.14. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.

[Ashutosh26121999]

⚠️ Newer Version of React Native is Available!
ℹ️ You are on a supported minor version, but it looks like there's a newer patch available - 0.72.14. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.

I have tried with a new project also the same issue happened in the new project also.