From 0c2f2035e96bbc921a2044d572bb6424a615f0bd Mon Sep 17 00:00:00 2001 From: noumantahir Date: Tue, 22 Oct 2024 19:06:42 +0500 Subject: [PATCH 1/3] fine tune tab bar bottom padding --- src/components/bottomTabBar/view/bottomTabBarView.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/components/bottomTabBar/view/bottomTabBarView.tsx b/src/components/bottomTabBar/view/bottomTabBarView.tsx index e9e7d3ffc0..f88107ae76 100644 --- a/src/components/bottomTabBar/view/bottomTabBarView.tsx +++ b/src/components/bottomTabBar/view/bottomTabBarView.tsx @@ -1,5 +1,5 @@ import React, { useEffect } from 'react'; -import { View, TouchableOpacity } from 'react-native'; +import { View, TouchableOpacity, Platform } from 'react-native'; // Components // import TabBar from './tabbar'; @@ -17,6 +17,7 @@ import Icon, { IconContainer } from '../../icon'; import { showReplyModal, updateActiveBottomTab } from '../../../redux/actions/uiAction'; import { useAppSelector } from '../../../hooks'; import showLoginAlert from '../../../utils/showLoginAlert'; +import { isIphoneX } from 'react-native-iphone-x-helper'; const BottomTabBarView = ({ state: { routes, index }, @@ -92,7 +93,9 @@ const BottomTabBarView = ({ ); }); - return {_tabButtons}; + const _bottomPadding = insets.bottom + (isIphoneX() ? 0 : 12) + + return {_tabButtons}; }; export default BottomTabBarView; From de01bad3e8ed87a8914878c94bb4189389bbc4e6 Mon Sep 17 00:00:00 2001 From: noumantahir Date: Tue, 22 Oct 2024 19:25:13 +0500 Subject: [PATCH 2/3] consistent top header padding across devices --- package.json | 2 +- src/components/header/view/headerStyles.ts | 5 ++--- src/components/header/view/headerView.tsx | 5 +++-- yarn.lock | 8 ++++---- 4 files changed, 10 insertions(+), 10 deletions(-) diff --git a/package.json b/package.json index 1e1f3bc5fe..29c2970b24 100644 --- a/package.json +++ b/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", diff --git a/src/components/header/view/headerStyles.ts b/src/components/header/view/headerStyles.ts index e715052aa2..2f4aeb30d9 100644 --- a/src/components/header/view/headerStyles.ts +++ b/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', diff --git a/src/components/header/view/headerView.tsx b/src/components/header/view/headerView.tsx index 3cd9719c67..eb7eac11dd 100644 --- a/src/components/header/view/headerView.tsx +++ b/src/components/header/view/headerView.tsx @@ -1,5 +1,5 @@ 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'; @@ -14,6 +14,7 @@ import ROUTES from '../../../constants/routeNames'; // Styles import styles from './headerStyles'; +import { SafeAreaView } from 'react-native-safe-area-context'; const HeaderView = ({ displayName, @@ -134,7 +135,7 @@ const HeaderView = ({ ); return ( - + {!hideUser && ( <> Date: Tue, 22 Oct 2024 19:28:12 +0500 Subject: [PATCH 3/3] lint --- src/components/bottomTabBar/view/bottomTabBarView.tsx | 8 ++++---- src/components/header/view/headerStyles.ts | 4 ++-- src/components/header/view/headerView.tsx | 4 ++-- 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/components/bottomTabBar/view/bottomTabBarView.tsx b/src/components/bottomTabBar/view/bottomTabBarView.tsx index f88107ae76..6ca2d4b71b 100644 --- a/src/components/bottomTabBar/view/bottomTabBarView.tsx +++ b/src/components/bottomTabBar/view/bottomTabBarView.tsx @@ -1,5 +1,5 @@ import React, { useEffect } from 'react'; -import { View, TouchableOpacity, Platform } from 'react-native'; +import { View, TouchableOpacity } from 'react-native'; // Components // import TabBar from './tabbar'; @@ -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 @@ -17,7 +18,6 @@ import Icon, { IconContainer } from '../../icon'; import { showReplyModal, updateActiveBottomTab } from '../../../redux/actions/uiAction'; import { useAppSelector } from '../../../hooks'; import showLoginAlert from '../../../utils/showLoginAlert'; -import { isIphoneX } from 'react-native-iphone-x-helper'; const BottomTabBarView = ({ state: { routes, index }, @@ -93,9 +93,9 @@ const BottomTabBarView = ({ ); }); - const _bottomPadding = insets.bottom + (isIphoneX() ? 0 : 12) + const _bottomPadding = insets.bottom + (isIphoneX() ? 0 : 12); - return {_tabButtons}; + return {_tabButtons}; }; export default BottomTabBarView; diff --git a/src/components/header/view/headerStyles.ts b/src/components/header/view/headerStyles.ts index 2f4aeb30d9..d10461e40f 100644 --- a/src/components/header/view/headerStyles.ts +++ b/src/components/header/view/headerStyles.ts @@ -5,8 +5,8 @@ export default EStyleSheet.create({ flexDirection: 'row', width: '100%', backgroundColor: '$primaryBackgroundColor', - paddingTop:8, - paddingBottom:12, + paddingTop: 8, + paddingBottom: 12, }, containerReverse: { justifyContent: 'space-between', diff --git a/src/components/header/view/headerView.tsx b/src/components/header/view/headerView.tsx index eb7eac11dd..7696d87514 100644 --- a/src/components/header/view/headerView.tsx +++ b/src/components/header/view/headerView.tsx @@ -1,10 +1,11 @@ import React, { useState } from 'react'; -import { View, Text, 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'; @@ -14,7 +15,6 @@ import ROUTES from '../../../constants/routeNames'; // Styles import styles from './headerStyles'; -import { SafeAreaView } from 'react-native-safe-area-context'; const HeaderView = ({ displayName,