text: import React from 'react';
  import { StyleSheet, View, Text, PixelRatio, FlatList, Image, TouchableHighlight } from 'react-native';
  import { Navigation, SharedElementTransition } from 'react-native-navigation';
  
  import images from './images';
  
  const ROW_HEIGHT = 650;
  const COLS = 2;
  
  class Masonry extends React.Component {
  
      onAssetPress = (image, key) => {
          this.props.navigator.push({
              screen: 'example.Transitions.SharedElementTransitions.Masonry.Item',
              sharedElements: [key],
              passProps: {
                  image,
                  sharedImageId: key,
              },
          });
      };
  
      renderAsset = (asset, row, column, index) => {
          const key = `row_${row}_column_${column}_asset_${index}`;
  
          return (
              <TouchableHighlight
                  key={key}
                  onPress={() => {
                      this.onAssetPress(asset.source, key);
                  }}
                  style={[styles.assetContainer, { flex: asset.weight }]}
              >
                  <View style={{ flex: 1 }}>
                      <SharedElementTransition
                          style={{ flex: 1 }}
                          sharedElementId={key}
                      >
                          <Image
                              source={asset.source}
                              resizeMode={'cover'}
                              style={styles.asset}
                          />
                      </SharedElementTransition>
                  </View>
              </TouchableHighlight>
          );
      };
  
      renderItem = ({ item, index }) => {
          return (
              <View style={[styles.item, { height: ROW_HEIGHT }]}>
                  {[...new Array(COLS)].map((column, columnIndex) => (
                      <View
                          key={`row_${index}_column_${columnIndex}`}
                          style={{ flex: 1 }}
                      >
                          {item.images[columnIndex].map((asset, assetIndex) => this.renderAsset(asset, index, columnIndex, assetIndex))}
                      </View>
                  ))}
              </View>
          );
      };
  
      render() {
          return (
              <View style={styles.container}>
                  <FlatList
                      data={images}
                      renderItem={this.renderItem}
                      getItemLayout={(layout, index) => ({ length: ROW_HEIGHT, offset: ROW_HEIGHT * index, index })}
                  />
              </View>
          );
      }
  }
  
  const styles = StyleSheet.create({
      container: {
          flex: 1,
          backgroundColor: '#ffffff',
      },
      item: {
          flex: 1,
          flexDirection: 'row',
      },
      assetContainer: {
          margin: 5,
          borderRadius: 6,
          borderWidth: StyleSheet.hairlineWidth,
      },
      asset: {
          flex: 1,
          borderRadius: 6,
      },
  });
  
  export default Masonry;
  