Security News
Introducing the Socket Python SDK
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
@chatium/react-native-image-gallery
Advanced tools
Pure JavaScript image gallery component for iOS and Android
This used to be a fork of ldn0x7dc/react-native-gallery but the original repo is no longer maintained, so here's our own repo. Props to ldn0x7dc for his amazing work! 👏👏👏
A pure JavaScript image gallery component for React Native apps with common gestures like pan, pinch and doubleTap, supporting both iOS and Android.
This component aims to be the best image viewer for React Native apps, it is far more elegant than other gallery-like components as it features some of the most useful functionalities found in the iOS photo album app such as:
This component utilizes @ldn0x7dc/react-native-view-pager as the scrollable container and react-native-transformable-image as the wrapped image.
This component works on react-native 0.44+.
You can try this example live in Archriss' showcase app on Android and iOS or check out the demo.
npm install --save react-native-image-gallery
or yarn add react-native-image-gallery
import Gallery from 'react-native-image-gallery';
render() {
return (
<Gallery
style={{ flex: 1, backgroundColor: 'black' }}
images={[
{ source: require('yourApp/image.png'), dimensions: { width: 150, height: 150 } },
{ source: { uri: 'http://i.imgur.com/XP2BE7q.jpg' } },
{ source: { uri: 'http://i.imgur.com/5nltiUd.jpg' } },
{ source: { uri: 'http://i.imgur.com/6vOahbP.jpg' } },
{ source: { uri: 'http://i.imgur.com/kj5VXtG.jpg' } }
]}
/>
);
}
This component supports both remote images by specifying source.uri
, and local images where source
is the result of require()
.
Be aware that the width and height must be defined for local images, but is not required for remote images! Although the dimensions could still be provided for remote images to save the gallery from fetching them, which could potentially improve performance.
Prop | Description | Type | Default |
---|---|---|---|
images | Your array of images | array | Required |
initialPage | Image displayed first | number | 0 |
imageComponent | Custom function to render your images, 1st param is the image props, 2nd is its dimensions | function | <Image> component |
errorComponent | Custom function to render the page of an image that couldn't be displayed | function | A <View> with a stylized error |
flatListProps | Props to be passed to the underlying FlatList | object | {windowSize: 3} |
pageMargin | Blank space to show between images | number | 0 |
onPageSelected | Fired with the index of page that has been selected | function | |
onPageScrollStateChanged | Called when page scrolling state has changed, see scroll state and events | function | |
onPageScroll | Scroll event, see scroll state and events | function | |
scrollViewStyle | Custom style for the FlatList component | object | {} |
onSingleTapConfirmed | Fired after a single tap | function | |
onLongPress | Fired after a long press | function |
onPageScroll
: (event) => {}.
The event object carries following data:
position
: index of first page from the left that is currently visible.offset
: value from range [0,1) describing stage between page transitions.fraction
: means that (1 - x) fraction of the page at "position" index is visible, and x fraction of the next page is visible.onPageScrollStateChanged
: (state) => {}.
Called when the page scrolling state has changed. The page scrolling state can be in 3 states:
'idle'
: there is no interaction with the page scroller happening at the time.'dragging'
: there is currently an interaction with the page scroller.'settling'
: there was an interaction with the page scroller, and the page scroller is now finishing its closing or opening animation.FAQs
Pure JavaScript image gallery component for iOS and Android
We found that @chatium/react-native-image-gallery demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
Security News
Floating dependency ranges in npm can introduce instability and security risks into your project by allowing unverified or incompatible versions to be installed automatically, leading to unpredictable behavior and potential conflicts.
Security News
A new Rust RFC proposes "Trusted Publishing" for Crates.io, introducing short-lived access tokens via OIDC to improve security and reduce risks associated with long-lived API tokens.