diff --git a/example/src/assets/countries.ts b/example/src/assets/countries.ts
new file mode 100644
index 000000000..a07515ad8
--- /dev/null
+++ b/example/src/assets/countries.ts
@@ -0,0 +1,61 @@
+/*
+ * Copyright (c) 2024 Adyen N.V.
+ * This file is open source and available under the MIT license.
+ * See the LICENSE file for more info.
+ */
+
+export type CountryInfo = {
+  name: string;
+  currency: string;
+};
+
+export const COUNTRY_DATA: Record<string, CountryInfo> = {
+  AE: { name: 'United Arab Emirates', currency: 'AED' },
+  AT: { name: 'Austria', currency: 'EUR' },
+  AU: { name: 'Australia', currency: 'AUD' },
+  BE: { name: 'Belgium', currency: 'EUR' },
+  BR: { name: 'Brazil', currency: 'BRL' },
+  CA: { name: 'Canada', currency: 'CAD' },
+  CH: { name: 'Switzerland', currency: 'CHF' },
+  CN: { name: 'China', currency: 'CNY' },
+  CZ: { name: 'Czech Republic', currency: 'CZK' },
+  DE: { name: 'Germany', currency: 'EUR' },
+  DK: { name: 'Denmark', currency: 'DKK' },
+  ES: { name: 'Spain', currency: 'EUR' },
+  FI: { name: 'Finland', currency: 'EUR' },
+  FR: { name: 'France', currency: 'EUR' },
+  GB: { name: 'United Kingdom', currency: 'GBP' },
+  HK: { name: 'Hong Kong', currency: 'HKD' },
+  ID: { name: 'Indonesia', currency: 'IDR' },
+  IN: { name: 'India', currency: 'INR' },
+  IT: { name: 'Italy', currency: 'EUR' },
+  JP: { name: 'Japan', currency: 'JPY' },
+  KE: { name: 'Kenya', currency: 'KES' },
+  KR: { name: 'South Korea', currency: 'KRW' },
+  MX: { name: 'Mexico', currency: 'MXN' },
+  MY: { name: 'Malaysia', currency: 'MYR' },
+  NL: { name: 'Netherlands', currency: 'EUR' },
+  NO: { name: 'Norway', currency: 'NOK' },
+  NZ: { name: 'New Zealand', currency: 'NZD' },
+  PH: { name: 'Philippines', currency: 'PHP' },
+  PL: { name: 'Poland', currency: 'PLN' },
+  PT: { name: 'Portugal', currency: 'EUR' },
+  RU: { name: 'Russia', currency: 'RUB' },
+  SE: { name: 'Sweden', currency: 'SEK' },
+  SG: { name: 'Singapore', currency: 'SGD' },
+  TH: { name: 'Thailand', currency: 'THB' },
+  US: { name: 'United States', currency: 'USD' },
+  VN: { name: 'Vietnam', currency: 'VND' },
+  ZA: { name: 'South Africa', currency: 'ZAR' },
+};
+
+export const COUNTRY_CODES = Object.keys(COUNTRY_DATA);
+
+export const getCountryLabel = (countryCode: string): string => {
+  const data = COUNTRY_DATA[countryCode];
+  return data ? `${data.name} - ${data.currency}` : countryCode;
+};
+
+export const getCurrency = (countryCode: string): string | undefined => {
+  return COUNTRY_DATA[countryCode]?.currency;
+};
diff --git a/example/src/components/Checkout/components/PaymentMethodsView.tsx b/example/src/components/Checkout/components/PaymentMethodsView.tsx
index 88d2b4a0f..68ef7875f 100644
--- a/example/src/components/Checkout/components/PaymentMethodsView.tsx
+++ b/example/src/components/Checkout/components/PaymentMethodsView.tsx
@@ -1,6 +1,6 @@
 import { useAdyenCheckout } from '@adyen/react-native';
-import { View, Text, ScrollView, ActivityIndicator } from 'react-native';
-import Styles from '../../common/Styles';
+import { Text, ActivityIndicator } from 'react-native';
+import PageScrollView from '../../common/PageScrollView';
 import PaymentMethodsList from './PaymentMethodsList';
 import DropInButton from './DropInButton';
 import PlatformPayButton from './PlatformPayButton';
@@ -37,7 +37,7 @@ const PaymentMethods = (prop: PaymentMethodsProps) => {
   }
 
   return (
-    <ScrollView>
+    <PageScrollView>
       {showDropIn && <DropInButton />}
 
       {showEmbeddedComponents && (
@@ -54,9 +54,7 @@ const PaymentMethods = (prop: PaymentMethodsProps) => {
       {showDropinBasedComponents && (
         <PaymentMethodsList paymentMethods={paymentMethods.paymentMethods} />
       )}
-
-      <View style={Styles.scrollBottomPadding} />
-    </ScrollView>
+    </PageScrollView>
   );
 };
 
diff --git a/example/src/components/Settings/ApplePaySettingsView.tsx b/example/src/components/Settings/ApplePaySettingsView.tsx
index 8690b3f7f..85e66ea6f 100644
--- a/example/src/components/Settings/ApplePaySettingsView.tsx
+++ b/example/src/components/Settings/ApplePaySettingsView.tsx
@@ -1,10 +1,11 @@
 import { useCallback, useState } from 'react';
-import { Button, ScrollView, View } from 'react-native';
+import { Button, View } from 'react-native';
 import { useAppContext } from '../../hooks/useAppContext';
 import Styles from '../common/Styles';
 import FormToggle from '../common/FormToggle';
 import FormTextInput from '../common/FormTextInput';
-import FormDropdown from '../common/FormDropdown';
+import FormDropdown from './common/FormDropdown';
+import PageScrollView from '../common/PageScrollView';
 import { ENVIRONMENT } from '../../Configuration';
 import type { ApplePaySettings } from '../../settings/types';
 import type { NativeStackScreenProps } from '@react-navigation/native-stack';
@@ -54,7 +55,7 @@ const ApplePaySettingsView = ({ navigation }: Props) => {
   ]);
 
   return (
-    <ScrollView style={Styles.page}>
+    <PageScrollView>
       <FormTextInput
         title="Merchant ID"
         value={merchantID}
@@ -79,7 +80,7 @@ const ApplePaySettingsView = ({ navigation }: Props) => {
       <View style={Styles.formAction}>
         <Button title="Save" onPress={saveAndGoBack} />
       </View>
-    </ScrollView>
+    </PageScrollView>
   );
 };
 
diff --git a/example/src/components/Settings/CardSettingsView.tsx b/example/src/components/Settings/CardSettingsView.tsx
index b6a627adf..05999820c 100644
--- a/example/src/components/Settings/CardSettingsView.tsx
+++ b/example/src/components/Settings/CardSettingsView.tsx
@@ -1,9 +1,10 @@
 import { useCallback, useState } from 'react';
-import { Button, ScrollView, View } from 'react-native';
+import { Button, View } from 'react-native';
 import { useAppContext } from '../../hooks/useAppContext';
 import Styles from '../common/Styles';
 import FormToggle from '../common/FormToggle';
-import FormDropdown from '../common/FormDropdown';
+import FormDropdown from './common/FormDropdown';
+import PageScrollView from '../common/PageScrollView';
 import type { CardSettings } from '../../settings/types';
 import type { NativeStackScreenProps } from '@react-navigation/native-stack';
 import type { SettingsStackParamList } from './SettingsNavigator';
@@ -73,7 +74,7 @@ const CardSettingsView = ({ navigation }: Props) => {
   ]);
 
   return (
-    <ScrollView style={Styles.page}>
+    <PageScrollView>
       <FormToggle
         title="Holder Name Required"
         value={holderNameRequired}
@@ -121,7 +122,7 @@ const CardSettingsView = ({ navigation }: Props) => {
       <View style={Styles.formAction}>
         <Button title="Save" onPress={saveAndGoBack} />
       </View>
-    </ScrollView>
+    </PageScrollView>
   );
 };
 
diff --git a/example/src/components/Settings/DropInSettingsView.tsx b/example/src/components/Settings/DropInSettingsView.tsx
index 015b0697b..5298f1ae8 100644
--- a/example/src/components/Settings/DropInSettingsView.tsx
+++ b/example/src/components/Settings/DropInSettingsView.tsx
@@ -1,9 +1,10 @@
 import { useCallback, useState } from 'react';
-import { Button, ScrollView, View } from 'react-native';
+import { Button, View } from 'react-native';
 import { useAppContext } from '../../hooks/useAppContext';
 import Styles from '../common/Styles';
 import FormToggle from '../common/FormToggle';
 import FormTextInput from '../common/FormTextInput';
+import PageScrollView from '../common/PageScrollView';
 import type { NativeStackScreenProps } from '@react-navigation/native-stack';
 import type { SettingsStackParamList } from './SettingsNavigator';
 
@@ -44,7 +45,7 @@ const DropInSettingsView = ({ navigation }: Props) => {
   ]);
 
   return (
-    <ScrollView style={Styles.page}>
+    <PageScrollView>
       <FormToggle
         title="Show Preselected Stored Payment"
         value={showPreselected}
@@ -69,7 +70,7 @@ const DropInSettingsView = ({ navigation }: Props) => {
       <View style={Styles.formAction}>
         <Button title="Save" onPress={saveAndGoBack} />
       </View>
-    </ScrollView>
+    </PageScrollView>
   );
 };
 
diff --git a/example/src/components/Settings/GooglePaySettingsView.tsx b/example/src/components/Settings/GooglePaySettingsView.tsx
index 2dba9fe68..b21b6967c 100644
--- a/example/src/components/Settings/GooglePaySettingsView.tsx
+++ b/example/src/components/Settings/GooglePaySettingsView.tsx
@@ -1,9 +1,10 @@
 import { useCallback, useState } from 'react';
-import { Button, ScrollView, View } from 'react-native';
+import { Button, View } from 'react-native';
 import { useAppContext } from '../../hooks/useAppContext';
 import Styles from '../common/Styles';
 import FormToggle from '../common/FormToggle';
-import FormDropdown from '../common/FormDropdown';
+import FormDropdown from './common/FormDropdown';
+import PageScrollView from '../common/PageScrollView';
 import type { GooglePaySettings } from '../../settings/types';
 import type { NativeStackScreenProps } from '@react-navigation/native-stack';
 import type { SettingsStackParamList } from './SettingsNavigator';
@@ -70,7 +71,7 @@ const GooglePaySettingsView = ({ navigation }: Props) => {
   ]);
 
   return (
-    <ScrollView style={Styles.page}>
+    <PageScrollView>
       <FormToggle
         title="Allow Prepaid Cards"
         value={allowPrepaidCards}
@@ -110,7 +111,7 @@ const GooglePaySettingsView = ({ navigation }: Props) => {
       <View style={Styles.formAction}>
         <Button title="Save" onPress={saveAndGoBack} />
       </View>
-    </ScrollView>
+    </PageScrollView>
   );
 };
 
diff --git a/example/src/components/Settings/SettingsView.tsx b/example/src/components/Settings/SettingsView.tsx
index 931a9fb8f..6091437dc 100644
--- a/example/src/components/Settings/SettingsView.tsx
+++ b/example/src/components/Settings/SettingsView.tsx
@@ -1,11 +1,18 @@
 import { useCallback, useMemo, useState } from 'react';
 import { useAppContext } from '../../hooks/useAppContext';
 import Styles from '../common/Styles';
-import { Button, ScrollView, TouchableOpacity, View } from 'react-native';
+import { Button, TouchableOpacity, View } from 'react-native';
 import FormTextInput from '../common/FormTextInput';
+import FormSearchDropdown from './common/FormSearchDropdown';
+import PageScrollView from '../common/PageScrollView';
 import AdaptiveText from '../common/AdaptiveText';
 import type { NativeStackScreenProps } from '@react-navigation/native-stack';
 import type { SettingsStackParamList } from './SettingsNavigator';
+import {
+  COUNTRY_CODES,
+  getCountryLabel,
+  getCurrency,
+} from '../../assets/countries';
 
 type Props = NativeStackScreenProps<SettingsStackParamList, 'GeneralSettings'>;
 
@@ -14,7 +21,6 @@ const SettingView = ({ navigation }: Props) => {
 
   const [countryCode, setCountryCode] = useState(configuration.countryCode);
   const [amount, setAmount] = useState(String(configuration.amount));
-  const [currency, setCurrency] = useState(configuration.currency);
   const [merchantAccount, setMerchantAccount] = useState(
     configuration.merchantAccount
   );
@@ -25,6 +31,8 @@ const SettingView = ({ navigation }: Props) => {
     configuration.shopperLocale
   );
 
+  const currency = getCurrency(countryCode) ?? configuration.currency;
+
   const settings = useMemo(
     () => ({
       ...configuration,
@@ -52,18 +60,13 @@ const SettingView = ({ navigation }: Props) => {
   }, [settings, save, navigateToRoot]);
 
   return (
-    <ScrollView style={Styles.page}>
-      <FormTextInput
+    <PageScrollView>
+      <FormSearchDropdown
         title="Country"
         value={countryCode}
-        maxLength={2}
-        onChangeText={setCountryCode}
-      />
-      <FormTextInput
-        title="Currency"
-        value={currency}
-        maxLength={3}
-        onChangeText={setCurrency}
+        options={COUNTRY_CODES}
+        onChange={setCountryCode}
+        labelExtractor={getCountryLabel}
       />
       <FormTextInput
         title="Amount"
@@ -127,7 +130,7 @@ const SettingView = ({ navigation }: Props) => {
       <View style={Styles.formAction}>
         <Button title="Save" onPress={saveAndClose} />
       </View>
-    </ScrollView>
+    </PageScrollView>
   );
 };
 
diff --git a/example/src/components/Settings/common/DropdownTrigger.tsx b/example/src/components/Settings/common/DropdownTrigger.tsx
new file mode 100644
index 000000000..eb071b508
--- /dev/null
+++ b/example/src/components/Settings/common/DropdownTrigger.tsx
@@ -0,0 +1,42 @@
+import { type PropsWithChildren } from 'react';
+import { TouchableOpacity, View, useColorScheme } from 'react-native';
+import Styles from '../../common/Styles';
+import AdaptiveText from '../../common/AdaptiveText';
+import Colors from '../../common/Assets';
+
+type DropdownTriggerProps = {
+  title: string;
+  label: string;
+  onPress: () => void;
+};
+
+const DropdownTrigger = ({
+  title,
+  label,
+  onPress,
+  children,
+}: PropsWithChildren<DropdownTriggerProps>) => {
+  const isDarkMode = useColorScheme() === 'dark';
+  const backgroundColor = isDarkMode
+    ? Colors.textBackgroundDark
+    : Colors.textBackgroundLight;
+  const textColor = isDarkMode ? Colors.textDark : Colors.textLight;
+
+  return (
+    <View>
+      <AdaptiveText style={Styles.paddedTitle}>{title}</AdaptiveText>
+      <TouchableOpacity
+        style={[Styles.dropdown, { backgroundColor }]}
+        onPress={onPress}
+      >
+        <AdaptiveText style={Styles.dropdownText}>{label}</AdaptiveText>
+        <AdaptiveText style={[Styles.dropdownText, { color: textColor }]}>
+          {'›'}
+        </AdaptiveText>
+      </TouchableOpacity>
+      {children}
+    </View>
+  );
+};
+
+export default DropdownTrigger;
diff --git a/example/src/components/Settings/common/FormDropdown.tsx b/example/src/components/Settings/common/FormDropdown.tsx
new file mode 100644
index 000000000..8fbcec487
--- /dev/null
+++ b/example/src/components/Settings/common/FormDropdown.tsx
@@ -0,0 +1,101 @@
+import { useCallback, useState } from 'react';
+import {
+  TouchableOpacity,
+  Pressable,
+  Modal,
+  FlatList,
+  useColorScheme,
+} from 'react-native';
+import Styles from '../../common/Styles';
+import AdaptiveText from '../../common/AdaptiveText';
+import Colors from '../../common/Assets';
+import DropdownTrigger from './DropdownTrigger';
+
+const defaultLabelExtractor = (v: string): string => v;
+
+type FormDropdownProps<T extends string> = {
+  title: string;
+  value: T;
+  options: readonly T[];
+  onChange: (value: T) => void;
+  labelExtractor?: (value: T) => string;
+};
+
+const FormDropdown = <T extends string>({
+  title,
+  value,
+  options,
+  onChange,
+  labelExtractor = defaultLabelExtractor,
+}: FormDropdownProps<T>) => {
+  const [visible, setVisible] = useState(false);
+  const isDarkMode = useColorScheme() === 'dark';
+
+  const backgroundColor = isDarkMode
+    ? Colors.textBackgroundDark
+    : Colors.textBackgroundLight;
+  const textColor = isDarkMode ? Colors.textDark : Colors.textLight;
+
+  const handleClose = useCallback(() => setVisible(false), []);
+
+  const handleSelect = useCallback(
+    (item: T) => {
+      onChange(item);
+      handleClose();
+    },
+    [onChange, handleClose]
+  );
+
+  const renderItem = useCallback(
+    ({ item }: { item: T }) => (
+      <TouchableOpacity
+        style={[
+          Styles.dropdownItem,
+          item === value && Styles.dropdownItemSelected,
+        ]}
+        onPress={() => handleSelect(item)}
+      >
+        <AdaptiveText
+          style={[
+            Styles.dropdownText,
+            { color: textColor },
+            item === value && Styles.dropdownItemSelectedText,
+          ]}
+        >
+          {labelExtractor(item)}
+        </AdaptiveText>
+      </TouchableOpacity>
+    ),
+    [value, textColor, labelExtractor, handleSelect]
+  );
+
+  return (
+    <DropdownTrigger
+      title={title}
+      label={labelExtractor(value)}
+      onPress={() => setVisible(true)}
+    >
+      <Modal
+        visible={visible}
+        transparent
+        animationType="fade"
+        onRequestClose={handleClose}
+      >
+        <Pressable style={Styles.dropdownOverlay} onPress={handleClose}>
+          <Pressable
+            onPress={() => {}}
+            style={[Styles.dropdownMenu, { backgroundColor }]}
+          >
+            <FlatList
+              data={options}
+              keyExtractor={(item) => item}
+              renderItem={renderItem}
+            />
+          </Pressable>
+        </Pressable>
+      </Modal>
+    </DropdownTrigger>
+  );
+};
+
+export default FormDropdown;
diff --git a/example/src/components/Settings/common/FormSearchDropdown.tsx b/example/src/components/Settings/common/FormSearchDropdown.tsx
new file mode 100644
index 000000000..d891272a5
--- /dev/null
+++ b/example/src/components/Settings/common/FormSearchDropdown.tsx
@@ -0,0 +1,135 @@
+import { useCallback, useMemo, useState } from 'react';
+import {
+  TouchableOpacity,
+  Modal,
+  FlatList,
+  TextInput,
+  View,
+  useColorScheme,
+} from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import Styles from '../../common/Styles';
+import AdaptiveText from '../../common/AdaptiveText';
+import Colors from '../../common/Assets';
+import DropdownTrigger from './DropdownTrigger';
+
+const defaultLabelExtractor = (v: string): string => v;
+
+type FormSearchDropdownProps<T extends string> = {
+  title: string;
+  value: T;
+  options: readonly T[];
+  onChange: (value: T) => void;
+  labelExtractor?: (value: T) => string;
+};
+
+const FormSearchDropdown = <T extends string>({
+  title,
+  value,
+  options,
+  onChange,
+  labelExtractor = defaultLabelExtractor,
+}: FormSearchDropdownProps<T>) => {
+  const [visible, setVisible] = useState(false);
+  const [searchQuery, setSearchQuery] = useState('');
+  const isDarkMode = useColorScheme() === 'dark';
+
+  const backgroundColor = isDarkMode
+    ? Colors.textBackgroundDark
+    : Colors.textBackgroundLight;
+  const modalBackground = isDarkMode ? '#1c1c1e' : '#f2f2f7';
+  const textColor = isDarkMode ? Colors.textDark : Colors.textLight;
+
+  const filteredOptions = useMemo(() => {
+    if (!searchQuery) return options;
+    const query = searchQuery.toLowerCase();
+    return options.filter((item) =>
+      (labelExtractor(item) ?? '').toLowerCase().includes(query)
+    );
+  }, [options, searchQuery, labelExtractor]);
+
+  const handleClose = useCallback(() => {
+    setVisible(false);
+    setSearchQuery('');
+  }, []);
+
+  const handleSelect = useCallback(
+    (item: T) => {
+      onChange(item);
+      handleClose();
+    },
+    [onChange, handleClose]
+  );
+
+  const renderItem = useCallback(
+    ({ item }: { item: T }) => (
+      <TouchableOpacity
+        style={[
+          Styles.dropdownItem,
+          item === value && Styles.dropdownItemSelected,
+        ]}
+        onPress={() => handleSelect(item)}
+      >
+        <AdaptiveText
+          style={[
+            Styles.dropdownText,
+            { color: textColor },
+            item === value && Styles.dropdownItemSelectedText,
+          ]}
+        >
+          {labelExtractor(item)}
+        </AdaptiveText>
+      </TouchableOpacity>
+    ),
+    [value, textColor, labelExtractor, handleSelect]
+  );
+
+  return (
+    <DropdownTrigger
+      title={title}
+      label={labelExtractor(value)}
+      onPress={() => setVisible(true)}
+    >
+      <Modal
+        visible={visible}
+        animationType="slide"
+        onRequestClose={handleClose}
+      >
+        <SafeAreaView
+          style={[Styles.fullScreenModal, { backgroundColor: modalBackground }]}
+        >
+          <View style={Styles.fullScreenHeader}>
+            <TouchableOpacity onPress={handleClose}>
+              <AdaptiveText style={Styles.fullScreenCancel}>
+                Cancel
+              </AdaptiveText>
+            </TouchableOpacity>
+            <AdaptiveText style={Styles.fullScreenTitle}>{title}</AdaptiveText>
+            <View style={Styles.fullScreenHeaderSpacer} />
+          </View>
+          <View style={[Styles.searchContainer, { backgroundColor }]}>
+            <TextInput
+              style={[Styles.searchInput, { color: textColor }]}
+              placeholder="Search..."
+              placeholderTextColor="#999"
+              value={searchQuery}
+              onChangeText={setSearchQuery}
+              autoCorrect={false}
+              autoCapitalize="none"
+            />
+          </View>
+          <FlatList
+            data={filteredOptions}
+            keyExtractor={(item) => item}
+            renderItem={renderItem}
+            style={Styles.fullScreenList}
+            keyboardShouldPersistTaps="handled"
+            keyboardDismissMode="on-drag"
+          />
+        </SafeAreaView>
+      </Modal>
+    </DropdownTrigger>
+  );
+};
+
+export default FormSearchDropdown;
diff --git a/example/src/components/common/FormDropdown.tsx b/example/src/components/common/FormDropdown.tsx
deleted file mode 100644
index 1da4ac459..000000000
--- a/example/src/components/common/FormDropdown.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-import { useState } from 'react';
-import {
-  View,
-  TouchableOpacity,
-  Modal,
-  FlatList,
-  useColorScheme,
-} from 'react-native';
-import Styles from './Styles';
-import AdaptiveText from './AdaptiveText';
-import Colors from './Assets';
-
-type FormDropdownProps<T extends string> = {
-  title: string;
-  value: T;
-  options: T[];
-  onChange: (value: T) => void;
-};
-
-const FormDropdown = <T extends string>({
-  title,
-  value,
-  options,
-  onChange,
-}: FormDropdownProps<T>) => {
-  const [visible, setVisible] = useState(false);
-  const isDarkMode = useColorScheme() === 'dark';
-
-  const backgroundColor = isDarkMode
-    ? Colors.textBackgroundDark
-    : Colors.textBackgroundLight;
-  const textColor = isDarkMode ? Colors.textDark : Colors.textLight;
-
-  return (
-    <View>
-      <AdaptiveText style={Styles.paddedTitle}>{title}</AdaptiveText>
-      <TouchableOpacity
-        style={[Styles.dropdown, { backgroundColor }]}
-        onPress={() => setVisible(true)}
-      >
-        <AdaptiveText style={Styles.dropdownText}>{value}</AdaptiveText>
-      </TouchableOpacity>
-      <Modal
-        visible={visible}
-        transparent
-        animationType="fade"
-        onRequestClose={() => setVisible(false)}
-      >
-        <TouchableOpacity
-          style={Styles.dropdownOverlay}
-          activeOpacity={1}
-          onPress={() => setVisible(false)}
-        >
-          <View style={[Styles.dropdownMenu, { backgroundColor }]}>
-            <FlatList
-              data={options}
-              keyExtractor={(item) => item}
-              renderItem={({ item }) => (
-                <TouchableOpacity
-                  style={[
-                    Styles.dropdownItem,
-                    item === value && Styles.dropdownItemSelected,
-                  ]}
-                  onPress={() => {
-                    onChange(item);
-                    setVisible(false);
-                  }}
-                >
-                  <AdaptiveText
-                    style={[
-                      Styles.dropdownText,
-                      { color: textColor },
-                      item === value && Styles.dropdownItemSelectedText,
-                    ]}
-                  >
-                    {item}
-                  </AdaptiveText>
-                </TouchableOpacity>
-              )}
-            />
-          </View>
-        </TouchableOpacity>
-      </Modal>
-    </View>
-  );
-};
-
-export default FormDropdown;
diff --git a/example/src/components/common/PageScrollView.tsx b/example/src/components/common/PageScrollView.tsx
new file mode 100644
index 000000000..46b961898
--- /dev/null
+++ b/example/src/components/common/PageScrollView.tsx
@@ -0,0 +1,22 @@
+import { useMemo, type PropsWithChildren } from 'react';
+import { ScrollView } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import Styles from './Styles';
+
+const PageScrollView = ({ children }: PropsWithChildren) => {
+  const insets = useSafeAreaInsets();
+  const contentContainerStyle = useMemo(
+    () => ({ paddingBottom: Math.max(insets.bottom, 16) }),
+    [insets.bottom]
+  );
+  return (
+    <ScrollView
+      style={Styles.page}
+      contentContainerStyle={contentContainerStyle}
+    >
+      {children}
+    </ScrollView>
+  );
+};
+
+export default PageScrollView;
diff --git a/example/src/components/common/Styles.ts b/example/src/components/common/Styles.ts
index 805f2ec1f..6ac602bcd 100644
--- a/example/src/components/common/Styles.ts
+++ b/example/src/components/common/Styles.ts
@@ -133,6 +133,9 @@ const Styles = StyleSheet.create({
     marginHorizontal: 16,
     padding: 12,
     borderRadius: 8,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
   },
   dropdownText: {
     fontSize: 16,
@@ -164,6 +167,42 @@ const Styles = StyleSheet.create({
     color: '#007AFF',
     fontWeight: '600',
   },
+  fullScreenModal: {
+    flex: 1,
+  },
+  fullScreenHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    borderBottomWidth: 1,
+    borderBottomColor: 'rgba(0, 0, 0, 0.1)',
+  },
+  fullScreenTitle: {
+    fontSize: 17,
+    fontWeight: '600',
+  },
+  fullScreenCancel: {
+    fontSize: 17,
+    color: '#007AFF',
+  },
+  fullScreenHeaderSpacer: {
+    width: 60,
+  },
+  searchContainer: {
+    marginHorizontal: 16,
+    marginVertical: 8,
+    borderRadius: 10,
+    paddingHorizontal: 12,
+  },
+  searchInput: {
+    fontSize: 16,
+    paddingVertical: 10,
+  },
+  fullScreenList: {
+    flex: 1,
+  },
 });
 
 export default Styles;