Merge branch 'master' into release

Author: adids1221

demo/src/optionalDependencies/SafeAreaContextPackage.tsx

@@ -0,0 +1,6 @@
+let SafeAreaContextPackage;
+try {
+  SafeAreaContextPackage = require('react-native-safe-area-context');
+} catch {}
+
+export default SafeAreaContextPackage;

demo/src/optionalDependencies/index.ts

@@ -0,0 +1 @@
+export {default as SafeAreaContextPackage} from './SafeAreaContextPackage';

demo/src/screens/MenuStructure.js

@@ -83,6 +83,7 @@ export const navigationData = {
       {title: 'Dialog', tags: 'dialog modal popup alert', screen: 'unicorn.components.DialogScreen'},
       {title: 'Feature Highlight', tags: 'native feature overlay', screen: 'unicorn.components.FeatureHighlightScreen'},
       {title: 'Floating Button', tags: 'floating button', screen: 'unicorn.components.FloatingButtonScreen'},
+      {title: 'Screen Footer', tags: 'screen footer sticky bottom', screen: 'unicorn.components.ScreenFooterScreen'},
       {title: 'Hint', tags: 'hints tooltip', screen: 'unicorn.components.HintsScreen'},
       {title: 'Toast', tags: 'toast top bottom snackbar', screen: 'unicorn.components.ToastsScreen'}
     ]

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,68 @@ 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')}
+      <SafeAreaProvider>
+        <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, 'Hoisted (keyboard-aware)', 'hoisted')}
 
-        <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.
-            </Text>
-          </View>
-        </ScrollView>
+          <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
-                }
+                    label: 'Approve',
+                    onPress: this.close
+                  }
                 : undefined
             }
             secondaryButton={
               showSecondary
                 ? {
-                  label: 'Not now',
-                  onPress: this.notNow
-                }
+                    label: 'Not now',
+                    onPress: this.notNow
+                  }
                 : undefined
             }
             buttonLayout={showVertical ? FloatingButtonLayouts.VERTICAL : FloatingButtonLayouts.HORIZONTAL}
-            // bottomMargin={80}
-            // hideBackgroundOverlay
-            // withoutAnimation
+            hoisted={hoisted}
           />
-        </Container>
-      </View>
+        </View>
+      </SafeAreaProvider>
     );
   }
 }