NitroImageTab.tsx

import { useMemo } from 'react'
import { FlatList, StyleSheet, Text, View } from 'react-native'
import { NitroImage } from 'react-native-nitro-image'
import { createImageURLs } from './createImageURLs'

export function NitroImageTab() {
  const imageURLs = useMemo(() => createImageURLs(), [])

  return (
    <View>
      <Text>NitroImage Tab</Text>
      <FlatList
        numColumns={4}
        windowSize={3}
        data={imageURLs}
        keyExtractor={(url) => url}
        renderItem={({ item: url }) => (
          <NitroImage
            image={{ url: url }}
            recyclingKey={url}
            style={styles.image}
            resizeMode="cover"
          />
        )}
      />
    </View>
  )
}

const styles = StyleSheet.create({
  image: {
    width: '25%',
    aspectRatio: 1,
  },
})