diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js
index b5a919515ac15f..d917b79132217a 100644
--- a/packages/block-library/src/image/edit.native.js
+++ b/packages/block-library/src/image/edit.native.js
@@ -24,6 +24,7 @@ import {
 	ToggleControl,
 	ToolbarButton,
 	ToolbarGroup,
+	Badgeable,
 } from '@wordpress/components';
 
 import {
@@ -49,7 +50,6 @@ import styles from './styles.scss';
 import SvgIcon, { editImageIcon } from './icon';
 import SvgIconRetry from './icon-retry';
 import { getUpdatedLinkTargetSettings } from './utils';
-
 import {
 	LINK_DESTINATION_CUSTOM,
 	LINK_DESTINATION_NONE,
@@ -382,92 +382,94 @@ export class ImageEdit extends React.Component {
 		};
 
 		const imageContainerHeight = Dimensions.get( 'window' ).width / IMAGE_ASPECT_RATIO;
-
 		const getImageComponent = ( openMediaOptions, getMediaOptions ) => (
-			<TouchableWithoutFeedback
-				accessible={ ! isSelected }
-				onPress={ this.onImagePressed }
-				onLongPress={ openMediaOptions }
-				disabled={ ! isSelected }
-			>
-				<View style={ { flex: 1 } }>
-					{ getInspectorControls() }
-					{ getMediaOptions() }
-					{ ( ! this.state.isCaptionSelected ) &&
-						getToolbarEditButton( openMediaOptions )
-					}
-					<MediaUploadProgress
-						height={ height }
-						width={ width }
-						coverUrl={ url }
-						mediaId={ id }
-						onUpdateMediaProgress={ this.updateMediaProgress }
-						onFinishMediaUploadWithSuccess={ this.finishMediaUploadWithSuccess }
-						onFinishMediaUploadWithFailure={ this.finishMediaUploadWithFailure }
-						onMediaUploadStateReset={ this.mediaUploadStateReset }
-						renderContent={ ( { isUploadInProgress, isUploadFailed, finalWidth, finalHeight, imageWidthWithinContainer, retryMessage } ) => {
-							const opacity = isUploadInProgress ? 0.3 : 1;
-							const icon = this.getIcon( isUploadFailed );
-							const imageBorderOnSelectedStyle = isSelected && ! ( isUploadInProgress || isUploadFailed || this.state.isCaptionSelected ) ? styles.imageBorder : '';
-
-							const iconContainer = (
-								<View style={ styles.modalIcon }>
-									{ icon }
-								</View>
-							);
-
-							return (
-								<View style={ {
-									flex: 1,
-									// only set alignSelf if an image exists because alignSelf causes the placeholder
-									// to disappear when an aligned image can't be downloaded
-									// https://github.com/wordpress-mobile/gutenberg-mobile/issues/1592
-									alignSelf: imageWidthWithinContainer && alignToFlex[ align ] }
-								} >
-									{ ! imageWidthWithinContainer &&
-										<View style={ [ styles.imageContainer, { height: imageContainerHeight } ] } >
-											{ this.getIcon( false ) }
-										</View> }
-									<ImageBackground
-										accessible={ true }
-										disabled={ ! isSelected }
-										accessibilityLabel={ alt }
-										accessibilityHint={ __( 'Double tap and hold to edit' ) }
-										accessibilityRole={ 'imagebutton' }
-										style={ [ imageBorderOnSelectedStyle, { width: finalWidth, height: finalHeight, opacity } ] }
-										resizeMethod="scale"
-										source={ { uri: url } }
-										key={ url }
-									>
-										{ isUploadFailed &&
-											<View style={ [ styles.imageContainer, { flex: 1, backgroundColor: 'rgba(0, 0, 0, 0.5)' } ] } >
-												{ iconContainer }
-												<Text style={ styles.uploadFailedText }>{ retryMessage }</Text>
-											</View>
-										}
-									</ImageBackground>
-								</View>
-							);
-						} }
-					/>
-					<Caption
-						clientId={ this.props.clientId }
-						isSelected={ this.state.isCaptionSelected }
-						accessible={ true }
-						accessibilityLabelCreator={ ( caption ) =>
-							isEmpty( caption ) ?
-							/* translators: accessibility text. Empty image caption. */
-								( 'Image caption. Empty' ) :
-								sprintf(
-								/* translators: accessibility text. %s: image caption. */
-									__( 'Image caption. %s' ),
-									caption )
+			<Badgeable text="gif" show={ url.includes( '.gif' ) } >
+				<TouchableWithoutFeedback
+					accessible={ ! isSelected }
+					onPress={ this.onImagePressed }
+					onLongPress={ openMediaOptions }
+					disabled={ ! isSelected }
+				>
+					<View style={ { flex: 1 } }>
+						{ getInspectorControls() }
+						{ getMediaOptions() }
+						{ ( ! this.state.isCaptionSelected ) &&
+							getToolbarEditButton( openMediaOptions )
 						}
-						onFocus={ this.onFocusCaption }
-						onBlur={ this.props.onBlur } // always assign onBlur as props
-					/>
-				</View>
-			</TouchableWithoutFeedback>
+						<MediaUploadProgress
+							height={ height }
+							width={ width }
+							coverUrl={ url }
+							mediaId={ id }
+							onUpdateMediaProgress={ this.updateMediaProgress }
+							onFinishMediaUploadWithSuccess={ this.finishMediaUploadWithSuccess }
+							onFinishMediaUploadWithFailure={ this.finishMediaUploadWithFailure }
+							onMediaUploadStateReset={ this.mediaUploadStateReset }
+							renderContent={ ( { isUploadInProgress, isUploadFailed, finalWidth, finalHeight, imageWidthWithinContainer, retryMessage } ) => {
+								const opacity = isUploadInProgress ? 0.3 : 1;
+								const icon = this.getIcon( isUploadFailed );
+								const imageBorderOnSelectedStyle = isSelected && ! ( isUploadInProgress || isUploadFailed || this.state.isCaptionSelected ) ? styles.imageBorder : '';
+
+								const iconContainer = (
+									<View style={ styles.modalIcon }>
+										{ icon }
+									</View>
+								);
+
+								return (
+									<View style={ {
+										flex: 1,
+										// only set alignSelf if an image exists because alignSelf causes the placeholder
+										// to disappear when an aligned image can't be downloaded
+										// https://github.com/wordpress-mobile/gutenberg-mobile/issues/1592
+										alignSelf: imageWidthWithinContainer && alignToFlex[ align ] }
+									} >
+										{ ! imageWidthWithinContainer &&
+											<View style={ [ styles.imageContainer, { height: imageContainerHeight } ] } >
+												{ this.getIcon( false ) }
+											</View> }
+										<ImageBackground
+											accessible={ true }
+											disabled={ ! isSelected }
+											accessibilityLabel={ alt }
+											accessibilityHint={ __( 'Double tap and hold to edit' ) }
+											accessibilityRole={ 'imagebutton' }
+											style={ [ imageBorderOnSelectedStyle, { width: finalWidth, height: finalHeight, opacity } ] }
+											resizeMethod="scale"
+											source={ { uri: url } }
+											key={ url }
+										>
+											{ isUploadFailed &&
+												<View style={ [ styles.imageContainer, { flex: 1, backgroundColor: 'rgba(0, 0, 0, 0.5)' } ] } >
+													{ iconContainer }
+													<Text style={ styles.uploadFailedText }>{ retryMessage }</Text>
+												</View>
+											}
+										</ImageBackground>
+									</View>
+								);
+							} }
+						/>
+						<Caption
+							clientId={ this.props.clientId }
+							isSelected={ this.state.isCaptionSelected }
+							accessible={ true }
+							accessibilityLabelCreator={ ( caption ) =>
+								isEmpty( caption ) ?
+								/* translators: accessibility text. Empty image caption. */
+									( 'Image caption. Empty' ) :
+									sprintf(
+									/* translators: accessibility text. %s: image caption. */
+										__( 'Image caption. %s' ),
+										caption )
+							}
+							onFocus={ this.onFocusCaption }
+							onBlur={ this.props.onBlur } // always assign onBlur as props
+						/>
+					</View>
+				</TouchableWithoutFeedback>
+
+			</Badgeable>
 		);
 
 		return (
diff --git a/packages/components/src/index.native.js b/packages/components/src/index.native.js
index 66e5e609cb7539..858e2ec812aa49 100644
--- a/packages/components/src/index.native.js
+++ b/packages/components/src/index.native.js
@@ -38,3 +38,4 @@ export { default as KeyboardAwareFlatList } from './mobile/keyboard-aware-flat-l
 export { default as Picker } from './mobile/picker';
 export { default as ReadableContentView } from './mobile/readable-content-view';
 export { default as StepperControl } from './mobile/stepper-control';
+export { default as Badgeable } from './mobile/badgeable';
diff --git a/packages/components/src/mobile/badgeable/README.md b/packages/components/src/mobile/badgeable/README.md
new file mode 100644
index 00000000000000..e025b4f14ecfbe
--- /dev/null
+++ b/packages/components/src/mobile/badgeable/README.md
@@ -0,0 +1,39 @@
+# Badgeable
+
+Badgeable wraps a component and adds a `Badge` overlay to that component. It looks like this:
+
+![badgeable example](./example.png)
+
+A Badgeable component allows us to easily add badges to existing components without duplicating code for overlaying and positioning the Badge component. Moreover, with this approach, changing the positioning of badges can be done in one place instead of every place where a badge is visible.
+
+## Usage
+
+```jsx
+import { Image } from 'react-native';
+import { Badgeable } from '@wordpress/components';
+const BadgeableImage = ()	=> (
+  <Badgeable text="gif" show={ url.includes( '.gif' ) }>
+    <Image 
+      style={ { width: 50, height: 50 } }
+      source={ { uri: 'https://facebook.github.io/react-native/img/tiny_logo.png' } }
+    />
+  </Badgeable>
+)} >
+```
+
+### Props
+
+#### text
+
+- Type: `String`
+- Required: Yes
+
+The text to display within the badge. An uppercase transform will be applied.
+
+#### show
+
+- Type: `Boolean`
+- Required: No
+- Default: `true`
+
+Whether to overlay the badge. 
\ No newline at end of file
diff --git a/packages/components/src/mobile/badgeable/example.png b/packages/components/src/mobile/badgeable/example.png
new file mode 100644
index 00000000000000..bfcd97c24901d3
Binary files /dev/null and b/packages/components/src/mobile/badgeable/example.png differ
diff --git a/packages/components/src/mobile/badgeable/index.native.js b/packages/components/src/mobile/badgeable/index.native.js
new file mode 100644
index 00000000000000..da3f5c642c55d0
--- /dev/null
+++ b/packages/components/src/mobile/badgeable/index.native.js
@@ -0,0 +1,23 @@
+/**
+ * External dependencies
+ */
+import { Text, View } from 'react-native';
+
+/**
+ * Internal dependencies
+ */
+import styles from './styles.scss';
+
+const Badge = ( { text } ) => (
+	<View style={ styles.badge }>
+		<Text style={ styles.badgeText }>{ text }</Text>
+	</View>
+);
+const Badgeable = ( { text, children, show = true } ) => (
+	<View>
+		{ children }
+		{ show && <Badge text={ text } /> }
+	</View>
+);
+
+export default Badgeable;
diff --git a/packages/components/src/mobile/badgeable/styles.native.scss b/packages/components/src/mobile/badgeable/styles.native.scss
new file mode 100644
index 00000000000000..6636beb17932a9
--- /dev/null
+++ b/packages/components/src/mobile/badgeable/styles.native.scss
@@ -0,0 +1,15 @@
+.badge {
+	position: absolute;
+	top: 10px;
+	left: 10px;
+	background-color: rgba(85, 85, 85, 0.7);
+	border-radius: 6px;
+	padding: 3px 6px;
+}
+
+.badgeText {
+	text-transform: uppercase;
+	color: #fff;
+	font-size: 12px;
+	font-weight: 500;
+}