Merge pull request #2924 from ecency/nt/orientation-tweaks

Nt/orientation tweaks

src/components/animations/boostIndicator/boostIndicatorStyles.js

@@ -5,7 +5,7 @@ export default EStyleSheet.create({
     backgroundColor: '$primaryBackgroundColor',
     justifyContent: 'center',
     alignItems: 'center',
-    width: '$deviceWidth',
+    width: '100%',
     flex: 1,
   },
 });

src/components/basicHeader/view/basicHeaderStyles.js

@@ -6,7 +6,7 @@ export default EStyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'space-between',
     padding: 16,
-    // width: '$deviceWidth',
+    // width: '100%',
     backgroundColor: '$primaryBackgroundColor',
     alignItems: 'center',
   },

src/components/basicUIElements/view/lineBreak/lineBreakStyles.js

@@ -2,7 +2,7 @@ import EStyleSheet from 'react-native-extended-stylesheet';
 
 export default EStyleSheet.create({
   lineBreak: {
-    width: '$deviceWidth',
+    width: '100%',
     backgroundColor: '$primaryLightBackground',
     height: 10,
     justifyContent: 'center',

src/components/basicUIElements/view/noPost/noPostStyles.js

@@ -8,7 +8,7 @@ export default EStyleSheet.create({
     backgroundColor: '$primaryBackgroundColor',
   },
   image: {
-    width: '$deviceWidth - 40',
+    width: '100% - 40',
     height: 192,
     marginTop: 16,
   },

src/components/basicUIElements/view/stickyBar/stickyBarStyles.js

@@ -1,5 +1,5 @@
 import EStyleSheet from 'react-native-extended-stylesheet';
-import scalePx from '../../../../utils/scalePx';
+import roundPx from '../../../../utils/roundPx';
 
 export default EStyleSheet.create({
   container: {
@@ -8,7 +8,7 @@ export default EStyleSheet.create({
     alignItems: 'center',
     alignSelf: 'center',
     justifyContent: 'space-between',
-    width: '$deviceWidth',
+    width: '100%',
     shadowOpacity: 0.1,
     shadowOffset: {
       width: 0,
@@ -18,6 +18,6 @@ export default EStyleSheet.create({
   },
   fixedFooter: {
     position: 'absolute',
-    bottom: scalePx(0),
+    bottom: roundPx(0),
   },
 });

src/components/basicUIElements/view/walletLineItem/walletLineItemStyles.js

@@ -50,7 +50,7 @@ export default EStyleSheet.create({
     marginLeft: 8,
     fontFamily: '$primaryFont',
     color: '$iconColor',
-    maxWidth: '$deviceWidth',
+    maxWidth: '100%',
     textAlign: 'left',
   },
   onlyText: {

src/components/bottomTabBar/view/bottomTabBarStyles.js

@@ -1,35 +1,32 @@
 import EStyleSheet from 'react-native-extended-stylesheet';
-import scalePx from '../../../utils/scalePx';
+import roundPx from '../../../utils/roundPx';
 import getWindowDimensions from '../../../utils/getWindowDimensions';
 
 const deviceWidth = getWindowDimensions().width;
 
 export default EStyleSheet.create({
   wrapper: {
-    width: deviceWidth,
     flexDirection: 'row',
-    flex: 0.085,
     backgroundColor: '$primaryBackgroundColor',
     borderTopWidth: 0.1,
     shadowOpacity: 0.2,
-    // height: scalePx(50),
     elevation: 15,
   },
   subContent: {
     flexDirection: 'row',
     zIndex: 1,
     position: 'absolute',
-    marginHorizontal: scalePx(20),
+    marginHorizontal: roundPx(20),
     justifyContent: 'space-between',
   },
   navItem: {
     alignItems: 'center',
     zIndex: 0,
-    paddingVertical: scalePx(10),
-    paddingHorizontal: scalePx(10),
-    width: (deviceWidth - scalePx(38)) / 5,
+    paddingVertical: roundPx(10),
+    paddingHorizontal: roundPx(10),
+    width: (deviceWidth - roundPx(38)) / 5,
   },
   circle: {
-    bottom: scalePx(25),
+    bottom: roundPx(25),
   },
 });

src/components/bottomTabBar/view/bottomTabBarView.tsx

@@ -13,10 +13,11 @@ import ROUTES from '../../../constants/routeNames';
 // Styles
 import styles from './bottomTabBarStyles';
 import Icon, { IconContainer } from '../../icon';
-import scalePx from '../../../utils/scalePx';
+import roundPx from '../../../utils/roundPx';
 import { showReplyModal, updateActiveBottomTab } from '../../../redux/actions/uiAction';
 import { useAppSelector } from '../../../hooks';
 import showLoginAlert from '../../../utils/showLoginAlert';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 const BottomTabBarView = ({
   state: { routes, index },
@@ -25,6 +26,7 @@ const BottomTabBarView = ({
 }: BottomTabBarProps) => {
   const intl = useIntl();
   const dispatch = useDispatch();
+  const insets = useSafeAreaInsets();
   const isLoggedIn = useAppSelector((state) => state.application.isLoggedIn);
 
   useEffect(() => {
@@ -69,7 +71,7 @@ const BottomTabBarView = ({
       style: { paddingTop: 15 },
       name: route.params.iconName,
       color: iconColor,
-      size: scalePx(26),
+      size: 26,
     };
 
     let _tabBarIcon = <Icon {..._iconProps} />;
@@ -91,7 +93,11 @@ const BottomTabBarView = ({
     );
   });
 
-  return <SafeAreaView style={styles.wrapper}>{_tabButtons}</SafeAreaView>;
+  return (
+    <View style={{ ...styles.wrapper, paddingBottom: insets.bottom }}>
+      {_tabButtons}
+    </View>
+  );
 };
 
 export default BottomTabBarView;

src/components/bottomTabBar/view/tabbar.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import { View, TouchableHighlight, Animated } from 'react-native';
 import Svg, { Circle, Path } from 'react-native-svg';
 
-import scalePx from '../../../utils/scalePx';
+import roundPx from '../../../utils/roundPx';
 import styles from './bottomTabBarStyles';
 
 const AnimatedCircle = Animated.createAnimatedComponent(Circle);
@@ -118,7 +118,7 @@ export default class TabBar extends Component {
           x="0px"
           y="0px"
           width="100%"
-          height={scalePx(100)}
+          height={roundPx(100)}
           viewBox="0 0 661 100"
           space="preserve"
         >

src/components/containerHeader/view/containerHeaderStyles.js

@@ -2,7 +2,7 @@ import EStyleSheet from 'react-native-extended-stylesheet';
 
 export default EStyleSheet.create({
   wrapper: {
-    width: '$deviceWidth',
+    width: '100%',
     height: 50,
     backgroundColor: '$primaryBackgroundColor',
     flexDirection: 'row',
@@ -19,7 +19,7 @@ export default EStyleSheet.create({
     fontSize: 14,
     fontWeight: '600',
     marginLeft: 32,
-    width: '$deviceWidth - 64',
+    width: '100% - 64',
   },
   centerTitle: {
     textAlign: 'center',

src/components/dateTimePicker/view/dateTimePickerStyles.js

@@ -38,7 +38,7 @@ export default EStyleSheet.create({
     alignSelf: 'center',
   },
   picker: {
-    width: '$deviceWidth',
+    width: '100%',
     // marginLeft: 20,
   },
   datePickerText: {

src/components/draftListItem/view/draftListItemStyles.js

@@ -15,7 +15,7 @@ export default EStyleSheet.create({
     marginHorizontal: 9,
   },
   thumbnail: {
-    width: '$deviceWidth - 16',
+    width: '100% - 16',
     height: 300,
   },
   postDescripton: {

src/components/dropdownButton/view/dropdownButtonStyles.js

@@ -39,10 +39,6 @@ export default EStyleSheet.create({
     padding: 5,
     borderColor: '$borderColor',
   },
-  dropdownTextHighlight: {
-    backgroundColor: '$primaryBlue',
-    width: '$deviceWidth / 3',
-  },
   button: {
     marginLeft: 25,
   },

src/components/dropdownButton/view/dropdownButtonView.tsx

@@ -80,7 +80,6 @@ const DropdownButtonView = ({
       textStyle={[textStyle || styles.buttonText]}
       dropdownStyle={[styles.dropdown, dropdownStyle, { height: 32 * (options.length + 0.8) }]}
       dropdownTextStyle={[dropdownTextStyle || styles.dropdownText]}
-      dropdownTextHighlightStyle={styles.dropdownTextHighlight}
       options={options}
       onSelect={(e) => onSelect && onSelect(e, options[e])}
       defaultIndex={selectedOptionIndex}

src/components/foregroundNotification/styles.ts

@@ -24,7 +24,7 @@ export default EStyleSheet.create({
     },
     elevation: 3,
     borderRadius: 12,
-    width: '$deviceWidth - 16',
+    width: '100% - 16',
   },
   contentContainer: {
     flexDirection: 'row',

src/components/header/view/headerStyles.ts

@@ -4,7 +4,7 @@ import { Platform } from 'react-native';
 export default EStyleSheet.create({
   container: {
     flexDirection: 'row',
-    width: '$deviceWidth',
+    width: '100%',
     backgroundColor: '$primaryBackgroundColor',
     flex: 1,
     maxHeight: Platform.OS === 'ios' ? 105 : 80,

src/components/icon/view/iconStyles.js

@@ -1,24 +1,24 @@
 import EStyleSheet from 'react-native-extended-stylesheet';
-import scalePx from '../../../utils/scalePx';
+import roundPx from '../../../utils/roundPx';
 
 export default EStyleSheet.create({
   badge: {
     color: '$primaryLightGray',
     alignItems: 'center',
-    fontSize: scalePx(12),
+    fontSize: 12,
     fontWeight: '600',
   },
   badgeWrapper: {
     position: 'absolute',
-    left: scalePx(15),
-    top: scalePx(18),
+    left: 15,
+    top: 18,
     backgroundColor: '$primaryRed',
     borderWidth: 0,
     justifyContent: 'center',
     alignItems: 'center',
     zIndex: 99,
-    height: scalePx(17),
-    minWidth: scalePx(17),
-    borderRadius: scalePx(15),
+    height: 17,
+    minWidth: 17,
+    borderRadius: 15,
   },
 });

src/components/loginHeader/view/loginHeaderStyles.js

@@ -45,7 +45,7 @@ export default EStyleSheet.create({
     flex: 1,
   },
   headerRow: {
-    width: '$deviceWidth',
+    width: '100%',
     flexDirection: 'row',
     justifyContent: 'space-between',
     backgroundColor: '$primaryBackgroundColor',

src/components/mainButton/view/mainButtonStyles.js

@@ -2,7 +2,7 @@ import EStyleSheet from 'react-native-extended-stylesheet';
 
 export default EStyleSheet.create({
   touchable: {
-    maxWidth: '$deviceWidth',
+    maxWidth: '100%',
     height: 56,
     borderRadius: 30,
     backgroundColor: '$primaryBlue',

src/components/markdownEditor/styles/editorToolbarStyles.ts

@@ -18,13 +18,13 @@ const _dropShadow = {
 
 export default EStyleSheet.create({
   container: {
-    width: '$deviceWidth',
+    width: '100%',
     elevation: 3,
     backgroundColor: '$primaryBackgroundColor',
   },
   shadowedContainer: {
     elevation: 3,
-    width: '$deviceWidth',
+    width: '100%',
     ..._dropShadow,
   },
   dropShadow: {
@@ -33,7 +33,7 @@ export default EStyleSheet.create({
   buttonsContainer: {
     justifyContent: 'space-between',
     flexDirection: 'row',
-    width: '$deviceWidth',
+    width: '100%',
     backgroundColor: '$primaryBackgroundColor',
     borderColor: '$primaryLightBackground',
     paddingBottom: getBottomSpace(),

src/components/notificationLine/view/notificationLineStyles.js

@@ -4,7 +4,7 @@ export default EStyleSheet.create({
   notificationWrapper: {
     flex: 1,
     flexDirection: 'row',
-    width: '$deviceWidth',
+    width: '100%',
     justifyContent: 'space-between',
     alignItems: 'center',
     height: 64,

src/components/postBoost/postBoostStyles.js

@@ -91,7 +91,7 @@ export default EStyleSheet.create({
     color: '$iconColor',
   },
   button: {
-    width: '$deviceWidth / 3',
+    paddingHorizontal: 44,
     marginTop: 30,
     justifyContent: 'center',
     alignItems: 'center',

src/components/postButton/postButtonView.js

@@ -5,7 +5,7 @@ import { Icon } from '../icon';
 
 // Constant
 import { default as ROUTES } from '../../constants/routeNames';
-import scalePx from '../../utils/scalePx';
+import roundPx from '../../utils/roundPx';
 
 const PostButtonView = () => {
   const navigation = useNavigation();
@@ -24,7 +24,7 @@ const PostButtonView = () => {
         style={{ padding: 15 }}
         name="pencil"
         color="#c1c5c7"
-        size={scalePx(26)}
+        size={roundPx(26)}
       />
     </TouchableOpacity>
   );

src/components/postCard/children/postCardStyles.js

@@ -40,7 +40,7 @@ export default EStyleSheet.create({
     alignItems: 'center',
     alignSelf: 'center',
     // height: 200,
-    // width: '$deviceWidth - 16',
+    // width: '100% - 16',
     borderRadius: 8,
     backgroundColor: '$primaryLightBackground',
   },

src/components/postElements/body/view/commentBodyView.tsx

@@ -1,5 +1,5 @@
 import React, { Fragment, useState } from 'react';
-import { View } from 'react-native';
+import { useWindowDimensions, View } from 'react-native';
 import { useIntl } from 'react-intl';
 
 import { LongPressGestureHandler, State } from 'react-native-gesture-handler';
@@ -20,7 +20,6 @@ import { isCommunity } from '../../../../utils/communityValidation';
 import { GLOBAL_POST_FILTERS_VALUE } from '../../../../constants/options/filters';
 import getWindowDimensions from '../../../../utils/getWindowDimensions';
 
-const WIDTH = getWindowDimensions().width;
 
 interface CommentBodyProps {
   body: string;
@@ -51,14 +50,17 @@ const CommentBody = ({
   handleImagePress,
   handleLinkPress,
 }: CommentBodyProps) => {
-  const _contentWidth = WIDTH - (40 + 28 + (commentDepth > 2 ? 44 : 0));
 
   const dispatch = useAppDispatch();
+  const dims = useWindowDimensions();
 
   const [revealComment, setRevealComment] = useState(!hideContent);
 
   const intl = useIntl();
 
+  const _contentWidth = dims.width - (40 + 28 + (commentDepth > 2 ? 44 : 0));
+
+
   const _onLongPressStateChange = ({ nativeEvent }) => {
     if (nativeEvent.state === State.ACTIVE) {
       handleOnLongPress();
@@ -131,6 +133,7 @@ const CommentBody = ({
         <LongPressGestureHandler onHandlerStateChange={_onLongPressStateChange}>
           <View>
             <PostHtmlRenderer
+              key={"comment_width_" + _contentWidth}
               contentWidth={_contentWidth}
               body={body}
               metadata={metadata}

src/components/postElements/body/view/postBodyView.js

@@ -1,5 +1,5 @@
 import React, { Fragment, useState, useEffect, useRef } from 'react';
-import { PermissionsAndroid, Platform, View } from 'react-native';
+import { PermissionsAndroid, Platform, useWindowDimensions, View } from 'react-native';
 import { CameraRoll } from '@react-native-camera-roll/camera-roll';
 import { useIntl } from 'react-intl';
 import EStyleSheet from 'react-native-extended-stylesheet';
@@ -21,16 +21,19 @@ import { OptionsModal } from '../../../atoms';
 import { isCommunity } from '../../../../utils/communityValidation';
 import { GLOBAL_POST_FILTERS_VALUE } from '../../../../constants/options/filters';
 import { ImageViewer, PostHtmlRenderer, VideoPlayer } from '../../..';
-import getWindowDimensions from '../../../../utils/getWindowDimensions';
 import { useAppDispatch } from '../../../../hooks';
 import { isHiveUri } from '../../../../utils/hive-uri';
 
-const WIDTH = getWindowDimensions().width;
+
 
 const PostBody = ({ body, metadata, onLoadEnd, width }) => {
   const intl = useIntl();
-  const navigation = useNavigation();
   const dispatch = useAppDispatch();
+  const navigation = useNavigation();
+
+  const dims = useWindowDimensions();
+  const contentWidth = width || (dims.width - 32);
+
 
   const [selectedLink, setSelectedLink] = useState(null);
   const [html, setHtml] = useState('');
@@ -42,6 +45,8 @@ const PostBody = ({ body, metadata, onLoadEnd, width }) => {
   const imageViewerRef = useRef(null);
   const youtubePlayerRef = useRef(null);
 
+
+
   useEffect(() => {
     if (body) {
       setHtml(body.replace(/<a/g, '<a target="_blank"'));
@@ -273,9 +278,10 @@ const PostBody = ({ body, metadata, onLoadEnd, width }) => {
       />
       <View>
         <PostHtmlRenderer
+          key={"html_content_" + contentWidth} //makes sure html content is rerendered on width update
           body={html}
           metadata={metadata}
-          contentWidth={width || WIDTH - 32}
+          contentWidth={contentWidth}
           onLoaded={_handleLoadEnd}
           setSelectedImage={_handleSetSelectedImage}
           setSelectedLink={_handleSetSelectedLink}

src/components/postView/view/postDisplayStyles.js

@@ -38,6 +38,7 @@ export default EStyleSheet.create({
     alignItems: 'center',
   },
   footer: {
+    flex:1,
     flexDirection: 'column',
     marginTop: 19,
     marginBottom: 10,
@@ -59,7 +60,7 @@ export default EStyleSheet.create({
     flexDirection: 'row',
     paddingHorizontal: 16,
     paddingVertical: 8,
-    width: '$deviceWidth',
+    width: '100%',
     alignItems: 'center',
     alignSelf: 'center',
     justifyContent: 'center',

src/components/postView/view/postDisplayView.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useRef, useState, Fragment } from 'react';
-import { View, Text } from 'react-native';
+import { View, Text, useWindowDimensions } from 'react-native';
 import { injectIntl } from 'react-intl';
 import get from 'lodash/get';
 
@@ -19,7 +19,6 @@ import { ParentPost } from '../../parentPost';
 // Styles
 import styles from './postDisplayStyles';
 import { OptionsModal, WritePostButton } from '../../atoms';
-import getWindowDimensions from '../../../utils/getWindowDimensions';
 import { useAppDispatch } from '../../../hooks';
 import { showProfileModal, showReplyModal } from '../../../redux/actions/uiAction';
 import { PostTypes } from '../../../constants/postTypes';
@@ -31,7 +30,6 @@ import UpvotePopover from '../../upvotePopover';
 import { PostPoll } from '../../postPoll';
 import QUERIES from '../../../providers/queries/queryKeys';
 
-const WIDTH = getWindowDimensions().width;
 
 const PostDisplayView = ({
   currentAccount,
@@ -56,6 +54,7 @@ const PostDisplayView = ({
   const insets = useSafeAreaInsets();
   const queryClient = useQueryClient();
   const userActivityMutation = useUserActivityMutation();
+  const dims = useWindowDimensions();
 
   const postCommentsRef = useRef<PostComments>(null);
   const upvotePopoverRef = useRef<UpvotePopover>(null);
@@ -316,7 +315,7 @@ const PostDisplayView = ({
 
   return (
     <View style={styles.container}>
-      <View style={[styles.scroll, styles.scrollContent, { width: WIDTH }]}>
+      <View style={[styles.scroll, styles.scrollContent, { width: dims.width }]}>
         <PostComments
           ref={postCommentsRef}
           author={author || post?.author}

src/components/profile/profileStyles.js

@@ -15,7 +15,7 @@ export default EStyleSheet.create({
     marginTop: 72,
   },
   cover: {
-    width: '$deviceWidth',
+    width: '100%',
     height: 160,
   },
   avatar: {
@@ -55,7 +55,7 @@ export default EStyleSheet.create({
     flex: 1,
     paddingHorizontal: 7,
     backgroundColor: '#f9f9f9',
-    minWidth: '$deviceWidth',
+    minWidth: '100%',
   },
   postTabBar: {
     backgroundColor: '$primaryBackgroundColor',

src/components/profileSummary/view/profileSummaryStyles.js

@@ -15,10 +15,10 @@ export default EStyleSheet.create({
     marginTop: 16,
     marginBottom: 12,
     alignSelf: 'stretch',
-    maxWidth: '$deviceWidth - 24',
+    maxWidth: '100% - 24',
   },
   footer: {
-    width: '$deviceWidth - 14',
+    width: '100% - 14',
     flexDirection: 'row',
     justifyContent: 'space-between',
     marginVertical: 10,

src/components/promote/promoteStyles.js

@@ -89,7 +89,7 @@ export default EStyleSheet.create({
     color: '$iconColor',
   },
   button: {
-    width: '$deviceWidth / 3',
+    paddingHorizontal: 44,
     marginTop: 30,
     justifyContent: 'center',
     alignItems: 'center',

src/components/searchInput/view/searchInputStyles.js

@@ -25,7 +25,7 @@ export default EStyleSheet.create({
     color: '$primaryDarkGray',
     fontSize: 14,
     padding: 7,
-    maxWidth: '$deviceWidth - 100',
+    maxWidth: '100% - 100',
     marginLeft: 8,
   },
   closeIconButton: {

src/components/searchModal/view/searchModalStyles.js

@@ -29,7 +29,7 @@ export default EStyleSheet.create({
     fontSize: 14,
     flexGrow: 1,
     padding: 7,
-    maxWidth: '$deviceWidth - 100',
+    maxWidth: '100% - 100',
   },
   closeIconButton: {
     width: 20,

src/components/sideMenu/view/sideMenuStyles.js

@@ -1,7 +1,7 @@
 import EStyleSheet from 'react-native-extended-stylesheet';
 import { getBottomSpace } from 'react-native-iphone-x-helper';
 import { isRTL } from '../../../utils/I18nUtils';
-import scalePx from '../../../utils/scalePx';
+import roundPx from '../../../utils/roundPx';
 
 export default EStyleSheet.create({
   container: {
@@ -46,14 +46,14 @@ export default EStyleSheet.create({
   username: {
     color: '$pureWhite',
     fontWeight: 'bold',
-    fontSize: scalePx(18),
+    fontSize: roundPx(18),
     marginBottom: 8,
     maxWidth: '$deviceWidth / 3',
   },
   usernick: {
     color: 'rgba(255, 255, 255, 0.7)',
     fontWeight: 'bold',
-    fontSize: scalePx(18),
+    fontSize: roundPx(18),
     marginTop: 2,
   },
   listItem: {
@@ -96,7 +96,7 @@ export default EStyleSheet.create({
   },
   vpText: {
     textAlign: 'center',
-    fontSize: scalePx(16),
+    fontSize: roundPx(16),
     color: '$iconColor',
   },
   imageBackground: {

src/components/spinGame/spinGameStyles.js

@@ -31,7 +31,7 @@ export default EStyleSheet.create({
   },
   backgroundTags: {
     position: 'absolute',
-    width: '$deviceWidth',
+    width: '100%',
     height: 360,
     left: 0,
     top: 16,

src/components/toastNotification/view/toastNotificationStyles.ts

@@ -7,7 +7,7 @@ export default EStyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
     alignSelf: 'center',
-    maxWidth: '$deviceWidth',
+    maxWidth: '100%',
     minWidth: '$deviceWidth / 1.9',
     height: 44,
     borderRadius: 30,

src/components/uploadsGalleryModal/children/uploadsGalleryModalStyles.ts

@@ -10,7 +10,7 @@ export const EXPANDED_HEIGHT = getWindowDimensions().height * 0.65;
 
 export default EStyleSheet.create({
   container: {
-    width: '$deviceWidth',
+    width: '100%',
     height: COMPACT_HEIGHT,
   },
 
@@ -21,7 +21,7 @@ export default EStyleSheet.create({
   },
 
   gridContentContainer: {
-    width: '$deviceWidth',
+    width: '100%',
     paddingHorizontal: 16,
   },
 

src/components/upvotePopover/children/upvoteStyles.js

@@ -15,9 +15,9 @@ export default EStyleSheet.create({
   },
   popoverSlider: {
     flexDirection: 'row',
-    width: '$deviceWidth - 20',
+    width: '100% - 20',
     height: 48,
-    borderRadius: '$deviceWidth - 20 / 2',
+    borderRadius: 24,
     paddingHorizontal: 16,
     backgroundColor: '$primaryBackgroundColor',
   },

src/screens/bookmarks/screen/bookmarksStyles.ts

@@ -16,7 +16,7 @@ export default EStyleSheet.create({
   tabbarItem: {
     flex: 1,
     backgroundColor: '$primaryBackgroundColor',
-    minWidth: '$deviceWidth',
+    minWidth: '100%',
   },
   tabs: {
     flex: 1,

src/screens/community/screen/communityStyles.js

@@ -24,7 +24,7 @@ export default EStyleSheet.create({
   tabbarItem: {
     flex: 1,
     backgroundColor: '$primaryBackgroundColor',
-    minWidth: '$deviceWidth',
+    minWidth: '100%',
   },
   tabs: {
     flex: 1,

src/screens/drafts/screen/draftStyles.js

@@ -14,7 +14,7 @@ export default EStyleSheet.create({
   tabbarItem: {
     flex: 1,
     backgroundColor: '$primaryBackgroundColor',
-    minWidth: '$deviceWidth',
+    minWidth: '100%',
   },
   deleteButtonContainer: {
     position: 'absolute',

src/screens/feed/screen/feedStyles.js

@@ -26,7 +26,7 @@ export default EStyleSheet.create({
   tabbarItem: {
     flex: 1,
     backgroundColor: '$primaryBackgroundColor',
-    minWidth: '$deviceWidth',
+    minWidth: '100%',
   },
   tabs: {
     flex: 1,

src/screens/notification/screen/notificationStyles.js

@@ -8,6 +8,6 @@ export default EStyleSheet.create({
   tabView: {
     flex: 1,
     backgroundColor: '$primaryBackgroundColor',
-    minWidth: '$deviceWidth',
+    minWidth: '100%',
   },
 });

src/screens/redeem/styles/boostPlus.styles.ts

@@ -101,7 +101,7 @@ export default EStyleSheet.create({
     marginTop: 16,
   },
   button: {
-    width: '$deviceWidth / 3',
+    paddingHorizontal: 44,
     marginTop: 30,
     justifyContent: 'center',
     alignItems: 'center',

src/screens/searchResult/screen/searchResultStyles.js

@@ -28,7 +28,7 @@ export default EStyleSheet.create({
   tabbarItem: {
     flex: 1,
     backgroundColor: '$primaryBackgroundColor',
-    minWidth: '$deviceWidth',
+    minWidth: '100%',
   },
   tabs: {
     flex: 1,

src/screens/searchResult/screen/tabs/best/view/postsResultsStyles.js

@@ -46,7 +46,7 @@ export default EStyleSheet.create({
     alignItems: 'center',
     alignSelf: 'center',
     // height: 200,
-    // width: '$deviceWidth - 16',
+    // width: '100% - 16',
     borderRadius: 8,
     backgroundColor: '$primaryLightGray',
   },

src/screens/searchResult/screen/tabs/people/view/peopleResultsStyles.js

@@ -47,7 +47,7 @@ export default EStyleSheet.create({
     color: '$primaryBlack',
   },
   descriptionStyle: {
-    maxWidth: '$deviceWidth',
+    maxWidth: '100%',
     marginTop: 4,
     marginRight: isRTL() ? 0 : 24,
     marginLeft: isRTL() ? 24 : 0,

src/screens/tagResult/screen/tagResultStyles.js

@@ -33,7 +33,7 @@ export default EStyleSheet.create({
     flex: 1,
     marginTop: 16,
     backgroundColor: '$primaryBackgroundColor',
-    minWidth: '$deviceWidth',
+    minWidth: '100%',
   },
   tabs: {
     flex: 1,

src/screens/trade/styles/tradeScreen.styles.ts

@@ -24,7 +24,7 @@ export default EStyleSheet.create({
     alignItems: 'center',
   } as ViewStyle,
   mainBtn: {
-    width: '$deviceWidth / 3',
+    paddingHorizontal: 44,
     justifyContent: 'center',
     alignItems: 'center',
     fontWeight: 'bold',

src/screens/transfer/screen/transferStyles.js

@@ -78,14 +78,14 @@ export default EStyleSheet.create({
     color: '$iconColor',
   },
   button: {
-    width: '$deviceWidth / 3',
+    paddingHorizontal: 44,
     justifyContent: 'center',
     alignItems: 'center',
     fontWeight: 'bold',
     marginVertical: 16,
   },
   stopButton: {
-    width: '$deviceWidth / 3',
+    paddingHorizontal: 44,
     marginTop: 30,
     marginBottom: 30,
     justifyContent: 'center',
@@ -147,19 +147,19 @@ export default EStyleSheet.create({
   },
   spInformation: {
     backgroundColor: 'red',
-    width: '$deviceWidth / 3',
+    paddingHorizontal: 44,
     borderRadius: 5,
     margin: 5,
   },
   vestsInformation: {
     backgroundColor: 'gray',
-    width: '$deviceWidth / 3',
+    paddingHorizontal: 44,
     borderRadius: 5,
     margin: 5,
   },
   steemInformation: {
     backgroundColor: 'green',
-    width: '$deviceWidth / 3',
+    paddingHorizontal: 44,
     borderRadius: 5,
     margin: 5,
   },

src/screens/welcome/children/WelcomeScreenStyles.tsx

@@ -1,7 +1,7 @@
 import { Platform } from 'react-native';
 import EStyleSheet from 'react-native-extended-stylesheet';
 import getWindowDimensions from '../../../utils/getWindowDimensions';
-import scalePx from '../../../utils/scalePx';
+import roundPx from '../../../utils/roundPx';
 
 const WINDOW_HEIGHT = getWindowDimensions().height;
 
@@ -26,11 +26,11 @@ export default EStyleSheet.create({
     justifyContent: 'center',
   },
   welcomeText: {
-    fontSize: scalePx(34),
+    fontSize: roundPx(34),
     color: '$primaryBlack',
   },
   ecencyText: {
-    fontSize: scalePx(34),
+    fontSize: roundPx(34),
     color: '$primaryBlue',
   },
   mascot: {
@@ -62,13 +62,13 @@ export default EStyleSheet.create({
     marginTop: 52,
   },
   sectionTitle: {
-    fontSize: scalePx(17),
+    fontSize: roundPx(17),
     fontWeight: '600',
     marginLeft: 10,
     color: '$primaryBlack',
   },
   sectionText: {
-    fontSize: scalePx(15),
+    fontSize: roundPx(15),
     marginLeft: 10,
     marginRight: 45,
     color: '$primaryBlack',

src/utils/roundPx.ts

@@ -0,0 +1,10 @@
+import { PixelRatio, Platform } from 'react-native';
+
+
+export default (size:number) => {
+  if (Platform.OS === 'ios') {
+    return Math.round(PixelRatio.roundToNearestPixel(size));
+  } else {
+    return Math.round(PixelRatio.roundToNearestPixel(size)) - 2;
+  }
+};

src/utils/scalePx.js

@@ -1,16 +0,0 @@
-import { PixelRatio, Platform } from 'react-native';
-import getWindowDimensions from './getWindowDimensions';
-
-const { width: SCREEN_WIDTH } = getWindowDimensions();
-
-// based on iphone X's scale
-const scale = SCREEN_WIDTH / 414;
-
-export default (size) => {
-  const newSize = size * scale;
-  if (Platform.OS === 'ios') {
-    return Math.round(PixelRatio.roundToNearestPixel(newSize));
-  } else {
-    return Math.round(PixelRatio.roundToNearestPixel(newSize)) - 2;
-  }
-};