Package Exports

react-native-image-layout

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-image-layout) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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 medium lists rendering.
Smart algorithm for eveningly laying out images.
Swipe up and down to close images with animations to original place. Support iOS.
Can be use with many fieldnames. source, source.uri, uri, URI, url or URL.
Support for rendering all local and remote images with no missing images.
Support for dynamic device rotation.
Easily and highly customizable.
Includes guestures and important event listeners for pan, pinch, single tap and double tap.
Includes zoom mode.
Easily customizable.
Intelligent scrolling detection to cushion rough swipe guestures.
Supports both iOS and Android.

react-native-image-layout

ℹ️ Learn more about React Native with project examples along with Cyber Security and Ethical Hacking at LH LABS.

Built with react-native-gallery-swiper & react-native-smart-gallery.

📂 Index

1. Install

2. Usage Example

3. API

4. 📚 Props

5. Example Project

6. Author

7. Contribute

8. License

💎 Install

Type in the following to the command line to install the dependency.

$ npm install --save react-native-image-layout

$ yarn add react-native-image-layout

🎉 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.

import ImageLayout from "react-native-image-layout";

//...
render() {
    return (
        <ImageLayout
            images={[
                // Version *3.0.0 update (or greater versions): 
                // Can be used with different image object fieldnames.
                // Ex. source, source.uri, uri, URI, url, URL
                { uri: "https://luehangs.site/pic-chat-app-images/beautiful-blond-blonde-hair-478544.jpg" },
                { source: require("yourApp/image.png"),
                    // IMPORTANT: It is REQUIRED for LOCAL IMAGES
                    // to include a dimensions field with the
                    // actual width and height of the image or
                    // it will throw an error.
                    dimensions: { width: 1080, height: 1920 } },
                { source: { uri: "https://luehangs.site/pic-chat-app-images/beautiful-beautiful-women-beauty-40901.jpg" } },
                { uri: "https://luehangs.site/pic-chat-app-images/animals-avian-beach-760984.jpg",
                    // Optional: Adding a dimensions field with
                    // the actual width and height for REMOTE IMAGES
                    // will help improve performance.
                    dimensions: { width: 1080, height: 1920 } },
                { URI: "https://luehangs.site/pic-chat-app-images/beautiful-blond-fishnet-stockings-48134.jpg",
                    // Version *2.0.0 update (or greater versions):
                    // Optional: Does not require an id for each
                    // image object, but is for best practices and
                    // can be better for performance with the API.
                    id: "blpccx4cn" },
                { url: "https://luehangs.site/pic-chat-app-images/beautiful-beautiful-woman-beauty-9763.jpg" },
                { URL: "https://luehangs.site/pic-chat-app-images/attractive-balance-beautiful-186263.jpg" },
            ]}
        />
    );
}
//...

Android Note: Remote debugger should be turned off on Android.

🔹 Hint: Adding a Close Button for Gallery

To select, callback and manipulate an image...

import ImageLayout from "react-native-image-layout";
//...

//...
_renderPageHeader = (image, index, onClose) => {
    // Individual image object data.
    console.log(image);
    return (
        <View>
            {/*
                onClose params (third params) is a function
                that will close the gallery.

                Swiping up and down animations for closing the
                gallery is only compatible with iOS at
                the moment.  It will be compatible with
                Android in future releases.
            */}
            <TouchableWithoutFeedback onPress={() => {onClose();}}>
                <Image
                    source={backIcon}
                    style={{marginLeft: 10, height: 30, width: 30}}
                />
            </TouchableWithoutFeedback>
            <Text>{image.filename}</Text>
        </View>
    );
}

render() {
    return (
        <ImageLayout
            renderPageHeader={this._renderPageHeader}
            images={[
                { uri: "https://luehangs.site/pic-chat-app-images/beautiful-blond-fishnet-stockings-48134.jpg" },
                { uri: "https://luehangs.site/pic-chat-app-images/beautiful-beautiful-woman-beauty-9763.jpg" },
                { uri: "https://luehangs.site/pic-chat-app-images/attractive-balance-beautiful-186263.jpg" },
            ]}
        />
    );
}
//...

🔩 API

<ImageLayout /> component accepts the following props...

📚 Props

ℹ️ *Version 2.0.0 update (or greater versions): Props changes that may not be compatible with lower versions.

🔹 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
`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`	{}

🔹 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.	`Function`
`onPageLongPress`	Fired after a long press on page in gallery.	`Function`
`removeClippedSubviewsPager`	To improve pager scroll performance for large lists. *Version 3.0.0 update**.	`Boolean`	`true`

🎬 Example Project

Perform steps 1-2 to run locally:

Clone the Repo
Install and Run

🔹 1. Clone the Repo

Clone react-native-image-layout locally. In a terminal, run:

$ git clone https://github.com/Luehang/react-native-image-layout.git react-native-image-layout

🔹 2. Install and Run

$ 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

🎅 Author

Free and made possible along with costly maintenance and updates by Lue Hang (the author).

👏 Contribute

Pull requests are welcomed.

🎩 Contributors

Contributors will be posted here.

👶 Beginners

Not sure where to start, or a beginner? Take a look at the issues page.

react-native-image-layout

Package Exports

Readme

ℹ️ Learn more about React Native with project examples along with Cyber Security and Ethical Hacking at LH LABS.

📂 Index

1. Install

2. Usage Example

3. API

4. 📚 Props

5. Example Project

6. Author

7. Contribute

8. License

💎 Install

🎉 Usage Example

🔹 Hint: Adding a Close Button for Gallery

🔩 API

📚 Props

🔹 Image Layout Props of <ImageLayout />

🔹 Gallery Props of <ImageLayout />

🎬 Example Project

🔹 1. Clone the Repo

🔹 2. Install and Run

iOS - Mac - Install & Run

Android - Mac - Install & Run

🎅 Author

👏 Contribute

🎩 Contributors

👶 Beginners

📄 License

🔹 Image Layout Props of `<ImageLayout />`

🔹 Gallery Props of `<ImageLayout />`