Package Exports

@cawfree/react-native-masonry

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 (@cawfree/react-native-masonry) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-native-masonry

A bare-bones masonry layout for react-native.

@cawfree/react-native-masonry

🚀 Getting Started

You can integrate with your project using npm:

npm install --save @cawfree/react-native-masonry

Alternatively, you can use yarn:

yarn add @cawfree/react-native-masonry

✏️ Example

In this example, we animate an infinite number of red boxes... but in your application, you can place and animate whatever and however you want. :)

import React  from 'react';
import {
  Animated,
  View,
  StyleSheet,
  ScrollView,
} from 'react-native';
import PropTypes from 'prop-types';

import Masonry from '@cawfree/react-native-masonry';

const styles = StyleSheet.create({
  masonry: {
    flex: 1,
    backgroundColor: 'blue',
  },
});

export default class App extends React.Component {
  constructor(nextProps) {
    super(nextProps);
    this.state = ({
      fetching: false,
      // XXX: Initialize the layout with some values.
      items: [
        { key: `${Math.random()}`, opacity: new Animated.Value(0) },
        { key: `${Math.random()}`, opacity: new Animated.Value(0) },
        { key: `${Math.random()}`, opacity: new Animated.Value(0) },
        { key: `${Math.random()}`, opacity: new Animated.Value(0) },
        { key: `${Math.random()}`, opacity: new Animated.Value(0) },
        { key: `${Math.random()}`, opacity: new Animated.Value(0) },
        { key: `${Math.random()}`, opacity: new Animated.Value(0) },
        { key: `${Math.random()}`, opacity: new Animated.Value(0) },
      ],
    });
    this.__renderItem = this.__renderItem.bind(this);
    this.__onScroll = this.__onScroll.bind(this);
    this.__onItemPlaced = this.__onItemPlaced.bind(this);
  }
  // XXX: Render anything you want!
  __renderItem(item) {
    const height = (item.key * 500) + 100;
    const {
      opacity,
    } = item;
    return (
      <Animated.View
        style={{
          flex: 1,
          borderWidth: 1,
          height,
          backgroundColor: 'red',
          opacity,
        }}
      />
    );
  }
  // XXX: Callback from Masonry when a brick has been placed.
  __onItemPlaced(item) {
    const {
      opacity,
    } = item;
    Animated.timing(
      opacity,
      {
        toValue: 1,
        duration: 1000,
        useNativeDriver: true,
      },
    )
      .start();
  }
  __onScroll(e) {
    const {
      layoutMeasurement,
      contentOffset,
      contentSize,
    } = e.nativeEvent;
    const {
      onEndReachedThreshold,
    } = this.props;
    const {
      fetching,
    } = this.state;
    const thresholdIsReached = (layoutMeasurement.height + contentOffset.y) >= (contentSize.height - onEndReachedThreshold);
    if (thresholdIsReached && !fetching) {
      this.setState({
        // XXX: Add some more items to the list!
        items: ([
          ...this.state.items,
          { key: `${Math.random()}`, opacity: new Animated.Value(0) },
          { key: `${Math.random()}`, opacity: new Animated.Value(0) },
          { key: `${Math.random()}`, opacity: new Animated.Value(0) },
          { key: `${Math.random()}`, opacity: new Animated.Value(0) },
          { key: `${Math.random()}`, opacity: new Animated.Value(0) },
          { key: `${Math.random()}`, opacity: new Animated.Value(0) },
          { key: `${Math.random()}`, opacity: new Animated.Value(0) },
          { key: `${Math.random()}`, opacity: new Animated.Value(0) },
        ]),
      });
    }
  }
  render() {
    const {
      items,
    } = this.state;
    return (
      <Masonry
        style={styles.masonry}
        items={items}
        renderItem={this.__renderItem}
        onItemPlaced={this.__onItemPlaced}
        ScrollComponent={ScrollView}
        useNativeDriver
        scrollEventThrottle={400}
        onScroll={this.__onScroll}
      />
    );
  }
}

✌️ License

MIT