64 lines
1.2 KiB
TypeScript
64 lines
1.2 KiB
TypeScript
import React from 'react'
|
|
import {
|
|
ActivityIndicator,
|
|
Image,
|
|
StyleSheet,
|
|
useWindowDimensions,
|
|
View,
|
|
} from 'react-native'
|
|
|
|
export function Component({
|
|
uris,
|
|
index,
|
|
isZooming,
|
|
}: {
|
|
uris: string[]
|
|
index: number
|
|
isZooming: boolean
|
|
}) {
|
|
const winDim = useWindowDimensions()
|
|
const left = index * winDim.width * -1
|
|
const spinnerStyle = React.useMemo(
|
|
() => ({
|
|
left: winDim.width / 2 - 20,
|
|
top: winDim.height / 2 - 50,
|
|
}),
|
|
[winDim.width, winDim.height],
|
|
)
|
|
return (
|
|
<View style={[styles.container, {left}]}>
|
|
<ActivityIndicator style={[styles.loading, spinnerStyle]} size="large" />
|
|
{uris.map((uri, i) => (
|
|
<Image
|
|
key={i}
|
|
style={[
|
|
styles.image,
|
|
{left: i * winDim.width},
|
|
isZooming && i !== index ? {opacity: 0} : undefined,
|
|
]}
|
|
source={{uri}}
|
|
/>
|
|
))}
|
|
</View>
|
|
)
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
position: 'absolute',
|
|
top: 0,
|
|
left: 0,
|
|
width: '100%',
|
|
},
|
|
loading: {
|
|
position: 'absolute',
|
|
},
|
|
image: {
|
|
position: 'absolute',
|
|
top: 200,
|
|
left: 0,
|
|
resizeMode: 'contain',
|
|
width: '100%',
|
|
aspectRatio: 1,
|
|
},
|
|
})
|