update Strides-APP/index.js

Strides-APP/index.js

@@ -4,7 +4,7 @@
  */
 import React, { Component } from 'react';
 import './app/i18n'
-import {AppRegistry} from 'react-native';
+import {AppRegistry, View} from 'react-native';
 import 'react-native-gesture-handler';
 import './app/utils/themes'
 import './app/utils/constant';
@@ -14,7 +14,7 @@ import Router from './app/pages/Router';
 import app from './app.json';
 import ModalPortal from './app/components/ModalPortal';
 import {RootSiblingParent} from 'react-native-root-siblings';
-import { SafeAreaView } from 'react-native-safe-area-context';
+import { SafeAreaInsetsContext, SafeAreaProvider } from 'react-native-safe-area-context';
 import MyStatusBar from './app/components/MyStatusBar';
 import { i18nUtil } from './app/i18n';
 import RouterV2 from './app/pages/RouterV2';
@@ -24,7 +24,8 @@ class Index extends Component {
     super(props);
     this.state = {
       visible: false,
-      refreshTime: 0
+      refreshTime: 0,
+      navBottom: undefined
     }
   }
 
@@ -36,19 +37,39 @@ class Index extends Component {
     })
   }
 
+  init(insets) {
+    console.log("insets" + this.state.navBottom, insets)
+    if (this.state.navBottom == undefined) {
+      if (insets.top) {
+        global.statusHeight = insets.top
+      }
+      if (insets.bottom != undefined) {
+        global.navbarHeight = insets.bottom
+        this.setState({
+          navBottom: insets.bottom
+        })
+      }
+    }
+  }
+
   render() {
     return (
-      <RootSiblingParent>
-        <MyStatusBar/>
-        { this.state.visible 
-          ? (app.isLumiWhitelabel ? <RouterV2/> : <Router/>)
-          : <></>
-        }
-        <ModalPortal />
-        { isIOS && (
-          <SafeAreaView style={{flex: 0, backgroundColor: colorLight}}></SafeAreaView>)
-        }
-      </RootSiblingParent>
+      <SafeAreaProvider>
+        <RootSiblingParent>
+          <MyStatusBar/>
+          { this.state.visible 
+            ? (app.isLumiWhitelabel ? <RouterV2/> : <Router/>)
+            : <></>
+          }
+          <ModalPortal/>
+          { this.state.navBottom != undefined
+          ? <View style={{height: this.state.navBottom, backgroundColor: colorAccent}}></View>
+          : <SafeAreaInsetsContext.Consumer>
+              {insets => this.init(insets)}
+            </SafeAreaInsetsContext.Consumer>
+          }
+        </RootSiblingParent>
+      </SafeAreaProvider>
     );
   }
 };