@eohjsc/react-native-smart-city 0.7.45 → 0.7.47

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eohjsc/react-native-smart-city",
   "title": "React Native Smart Home",
-  "version": "0.7.45",
+  "version": "0.7.47",
   "description": "TODO",
   "main": "index.js",
   "files": [

package/src/commons/BottomButtonView/index.js

@@ -1,5 +1,6 @@
 import React, { memo, useState, useEffect } from 'react';
 import { StyleSheet, Animated, Easing, Platform } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { AccessibilityLabel } from '../../configs/Constants';
 import useKeyboardAnimated from '../../hooks/Explore/useKeyboardAnimated';
@@ -26,6 +27,7 @@ const BottomButtonView = memo(
     disableKeyBoardAnimated = false,
   }) => {
     const transY = useKeyboardAnimated();
+    const insets = useSafeAreaInsets();
     const [keyboardAnim] = useState(new Animated.Value(0));
 
     useEffect(() => {
@@ -46,6 +48,7 @@ const BottomButtonView = memo(
             : styleCustom.container,
           // eslint-disable-next-line react-native/no-inline-styles
           { bottom: disableKeyBoardAnimated ? 0.1 : keyboardAnim },
+          { paddingBottom: insets.bottom },
           rowButton && styleCustom.horizontalContainer,
           style,
         ]}

package/src/commons/SelectUnit/styles.js

@@ -9,6 +9,7 @@ const styles = StyleSheet.create({
   contentContainer: {
     flex: 1,
     justifyContent: 'space-between',
+    paddingBottom: 48,
   },
   scrollContainer: {
     width: '100%',

package/src/commons/ViewButtonBottom/index.js

@@ -6,6 +6,7 @@ import {
   Platform,
   Easing,
 } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { Colors } from '../../configs';
 import Text from '../../commons/Text';
@@ -35,6 +36,7 @@ const ViewButtonBottom = ({
 }) => {
   const useTwoButton = leftTitle && rightTitle;
   const transY = useKeyboardAnimated();
+  const insets = useSafeAreaInsets();
   const [keyboardAnim] = useState(new Animated.Value(0));
 
   const RightButtonView = useMemo(() => {
@@ -56,6 +58,7 @@ const ViewButtonBottom = ({
         styles.container,
         wrapStyle,
         !disableKeyBoardAnimated && { bottom: keyboardAnim },
+        { paddingBottom: insets.bottom },
       ]}
     >
       {leftTitle && (
@@ -113,9 +116,10 @@ const styles = StyleSheet.create({
     paddingHorizontal: 16,
     position: 'absolute',
     bottom: 0,
+    backgroundColor: Colors.White,
   },
   button: {
-    paddingVertical: 24,
+    height: 48,
     width: '100%',
     flex: 1,
     justifyContent: 'center',

package/src/screens/AddNewGateway/SelectDeviceType.js

@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { TouchableOpacity, View } from 'react-native';
+import { ScrollView, TouchableOpacity, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useNavigation } from '@react-navigation/native';
 
 import { useTranslations } from '../../hooks/Common/useTranslations';
@@ -81,6 +82,7 @@ const SelectDeviceType = ({ route }) => {
   const [addType, setAddType] = useState();
   const [selectedAddType, setSelectedAddType] = useState();
   const permissions = useBackendPermission();
+  const insets = useSafeAreaInsets();
 
   const listDeviceType = useMemo(() => {
     const list = [
@@ -221,9 +223,11 @@ const SelectDeviceType = ({ route }) => {
   return (
     <View style={styles.container}>
       <HeaderCustom title={t('choose_type_of_device')} isShowSeparator />
-      <View style={styles.contentContainer}>
+      <ScrollView
+        style={{ ...styles.contentContainer, marginBottom: insets.bottom + 48 }}
+      >
         <SelectDeviceGrid options={listDeviceType} onSelect={handleOnSelect} />
-      </View>
+      </ScrollView>
       <ViewButtonBottom
         leftTitle={t('cancel')}
         onLeftClick={goBack}

package/src/screens/AddNewGateway/SelectDeviceTypeStyles.js

@@ -9,9 +9,7 @@ export default StyleSheet.create({
     backgroundColor: Colors.White,
   },
   contentContainer: {
-    flex: 1,
-    justifyContent: 'space-between',
-    paddingVertical: 16,
+    paddingTop: 16,
   },
   gridContainer: {
     flexDirection: 'row',

package/src/screens/Sharing/Components/Styles/ShareDeviceSelectorStyles.js

@@ -13,6 +13,7 @@ export default StyleSheet.create({
   contentContainer: {
     flex: 1,
     justifyContent: 'space-between',
+    paddingBottom: 40,
   },
   title: {
     color: Colors.Gray9,
@@ -47,6 +48,6 @@ export default StyleSheet.create({
     fontSize: 14,
   },
   wrapViewButtonStyle: {
-    paddingTop: 70,
+    paddingTop: 42,
   },
 });