src/view/com/util/images/ImageHorzList.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

import React from 'react'
import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native'
import {Image} from 'expo-image'
import {AppBskyEmbedImages} from '@atproto/api'

interface Props {
  images: AppBskyEmbedImages.ViewImage[]
  style?: StyleProp<ViewStyle>
}

export function ImageHorzList({images, style}: Props) {
  return (
    <View style={[styles.flexRow, style]}>
      {images.map(({thumb, alt}) => (
        <Image
          key={thumb}
          source={{uri: thumb}}
          style={styles.image}
          accessible={true}
          accessibilityIgnoresInvertColors
          accessibilityHint={alt}
          accessibilityLabel=""
        />
      ))}
    </View>
  )
}

const styles = StyleSheet.create({
  flexRow: {flexDirection: 'row'},
  image: {
    width: 100,
    height: 100,
    borderRadius: 4,
    marginRight: 5,
  },
})