Skip to content

Instantly share code, notes, and snippets.

@tamunoibi

tamunoibi/tiles.js

Created January 31, 2020 16:52
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save tamunoibi/f40abe882ea48662f8d5e6df29c9d1a2 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save tamunoibi/f40abe882ea48662f8d5e6df29c9d1a2 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
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;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment