| ... | ... | @@ -14,7 +14,12 @@ import { useSafeAreaInsets } from "react-native-safe-area-context"; |
| 14 | 14 | import { AndroidScreenHeader } from "../../components/AndroidScreenHeader"; |
| 15 | 15 | import { SymbolView } from "../../components/AppSymbol"; |
| 16 | 16 | import { AppText as Text, AppTextInput as TextInput } from "../../components/AppText"; |
| 17 | | import { NativeStackScreenOptions } from "../../native/StackHeader"; |
| 17 | import { NativeHeaderToolbar, NativeStackScreenOptions } from "../../native/StackHeader"; |
| 18 | import { |
| 19 | createNativeMailSearchToolbarItem, |
| 20 | NATIVE_MAIL_SEARCH_TOOLBAR_CONTENT_INSET, |
| 21 | NATIVE_MAIL_SEARCH_TOOLBAR_SUPPORTED, |
| 22 | } from "../layout/native-mail-search-toolbar"; |
| 18 | 23 | import { getMobileThirdPartyLicenses } from "./mobileThirdPartyLicenses"; |
| 19 | 24 | |
| 20 | 25 | function useMobileThirdPartyLicenses() { |
| ... | ... | @@ -65,6 +70,7 @@ export function SettingsOpenSourceLicensesRouteScreen() { |
| 65 | 70 | const navigation = useNavigation(); |
| 66 | 71 | const insets = useSafeAreaInsets(); |
| 67 | 72 | const [query, setQuery] = useState(""); |
| 73 | const usesNativeMailSearchToolbar = Platform.OS === "ios" && NATIVE_MAIL_SEARCH_TOOLBAR_SUPPORTED; |
| 68 | 74 | const manifest = useMobileThirdPartyLicenses(); |
| 69 | 75 | const entries = manifest?.entries ?? []; |
| 70 | 76 | const filteredEntries = useMemo( |
| ... | ... | @@ -109,6 +115,39 @@ export function SettingsOpenSourceLicensesRouteScreen() { |
| 109 | 115 | |
| 110 | 116 | return ( |
| 111 | 117 | <View collapsable={false} className="flex-1 bg-sheet"> |
| 118 | {Platform.OS === "ios" ? ( |
| 119 | <NativeStackScreenOptions |
| 120 | options={{ |
| 121 | unstable_headerToolbarItems: usesNativeMailSearchToolbar |
| 122 | ? () => [ |
| 123 | createNativeMailSearchToolbarItem({ |
| 124 | onSearchTextChange: setQuery, |
| 125 | placeholder: "Search packages", |
| 126 | searchTextChangeId: "open-source-licenses-search-text", |
| 127 | showsSearchDismissButton: true, |
| 128 | }), |
| 129 | ] |
| 130 | : undefined, |
| 131 | headerSearchBarOptions: usesNativeMailSearchToolbar |
| 132 | ? undefined |
| 133 | : { |
| 134 | allowToolbarIntegration: true, |
| 135 | autoCapitalize: "none", |
| 136 | hideNavigationBar: false, |
| 137 | hideWhenScrolling: false, |
| 138 | obscureBackground: false, |
| 139 | onCancelButtonPress: () => setQuery(""), |
| 140 | onChangeText: (event) => setQuery(event.nativeEvent.text), |
| 141 | placeholder: "Search packages", |
| 142 | }, |
| 143 | }} |
| 144 | /> |
| 145 | ) : null} |
| 146 | {Platform.OS === "ios" && !usesNativeMailSearchToolbar ? ( |
| 147 | <NativeHeaderToolbar placement="bottom"> |
| 148 | <NativeHeaderToolbar.SearchBarSlot /> |
| 149 | </NativeHeaderToolbar> |
| 150 | ) : null} |
| 112 | 151 | {Platform.OS === "android" ? ( |
| 113 | 152 | <> |
| 114 | 153 | <NativeStackScreenOptions options={{ headerShown: false }} /> |
| ... | ... | @@ -117,7 +156,13 @@ export function SettingsOpenSourceLicensesRouteScreen() { |
| 117 | 156 | ) : null} |
| 118 | 157 | <LegendList |
| 119 | 158 | className="flex-1" |
| 120 | | contentContainerStyle={{ paddingBottom: Math.max(insets.bottom, 18) + 18 }} |
| 159 | contentContainerStyle={{ |
| 160 | paddingBottom: usesNativeMailSearchToolbar |
| 161 | ? NATIVE_MAIL_SEARCH_TOOLBAR_CONTENT_INSET + 18 |
| 162 | : Platform.OS === "ios" |
| 163 | ? 18 |
| 164 | : Math.max(insets.bottom, 18) + 18, |
| 165 | }} |
| 121 | 166 | contentInsetAdjustmentBehavior="automatic" |
| 122 | 167 | data={filteredEntries} |
| 123 | 168 | estimatedItemSize={78} |
| ... | ... | @@ -132,26 +177,20 @@ export function SettingsOpenSourceLicensesRouteScreen() { |
| 132 | 177 | </View> |
| 133 | 178 | } |
| 134 | 179 | ListHeaderComponent={ |
| 135 | | <View className="gap-4 px-5 pt-4 pb-5"> |
| 136 | | <Text className="text-base leading-normal text-foreground-muted"> |
| 137 | | Notices for dependencies, assets, and optional tools used by T3 Code Mobile. |
| 138 | | </Text> |
| 139 | | <TextInput |
| 140 | | accessibilityLabel="Search open-source licenses" |
| 141 | | autoCapitalize="none" |
| 142 | | autoCorrect={false} |
| 143 | | clearButtonMode="while-editing" |
| 144 | | onChangeText={setQuery} |
| 145 | | placeholder="Search packages" |
| 146 | | returnKeyType="search" |
| 147 | | value={query} |
| 148 | | /> |
| 149 | | <Text className="tabular-nums text-sm text-foreground-muted"> |
| 150 | | {filteredEntries.length === entries.length |
| 151 | | ? `${String(entries.length)} notices` |
| 152 | | : `${String(filteredEntries.length)} of ${String(entries.length)} notices`} |
| 153 | | </Text> |
| 154 | | </View> |
| 180 | Platform.OS !== "ios" ? ( |
| 181 | <View className="px-5 pt-4 pb-5"> |
| 182 | <TextInput |
| 183 | accessibilityLabel="Search open-source licenses" |
| 184 | autoCapitalize="none" |
| 185 | autoCorrect={false} |
| 186 | clearButtonMode="while-editing" |
| 187 | onChangeText={setQuery} |
| 188 | placeholder="Search packages" |
| 189 | returnKeyType="search" |
| 190 | value={query} |
| 191 | /> |
| 192 | </View> |
| 193 | ) : null |
| 155 | 194 | } |
| 156 | 195 | renderItem={renderItem} |
| 157 | 196 | showsVerticalScrollIndicator={false} |