ReactNative-AutoresponsivePlugin-CalculateDynamicHeight.js

import React, { Component } from 'react';
import { StyleSheet, Text, ScrollView, View, Dimensions } from 'react-native';
import AutoResponisve from 'autoresponsive-react-native';

const SCREEN_WIDTH = Dimensions.get('window').width;

/**
 * we store all of our elements calculated heights in there
 * @type {Array}
 */
const elementHeights = [];

/**
 * [loremIpsum description]
 * we use this only for demonstration purposes
 * @type {String}
 */
const loremIpsum = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';

export default class ProjectsPage extends Component {

  constructor(props) {
    super(props);

    this.state = {
      /**
       * dummy elements using a blind copy function
       */
      portfolioElements: [
        {
          key: 0,
          desc: this.lorem(),
        },
        {
          key: 1,
          desc: this.lorem(),
        },
        {
          key: 2,
          desc: this.lorem(),
        },
        {
          key: 3,
          desc: this.lorem(),
        },
        {
          key: 4,
          desc: this.lorem(),
        },
        {
          key: 5,
          desc: this.lorem(),
        },
        {
          key: 6,
          desc: this.lorem(),
        },
        {
          key: 7,
          desc: this.lorem(),
        },
        {
          key: 8,
          desc: this.lorem(),
        },
        {
          key: 9,
          desc: this.lorem(),
        },
      ],
    };
  }

  /**
   * dummy text function for demonstration purposes
   */
  lorem() {
    return loremIpsum.substring(0, Math.random() * 200);
  }

  /**
   * we ommit the height style here as we calculate the dynamic height on the fly
   */
  getChildrenStyle() {
    return {
      width: (SCREEN_WIDTH - 50) / 2,
      backgroundColor: '#ffffff',
      padding: 20,
      borderRadius: 0,
    };
  }

  /**
   *
   */
  getAutoResponsiveProps() {
    return {
      itemMargin: 10,
    };
  }

  /**
   * store the real height of the item in an array
   * as this might get called multiple times we need to store a reference with it (key)
   */
  measureView(event, key) {
    elementHeights[key] = event.nativeEvent.layout.height;
    if(elementHeights.length === this.state.portfolioElements.length)
      this.forceUpdate();
  }

  /**
   * render our children
   * we pass the height as a seperate style object accessing our height array
   * we use onLayout to call our measurement function
   * make sure you also pass the key to the measurement function
   */
  renderChildren() {
    return this.state.portfolioElements.map((i, key) => {
      return (
        <View style={[this.getChildrenStyle(), {height: (elementHeights[key]) ? elementHeights[key] : null}]} key={key} onLayout={(event) => this.measureView(event, key)}>
          <Text style={ComponentStyles.text}>{i.key}</Text>
          <Text>
            {i.desc}
          </Text>
        </View>
      );
    }, this);
  }

  /**
   * [onPressTitle description]
   * @method onPressTitle
   * @return {[type]}     [description]
   */
  onPressTitle = () => {
    this.setState({
      array: [...this.state.array, parseInt(Math.random() * 30)],
    });
  }

  /**
   * render component
   */
  render() {
    return (
      <ScrollView style={ComponentStyles.container}>
        <View style={ComponentStyles.title}>
          <Text onPress={this.onPressTitle} style={ComponentStyles.titleText}>autoresponsive</Text>
        </View>
        <AutoResponisve {...this.getAutoResponsiveProps()}>
          {this.renderChildren()}
        </AutoResponisve>
      </ScrollView>
    );
  }
}

const ComponentStyles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: '#232a34',
  },
  title: {
    paddingTop: 20,
    paddingBottom: 20,
  },
  titleText: {
    color: '#d0bbab',
    textAlign: 'center',
    fontSize: 36,
    fontWeight: 'bold',
  },
  text: {
    textAlign: 'center',
    fontSize: 60,
    fontWeight: 'bold',
    color: 'rgb(58, 45, 91)',
  }
});