tf-checkout-react-native 2.0.0-beta.5 → 2.0.0-beta.7

package/src/sections/discussion/CommentImages.tsx

@@ -59,6 +59,16 @@ const LoadedImage = ({
   return (
     <Image
       source={{ uri: image.data }}
+      accessible={full}
+      accessibilityLabel={
+        full
+          ? t('Image {{number}} of {{total}}', {
+              number: index + 1,
+              total: comment.images.length,
+            })
+          : undefined
+      }
+      accessibilityLiveRegion={full ? 'polite' : undefined}
       style={s.image}
       resizeMode={full ? 'contain' : 'cover'}
     />
@@ -72,12 +82,14 @@ export const CommentImages = ({
   previewKey,
   onPreviewChange,
   locale,
+  renderCloseIcon,
 }: {
   eventId: string
   comment: EventComment
   previewKey?: string
   onPreviewChange: (open: boolean) => void
   locale?: string
+  renderCloseIcon?: (color: string) => React.ReactNode
 }) => {
   const t = useAccountT(locale)
   const theme = useTheme()
@@ -140,19 +152,23 @@ export const CommentImages = ({
         >
           <View style={s.preview}>
             <View style={s.toolbar}>
-              <Text accessibilityLiveRegion="polite" style={white}>
-                {t('Image {{number}} of {{total}}', {
-                  number: position + 1,
-                  total: images.length,
-                })}
-              </Text>
               <Pressable
                 accessibilityRole="button"
                 accessibilityLabel={t('Close image')}
-                style={s.navButton}
+                style={s.closeButton}
                 onPress={() => setSelected(null)}
               >
-                <Text style={white}>{t('Close')}</Text>
+                <View
+                  pointerEvents="none"
+                  accessible={false}
+                  importantForAccessibility="no-hide-descendants"
+                >
+                  {renderCloseIcon ? (
+                    renderCloseIcon('#9F9CB0')
+                  ) : (
+                    <Text style={[white, s.closeGlyph]}>×</Text>
+                  )}
+                </View>
               </Pressable>
             </View>
             <View style={s.full}>
@@ -306,11 +322,19 @@ const s = StyleSheet.create({
   preview: {
     flex: 1,
     backgroundColor: 'rgba(11,10,21,0.96)',
-    paddingTop: 60,
+    paddingTop: 53,
     paddingBottom: 40,
     paddingHorizontal: 16,
   },
-  toolbar: { flexDirection: 'row', justifyContent: 'space-between', padding: 12 },
+  toolbar: { flexDirection: 'row', justifyContent: 'flex-end' },
+  closeButton: {
+    width: 44,
+    height: 44,
+    marginRight: -10,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  closeGlyph: { fontSize: 28, lineHeight: 28, color: '#9F9CB0', textAlign: 'center' },
   full: { flex: 1, width: '100%' },
   white: { color: '#EBEBEE', fontSize: 16 },
   navButton: {

package/src/sections/index.ts

@@ -26,3 +26,15 @@ export * from './TicketGift'
 
 export { AccountRewardsSection } from './AccountRewards'
 export * from './PostReaction'
+export {
+  Streaming,
+  StreamingView,
+  type StreamingProps,
+  type StreamingProvider,
+} from './Streaming'
+
+export {
+  AccountDeletion,
+  AccountDeletionView,
+  type AccountDeletionProps,
+} from './AccountDeletion'