Skip to content
This repository has been archived by the owner on Nov 27, 2023. It is now read-only.

Harikarthyk/react-native-gallery-view

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

26 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Welcome to react-native-gallery-view 👋

Version Documentation Maintenance

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

react-native-gallery-view.demo.mp4

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

Author

👤 Hari Karthyk ([email protected])

🤝 Contributing

Contributions, issues and feature requests are welcome!
Feel free to check issues page. You can also take a look at the contributing guide.

Show your support

Give a ⭐️ if this project helped you!

📝 License

Copyright © 2021 Hari Karthyk ([email protected]).
This project is ISC licensed.