fixed header not hiding on android on login screen when keyboard is active

This commit is contained in:
Sadaqat Ali 2022-07-23 22:19:09 +05:00
parent 9443000049
commit 0a064fc56b
3 changed files with 14 additions and 3 deletions

View File

@ -26,6 +26,7 @@ interface Props extends TextInputProps {
inputStyle:TextStyle; inputStyle:TextStyle;
isValid:boolean; isValid:boolean;
onChange?:(value:string)=>void; onChange?:(value:string)=>void;
handleFocus?:(value:boolean)=>void;
} }
const FormInputView = ({ const FormInputView = ({
@ -44,6 +45,7 @@ const FormInputView = ({
isValid, isValid,
value, value,
onBlur, onBlur,
handleFocus,
...props ...props
}:Props) => { }:Props) => {
const [_value, setValue] = useState(value || ''); const [_value, setValue] = useState(value || '');
@ -62,11 +64,16 @@ const FormInputView = ({
const _handleOnFocus = () => { const _handleOnFocus = () => {
setInputBorderColor('#357ce6'); setInputBorderColor('#357ce6');
if(handleFocus){
handleFocus(true);
}
}; };
const _handleOnBlur = () => { const _handleOnBlur = () => {
setInputBorderColor('#e7e7e7'); setInputBorderColor('#e7e7e7');
if(handleFocus){
handleFocus(false);
}
if (onBlur) { if (onBlur) {
onBlur(); onBlur();
} }

View File

@ -48,6 +48,7 @@ export default EStyleSheet.create({
flexDirection: 'row', flexDirection: 'row',
justifyContent: 'space-between', justifyContent: 'space-between',
backgroundColor: '$primaryBackgroundColor', backgroundColor: '$primaryBackgroundColor',
paddingVertical: 8,
}, },
logo: { logo: {
width: 32, width: 32,

View File

@ -62,6 +62,9 @@ class LoginScreen extends PureComponent {
this.setState({ isModalOpen: !isModalOpen }); this.setState({ isModalOpen: !isModalOpen });
}; };
_handleFormInputFocus = (isFocused) => {
this.setState({ keyboardIsOpen: isFocused });
};
render() { render() {
const { navigation, intl, handleOnPressLogin, handleSignUp, isLoading } = this.props; const { navigation, intl, handleOnPressLogin, handleSignUp, isLoading } = this.props;
const { username, isUsernameValid, keyboardIsOpen, password, isModalOpen } = this.state; const { username, isUsernameValid, keyboardIsOpen, password, isModalOpen } = this.state;
@ -102,8 +105,6 @@ class LoginScreen extends PureComponent {
style={styles.tabbarItem} style={styles.tabbarItem}
> >
<KeyboardAwareScrollView <KeyboardAwareScrollView
onKeyboardWillShow={() => this.setState({ keyboardIsOpen: true })}
onKeyboardWillHide={() => this.setState({ keyboardIsOpen: false })}
enableAutoAutomaticScroll={Platform.OS === 'ios'} enableAutoAutomaticScroll={Platform.OS === 'ios'}
contentContainerStyle={styles.formWrapper} contentContainerStyle={styles.formWrapper}
enableOnAndroid={true} enableOnAndroid={true}
@ -122,6 +123,7 @@ class LoginScreen extends PureComponent {
isFirstImage isFirstImage
value={username} value={username}
inputStyle={styles.input} inputStyle={styles.input}
handleFocus={this._handleFormInputFocus}
/> />
<FormInput <FormInput
rightIconName="lock" rightIconName="lock"
@ -136,6 +138,7 @@ class LoginScreen extends PureComponent {
type="password" type="password"
numberOfLines={1} numberOfLines={1}
inputStyle={styles.input} inputStyle={styles.input}
handleFocus={this._handleFormInputFocus}
/> />
<InformationArea <InformationArea
description={intl.formatMessage({ description={intl.formatMessage({