@binarapps/react-native-images-gallery

images gallery component

Installation

Expo

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

yarn add @binarapps/react-native-images-gallery

via npm

npm install @binarapps/react-native-images-gallery

React native

via Yarn

yarn add react-native-gesture-handler @shopify/flash-list react-native-reanimated react-native-safe-area-context

yarn add @binarapps/react-native-images-gallery

via npm

npm install react-native-gesture-handler @shopify/flash-list react-native-reanimated react-native-redash react-native-safe-area-context

npm install @binarapps/react-native-images-gallery

Add Reanimated's Babel plugin to your babel.config.js:

  module.exports = {
    presets: [
      ...
    ],
    plugins: [
      ...
      'react-native-reanimated/plugin',
    ],
  };

Wrap your app with SafeAreaProvider

import { SafeAreaProvider } from 'react-native-safe-area-context';

function App() {
  return <SafeAreaProvider>...</SafeAreaProvider>;
}

Examples

Usage with images

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 (
    <SafeAreaProvider>
      <View style={styles.container}>
        {isGalleryVisible && (
          <Gallery
            handleCloseGallery={() => setIsGalleryVisible(false)}
            images={images}
          />
        )}
        {!isGalleryVisible && (
          <TouchableOpacity onPress={() => setIsGalleryVisible(true)}>
            <Text>Open Gallery</Text>
          </TouchableOpacity>
        )}
      </View>
    </SafeAreaProvider>
  );
}

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 - @oscris1
• Mateusz Rostkowski - @MateuszRostkowski

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

---

Made with create-react-native-library