diff --git a/apps/mobile/src/features/settings/SettingsOpenSourceLicensesRouteScreen.tsx b/apps/mobile/src/features/settings/SettingsOpenSourceLicensesRouteScreen.tsx index 48be8d4408dc..16cb39e4b8cb 100644 --- a/apps/mobile/src/features/settings/SettingsOpenSourceLicensesRouteScreen.tsx +++ b/apps/mobile/src/features/settings/SettingsOpenSourceLicensesRouteScreen.tsx @@ -14,7 +14,12 @@ import { useSafeAreaInsets } from "react-native-safe-area-context"; import { AndroidScreenHeader } from "../../components/AndroidScreenHeader"; import { SymbolView } from "../../components/AppSymbol"; import { AppText as Text, AppTextInput as TextInput } from "../../components/AppText"; -import { NativeStackScreenOptions } from "../../native/StackHeader"; +import { NativeHeaderToolbar, NativeStackScreenOptions } from "../../native/StackHeader"; +import { + createNativeMailSearchToolbarItem, + NATIVE_MAIL_SEARCH_TOOLBAR_CONTENT_INSET, + NATIVE_MAIL_SEARCH_TOOLBAR_SUPPORTED, +} from "../layout/native-mail-search-toolbar"; import { getMobileThirdPartyLicenses } from "./mobileThirdPartyLicenses"; function useMobileThirdPartyLicenses() { @@ -65,6 +70,7 @@ export function SettingsOpenSourceLicensesRouteScreen() { const navigation = useNavigation(); const insets = useSafeAreaInsets(); const [query, setQuery] = useState(""); + const usesNativeMailSearchToolbar = Platform.OS === "ios" && NATIVE_MAIL_SEARCH_TOOLBAR_SUPPORTED; const manifest = useMobileThirdPartyLicenses(); const entries = manifest?.entries ?? []; const filteredEntries = useMemo( @@ -109,6 +115,39 @@ export function SettingsOpenSourceLicensesRouteScreen() { return ( + {Platform.OS === "ios" ? ( + [ + createNativeMailSearchToolbarItem({ + onSearchTextChange: setQuery, + placeholder: "Search packages", + searchTextChangeId: "open-source-licenses-search-text", + showsSearchDismissButton: true, + }), + ] + : undefined, + headerSearchBarOptions: usesNativeMailSearchToolbar + ? undefined + : { + allowToolbarIntegration: true, + autoCapitalize: "none", + hideNavigationBar: false, + hideWhenScrolling: false, + obscureBackground: false, + onCancelButtonPress: () => setQuery(""), + onChangeText: (event) => setQuery(event.nativeEvent.text), + placeholder: "Search packages", + }, + }} + /> + ) : null} + {Platform.OS === "ios" && !usesNativeMailSearchToolbar ? ( + + + + ) : null} {Platform.OS === "android" ? ( <> @@ -117,7 +156,13 @@ export function SettingsOpenSourceLicensesRouteScreen() { ) : null} } ListHeaderComponent={ - - - Notices for dependencies, assets, and optional tools used by T3 Code Mobile. - - - - {filteredEntries.length === entries.length - ? `${String(entries.length)} notices` - : `${String(filteredEntries.length)} of ${String(entries.length)} notices`} - - + Platform.OS !== "ios" ? ( + + + + ) : null } renderItem={renderItem} showsVerticalScrollIndicator={false}