Migrate FloatingButton to use new ScreenFooter component internally

demo/src/screens/componentScreens/FloatingButtonScreen.tsx

@@ -1,14 +1,15 @@
 import React, {Component} from 'react';
 import {View, StyleSheet, Alert, ScrollView} from 'react-native';
-import {Colors, Text, FloatingButton, FloatingButtonLayouts, Keyboard} from 'react-native-ui-lib';
+import {SafeAreaProvider} from 'react-native-safe-area-context';
+import {Colors, Text, TextField, FloatingButton, FloatingButtonLayouts} from 'react-native-ui-lib';
 import {renderBooleanOption} from '../ExampleScreenPresenter';
 
 interface State {
   showButton: boolean;
   showPrimary: boolean;
   showSecondary: boolean;
   showVertical: boolean;
-  withTrackingView: boolean;
+  hoisted: boolean;
 }
 
 export default class FloatingButtonScreen extends Component<{}, State> {
@@ -18,7 +19,7 @@ export default class FloatingButtonScreen extends Component<{}, State> {
     showSecondary: true,
     showVertical: true,
     fullWidth: false,
-    withTrackingView: false
+    hoisted: true
   };
 
   notNow = () => {
@@ -32,72 +33,64 @@ export default class FloatingButtonScreen extends Component<{}, State> {
   };
 
   render() {
-    const {showSecondary, showVertical, withTrackingView} = this.state;
-    const Container = withTrackingView ? Keyboard.KeyboardTrackingView : React.Fragment;
+    const {showSecondary, showVertical, hoisted} = this.state;
     return (
-      <View style={styles.container}>
-        <Text text60 center $textDefault marginB-s4>
-          Trigger Floating Button
-        </Text>
-        {renderBooleanOption.call(this, 'Show Floating Button', 'showButton')}
-        {renderBooleanOption.call(this, 'Full Width Button', 'fullWidth')}
-        {renderBooleanOption.call(this, 'Show Primary Button', 'showPrimary')}
-        {renderBooleanOption.call(this, 'Show Secondary Button', 'showSecondary')}
-        {renderBooleanOption.call(this, 'Button Layout Vertical', 'showVertical')}
-        {renderBooleanOption.call(this, 'With tracking view', 'withTrackingView')}
-
-        <ScrollView showsVerticalScrollIndicator={false}>
-          <View paddingT-20>
-            <Text text70 $textDefault style={{fontWeight: 'bold'}}>
-              Scroll behind a FloatingButton
-            </Text>
-            <Text text80 $textDefault marginT-10 style={{lineHeight: 24}}>
-              Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
-              industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
-              scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into
-              electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release
-              of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software
-              like Aldus PageMaker including versions of Lorem Ipsum. Contrary to popular belief, Lorem Ipsum is not
-              simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000
-              years old. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
-              the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
-              scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into
-              electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release
-              of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software
-              like Aldus PageMaker including versions of Lorem Ipsum. Contrary to popular belief, Lorem Ipsum is not
-              simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000
-              years old.
+      <SafeAreaProvider>
+        <View style={styles.container}>
+            <Text text60 center $textDefault marginB-s4>
+              Trigger Floating Button
             </Text>
-          </View>
-        </ScrollView>
+            {renderBooleanOption.call(this, 'Show Floating Button', 'showButton')}
+            {renderBooleanOption.call(this, 'Full Width Button', 'fullWidth')}
+            {renderBooleanOption.call(this, 'Show Primary Button', 'showPrimary')}
+            {renderBooleanOption.call(this, 'Show Secondary Button', 'showSecondary')}
+            {renderBooleanOption.call(this, 'Button Layout Vertical', 'showVertical')}
+            {renderBooleanOption.call(this, 'Hoisted (keyboard-aware)', 'hoisted')}
+
+            <TextField migrate placeholder="Tap to test keyboard hoisting" marginB-s4/>
+
+            <ScrollView showsVerticalScrollIndicator={false} keyboardDismissMode="on-drag" keyboardShouldPersistTaps="handled">
+              <View paddingT-20>
+                <Text text70 $textDefault style={{fontWeight: 'bold'}}>
+                  Scroll behind a FloatingButton
+                </Text>
+                <Text text80 $textDefault marginT-10 style={{lineHeight: 24}}>
+                  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
+                  industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
+                  scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap
+                  into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the
+                  release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
+                  software like Aldus PageMaker including versions of Lorem Ipsum. Contrary to popular belief, Lorem
+                  Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC,
+                  making it over 2000 years old.
+                </Text>
+              </View>
+            </ScrollView>
 
-        <Container>
-          <FloatingButton
-            visible={this.state.showButton}
-            fullWidth={this.state.fullWidth}
-            button={
-              this.state.showPrimary
-                ? {
-                  label: 'Approve',
-                  onPress: this.close
-                }
-                : undefined
-            }
-            secondaryButton={
-              showSecondary
-                ? {
-                  label: 'Not now',
-                  onPress: this.notNow
-                }
-                : undefined
-            }
-            buttonLayout={showVertical ? FloatingButtonLayouts.VERTICAL : FloatingButtonLayouts.HORIZONTAL}
-            // bottomMargin={80}
-            // hideBackgroundOverlay
-            // withoutAnimation
-          />
-        </Container>
-      </View>
+            <FloatingButton
+              visible={this.state.showButton}
+              fullWidth={this.state.fullWidth}
+              button={
+                this.state.showPrimary
+                  ? {
+                    label: 'Approve',
+                    onPress: this.close
+                  }
+                  : undefined
+              }
+              secondaryButton={
+                showSecondary
+                  ? {
+                    label: 'Not now',
+                    onPress: this.notNow
+                  }
+                  : undefined
+              }
+              buttonLayout={showVertical ? FloatingButtonLayouts.VERTICAL : FloatingButtonLayouts.HORIZONTAL}
+              hoisted={hoisted}
+            />
+        </View>
+      </SafeAreaProvider>
     );
   }
 }