Skip to content

Latest commit

 

History

History
74 lines (49 loc) · 3.42 KB

README.md

File metadata and controls

74 lines (49 loc) · 3.42 KB
Raw

Obsolete, no longer maintained！！！！

React Native Modal Photo View

A modal image view support for react-native. This repository is fork from halilb/react-native-photo-browser library now and remove some functions and just left photo view.Then add and change some new functions.

The component has both iOS and Android support .

I haven't test it in IOS because i don,t have apple devices.

This repository may have a lot of issues in the beginning.

Known issues

1、While image loading,the loading component position is not in the center of the screen.

2、Some times if image load error or failed, the error image and tip text didn't show.

3、Maybe you can't touch anywhere of the screen to close modal, but you can touch the close button of the image position to close modal

Installation

npm install react-native-modal-photo-view --save

Properties

Prop Type Description Default
style Style Overrides default container style. null
mediaList Array<Media> List of media objects to display. []
initialIndex Number Sets the visible photo initially. 0
displayCloseBtn Boolean Show close button to close modal. false
displayBottomBar Boolean Whether to display the bottom text. true
useCircleProgressiOS Boolean Displays Progress.Circle instead of default Progress.Bar for full screen photos. Check Progress section for more info. false
onClose Function Function to control the modal visible or not. () => {}
visible Boolean Modal visible or not. false
onPhotoLongPress Function Called when a long press trigged on a photo.Plan to add in the future () => {}
delayPhotoLongPress Number The long press delay in ms.Plan to add in the future 1000
imageErrorTitle String Text will show when image load error or failed. Load failed

Media Object

const media = {
  photo: '', // a remote photo or local media url
};

Progress Component

Android

Built-in ActivityIndicator component is used for Android. Any additional configuration is not needed.

iOS

react-native-progress component is used as progress indicator. The default progress component is Progress.Bar. You can also use Progress.Circle component by simply using useCircleProgress prop, and adding ReactART library to your Xcode project. For more information please check out react-native-progress repo and React Native documentation.

Examples

Follow those steps to run the example:

  1. Clone the repo git clone https://github.com/guopeng1994/react-native-modal-photo-view && cd react-native-modal-photo-view/Example
  2. Install dependencies npm install or yarn
  3. Follow official instructions to run the example project in a simulator or device.

Roadmap

  • Android support
  • Improve performance for bigger collections
  • Zooming photos to fill the screen

Licence

MIT