React Native Gallery

react-native-gallery.js

import React from 'react';
import {
  FlatList,
  View,
  StyleSheet,
  Image,
  Dimensions,
  TouchableOpacity,
} from 'react-native';

const {width, height} = Dimensions.get('screen');
const photos = [
  {
    uri:
      'https://images.pexels.com/photos/912110/pexels-photo-912110.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',
  },
  {
    uri:
      'https://images.pexels.com/photos/158827/field-corn-air-frisch-158827.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500',
  },
  {
    uri:
      'https://images.pexels.com/photos/66997/pexels-photo-66997.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',
  },
  {
    uri:
      'https://images.pexels.com/photos/127577/nature-stars-night-galaxy-127577.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',
  },
  {
    uri:
      'https://images.pexels.com/photos/1544880/pexels-photo-1544880.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',
  },
];
const IMAGE_SIZE = 80;
const SPACING = 12;
const Gallery = () => {
  const [activeIndex, setActiveIndex] = React.useState(0);
  const topRef = React.useRef();
  const bottomRef = React.useRef();
  const scrollToIndex = (index) => {
    setActiveIndex(index);
    topRef?.current?.scrollToOffset({
      offset: index * width,
      animated: true,
    });
    const offset = index * (IMAGE_SIZE + SPACING) - IMAGE_SIZE / 2;
    if (offset > width / 2) {
      bottomRef?.current?.scrollToOffset({offset, animated: true});
    } else {
      bottomRef?.current?.scrollToOffset({offset: 0, animated: true});
    }
  };
  return (
    <View>
      <FlatList
        data={photos}
        keyExtractor={(item) => item.uri}
        pagingEnabled
        horizontal
        ref={topRef}
        showsHorizontalScrollIndicator={false}
        onMomentumScrollEnd={(ev) => {
          scrollToIndex(Math.floor(ev.nativeEvent.contentOffset.x / width));
        }}
        renderItem={({item}) => {
          return (
            <View style={{width, height}}>
              <Image source={{uri: item.uri}} style={StyleSheet.absoluteFill} />
            </View>
          );
        }}
      />
      <FlatList
        style={{position: 'absolute', bottom: IMAGE_SIZE / 2}}
        contentContainerStyle={{paddingHorizontal: SPACING * 2}}
        data={photos}
        showsHorizontalScrollIndicator={false}
        horizontal
        ref={bottomRef}
        keyExtractor={(item) => item.uri}
        renderItem={({item, index}) => {
          return (
            <TouchableOpacity
              onPress={() => {
                scrollToIndex(index);
              }}>
              <Image
                source={{uri: item.uri}}
                style={{
                  width: IMAGE_SIZE,
                  height: IMAGE_SIZE,
                  borderRadius: 12,
                  borderWidth: 2,
                  borderColor: index === activeIndex ? '#fff' : null,
                  marginRight: SPACING,
                }}
              />
            </TouchableOpacity>
          );
        }}
      />
    </View>
  );
};

export default Gallery;