Feature/image

src/components/Image/Image.tsx

@@ -0,0 +1,88 @@
+import React, { useCallback } from "react";
+import {
+	Animated,
+	Image as RNImage,
+	ImageLoadEventData,
+	StyleSheet,
+	View,
+	Text,
+	NativeSyntheticEvent
+} from "react-native";
+
+import { ImageProps } from "./Image.types";
+
+const Image: React.FC<ImageProps> = ({
+	PlaceholderContent,
+	ImageComponent = RNImage,
+	transition,
+	transitionDuration,
+	onLoad,
+	...props
+}) => {
+	const placeholderOpacity = React.useRef(new Animated.Value(1));
+
+	const onLoadHandler = useCallback(
+		(event: NativeSyntheticEvent<ImageLoadEventData>) => {
+			if (transition) {
+				Animated.timing(placeholderOpacity.current, {
+					toValue: 0,
+					duration: transitionDuration,
+					useNativeDriver: true
+				}).start();
+			} else {
+				placeholderOpacity.current.setValue(0);
+			}
+			onLoad?.(event);
+		},
+		[transition, transitionDuration, onLoad]
+	);
+
+	const hasImage = Boolean(props.source);
+
+	return (
+		<View accessibilityIgnoresInvertColors={true} style={styles.container}>
+			<ImageComponent
+				{...props}
+				{...{ transition, transitionDuration }}
+				onLoad={onLoadHandler}
+				style={StyleSheet.absoluteFill}
+			/>
+			<Animated.View
+				pointerEvents={hasImage ? "none" : "auto"}
+				accessibilityElementsHidden={hasImage}
+				importantForAccessibility={hasImage ? "no-hide-descendants" : "yes"}
+				style={[
+					StyleSheet.absoluteFillObject,
+					{
+						opacity: hasImage ? placeholderOpacity.current : 1
+					}
+				]}
+			>
+				<View style={styles.placeholder}>
+					{React.isValidElement(PlaceholderContent)
+						? PlaceholderContent
+						: PlaceholderContent && <Text>{PlaceholderContent}</Text>}
+				</View>
+			</Animated.View>
+		</View>
+	);
+};
+
+const styles = StyleSheet.create({
+	container: {
+		backgroundColor: "transparent",
+		height: "100%",
+		width: "100%",
+		position: "relative",
+		overflow: "hidden"
+	},
+	placeholder: {
+		backgroundColor: "white",
+		alignItems: "center",
+		width: "100%",
+		height: "100%",
+		justifyContent: "center"
+	}
+});
+
+export default Image;

src/components/Image/Image.types.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { ImageProps as RNImageProps } from "react-native";
+
+export interface ImageProps extends RNImageProps {
+	PlaceholderContent?: React.ReactElement;
+	ImageComponent?: typeof React.Component;
+	transition?: boolean;
+	transitionDuration?: number;
+}

src/components/Image/index.ts

@@ -0,0 +1 @@
+export { default } from "./Image";

storybook/stories/Image/Image.stories.tsx

@@ -0,0 +1,34 @@
+// TextInput.stories.js
+
+import React from "react";
+
+import { storiesOf } from "@storybook/react-native";
+
+import { ActivityIndicator, View } from "react-native";
+
+import Image from "../../../src/components/Image/Image";
+
+storiesOf("Image", module)
+	.addDecorator((getStory) => (
+		<View className="w-full h-full items-center justify-center">
+			{getStory()}
+		</View>
+	))
+	.add("Standard", () => (
+		<View className="h-80 w-80">
+			<Image
+				source={{ uri: "https://source.unsplash.com/random?sig=1" }}
+				PlaceholderContent={<ActivityIndicator size="large" />}
+			/>
+		</View>
+	))
+	.add("With Fade Transition", () => (
+		<View className="h-80 w-80">
+			<Image
+				source={{ uri: "https://source.unsplash.com/random?sig=2" }}
+				PlaceholderContent={<ActivityIndicator size="large" />}
+				transition={true}
+				transitionDuration={500}
+			/>
+		</View>
+	));

storybook/stories/index.js

@@ -5,3 +5,4 @@ import "./TextInput/TextInput.stories";
 import "./Card/Card.stories";
 import "./Text/Text.stories";
 import "./Avatar/Avatar.stories";
+import "./Image/Image.stories";