Welcome to react-native-gallery-view 👋

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

🏠 Homepage

Install

1npm install react-native-gallery-view

Usage

1import React, { useState } from 'react';
2import { SafeAreaView, ScrollView, Text } from 'react-native';
3import { Gallery } from 'react-native-gallery-view';
4
5export default App = ({ navigation, route, navigator }) => {
6  const [images, setImages] = useState([{
7    src: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQRpGmKrfBFE90_MyomlXre9OJhLyjMvfGm5w&usqp=CAU",
8    id: "12345"
9  }, {
10    src: "https://st.depositphotos.com/1007995/1274/i/600/depositphotos_12746726-stock-photo-fashion-man-wearing- sunglasses-thinking.jpg",
11    id: "12346"
12  }, {
13    src: "https://i.pinimg.com/736x/36/fc/e9/36fce9ed325c3303d858b01257bd76c3.jpg",
14    id: "12347"
15  }]);
16
17  return (
18    <SafeAreaView
19      style={{
20        flex: 1
21      }}
22      
23    >
24      <ScrollView
25        style={{
26          flex: 1,
27        }}
28        showsVerticalScrollIndicator={false}
29     >
30        {/* Basic Usage */}
31        <Text
32          style={{
33            fontSize: 20,
34            textAlign: "center",
35            marginVertical: 20
36          }}
37        >
38          Basic Usage for React Native Gallery View
39        </Text>
40        <Gallery
41          images={images}
42          activeIndex={0}
43          navigator={navigator}
44        />
45
46        {/* Basic Usage */}
47        <Text
48          style={{
49            fontSize: 20,
50            textAlign: "center",
51            marginVertical: 20
52          }}
53        >
54          Customized usage of React Native Gallery View
55        </Text>
56        <Gallery
57          thumbnailImageStyles={{
58            height: 100,
59            width: 100,
60            borderRadius: 15,
61          }}
62          mainImageStyle={{
63            height: 200,
64          }}
65          loaderColor="yellow"
66          borderColor="orange"
67          images={images}
68          activeIndex={0}
69          navigator={navigator}
70          noImageFoundText={"No Image found custom text"}
71        />
72      </ScrollView>
73    </SafeAreaView>
74  )
75}
76

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

Author

👤 Hari Karthyk (harikarthyk1407@gmail.com)

• Website: https://harikarthyk.com/
• Github: @HariKarthyk
• LinkedIn: @harikarthyk

🤝 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 (harikarthyk1407@gmail.com).
This project is ISC licensed.