react-native-photo-browser or react-native-image-viewer for galleries?

React Native Photo Browser is better for customizable grids and selection features, while react-native-image-viewer might be simpler for basic viewing. Photo Browser offers grid view, selection buttons, and extensive props, but lacks built-in zoom compared to some alternatives.

How to add sharing buttons to react-native-photo-browser?

Implement the onActionButton prop to trigger custom sharing logic using external libraries like react-native-share. The README recommends separate modules for sharing, as it doesn't provide this out of the box—check the Example project for a basic implementation.

Does react-native-photo-browser work with videos?

No, video support is not currently implemented and is listed on the roadmap. It only handles images via the mediaList array, so for video galleries, you'll need to use a different library or wait for future updates.

Can I customize the thumbnail grid layout?

Yes, use props like itemPerRow to set images per row, square for square thumbnails, and gridOffset for width adjustments. The Properties table in the README details these options for fine-tuning the grid appearance.

Is react-native-photo-browser performant with large image sets?

It may have performance issues with very large collections, as the roadmap includes 'Improve performance for bigger collections.' For optimal results, test with your specific data size and consider lazy loading or pagination if needed.

How to show captions with images?

Include a 'caption' field in each media object passed to mediaList. The gallery will display captions automatically in the full-screen view, as described in the Media Object section of the README.

Open-Awesome

react-native-photo-browser

MITJavaScriptv0.6.0

A full-screen image gallery component for React Native with grid view, selections, and captions.

GitHub

719 stars183 forks0 contributors

What is react-native-photo-browser?

React Native Photo Browser is a React Native library that provides a full-screen image gallery component with grid view, selection capabilities, and caption support. It solves the need for a customizable, native-like photo browsing experience in mobile apps, handling both local and remote media efficiently.

Target Audience

React Native developers building mobile applications that require image galleries, such as social media apps, photo management tools, or e-commerce product displays.

Value Proposition

Developers choose this library for its MWPhotoBrowser-inspired design, extensive customization options, and reliable cross-platform support, avoiding the need to build a gallery from scratch.

Overview

Local and remote media gallery with captions, selections and grid view support for react native.

Use Cases

Best For

Adding a photo gallery to a React Native social media app
Displaying product images in an e-commerce mobile application
Building a custom photo management tool with selection features
Creating a media-rich portfolio or showcase app
Implementing a thumbnail grid view for browsing image collections
Developing apps that require sharing or action buttons on images

Not Ideal For

Apps requiring video playback integrated into the gallery viewer
Projects that need pinch-to-zoom or advanced image manipulation features
Applications with extremely large image collections where performance is critical
Teams wanting out-of-the-box sharing functionality without additional dependencies

Pros & Cons

Pros

Cross-Platform Consistency

Fully supports both iOS and Android with the same API, ensuring a uniform experience across devices. The README confirms 'The component has both iOS and Android support.'

Highly Customizable UI

Offers extensive props to control bars, buttons, grid layout, and more, such as displayTopBar, customTitle, and itemPerRow. This allows developers to tailor the gallery to their app's design.

Selection and Grid Support

Enables multi-image selection with visual feedback and toggling between a thumbnail grid and full-screen view. Props like displaySelectionButtons and enableGrid provide this functionality.

Native-Like Browsing

Inspired by MWPhotoBrowser, it delivers smooth transitions and a familiar gallery interface. The README states it's 'inspired by great MWPhotoBrowser library.'

Cons

Missing Key Features

Lacks video support and zoom capabilities, which are listed on the roadmap but not yet implemented. This limits its use for media-rich applications requiring these functionalities.

Performance Concerns

The README admits 'Improve performance for bigger collections,' indicating it may struggle with large image sets, potentially affecting user experience in data-heavy apps.

Complex iOS Setup

Using circle progress indicators on iOS requires linking the ReactART library, adding extra steps compared to the default setup. The documentation notes this additional configuration for useCircleProgress.

Frequently Asked Questions

Related Projects

react-native-vector-icons

Customizable Icons for React Native with support for image source and full styling.

Stars17,863

Forks2,101

Last commit5 days ago

lottie-react-native

Lottie wrapper for React Native.

Stars17,146

Forks1,800

Last commit10 days ago

react-native-maps

React Native Mapview component for iOS + Android

Stars15,954

Forks4,953

Last commit1 month ago

react-native-gifted-chat

💬 The most complete chat UI for React Native

Stars14,409

Forks3,610

Last commit12 days ago

Community-curated · Updated weekly · 100% open source

Found a gem we're missing?

Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.

Submit a project Star on GitHub