React-native-gallery-view NPM

Gallery View for Images in React Native for both IOS and Android

Install

npm install react-native-gallery-view

Usage

import React, { useState } from 'react';
import { SafeAreaView, ScrollView, Text } from 'react-native';
import { Gallery } from 'react-native-gallery-view';

export default App = ({ navigation, route, navigator }) => {
  const [images, setImages] = useState([{
    src: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQRpGmKrfBFE90_MyomlXre9OJhLyjMvfGm5w&usqp=CAU",
    id: "12345"
  }, {
    src: "https://st.depositphotos.com/1007995/1274/i/600/depositphotos_12746726-stock-photo-fashion-man-wearing- sunglasses-thinking.jpg",
    id: "12346"
  }, {
    src: "https://i.pinimg.com/736x/36/fc/e9/36fce9ed325c3303d858b01257bd76c3.jpg",
    id: "12347"
  }]);

  return (
    <SafeAreaView
      style={{
        flex: 1
      }}
      
    >
      <ScrollView
        style={{
          flex: 1,
        }}
        showsVerticalScrollIndicator={false}
     >
        {/* Basic Usage */}
        <Text
          style={{
            fontSize: 20,
            textAlign: "center",
            marginVertical: 20
          }}
        >
          Basic Usage for React Native Gallery View
        </Text>
        <Gallery
          images={images}
          activeIndex={0}
          navigator={navigator}
        />

        {/* Basic Usage */}
        <Text
          style={{
            fontSize: 20,
            textAlign: "center",
            marginVertical: 20
          }}
        >
          Customized usage of React Native Gallery View
        </Text>
        <Gallery
          thumbnailImageStyles={{
            height: 100,
            width: 100,
            borderRadius: 15,
          }}
          mainImageStyle={{
            height: 200,
          }}
          loaderColor="yellow"
          borderColor="orange"
          images={images}
          activeIndex={0}
          navigator={navigator}
          noImageFoundText={"No Image found custom text"}
        />
      </ScrollView>
    </SafeAreaView>
  )
}

Demo

list of available props for customization SliderBox:

Props	Value Type	Description
loaderColor	String Eg. "#000000"	Color for Lazy Loader in Main Image. default color is black
borderColor	String Eg. "red"	border color for the active Thumbnail Image. Default is red
thumbnailImageStyles	Object Eg. {height: 80 , width : 80}	Styling for the thumbnail images
mainImageStyle	Object Eg. {height: 250 , width : "90%"}	Styling for the Main image
noImageFoundText	String Eg. "No Images found"	Custom Text for Empty Images