Welcome to react-native-gallery-view 👋
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 |
Author
👤 Hari Karthyk (harikarthyk1407@gmail.com)
🤝 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.
