Merge pull request #2395 from ecency/sa/login-screen-flicker-bug

Bug Fixed: screen flickering in login screen

src/components/formInput/view/formInputView.tsx

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

src/components/loginHeader/view/loginHeaderView.js

@@ -1,5 +1,6 @@
 import React, { PureComponent } from 'react';
 import { View, Text, Image, SafeAreaView } from 'react-native';
+import * as Animatable from 'react-native-animatable';
 // Constants
 
 // Components
@@ -7,6 +8,7 @@ import { TextButton } from '../../buttons';
 import { LineBreak } from '../../basicUIElements';
 // Styles
 import styles from './loginHeaderStyles';
+import getWindowDimensions from '../../../utils/getWindowDimensions';
 
 class LoginHeaderView extends PureComponent {
   /* Props
@@ -43,7 +45,10 @@ class LoginHeaderView extends PureComponent {
               />
             </View>
           </View>
-          {!isKeyboardOpen && (
+          <Animatable.View
+            animation={isKeyboardOpen ? hideAnimation : showAnimation}
+            duration={300}
+          >
             <View style={styles.body}>
               <View style={styles.titleText}>
                 <Text style={styles.title}>{title}</Text>
@@ -51,7 +56,7 @@ class LoginHeaderView extends PureComponent {
               </View>
               <Image style={styles.mascot} source={require('../../../assets/love_mascot.png')} />
             </View>
-          )}
+          </Animatable.View>
           <LineBreak />
         </View>
       </SafeAreaView>
@@ -60,3 +65,27 @@ class LoginHeaderView extends PureComponent {
 }
 
 export default LoginHeaderView;
+
+const { height } = getWindowDimensions();
+const bodyHeight = height / 3.9;
+const showAnimation = {
+  from: {
+    opacity: 0,
+    height: 0,
+  },
+  to: {
+    opacity: 1,
+    height: bodyHeight,
+  },
+};
+
+const hideAnimation = {
+  from: {
+    opacity: 1,
+    height: bodyHeight,
+  },
+  to: {
+    opacity: 0,
+    height: 0,
+  },
+};

src/screens/login/screen/loginScreen.js

@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react';
-import { View, StatusBar, Platform } from 'react-native';
+import { View, StatusBar, Platform, Keyboard } from 'react-native';
 import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
 import ScrollableTabView from 'react-native-scrollable-tab-view';
 import { injectIntl } from 'react-intl';
@@ -41,6 +41,11 @@ class LoginScreen extends PureComponent {
     };
   }
 
+  componentWillUnmount() {
+    this.keyboardDidShowListener.remove();
+    this.keyboardDidHideListener.remove();
+  }
+
   _handleOnPasswordChange = (value) => {
     this.setState({ password: value });
   };
@@ -62,13 +67,20 @@ class LoginScreen extends PureComponent {
     this.setState({ isModalOpen: !isModalOpen });
   };
 
-  _handleFormInputFocus = (isFocused) => {
-    this.setState({ keyboardIsOpen: isFocused });
-  };
+  UNSAFE_componentWillMount() {
+    this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', () =>
+      this.setState({ keyboardIsOpen: true }),
+    );
+    this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', () =>
+      this.setState({ keyboardIsOpen: false }),
+    );
+  }
+
   render() {
     const { navigation, intl, handleOnPressLogin, handleSignUp, isLoading } = this.props;
     const { username, isUsernameValid, keyboardIsOpen, password, isModalOpen } = this.state;
 
+    console.log('keyboardIsOpen : ', keyboardIsOpen);
     return (
       <View style={styles.container}>
         <StatusBar hidden translucent />
@@ -123,7 +135,6 @@ class LoginScreen extends PureComponent {
                 isFirstImage
                 value={username}
                 inputStyle={styles.input}
-                handleFocus={this._handleFormInputFocus}
               />
               <FormInput
                 rightIconName="lock"
@@ -138,7 +149,6 @@ class LoginScreen extends PureComponent {
                 type="password"
                 numberOfLines={1}
                 inputStyle={styles.input}
-                handleFocus={this._handleFormInputFocus}
               />
               <InformationArea
                 description={intl.formatMessage({

src/screens/login/screen/loginStyles.js

@@ -27,9 +27,9 @@ export default EStyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
     alignSelf: 'flex-end',
-    marginRight: 10,
-    bottom: 24,
-    right: 24,
+    paddingRight: 24,
+    paddingBottom: 24,
+    backgroundColor: '$primaryBackgroundColor',
   },
   cancelButton: {
     marginRight: 10,