Merge pull request #2934 from ecency/nt/padding-tweaks

Nt/padding tweaks

package.json

@@ -148,7 +148,7 @@
     "react-native-receive-sharing-intent": "^2.0.0",
     "react-native-render-html": "^6.0.5",
     "react-native-restart": "^0.0.24",
-    "react-native-safe-area-context": "^4.7.4",
+    "react-native-safe-area-context": "^4.11.1",
     "react-native-screens": "3.27.0",
     "react-native-select-dropdown": "^3.4.0",
     "react-native-slider": "^0.11.0",

src/components/bottomTabBar/view/bottomTabBarView.tsx

@@ -9,6 +9,7 @@ import { useDispatch } from 'react-redux';
 import { BottomTabBarProps } from '@react-navigation/bottom-tabs';
 import { useIntl } from 'react-intl';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { isIphoneX } from 'react-native-iphone-x-helper';
 import ROUTES from '../../../constants/routeNames';
 
 // Styles
@@ -92,7 +93,9 @@ const BottomTabBarView = ({
     );
   });
 
-  return <View style={{ ...styles.wrapper, paddingBottom: insets.bottom }}>{_tabButtons}</View>;
+  const _bottomPadding = insets.bottom + (isIphoneX() ? 0 : 12);
+
+  return <View style={{ ...styles.wrapper, paddingBottom: _bottomPadding }}>{_tabButtons}</View>;
 };
 
 export default BottomTabBarView;

src/components/header/view/headerStyles.ts

@@ -1,13 +1,12 @@
 import EStyleSheet from 'react-native-extended-stylesheet';
-import { Platform } from 'react-native';
 
 export default EStyleSheet.create({
   container: {
     flexDirection: 'row',
     width: '100%',
     backgroundColor: '$primaryBackgroundColor',
-    flex: 1,
-    maxHeight: Platform.OS === 'ios' ? 105 : 80,
+    paddingTop: 8,
+    paddingBottom: 12,
   },
   containerReverse: {
     justifyContent: 'space-between',

src/components/header/view/headerView.tsx

@@ -1,10 +1,11 @@
 import React, { useState } from 'react';
-import { View, Text, SafeAreaView, TouchableOpacity } from 'react-native';
+import { View, Text, TouchableOpacity } from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
 import { useIntl } from 'react-intl';
 
 // Components
 import { useNavigation } from '@react-navigation/native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 import { SearchModal } from '../../searchModal';
 import { IconButton } from '../../iconButton';
 import { UserAvatar } from '../../userAvatar';
@@ -134,7 +135,7 @@ const HeaderView = ({
   );
 
   return (
-    <SafeAreaView style={[styles.container, isReverse && styles.containerReverse]}>
+    <SafeAreaView edges={['top']} style={[styles.container, isReverse && styles.containerReverse]}>
       {!hideUser && (
         <>
           <SearchModal

yarn.lock

@@ -11588,10 +11588,10 @@ react-native-restart@^0.0.24:
   resolved "https://registry.yarnpkg.com/react-native-restart/-/react-native-restart-0.0.24.tgz#c7036f25d900d9221b84d3e5129b02d4289d4e94"
   integrity sha512-pvJNU3NwQk6bCG2gOWcQpZ4IxhtELB0K9gzmtixfsaTFbW1UXXHkJNjk1kHazcbH5hrD7QbUkR63fsAVh8X4VQ==
 
-react-native-safe-area-context@^4.7.4:
-  version "4.8.0"
-  resolved "https://registry.yarnpkg.com/react-native-safe-area-context/-/react-native-safe-area-context-4.8.0.tgz#9fce29095b11deeead8da0abce32ee729fb3eb41"
-  integrity sha512-UTmn0jvikcA8LeCQuEV4/bQ1ZLODSaaEXKSK3wUskNwmtIgHFzT3lLXOBucFnyDYIxviJSWJeVc77eeBXc0UCA==
+react-native-safe-area-context@^4.11.1:
+  version "4.11.1"
+  resolved "https://registry.yarnpkg.com/react-native-safe-area-context/-/react-native-safe-area-context-4.11.1.tgz#dae959f4512ca125f087a44c16b2c23de10b0e29"
+  integrity sha512-urF1m4nFiZFaWjsv2zj8J/hKvo4b2tJW+6CYU1mY4lKv1RwhG2eV8J/EHKuNlLhATZx3+6j7szrpHrQW2ZcAaQ==
 
 react-native-safe-area-context@^4.8.2:
   version "4.9.0"