Priority Balance doesn't work correctly with Portrait Images

[phuchuynhStrong]

Expected Behavior

Current Behavior

Possible Solution

• In the _insertIntoColumn function, use scaled height instead of brick's image original height
• In balance priority, the call to resolveBricks function in componentDidMount will be moved to setState function after setParentDimensions. Scaled height need column width to calculate so this change will make sure resolveBricks always get dimensions

Steps to Reproduce

1. Add a Masonry into your View
2. Use FastImage as your customImageComponent, priority balance
3. Add some bricks with square and portrait images

Context (Environment)

react-native version 0.56.0
react-native-masonry version 0.5.0-alpha.4

Detailed Description

The code which I'm using

renderMasonry = sources => {
    let props = { onLoad: this.onLoad, data: sources, onError: this.onError };
    return (
      <View style={styles.masonryContainer}>
        <Masonry
          columns={2}
          spacing={MASONRY_ITEM_HORIZONTAL_GUT_SIZE}
          priority="balance"
          bricks={sources}
          customImageComponent={FastImage}
          imageContainerStyle={styles.masonryItemContainer}
          customImageProps={props}
        />
      </View>
    );
  };

Possible Implementation

I have open a pull-request for the fix. The link is #115

[phuchuynhStrong]

Close it due to merged #115