[IS-2151] fixed FAB issue

src/components/FAB.js → src/components/FAB/FAB.js

@@ -1,25 +1,19 @@
 import React, {PureComponent} from 'react';
-import {Pressable, Animated, Easing} from 'react-native';
-import PropTypes from 'prop-types';
-import Icon from './Icon';
-import {Plus} from './Icon/Expensicons';
-import styles, {getAnimatedFABStyle} from '../styles/styles';
-import themeColors from '../styles/themes/default';
+import {
+    Pressable, Animated, Easing,
+} from 'react-native';
+import Icon from '../Icon';
+import {Plus} from '../Icon/Expensicons';
+import styles, {getAnimatedFABStyle} from '../../styles/styles';
+import themeColors from '../../styles/themes/default';
+import fabPropTypes from './fabPropTypes';
 
 const AnimatedIcon = Animated.createAnimatedComponent(Icon);
 AnimatedIcon.displayName = 'AnimatedIcon';
 
 const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
 AnimatedPressable.displayName = 'AnimatedPressable';
 
-const propTypes = {
-    // Callback to fire on request to toggle the FAB
-    onPress: PropTypes.func.isRequired,
-
-    // Current state (active or not active) of the component
-    isActive: PropTypes.bool.isRequired,
-};
-
 class FAB extends PureComponent {
     constructor(props) {
         super(props);
@@ -77,5 +71,5 @@ class FAB extends PureComponent {
     }
 }
 
-FAB.propTypes = propTypes;
+FAB.propTypes = fabPropTypes;
 export default FAB;

src/components/FAB/fabPropTypes.js

@@ -0,0 +1,11 @@
+import PropTypes from 'prop-types';
+
+const FabPropTypes = {
+    // Callback to fire on request to toggle the FAB
+    onPress: PropTypes.func.isRequired,
+
+    // Current state (active or not active) of the component
+    isActive: PropTypes.bool.isRequired,
+};
+
+export default FabPropTypes;

src/components/FAB/index.ios.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import {
+    KeyboardAvoidingView,
+} from 'react-native';
+
+import FAB from './FAB';
+import fabPropTypes from './fabPropTypes';
+
+// KeyboardAvoidingView only need in IOS so that's the reason make platform specific FAB component.
+function Fab({onPress, isActive}) {
+    return (
+        <KeyboardAvoidingView behavior="position">
+            <FAB onPress={onPress} isActive={isActive} />
+        </KeyboardAvoidingView>
+    );
+}
+
+Fab.propTypes = fabPropTypes;
+export default Fab;

src/components/FAB/index.js

@@ -0,0 +1,3 @@
+import FAB from './FAB';
+
+export default FAB;