ui: hide background when a modal opens on Android devices.

src/components/templates/BottomSheetAddWalletToList/index.tsx

@@ -12,12 +12,13 @@ import { AddWalletToList, AddWalletToListProps } from '../AddWalletToList';
 
 interface BottomSheetAddWalletToListProps extends AddWalletToListProps {
   title: string;
+  onClose: () => void;
 }
 
 export const BottomSheetAddWalletToList = forwardRef<
   BottomSheetRef,
   BottomSheetAddWalletToListProps
->(({ title, ...addWalletToListProps }, ref) => {
+>(({ title, onClose, ...addWalletToListProps }, ref) => {
   const { t } = useTranslation();
 
   const createGroupRef = useRef<BottomSheetRef>(null);
@@ -35,6 +36,7 @@ export const BottomSheetAddWalletToList = forwardRef<
 
   return (
     <BottomSheet
+      onClose={onClose}
       ref={ref}
       height={DEVICE_HEIGHT * 0.58}
       swiperIconVisible={true}

src/components/templates/ExplorerAccount/index.tsx

@@ -13,6 +13,7 @@ import { styles } from './styles';
 import { BottomSheetAddWalletToList } from '../BottomSheetAddWalletToList';
 
 interface ExplorerAccountProps {
+  setBottomStub?: (param: boolean) => void;
   account: ExplorerAccount;
   listInfoVisible?: boolean;
   nameVisible?: boolean;
@@ -23,7 +24,10 @@ export const ExplorerAccountView = ({
   account,
   listInfoVisible,
   nameVisible,
-  onToggleWatchlist
+  onToggleWatchlist,
+  setBottomStub = () => {
+    // do nothing
+  }
 }: ExplorerAccountProps): JSX.Element => {
   const { t } = useTranslation();
 
@@ -44,9 +48,13 @@ export const ExplorerAccountView = ({
 
   const showAddToList = () => {
     addToListModal.current?.show();
+    setTimeout(() => {
+      setBottomStub(true);
+    }, 450);
   };
 
   const hideAddToList = () => {
+    setBottomStub(false);
     setTimeout(() => addToListModal.current?.dismiss(), 250);
   };
 
@@ -232,7 +240,9 @@ export const ExplorerAccountView = ({
           </Button>
         </Row>
       </ScrollView>
+
       <BottomSheetAddWalletToList
+        onClose={() => setBottomStub(false)}
         ref={addToListModal}
         title={t('address.add.to.group')}
         wallet={account}

src/screens/Address/index.tsx

@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import React, { useRef, useState } from 'react';
 import { Platform, View } from 'react-native';
 import { RouteProp, useRoute } from '@react-navigation/native';
 import { useTranslation } from 'react-i18next';
@@ -22,7 +22,13 @@ import {
   useTransactionsOfAccount,
   useWatchlist
 } from '@hooks';
-import { StringUtils, NumberUtils, scale, verticalScale } from '@utils';
+import {
+  StringUtils,
+  NumberUtils,
+  scale,
+  verticalScale,
+  isAndroid
+} from '@utils';
 import { styles } from './styles';
 
 const TRANSACTION_LIMIT = 50;
@@ -54,6 +60,7 @@ export const AddressDetails = (): JSX.Element => {
   const { watchlist } = useWatchlist();
   const editModal = useRef<BottomSheetRef>(null);
   const shareModal = useRef<BottomSheetRef>(null);
+  const [showBottomUnderModalStub, setBottomUnderModalStub] = useState(false);
 
   const walletInWatchlist = watchlist.find((w) => w.address === address);
   const finalAccount = walletInWatchlist || account;
@@ -94,6 +101,12 @@ export const AddressDetails = (): JSX.Element => {
   //   shareModal.current?.show();
   // };
 
+  const setShowStub = (value: boolean) => {
+    if (isAndroid) {
+      setBottomUnderModalStub(value);
+    }
+  };
+
   const onToggleWatchlist = (isOnWatchlist: boolean) => {
     Toast.hide();
     const toastMessage = isOnWatchlist
@@ -139,6 +152,7 @@ export const AddressDetails = (): JSX.Element => {
         }
       />
       <ExplorerAccountView
+        setBottomStub={setShowStub}
         account={finalAccount}
         nameVisible={true}
         onToggleWatchlist={onToggleWatchlist}
@@ -177,6 +191,7 @@ export const AddressDetails = (): JSX.Element => {
         last24HourChange={ambPrice?.percentChange24H || 0}
         timestamp={ambPrice?.timestamp || new Date()}
       />
+      {isAndroid && showBottomUnderModalStub && <View style={styles.stub} />}
     </SafeAreaView>
   );
 };

src/screens/Address/styles.ts

@@ -1,5 +1,6 @@
 import { StyleSheet } from 'react-native';
 import { COLORS } from '@constants/colors';
+import { DEVICE_HEIGHT } from '@constants/variables';
 import { moderateScale, scale } from '@utils';
 
 export const styles = StyleSheet.create({
@@ -23,5 +24,12 @@ export const styles = StyleSheet.create({
     backgroundColor: COLORS.brand100,
     height: moderateScale(36),
     width: moderateScale(36)
+  },
+  stub: {
+    width: '100%',
+    height: DEVICE_HEIGHT * 0.5,
+    backgroundColor: COLORS.neutral0,
+    position: 'absolute',
+    bottom: 0
   }
 });