JSPM

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.

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

Built with react-native-gallery-swiper.

Index

• Install
• Usage Example
• API
• Props
• Scroll State and Events
• Example Project
• Contribute
• License

Install

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

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

or

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

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

//...
render() {
    return (
        <ImageLayout
            images={[
                {
                    id: idGenerator(),
                    uri: "https://luehangs.site/pic-chat-app-images/animals-avian-beach-760984.jpg"
                },
                {
                    id: idGenerator(),
                    uri: "https://luehangs.site/pic-chat-app-images/beautiful-blond-blonde-hair-478544.jpg"
                },
                {
                    id: idGenerator(),
                    uri: "https://luehangs.site/pic-chat-app-images/beautiful-beautiful-women-beauty-40901.jpg"
                },
                {
                    id: idGenerator(),
                    uri: "https://luehangs.site/pic-chat-app-images/beautiful-blond-fishnet-stockings-48134.jpg"
                },
                {
                    id: idGenerator(),
                    uri: "https://luehangs.site/pic-chat-app-images/beautiful-beautiful-woman-beauty-9763.jpg"
                },
                {
                    id: idGenerator(),
                    uri: "https://luehangs.site/pic-chat-app-images/attractive-balance-beautiful-186263.jpg"
                },
            ]}
        />
    );
}
//...

function idGenerator() {
    return Math.random().toString(36).substr(2, 9);
}

API

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

Props

Scroll State and Events for Gallery

Built with react-native-gallery-swiper.

• onPageScroll : (event) => {}.

  The event object carries the 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.

Example Project

Perform steps 1-2 to run locally:

1. Clone the Repo
2. 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

Contribute

Pull requests are welcomed.

Beginners

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

Contributors

Contributors will be posted here.

License

MIT © Lue Hang, as found in the LICENSE file.