Fix: Address and ens names cut off in send flow on Android

src/components/coin-divider/CoinDividerEditButton.js

@@ -1,12 +1,13 @@
 import React, { useCallback } from 'react';
-import { LayoutAnimation } from 'react-native';
+import { LayoutAnimation, StyleSheet } from 'react-native';
 import { useTheme } from '../../theme/ThemeContext';
 import { magicMemo } from '../../utils';
 import { ButtonPressAnimation, OpacityToggler } from '../animations';
 import { Row } from '../layout';
 import { Text } from '../text';
 import styled from '@/styled-thing';
 import { padding, shadow } from '@/styles';
+import { IS_ANDROID } from '@/env';
 
 const ButtonContent = styled(Row).attrs({
   justify: 'center',
@@ -39,6 +40,7 @@ const CoinDividerEditButton = ({ isActive, isVisible, onPress, shouldReloadList,
             opacity={textOpacityAlwaysOn || isActive ? 1 : 0.3333333333}
             size="lmedium"
             weight="bold"
+            style={sx.text}
           >
             {text}
           </Text>
@@ -48,4 +50,10 @@ const CoinDividerEditButton = ({ isActive, isVisible, onPress, shouldReloadList,
   );
 };
 
+const sx = StyleSheet.create({
+  text: {
+    marginTop: IS_ANDROID ? -4 : 0,
+  },
+});
+
 export default magicMemo(CoinDividerEditButton, ['isActive', 'isVisible', 'text']);

src/components/coin-divider/CoinDividerOpenButton.js

@@ -53,7 +53,7 @@ const CoinDividerEditButton = ({ isSmallBalancesOpen, onPress }) => {
       opacity: 0.6,
       transform: [
         { translateX: 0 + animation.value * 5 },
-        { translateY: (IS_ANDROID ? 4 : 0) + animation.value * 1.25 },
+        { translateY: (IS_ANDROID ? (!animation.value ? 2.5 : 4) : 0) + animation.value * 1.25 },
         { rotate: animation.value * -90 + 'deg' },
       ],
     };
@@ -74,6 +74,7 @@ const CoinDividerEditButton = ({ isSmallBalancesOpen, onPress }) => {
             opacity={1}
             size="lmedium"
             weight="bold"
+            style={{ marginTop: IS_ANDROID ? -4 : 0 }}
           >
             {isSmallBalancesOpen ? i18n.t(i18n.l.button.less) : i18n.t(i18n.l.button.all)}
           </AnimatedText>

src/components/coin-row/CollectiblesSendRow.tsx

@@ -1,5 +1,5 @@
 import React, { Fragment, useMemo } from 'react';
-import { PressableProps, TouchableWithoutFeedback } from 'react-native';
+import { PressableProps, TouchableWithoutFeedback, StyleSheet } from 'react-native';
 import { buildAssetUniqueIdentifier } from '../../helpers/assets';
 import { useTheme } from '../../theme/ThemeContext';
 import { deviceUtils, getUniqueTokenType, magicMemo } from '../../utils';
@@ -33,6 +33,7 @@ const BottomRow = ({ selected, subtitle }: { selected: boolean; subtitle: string
       letterSpacing="roundedMedium"
       size="smedium"
       weight={selected ? 'bold' : 'regular'}
+      style={sx.bottomRow}
     >
       {subtitle}
     </TruncatedText>
@@ -137,6 +138,12 @@ const CollectiblesSendRow = React.memo(
   (props, nextProps) => buildAssetUniqueIdentifier(props.item) !== buildAssetUniqueIdentifier(nextProps.item)
 );
 
+const sx = StyleSheet.create({
+  bottomRow: {
+    marginTop: ios ? 0 : -6,
+  },
+});
+
 CollectiblesSendRow.displayName = 'CollectiblesSendRow';
 // @ts-expect-error
 CollectiblesSendRow.dividerHeight = dividerHeight;

src/components/coin-row/SendCoinRow.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { TouchableWithoutFeedback } from 'react-native';
+import { StyleSheet, TouchableWithoutFeedback } from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
 import { useTheme } from '../../theme/ThemeContext';
 import { deviceUtils } from '../../utils';
@@ -49,6 +49,7 @@ const BottomRow = ({ balance, native, nativeCurrencySymbol, selected, showNative
       numberOfLines={1}
       size="smedium"
       weight={selected ? 'bold' : 'regular'}
+      style={sx.bottomRow}
     >
       {showNativeValue
         ? `${fiatValue} available`
@@ -133,14 +134,23 @@ const SendCoinRow = ({
           children
         ) : (
           <NativeAmountBubble>
-            <NativeAmountBubbleText>{fiatValueFormatted}</NativeAmountBubbleText>
+            <NativeAmountBubbleText style={sx.nativeAmountBubbleText}>{fiatValueFormatted}</NativeAmountBubbleText>
           </NativeAmountBubble>
         )}
       </CoinRow>
     </Wrapper>
   );
 };
 
+const sx = StyleSheet.create({
+  nativeAmountBubbleText: {
+    marginTop: android ? -2.5 : 0,
+  },
+  bottomRow: {
+    marginTop: android ? -6 : 0,
+  },
+});
+
 SendCoinRow.displayName = 'SendCoinRow';
 SendCoinRow.selectedHeight = selectedHeight;
 

src/components/contacts/ContactRow.js

@@ -16,6 +16,7 @@ import styled from '@/styled-thing';
 import { margin } from '@/styles';
 import { addressHashedColorIndex, addressHashedEmoji } from '@/utils/profileUtils';
 import * as i18n from '@/languages';
+import { StyleSheet } from 'react-native';
 
 const ContactAddress = styled(TruncatedAddress).attrs(({ theme: { colors }, lite }) => ({
   align: 'left',
@@ -44,7 +45,7 @@ const ContactName = styled(TruncatedText).attrs(({ lite }) => ({
   size: 'lmedium',
   weight: lite ? 'regular' : 'medium',
 }))({
-  height: 22,
+  height: ios ? 22 : 26,
   width: ({ deviceWidth }) => deviceWidth - 90,
 });
 
@@ -53,6 +54,12 @@ const css = {
   symmetrical: margin.object(9.5, 19),
 };
 
+const sx = StyleSheet.create({
+  bottomRowText: {
+    marginTop: ios ? 0 : -4.5,
+  },
+});
+
 const ContactRow = ({ address, color, nickname, symmetricalMargins, ...props }, ref) => {
   const profilesEnabled = useExperimentalFlag(PROFILES);
   const { width: deviceWidth } = useDimensions();
@@ -132,7 +139,12 @@ const ContactRow = ({ address, color, nickname, symmetricalMargins, ...props },
                   {isValidDomainFormat(address) ? address : abbreviations.address(address, 4, 6)}
                 </ContactName>
               )}
-              <BottomRowText color={colors.alpha(colors.blueGreyDark, 0.5)} letterSpacing="roundedMedium" weight="medium">
+              <BottomRowText
+                style={sx.bottomRowText}
+                color={colors.alpha(colors.blueGreyDark, 0.5)}
+                letterSpacing="roundedMedium"
+                weight="medium"
+              >
                 {balanceText}
               </BottomRowText>
             </Fragment>