Gathering detailed insights and metrics for react-native-image-layout
Gathering detailed insights and metrics for react-native-image-layout
An easy and simple to use React Native component to render a custom masonry layout for remote images and displayed on a custom interactive image viewer. Includes animations and support for both iOS and Android. Free and made possible along with costly maintenance and updates by [Lue Hang](https://www.facebook.com/lue.hang) (the author).
Installations
npm install react-native-image-layoutDeveloper Guide
BETA
Typescript
No
Module System
CommonJS
Node Version
12.13.1
NPM Version
6.13.2
Releases
36
Languages
5
JavaScript
Objective-C
Ruby
Java
Starlark
JavaScript (80.52%)
Objective-C (7.91%)
Ruby (5.42%)
Java (5.02%)
Starlark (1.13%)
Developer
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
MIT License
47 Stars
190 Commits
9 Forks
2 Watchers
1 Branches
1 Contributors
Updated on Oct 21, 2024
Maintainers
1
Package Meta Information
Latest Version
5.9.1
Package Id
react-native-image-layout@5.9.1
Unpacked Size
50.13 kB
Size
11.23 kB
File Count
12
NPM Version
6.13.2
Node Version
12.13.1
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
4
Peer Dependencies
2
An easy and simple to use React Native component to render a custom masonry layout for remote/local images and displayed on a custom interactive image viewer. Includes animations and support for both iOS and Android. Free and made possible along with costly maintenance and updates by Lue Hang (the author).
Check out the docs for a complete documentation.
- Supports large lists rendering.
- Efficiently add more images without re-rendering.
- Smart algorithm for eveningly laying out images.
- Swipe up and down to close images.
- Can be use with many fieldnames.
source,source.uri,uri,URI,urlorURL. - Support for rendering all local and remote images with no missing images.
- Support for dynamic device rotation.
- Includes guestures and important event listeners for pan, pinch, single tap and double tap.
- Includes zoom mode.
- Pull to Refresh.
- Scroll loading.
- Easily customizable.
- Intelligent scroll detection to cushion rough swipe guestures.
- Supports iOS and Android.
:information_source: Learn more about React Native with project examples along with Cyber Security and Ethical Hacking at LueHsoft.
Built with react-native-gallery-swiper & react-native-smart-gallery.
:open_file_folder: Index
1. Install
2. Usage Example
3. API
4. :books: Props
5. Example Project
6. Author
7. Contribute
8. License
:gem: Install
Type in the following to the command line to install the dependency.
1$ npm install --save react-native-image-layout
or
1$ yarn add react-native-image-layout
:tada: Usage Example
Add an import to the top of the file. At minimal, declare the ImageLayout component in the render() method providing an array of data for the images prop.
If you like
react-native-image-layout, please be sure to give it a star at GitHub. Thanks.
1import ImageLayout from "react-native-image-layout"; 2 3//... 4render() { 5 return ( 6 <ImageLayout 7 images={[ 8 // Version *3.0.0 update (or greater versions): 9 // Can be used with different image object fieldnames. 10 // Ex. source, source.uri, uri, URI, url, URL 11 { uri: "https://luehangs.site/pic-chat-app-images/beautiful-blond-blonde-hair-478544.jpg" }, 12 // IMPORTANT: It is REQUIRED for LOCAL IMAGES 13 // to include a dimensions field with the 14 // actual width and height of the image or 15 // it will throw an error. 16 // { source: require("yourApp/image.png"), 17 // dimensions: { width: 1080, height: 1920 } 18 // }, 19 // "width" & "height" is an alternative to the dimensions 20 // field that will also be acceptable. 21 // { source: require("yourApp/image.png"), 22 // width: 1080, 23 // height: 1920 }, 24 { source: { uri: "https://luehangs.site/pic-chat-app-images/beautiful-beautiful-women-beauty-40901.jpg" } }, 25 { uri: "https://luehangs.site/pic-chat-app-images/animals-avian-beach-760984.jpg", 26 // Optional: Adding a dimensions field with 27 // the actual width and height for REMOTE IMAGES 28 // will help improve performance. 29 dimensions: { width: 1080, height: 1920 } }, 30 { URI: "https://luehangs.site/pic-chat-app-images/beautiful-blond-fishnet-stockings-48134.jpg", 31 // Version *2.0.0 update (or greater versions): 32 // Optional: Does not require an id for each 33 // image object, but is for best practices and 34 // can be better for performance with the API. 35 id: "blpccx4cn" }, 36 { url: "https://luehangs.site/pic-chat-app-images/beautiful-beautiful-woman-beauty-9763.jpg" }, 37 { URL: "https://luehangs.site/pic-chat-app-images/attractive-balance-beautiful-186263.jpg" }, 38 ]} 39 // Version *5.7.0 update 40 // onEndReached={() => { 41 // // add more images when scroll reaches end 42 // }} 43 /> 44 ); 45} 46//...
Android Note: Remote debugger should be turned off on Android.
:tada: Efficiently Add More Images
Version *5.2.0 update: Without rerendering the images.
1import ImageLayout from "react-native-image-layout"; 2 3//... 4/** 5 * Example method to add more images. 6 * 7 * @method addMoreImages 8 */ 9addMoreImages(newImages) { 10 this.setState({ 11 images: this.state.images.concat(newImages) 12 }); 13} 14 15render() { 16 return ( 17 <ImageLayout 18 images={this.state.images} 19 {/* Version *5.7.0 update */} 20 onEndReached={() => { 21 this.addMoreImages(moreImages); 22 }} 23 /> 24 ); 25} 26//...
:tada: Add New Images
Version *5.2.0 update: Rerendering the images.
1import ImageLayout from "react-native-image-layout"; 2 3//... 4/** 5 * Example method to add new images. 6 * 7 * @method addNewImages 8 * @config Set react-native-image-layout's "rerender" prop to true. 9 */ 10addNewImages(newImages) { 11 this.setState({ 12 images: newImages 13 }); 14} 15 16render() { 17 return ( 18 <ImageLayout 19 rerender={true} 20 images={this.state.images} 21 /> 22 ); 23} 24//...
:nut_and_bolt: API
<ImageLayout /> component accepts the following props...
:books: Props
:information_source: *Version 2.0.0 update (or greater versions): Props changes that may not be compatible with lower versions.
:small_blue_diamond: Image Layout Props of <ImageLayout />
If you like
react-native-image-layout, please be sure to give it a star at GitHub. Thanks.
| Props | Description | Type | Default |
|---|---|---|---|
images | An array of objects. uri is a required field. EX. [{uri: "https://luehangs.site/pic-chat-app-images/beautiful-blond-fishnet-stockings-48134.jpg"}, {uri: "https://luehangs.site/pic-chat-app-images/beautiful-blond-blonde-hair-478544.jpg"}] | Array | Required |
columns | Desired number of columns. | number | 2 |
initialColToRender | How many columns to render in the initial batch. | number | columns |
initialNumInColsToRender | How many items to render in each column in the initial batch. | number | 1 |
spacing | Gutter size of the column. The spacing is a multiplier of 1% of the available view. | number | 1 |
sorted | Whether to sort the masonry data according to their index position or allow to fill in as soon as the uri is ready. | Boolean | false |
rerender | Rerender the images when it changes. Version *5.2.0 update | boolean | false |
onLongPressImage | Executed after a long press on an item on the masonry. ({item: object, index: number}) => void Version *3.0.0 update. | Function | |
imageContainerStyle | The styles object which is added to the Image component. | object | {} |
renderIndividualMasonryHeader | Custom function that is executed ABOVE each individual masonry image. (item: object, index: number) => ?React.Element | Function | |
renderIndividualMasonryFooter | Custom function that is executed BELOW each individual masonry image. (item: object, index: number) => ?React.Element | Function | |
renderMainHeader | Custom function to render a header above the MasonryList. () => void | Function | |
renderMainFooter | Custom function to render a footer below the MasonryList. () => void | Function | |
masonryFlatListColProps | Props to be passed to the underlying FlatList masonry. See FlatList props... | object | {} |
onEndReached | Called once when the scroll position gets within onEndReachedThreshold of the rendered content. () => void Version *5.7.0 update | function | |
onEndReachedThreshold | How far from the end (in units of visible length of the list) the bottom edge of the list must be from the end of the content to trigger the onEndReached callback. Thus a value of 0.5 will trigger onEndReached when the end of the content is within half the visible length of the list. Version *5.7.0 update | number | 0.8 |
:small_blue_diamond: Gallery Props of <ImageLayout />
If you like
react-native-image-layout, please be sure to give it a star at GitHub. Thanks.
| Props | Description | Type | Default |
|---|---|---|---|
imagePageComponent | Custom function to render the images for gallery. (imageProps: { imageLoaded: Boolean, source: object, image: object, style: Array<object>, resizeMode: string, capInsets: object, onLoadStart: Function, onLoad: Function, ...extras }, imageDimensions: {width: number, height: number}, index: number) => React.Element index params included in Version *3.0.0 update | Function | <Image/> component |
errorPageComponent | Custom function to render the page of an image in gallery that couldn't be displayed. | Function | <View/> with stylized error |
renderPageHeader | Custom function to render gallery page header. (item: object, index: number, onClose: Function) => ?React.Element The onClose function is use to close gallery pages and return to the masonry layout. | Function | |
renderPageFooter | Custom function to render gallery page footer. (item: object, index: number, onClose: Function) => ?React.Element The onClose function is use to close gallery pages and return to the masonry layout. | Function | |
pagesFlatListProps | Props to be passed to the underlying FlatList gallery. See FlatList props... | object | {windowSize: 3} |
pageMargin | Blank space to show between images in gallery. | number | 0 |
sensitivePageScroll | Whether to enable an intelligent detection to detect rough and fast swiping gestures in order to "cushion" or slow down a swipe at the end. Version *3.0.0 update. | Boolean | false |
onPageSelected | Fired with the index of page that has been selected in gallery. (index: number) => void | Function | |
onPageScrollStateChanged | Called when page scrolling state has changed in gallery. See scroll state and events... (state: string) => void | Function | |
onPageScroll | Scroll event for page gallery. See scroll state and events... (event: { position: number, offset: number, fraction: number }) => void | Function | |
pageScrollViewStyle | Custom style for the FlatList component for gallery. | object | {} |
onPageSingleTapConfirmed | Fired after a single tap on page in gallery. (index: number) => void | Function | |
onPageLongPress | Fired after a long press on page in gallery. (gestureState: object, index: number) => void | Function | |
onDoubleTapConfirmed | Executed after a double tap. (index: number) => void Version *5.1.0 update. | Function | |
onDoubleTapStartReached | Executed after scaling out or zooming out using double tap. (transform: { scale: number, translateX: number, translateY: number }, index: number) => void Version *5.1.0 update. | Function | |
onDoubleTapEndReached | Executed after scaling in or zooming in using double tap. (transform: { scale: number, translateX: number, translateY: number }, index: number) => void Version *5.1.0 update. | Function | |
onPinchTransforming | Executed while pinching to transform view or zoom (view transformer). (transform: { scale: number, translateX: number, translateY: number }, index: number) => void Version *5.1.0 update. | Function | |
onPinchStartReached | Executed after scaling out or zooming out to initial size using the pinch gesture. (transform: { scale: number, translateX: number, translateY: number }, index: number) => void Version *5.1.0 update. | Function | |
enableScale | Enable or disable zoom and double tap zoom (view transformer). Version *5.1.0 update. | boolean | true |
maxScale | Max zoom (view transformer). Version *5.1.0 update. | number | Math.max(imageWidth / viewWidth, imageHeight / viewHeight) |
enableTranslate | Enable or disable moving while in zoom (view transformer). Version *5.1.0 update. | boolean | true |
resizeMode | The mechanism that should be used to resize the image when the image's dimensions differ from the image view's dimensions. Expecting one of "contain", "cover", "stretch", "repeat", "center". Version *5.1.0 update. | string | "contain" |
enableResistance | Enable or disable resistance over panning (view transformer). Version *5.1.0 update. | boolean | true |
resistantStrHorizontal | Resistant value for left and right panning (view transformer). (dx: number) => number Version *5.1.0 update. | Function, number or string | (dx) => (dx /= 3) |
resistantStrVertical | Resistant value for top and bottom panning (view transformer). (dy: number) => number Version *5.1.0 update. | Function, number or string | (dy) => (dy /= 3) |
onViewTransformed | Executed while being transformed in anyway (view transformer). (transform: { scale: number, translateX: number, translateY: number }, index: number) => void Version *5.1.0 update. | Function | |
onTransformGestureReleased | Executed after a transform guesture released (view transformer). (transform: { scale: number, translateX: number, translateY: number }, index: number) => void Version *5.1.0 update. | Function | |
onSwipeUpReleased | Executed after releasing an upward swipe at a specific y translate while not in zoom mode. (transform: { scale: number, translateX: number, translateY: number }, index: number) => void For custom precision swiping gestures, refer to the onTransformGestureReleased. Version *5.8.0 update. | Function | |
onSwipeDownReleased | Executed after releasing a downward swipe at a specific y translate while not in zoom mode. (transform: { scale: number, translateX: number, translateY: number }, index: number) => void For custom precision swiping gestures, refer to the onTransformGestureReleased. Version *5.8.0 update. | Function | |
maxOverScrollDistance | A number used to determine final scroll position triggered by fling (view transformer). Version *5.1.0 update. | number | 20 |
enableVerticalExit | Enable or disable exiting from swiping up or down in gallery. Version *5.3.0 update. | Boolean | true |
enableModal | Enable or disable modal for gallery. This also helps with Androids back button. Version *5.9.0 update. | boolean | false |
:clapper: Example Project
Perform steps 1-2 to run locally:
1. Clone the Repo
Clone react-native-image-layout locally. In a terminal, run:
1$ git clone https://github.com/Luehang/react-native-image-layout.git react-native-image-layout
2. Install and Run
1$ cd react-native-image-layout/example/
iOS - Mac - Install & Run
1. check out the code
2. npm install
3. npm run ios
Android - Mac - Install & Run
1. check out the code
2. npm install
3. emulator running in separate terminal
4. npm run android
:santa: Author
Free and made possible along with costly maintenance and updates by Lue Hang (the author).
:clap: Contribute
Pull requests are welcomed.
:tophat: Contributors
Contributors will be posted here.
:baby: Beginners
Not sure where to start, or a beginner? Take a look at the issues page.
:page_facing_up: License
MIT © Lue Hang, as found in the LICENSE file.
No vulnerabilities found.
Reason
0 existing vulnerabilities detected
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
binaries present in source code
Details
- Warn: binary detected: example/android/gradle/wrapper/gradle-wrapper.jar:1
Reason
no SAST tool detected
Details
- Warn: no pull requests merged into dev branch
Reason
Found 0/30 approved changesets -- score normalized to 0
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'master'
Score
2.9
/10
Last Scanned on 2025-07-07
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More