diff --git a/apps/native-component-list/src/screens/SecureStoreScreen.tsx b/apps/native-component-list/src/screens/SecureStoreScreen.tsx index 8c338b8ec03bac..45009cb745e35c 100644 --- a/apps/native-component-list/src/screens/SecureStoreScreen.tsx +++ b/apps/native-component-list/src/screens/SecureStoreScreen.tsx @@ -37,6 +37,7 @@ function SecureStoreView() { const [value, setValue] = React.useState(); const [service, setService] = React.useState(); const [requireAuth, setRequireAuth] = React.useState(false); + const [requireConfirmation, setRequireConfirmation] = React.useState(true); const [byteSize, setByteSize] = React.useState('4096'); const storeOptions = React.useMemo( @@ -44,17 +45,14 @@ function SecureStoreView() { keychainService: service, requireAuthentication: requireAuth, authenticationPrompt: requireAuth ? 'Authenticate' : undefined, + ...(Platform.OS === 'android' ? { requireConfirmation } : {}), }), - [requireAuth, service] + [requireAuth, requireConfirmation, service] ); async function storeValueAsync(value: string, key: string) { try { - await SecureStore.setItemAsync(key, value, { - keychainService: service, - requireAuthentication: requireAuth, - authenticationPrompt: 'Authenticate', - }); + await SecureStore.setItemAsync(key, value, storeOptions); Alert.alert('Success!', 'Value: ' + value + ', stored successfully for key: ' + key, [ { text: 'OK', onPress: () => {} }, ]); @@ -65,11 +63,7 @@ function SecureStoreView() { function storeValue(value: string, key: string) { try { - SecureStore.setItem(key, value, { - keychainService: service, - requireAuthentication: requireAuth, - authenticationPrompt: 'Authenticate', - }); + SecureStore.setItem(key, value, storeOptions); Alert.alert('Success!', 'Value: ' + value + ', stored successfully for key: ' + key, [ { text: 'OK', onPress: () => {} }, ]); @@ -80,11 +74,7 @@ function SecureStoreView() { async function getValueAsync(key: string) { try { - const fetchedValue = await SecureStore.getItemAsync(key, { - keychainService: service, - requireAuthentication: requireAuth, - authenticationPrompt: 'Authenticate', - }); + const fetchedValue = await SecureStore.getItemAsync(key, storeOptions); Alert.alert('Success!', 'Fetched value: ' + fetchedValue, [ { text: 'OK', onPress: () => {} }, ]); @@ -95,11 +85,7 @@ function SecureStoreView() { function getValue(key: string) { try { - const fetchedValue = SecureStore.getItem(key, { - keychainService: service, - requireAuthentication: requireAuth, - authenticationPrompt: 'Authenticate', - }); + const fetchedValue = SecureStore.getItem(key, storeOptions); Alert.alert('Success!', 'Fetched value: ' + fetchedValue, [ { text: 'OK', onPress: () => {} }, ]); @@ -184,10 +170,18 @@ function SecureStoreView() { Can use biometric authentication: {SecureStore.canUseBiometricAuthentication().toString()} {SecureStore.canUseBiometricAuthentication() && ( - - Requires authentication: - - + <> + + Requires authentication: + + + {Platform.OS === 'android' && requireAuth && ( + + Requires confirmation: + + + )} + )} {value && key && ( storeValueAsync(value, key)} title="Store value with key" /> diff --git a/apps/native-component-list/src/screens/UI/ModifiersScreen.ios.tsx b/apps/native-component-list/src/screens/UI/ModifiersScreen.ios.tsx index 6f0e466878ee49..8b094cfb56b7fa 100644 --- a/apps/native-component-list/src/screens/UI/ModifiersScreen.ios.tsx +++ b/apps/native-component-list/src/screens/UI/ModifiersScreen.ios.tsx @@ -682,6 +682,35 @@ export default function ModifiersScreen() { /> +
+ + System default padding on every edge + + + + System default on top, 24 points on the sides, none at the bottom + + + + System default on every edge except the leading one + +
+ {/* New Modifier System Demo Section */}
{/* Basic Appearance Modifiers */} diff --git a/docs/pages/versions/unversioned/sdk/ui/universal/bottomsheet.mdx b/docs/pages/versions/unversioned/sdk/ui/universal/bottomsheet.mdx index 0ecf649e80db8c..4db33549fc229c 100644 --- a/docs/pages/versions/unversioned/sdk/ui/universal/bottomsheet.mdx +++ b/docs/pages/versions/unversioned/sdk/ui/universal/bottomsheet.mdx @@ -68,6 +68,36 @@ export default function BottomSheetNoIndicatorExample() { } ``` +### Content padding + +The sheet insets its content by default. Pass [`contentPadding`](#contentpadding) to change that inset — `0` lets a row, image, or divider reach the sheet's edges. + +```tsx BottomSheetContentPaddingExample.tsx +import { useState } from 'react'; +import { Host, BottomSheet, Button, Column, Text } from '@expo/ui'; + +export default function BottomSheetContentPaddingExample() { + const [isPresented, setIsPresented] = useState(false); + + return ( + +