tiles.js

import React, { useState } from 'react';
import { ImageBackground, View, StyleSheet, TouchableOpacity } from 'react-native';
import ImagePreview from './ImagePreview';
import { Ionicons } from '@expo/vector-icons';
import Shimmer from './Shimmer';
const RemoveImage = ({ onPress }) => {
  return (
    <View style={styles.removeContainer}>
      <TouchableOpacity style={styles.remove} onPress={onPress}>
        <Ionicons name="ios-close" size={30} color={'white'} />
      </TouchableOpacity>
    </View>
  );
};

const handleRemove = (images, image, setImages) => {
  const newImages = images.filter(img => img.uri !== image.uri);
  setImages(newImages);
};

export const OneTile = ({
  image,
  images,
  singleImageWidth,
  longImageHeight,
  setImages,
  showCancel,
  imageArray,
  previewVisibility,
  toggleVisibility,
  showPreview
}) => {
  /**
   * imageArray should be specified when Onetile is used
   * as a single component and not within the context of imageGrid
   */

  const imageContainer = imageArray || images;
  const imageTobeRemoved = imageArray ? image : images[0];
  const [shimmer, setShimmer] = useState(false);

  return (
    <TouchableOpacity
      style={{ ...styles.container }}
      onPress={() => toggleVisibility(!previewVisibility)}
      disabled={!showPreview}
    >
      <View style={styles.gutter}>
        <Shimmer
          autoRun={true}
          visible={shimmer}
          style={{ width: singleImageWidth, height: longImageHeight }}
        >
          <ImageBackground
            onLoad={() => setShimmer(true)}
            source={{ uri: (image && image.uri) || images[0].uri || images[0].url }}
            style={{ width: singleImageWidth, height: longImageHeight }}
          />
        </Shimmer>
        {showCancel ? (
          <RemoveImage onPress={() => handleRemove(imageContainer, imageTobeRemoved, setImages)} />
        ) : null}
      </View>
      {showPreview ? (
        <ImagePreview
          visibility={previewVisibility}
          toggleVisibility={() => toggleVisibility(!previewVisibility)}
          images={images}
        />
      ) : null}
    </TouchableOpacity>
  );
};

const TwoTiles = ({
  images,
  longImageHeight,
  longImageWidth,
  showCancel,
  setImages,
  previewVisibility,
  toggleVisibility,
  showPreview
}) => {
  const [shimmer, setShimmer] = useState({
    imageOne: false,
    imageTwo: false
  });

  return (
    <TouchableOpacity
      style={{ ...styles.container }}
      onPress={() => toggleVisibility(!previewVisibility)}
      disabled={!showPreview}
    >
      <View style={styles.gutter}>
        <Shimmer
          autoRun={true}
          visible={shimmer.imageOne}
          style={{ height: longImageHeight, width: longImageWidth }}
        >
          <ImageBackground
            onLoad={() =>
              setShimmer(prevState => {
                return { ...prevState, imageOne: true };
              })
            }
            source={{ uri: images[0].uri || images[0].url }}
            style={{ height: longImageHeight, width: longImageWidth }}
          />
        </Shimmer>
        {showCancel ? (
          <RemoveImage onPress={() => handleRemove(images, images[0], setImages)} />
        ) : null}
      </View>
      <View style={styles.gutter}>
        <Shimmer
          autoRun={true}
          visible={shimmer.imageTwo}
          style={{ height: longImageHeight, width: longImageWidth }}
        >
          <ImageBackground
            onLoad={() =>
              setShimmer(prevState => {
                return { ...prevState, imageTwo: true };
              })
            }
            source={{ uri: images[1].uri || images[1].url }}
            style={{ height: longImageHeight, width: longImageWidth }}
          />
        </Shimmer>
        {showCancel ? (
          <RemoveImage onPress={() => handleRemove(images, images[1], setImages)} />
        ) : null}
      </View>
      {showPreview ? (
        <ImagePreview
          visibility={previewVisibility}
          toggleVisibility={() => toggleVisibility(!previewVisibility)}
          images={images}
        />
      ) : null}
    </TouchableOpacity>
  );
};

const ThreeTiles = ({
  images,
  longImageHeight,
  longImageWidth,
  shortImageHeight,
  shortImageWidth,
  showCancel,
  setImages,
  previewVisibility,
  toggleVisibility,
  showPreview
}) => {
  const [shimmer, setShimmer] = useState({
    imageOne: false,
    imageTwo: false,
    imageThree: false
  });

  return (
    <TouchableOpacity
      style={{ ...styles.container }}
      onPress={() => toggleVisibility(!previewVisibility)}
      disabled={!showPreview}
    >
      <View>
        <View style={styles.gutter}>
          <Shimmer
            autoRun={true}
            visible={shimmer.imageOne}
            style={{ height: shortImageHeight, width: shortImageWidth }}
          >
            <ImageBackground
              onLoad={() =>
                setShimmer(prevState => {
                  return { ...prevState, imageOne: true };
                })
              }
              source={{ uri: images[0].uri || images[0].url }}
              style={{ height: shortImageHeight, width: shortImageWidth }}
            />
          </Shimmer>
          {showCancel ? (
            <RemoveImage onPress={() => handleRemove(images, images[0], setImages)} />
          ) : null}
        </View>
        <View style={styles.gutter}>
          <Shimmer
            autoRun={true}
            visible={shimmer.imageTwo}
            style={{ height: shortImageHeight, width: shortImageWidth }}
          >
            <ImageBackground
              onLoad={() =>
                setShimmer(prevState => {
                  return { ...prevState, imageTwo: true };
                })
              }
              source={{ uri: images[1].uri || images[1].url }}
              style={{ height: shortImageHeight, width: shortImageWidth }}
            />
          </Shimmer>
          {showCancel ? (
            <RemoveImage onPress={() => handleRemove(images, images[1], setImages)} />
          ) : null}
        </View>
      </View>
      <View>
        <View style={styles.gutter}>
          <Shimmer
            autoRun={true}
            visible={shimmer.imageThree}
            style={{ height: longImageHeight, width: longImageWidth }}
          >
            <ImageBackground
              onLoad={() =>
                setShimmer(prevState => {
                  return { ...prevState, imageThree: true };
                })
              }
              source={{ uri: images[2].uri || images[2].url }}
              style={{ height: longImageHeight, width: longImageWidth }}
            />
          </Shimmer>
          {showCancel ? (
            <RemoveImage onPress={() => handleRemove(images, images[2], setImages)} />
          ) : null}
        </View>
      </View>
      {showPreview ? (
        <ImagePreview
          visibility={previewVisibility}
          toggleVisibility={() => toggleVisibility(!previewVisibility)}
          images={images}
        />
      ) : null}
    </TouchableOpacity>
  );
};

const FourTiles = ({
  images,
  shortImageHeight,
  shortImageWidth,
  showCancel,
  setImages,
  previewVisibility,
  toggleVisibility,
  showPreview
}) => {
  const [shimmer, setShimmer] = useState({
    imageOne: false,
    imageTwo: false,
    imageThree: false,
    imageFour: false
  });

  return (
    <TouchableOpacity
      style={{ ...styles.container }}
      onPress={() => toggleVisibility(!previewVisibility)}
      disabled={!showPreview}
    >
      <View>
        <View style={styles.gutter}>
          <Shimmer
            autoRun={true}
            visible={shimmer.imageOne}
            style={{ height: shortImageHeight, width: shortImageWidth }}
          >
            <ImageBackground
              onLoad={() =>
                setShimmer(prevState => {
                  return { ...prevState, imageOne: true };
                })
              }
              source={{ uri: images[0].uri || images[0].url }}
              style={{ height: shortImageHeight, width: shortImageWidth }}
            />
          </Shimmer>
          {showCancel ? (
            <RemoveImage onPress={() => handleRemove(images, images[0], setImages)} />
          ) : null}
        </View>
        <View style={styles.gutter}>
          <Shimmer
            autoRun={true}
            visible={shimmer.imageTwo}
            style={{ height: shortImageHeight, width: shortImageWidth }}
          >
            <ImageBackground
              onLoad={() =>
                setShimmer(prevState => {
                  return { ...prevState, imageTwo: true };
                })
              }
              source={{ uri: images[1].uri || images[1].url }}
              style={{ height: shortImageHeight, width: shortImageWidth }}
            />
          </Shimmer>
          {showCancel ? (
            <RemoveImage onPress={() => handleRemove(images, images[1], setImages)} />
          ) : null}
        </View>
      </View>
      <View>
        <View style={styles.gutter}>
          <Shimmer
            autoRun={true}
            visible={shimmer.imageThree}
            style={{ height: shortImageHeight, width: shortImageWidth }}
          >
            <ImageBackground
              onLoad={() =>
                setShimmer(prevState => {
                  return { ...prevState, imageThree: true };
                })
              }
              source={{ uri: images[2].uri || images[2].url }}
              style={{ height: shortImageHeight, width: shortImageWidth }}
            />
          </Shimmer>
          {showCancel ? (
            <RemoveImage onPress={() => handleRemove(images, images[2], setImages)} />
          ) : null}
        </View>
        <View style={styles.gutter}>
          <Shimmer
            autoRun={true}
            visible={shimmer.imageFour}
            style={{ height: shortImageHeight, width: shortImageWidth }}
          >
            <ImageBackground
              onLoad={() =>
                setShimmer(prevState => {
                  return { ...prevState, imageFour: true };
                })
              }
              source={{ uri: images[3].uri || images[3].url }}
              style={{ height: shortImageHeight, width: shortImageWidth }}
            />
          </Shimmer>
          {showCancel ? (
            <RemoveImage onPress={() => handleRemove(images, images[3], setImages)} />
          ) : null}
        </View>
      </View>
      {showPreview ? (
        <ImagePreview
          visibility={previewVisibility}
          toggleVisibility={() => toggleVisibility(!previewVisibility)}
          images={images}
        />
      ) : null}
    </TouchableOpacity>
  );
};

const ImageGrid = ({
  number,
  images,
  longImageHeight,
  shortImageHeight,
  longImageWidth,
  shortImageWidth,
  singleImageWidth,
  setImages,
  showCancel,
  previewVisibility,
  toggleVisibility,
  showPreview
}) => {
  return number ? (
    number == 1 ? (
      <OneTile
        images={images}
        longImageHeight={longImageHeight}
        singleImageWidth={singleImageWidth}
        setImages={setImages}
        showCancel={showCancel}
        previewVisibility={previewVisibility}
        toggleVisibility={toggleVisibility}
        showPreview={showPreview}
      />
    ) : number == 2 ? (
      <TwoTiles
        images={images}
        longImageHeight={longImageHeight}
        longImageWidth={longImageWidth}
        setImages={setImages}
        showCancel={showCancel}
        previewVisibility={previewVisibility}
        toggleVisibility={toggleVisibility}
        showPreview={showPreview}
      />
    ) : number == 3 ? (
      <ThreeTiles
        images={images}
        longImageHeight={longImageHeight}
        longImageWidth={longImageWidth}
        shortImageHeight={shortImageHeight}
        shortImageWidth={shortImageWidth}
        setImages={setImages}
        showCancel={showCancel}
        previewVisibility={previewVisibility}
        toggleVisibility={toggleVisibility}
        showPreview={showPreview}
      />
    ) : (
      <FourTiles
        images={images}
        shortImageHeight={shortImageHeight}
        shortImageWidth={shortImageWidth}
        setImages={setImages}
        showCancel={showCancel}
        previewVisibility={previewVisibility}
        toggleVisibility={toggleVisibility}
        showPreview={showPreview}
      />
    )
  ) : null;
};

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center'
  },
  gutter: {
    margin: 3
  },
  remove: {
    height: 30,
    width: 30,
    borderRadius: 15,
    backgroundColor: 'rgba(0,0,0,0.5)',
    alignItems: 'center',
    justifyContent: 'center'
  },
  removeContainer: { position: 'absolute', top: 5, right: 5 }
});
export default ImageGrid;