UI get Rerender on keyboard dismiss and background color changes in Android on React native V 0.72.12 #44403
Labels
API: Keyboard
Needs: Attention
Issues where the author has responded to feedback.
Needs: Repro
This issue could be improved with a clear list of steps to reproduce the issue.
Needs: Triage 🔍
Newer Patch Available
Platform: Android
Android applications.
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}
);
}
<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"
React Native Version
0.72.12
Affected Platforms
Runtime - Android
Output of
npx react-native info
Stacktrace or Logs
Reproducer
NA
Screenshots and Videos
Screen_recording_20240501_122505.mp4
The text was updated successfully, but these errors were encountered: