0.1.4 • Published 3 years ago
@paraboly/react-native-gallery v0.1.4
Installation
Add the dependency:
npm i @paraboly/react-native-galleryPeer Dependencies
"@freakycoder/react-native-bounceable": "^0.2.4",
"@freakycoder/react-native-progressive-fast-image": "^0.2.2",
"react-native-easy-state-view": "^1.0.0",
"react-native-fast-image": "^8.3.4",
"react-native-spinkit": "^1.5.1"Usage
Import
import ImageGallery from "@paraboly/react-native-gallery";Fundamental Usage
<ImageGallery
data={galleryData}
loadingSource={require("./assets/spinner.gif")}
onPress={(itemIndex: number) => console.log("Item Index: ", itemIndex)}
/>Data Format
You should use this source data object format.
[
{
source: { uri: "" },
},
{
source: require("../path"),
},
];Example Array
[
{
"source": {
"uri": "https://images.unsplash.com/photo-1610960245237-cfab0dea6be4?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=700&q=80"
}
},
{
"source": {
"uri": "https://images.unsplash.com/photo-1611058619873-cbc8123debb3?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=630&q=80"
}
},
{
"source": {
"uri": "https://images.unsplash.com/photo-1611056162989-bcfcdefaae14?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80"
}
},
{
"source": {
"uri": "https://images.unsplash.com/photo-1611003229244-fa443d2a2a96?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"
}
},
{
"source": {
"uri": "https://images.unsplash.com/photo-1611001395253-b721fcff3666?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
}
},
{
"source": {
"uri": "https://images.unsplash.com/photo-1610981056460-c5c72ce4c8d0?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
}
},
{
"source": {
"uri": "https://images.unsplash.com/photo-1610970881699-44a5587cabec?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
}
},
{
"source": {
"uri": "https://images.unsplash.com/photo-1610659606489-77967e40fa35?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
}
},
{
"source": {
"uri": "https://images.unsplash.com/photo-1610981263015-ef95481e9ffb?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=675&q=80"
}
},
{
"source": {
"uri": "https://images.unsplash.com/photo-1610987653945-fe23ff170a2f?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
}
},
{
"source": {
"uri": "https://images.unsplash.com/photo-1610982408056-0cf21c1edb64?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80"
}
},
{
"source": {
"uri": "https://images.unsplash.com/photo-1610985738484-a3d5393a8a79?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=675&q=80"
}
}
]Example Project 😍
You can checkout the example project 🥰
Simply run
npm inpx pod-install(iOS Only)react-native run-ios/android
should work of the example project.
Configuration - Props
Fundamentals
| Property | Type | Default | Description |
|---|---|---|---|
| data | Array | undefined | set the image array data |
Customization (Optionals)
| Property | Type | Default | Description |
|---|---|---|---|
| onPress | function | undefined | set your own logic for the button functionality when it is pressed |
| style | ViewStyle | default | set or override the style object for the main container |
| listStyle | ViewStyle | default | set or override the style object for the FlatList style |
| listContentContainerStyle | ViewStyle | default | set or override the style object for the FlatList contentContainerStyle |
| defaultImageSource | image | default | change the default image source |
| emptyStateImageSource | image | default | change the empty state image source |
Future Plans
LICENSE- Write an article about the lib on Medium
Author
FreakyCoder, kurayogun@gmail.com
License
React Native Gallery is available under the MIT license. See the LICENSE file for more info.