Reality2byte · pull · Aug 22, 2025 · Aug 22, 2025 · Aug 22, 2025
diff --git a/app/components/UI/CustomNetworkSelector/CustomNetworkSelector.styles.ts b/app/components/UI/CustomNetworkSelector/CustomNetworkSelector.styles.ts
@@ -6,6 +6,9 @@ const createStyles = () =>
     container: {
       flex: 1,
     },
+    scrollContentContainer: {
+      paddingBottom: 100,
+    },
     addNetworkButtonContainer: {
       paddingHorizontal: 16,
       paddingVertical: 12,

diff --git a/app/components/UI/CustomNetworkSelector/CustomNetworkSelector.tsx b/app/components/UI/CustomNetworkSelector/CustomNetworkSelector.tsx
@@ -1,6 +1,7 @@
 // third party dependencies
 import { ImageSourcePropType, TouchableOpacity, View } from 'react-native';
 import React, { useCallback } from 'react';
+import { ScrollView } from 'react-native-gesture-handler';
 import { FlashList, ListRenderItem } from '@shopify/flash-list';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useNavigation } from '@react-navigation/native';
@@ -128,7 +129,7 @@ const CustomNetworkSelector = ({ openModal }: CustomNetworkSelectorProps) => {
   );
 
   return (
-    <View style={styles.container}>
+    <ScrollView style={styles.container}>
       <FlashList
         data={networks}
         renderItem={renderNetworkItem}
@@ -140,7 +141,7 @@ const CustomNetworkSelector = ({ openModal }: CustomNetworkSelectorProps) => {
             safeAreaInsets.bottom + Device.getDeviceHeight() * 0.05,
         }}
       />
-    </View>
+    </ScrollView>
   );
 };
 

diff --git a/app/components/UI/NetworkMultiSelector/NetworkMultiSelector.styles.ts b/app/components/UI/NetworkMultiSelector/NetworkMultiSelector.styles.ts
@@ -4,7 +4,6 @@ import { Theme } from '../../../util/theme/models';
 const SELECT_ALL_MARGIN_LEFT = 0;
 const SELECT_ALL_MARGIN_VERTICAL = 12;
 const SELECT_ALL_PADDING_HORIZONTAL = 16;
-const BODY_CONTAINER_PADDING_BOTTOM = 4;
 const CUSTOM_NETWORK_PADDING_HORIZONTAL = 16;
 
 const stylesheet = (params: { theme: Theme }) => {
@@ -22,9 +21,11 @@ const stylesheet = (params: { theme: Theme }) => {
       paddingHorizontal: SELECT_ALL_PADDING_HORIZONTAL,
     },
     bodyContainer: {
-      paddingBottom: BODY_CONTAINER_PADDING_BOTTOM,
       flex: 1,
     },
+    scrollContentContainer: {
+      paddingBottom: 100,
+    },
     // custom network
     customNetworkContainer: {
       paddingHorizontal: CUSTOM_NETWORK_PADDING_HORIZONTAL,

diff --git a/app/components/UI/NetworkMultiSelector/NetworkMultiSelector.tsx b/app/components/UI/NetworkMultiSelector/NetworkMultiSelector.tsx
@@ -2,6 +2,7 @@
 import React, { useCallback, useState, useMemo, memo } from 'react';
 import { View } from 'react-native';
 import { KnownCaipNamespace, CaipChainId } from '@metamask/utils';
+import { ScrollView } from 'react-native-gesture-handler';
 
 // external dependencies
 import hideKeyFromUrl from '../../../util/hideKeyFromUrl';
@@ -168,8 +169,9 @@ const NetworkMultiSelector = ({ openModal }: NetworkMultiSelectorProps) => {
   );
 
   return (
-    <View
+    <ScrollView
       style={styles.bodyContainer}
+      contentContainerStyle={styles.scrollContentContainer}
       testID={NETWORK_MULTI_SELECTOR_TEST_IDS.CONTAINER}
     >
       {renderSelectAllCheckbox()}
@@ -180,7 +182,7 @@ const NetworkMultiSelector = ({ openModal }: NetworkMultiSelectorProps) => {
         onSelectNetwork={selectPopularNetwork}
         additionalNetworksComponent={additionalNetworksComponent}
       />
-    </View>
+    </ScrollView>
   );
 };
 

diff --git a/app/components/Views/BrowserTab/BrowserTab.tsx b/app/components/Views/BrowserTab/BrowserTab.tsx
@@ -1554,7 +1554,6 @@ export const BrowserTab: React.FC<BrowserTabProps> = React.memo(
                 onNewTabPress={onNewTabPress}
                 toggleOptionsIfNeeded={toggleOptionsIfNeeded}
                 activeUrl={resolvedUrlRef.current}
-                isHomepage={isHomepage}
                 getMaskedUrl={getMaskedUrl}
                 title={titleRef}
                 reload={reload}

diff --git a/app/components/Views/BrowserTab/components/Options/__snapshots__/index.test.tsx.snap b/app/components/Views/BrowserTab/components/Options/__snapshots__/index.test.tsx.snap
@@ -1,156 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Options should render homepage options correctly 1`] = `
-<View
-  accessibilityState={
-    {
-      "busy": undefined,
-      "checked": undefined,
-      "disabled": undefined,
-      "expanded": undefined,
-      "selected": undefined,
-    }
-  }
-  accessible={true}
-  focusable={true}
-  onClick={[Function]}
-  onResponderGrant={[Function]}
-  onResponderMove={[Function]}
-  onResponderRelease={[Function]}
-  onResponderTerminate={[Function]}
-  onResponderTerminationRequest={[Function]}
-  onStartShouldSetResponder={[Function]}
-  style={
-    {
-      "bottom": 0,
-      "left": 0,
-      "position": "absolute",
-      "right": 0,
-      "top": 0,
-      "zIndex": 99999998,
-    }
-  }
->
-  <View
-    style={
-      [
-        {
-          "backgroundColor": "#ffffff",
-          "borderColor": "#b7bbc8",
-          "borderRadius": 10,
-          "borderWidth": 1,
-          "paddingBottom": 5,
-          "paddingTop": 10,
-          "position": "absolute",
-          "width": 200,
-          "zIndex": 99999999,
-        },
-        {
-          "bottom": 90,
-          "right": 5,
-          "shadowColor": "#0000001a",
-          "shadowOffset": {
-            "height": 2,
-            "width": 0,
-          },
-          "shadowOpacity": 1,
-          "shadowRadius": 4,
-        },
-      ]
-    }
-    testID="browser-options-menu"
-  >
-    <TouchableOpacity
-      delayPressIn={50}
-      onPress={[MockFunction]}
-      style={
-        [
-          {
-            "alignItems": "center",
-            "backgroundColor": "#4459ff",
-            "borderRadius": 4,
-            "flex": 1,
-            "height": 40,
-            "justifyContent": "center",
-            "paddingHorizontal": 15,
-            "paddingVertical": 10,
-          },
-          {
-            "alignItems": "center",
-            "backgroundColor": "#ffffff",
-            "flexDirection": "row",
-            "height": "auto",
-            "justifyContent": "flex-start",
-            "marginTop": -5,
-            "minHeight": 44,
-            "paddingHorizontal": 15,
-            "paddingVertical": 10,
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          {
-            "alignSelf": "center",
-            "backgroundColor": "#4459ff1a",
-            "borderRadius": 5,
-            "flex": 0,
-            "marginRight": 10,
-            "padding": 3,
-          }
-        }
-      >
-        <Text
-          allowFontScaling={false}
-          selectable={false}
-          style={
-            [
-              {
-                "color": undefined,
-                "fontSize": 18,
-              },
-              {
-                "alignSelf": "center",
-                "color": "#4459ff",
-                "fontSize": 18,
-                "textAlign": "center",
-              },
-              {
-                "fontFamily": "Material Design Icons",
-                "fontStyle": "normal",
-                "fontWeight": "normal",
-              },
-              {},
-            ]
-          }
-        >
-          󰐕
-        </Text>
-      </View>
-      <Text
-        numberOfLines={1}
-        style={
-          {
-            "alignSelf": "center",
-            "color": "#4459ff",
-            "flex": 1,
-            "fontSize": 16,
-            "justifyContent": "center",
-            "lineHeight": 16,
-            "marginTop": 3,
-          }
-        }
-        testID="browser-options-menu-new-tab"
-      >
-        New tab
-      </Text>
-    </TouchableOpacity>
-  </View>
-</View>
-`;
-
-exports[`Options should render non-homepage options correctly 1`] = `
+exports[`Options should render options correctly 1`] = `
 <View
   accessibilityState={
     {

diff --git a/app/components/Views/BrowserTab/components/Options/index.test.tsx b/app/components/Views/BrowserTab/components/Options/index.test.tsx
@@ -46,18 +46,8 @@ describe('Options', () => {
     (useSelector as jest.Mock).mockReturnValue([]);
   });
 
-  it('should render non-homepage options correctly', () => {
+  it('should render options correctly', () => {
     const { toJSON } = render(<Options {...mockProps} />);
     expect(toJSON()).toMatchSnapshot();
   });
-
-  it('should render homepage options correctly', () => {
-    const homepageProps = {
-      ...mockProps,
-      isHomepage: jest.fn(() => true),
-    };
-
-    const { toJSON } = render(<Options {...homepageProps} />);
-    expect(toJSON()).toMatchSnapshot();
-  });
 });
diff --git a/app/components/Views/BrowserTab/components/Options/index.tsx b/app/components/Views/BrowserTab/components/Options/index.tsx
@@ -40,7 +40,6 @@ interface OptionsProps {
   onNewTabPress: () => void;
   toggleOptionsIfNeeded: () => void;
   activeUrl: string;
-  isHomepage: () => boolean;
   getMaskedUrl: (urlToMask: string, sessionENSNames: SessionENSNames) => string;
   title: MutableRefObject<string>;
   reload: () => void;
@@ -57,7 +56,6 @@ const Options = ({
   onNewTabPress,
   toggleOptionsIfNeeded,
   activeUrl,
-  isHomepage,
   getMaskedUrl,
   title,
   reload,
@@ -229,45 +227,6 @@ const Options = ({
     [activeUrl, onReloadPress, styles],
   );
 
-  /**
-   * Render non-homepage options menu
-   */
-  const renderNonHomeOptions = () => {
-    if (isHomepage()) return null;
-    return (
-      <React.Fragment>
-        {renderReloadOption()}
-        {!isBookmark() && (
-          <Button onPress={navigateToAddBookmark} style={styles.option}>
-            <View style={styles.optionIconWrapper}>
-              <Icon name="plus-square" size={16} style={styles.optionIcon} />
-            </View>
-            <Text
-              style={styles.optionText}
-              numberOfLines={2}
-              {...generateTestId(Platform, ADD_FAVORITES_OPTION)}
-            >
-              {strings('browser.add_to_favorites')}
-            </Text>
-          </Button>
-        )}
-        {renderShareOption()}
-        <Button onPress={openInBrowser} style={styles.option}>
-          <View style={styles.optionIconWrapper}>
-            <Icon name="expand" size={16} style={styles.optionIcon} />
-          </View>
-          <Text
-            style={styles.optionText}
-            numberOfLines={2}
-            {...generateTestId(Platform, OPEN_IN_BROWSER_OPTION)}
-          >
-            {strings('browser.open_in_browser')}
-          </Text>
-        </Button>
-      </React.Fragment>
-    );
-  };
-
   return (
     <TouchableWithoutFeedback onPress={toggleOptions}>
       <View style={styles.optionsOverlay}>
@@ -296,7 +255,34 @@ const Options = ({
               {strings('browser.new_tab')}
             </Text>
           </Button>
-          {renderNonHomeOptions()}
+          {renderReloadOption()}
+          {!isBookmark() && (
+            <Button onPress={navigateToAddBookmark} style={styles.option}>
+              <View style={styles.optionIconWrapper}>
+                <Icon name="plus-square" size={16} style={styles.optionIcon} />
+              </View>
+              <Text
+                style={styles.optionText}
+                numberOfLines={2}
+                {...generateTestId(Platform, ADD_FAVORITES_OPTION)}
+              >
+                {strings('browser.add_to_favorites')}
+              </Text>
+            </Button>
+          )}
+          {renderShareOption()}
+          <Button onPress={openInBrowser} style={styles.option}>
+            <View style={styles.optionIconWrapper}>
+              <Icon name="expand" size={16} style={styles.optionIcon} />
+            </View>
+            <Text
+              style={styles.optionText}
+              numberOfLines={2}
+              {...generateTestId(Platform, OPEN_IN_BROWSER_OPTION)}
+            >
+              {strings('browser.open_in_browser')}
+            </Text>
+          </Button>
         </View>
       </View>
     </TouchableWithoutFeedback>