fleetback-camera-roll-picker/Row.js

A React Native component providing images selection from camera roll

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

import ImageItem from './ImageItem';

const styles = StyleSheet.create({
  row: {
    flexDirection: 'row',
    flex: 1,
  },
});

class Row extends PureComponent {
  constructor(props) {
    super(props);
    this.renderImage = this.renderImage.bind(this);
  }

  renderImage(item /* nullable */, isSelected, colIndex) {
    const { imageMargin, selectedMarker, rowIndex } = this.props;
    return (
      <ImageItem
        key={item?.node.image.uri || colIndex}
        item={item}
        selected={isSelected}
        imageMargin={imageMargin}
        selectedMarker={selectedMarker}
        onClick={this.props.selectImage}
        colIndex={colIndex}
        rowIndex={rowIndex}
      />
    );
  }

  render() {
    const items = this.props.rowData.map((item, index) => {
      return this.renderImage(item, this.props.isSelected[index], index);
    });

    return (
      <View style={styles.row}>
        {items}
      </View>
    );
  }
}

Row.propTypes = {
  rowData: PropTypes.array.isRequired,
  isSelected: PropTypes.array.isRequired,
  selectImage: PropTypes.func.isRequired,
};

export default Row;