https://github.com/binarapps/react-native-images-gallery
Gallery component for react native apps
https://github.com/binarapps/react-native-images-gallery
Last synced: 5 months ago
JSON representation
Gallery component for react native apps
- Host: GitHub
- URL: https://github.com/binarapps/react-native-images-gallery
- Owner: binarapps
- License: mit
- Created: 2022-10-25T08:30:02.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-07-11T15:28:05.000Z (almost 3 years ago)
- Last Synced: 2025-09-05T23:02:03.532Z (10 months ago)
- Language: TypeScript
- Size: 1020 KB
- Stars: 9
- Watchers: 5
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# @binarapps/react-native-images-gallery
[](https://github.com/tterb/atomic-design-ui/blob/master/LICENSEs)
[](https://img.shields.io/npm/v/@binarapps/react-native-images-gallery?style=flat-square)
[](https://img.shields.io/npm/dt/@binarapps/react-native-images-gallery?style=flat-square)
[](https://img.shields.io/github/stars/binarapps/react-native-images-gallery?style=flat-square)
[](https://expo.dev/client)
images gallery component
## Installation
Expo
```bash
expo install react-native-gesture-handler @shopify/flash-list react-native-reanimated react-native-safe-area-context
## only if using expo-dev-client
expo prebuild
```
#### via Yarn
```bash
yarn add @binarapps/react-native-images-gallery
```
#### via npm
```sh
npm install @binarapps/react-native-images-gallery
```
React native
#### via Yarn
```sh
yarn add react-native-gesture-handler @shopify/flash-list react-native-reanimated react-native-safe-area-context
```
```sh
yarn add @binarapps/react-native-images-gallery
```
#### via npm
```sh
npm install react-native-gesture-handler @shopify/flash-list react-native-reanimated react-native-redash react-native-safe-area-context
```
```sh
npm install @binarapps/react-native-images-gallery
```
#### Add Reanimated's Babel plugin to your babel.config.js:
```js
module.exports = {
presets: [
...
],
plugins: [
...
'react-native-reanimated/plugin',
],
};
```
### Wrap your app with SafeAreaProvider
```js
import { SafeAreaProvider } from 'react-native-safe-area-context';
function App() {
return ...;
}
```
## Examples
### Usage with images
```js
import * as React from 'react';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { StyleSheet, View, Text, TouchableOpacity } from 'react-native';
import Gallery from '@binarapps/react-native-images-gallery';
export default function App() {
const [isGalleryVisible, setIsGalleryVisible] = React.useState(false);
const images = [
{
uri: 'https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/640px-Image_created_with_a_mobile_phone.png',
name: 'name',
description: 'string',
},
{
uri: 'https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg',
name: 'name',
description: 'string',
},
];
return (
{isGalleryVisible && (
setIsGalleryVisible(false)}
images={images}
/>
)}
{!isGalleryVisible && (
setIsGalleryVisible(true)}>
Open Gallery
)}
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
});
```
## Troubleshooting
### Cannot convert undefined or null to Object in JavaScript
Change node version to v16.18.0
https://apple.stackexchange.com/questions/171530/how-do-i-downgrade-node-or-install-a-specific-previous-version-using-homebrew
## Contributors
- [Damian Piętka](https://www.github.com/oscris1) - @oscris1
- [Mateusz Rostkowski](https://www.github.com/MateuszRostkowski) - @MateuszRostkowski
## Contributing
See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
## License
MIT
---
Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)