diff --git a/client/react-native/common/components/Library/Badge.js b/client/react-native/common/components/Library/Badge.js
new file mode 100644
index 0000000000..9a5034a073
--- /dev/null
+++ b/client/react-native/common/components/Library/Badge.js
@@ -0,0 +1,114 @@
+import React from 'react'
+import { Flex, Text } from '.'
+import { colors } from '../../constants'
+
+const find = ({ inside, from, or }) => {
+ const key = Object.keys(inside).find(
+ inKey =>
+ Object.keys(from).some(fromKey => fromKey === inKey) && !!inside[inKey]
+ )
+ return from[key] || from[or]
+}
+
+const getVertiPos = (
+ props,
+ positions = {
+ top: 'start',
+ bottom: 'end',
+ }
+) => find({ inside: props, from: positions, or: 'top' })
+
+const getHorizPos = (
+ props,
+ positions = {
+ left: 'start',
+ right: 'end',
+ }
+) => find({ inside: props, from: positions, or: 'right' })
+
+const getSize = (
+ props,
+ sizes = {
+ tiny: props.icon ? 20 : 14,
+ small: props.icon ? 28 : 20,
+ medium: props.icon ? 34 : 25,
+ large: props.icon ? 38 : 30,
+ big: props.icon ? 49 : 39,
+ }
+) => find({ inside: props, from: sizes, or: 'small' })
+
+const getPadding = (
+ props,
+ paddings = {
+ tiny: 2,
+ small: 3,
+ medium: 4,
+ large: 5,
+ big: 6,
+ }
+) => find({ inside: props, from: paddings, or: 'small' })
+
+const getHorizAbsol = (
+ props,
+ padding = getPadding(props),
+ positions = {
+ top: { top: -padding },
+ bottom: { bottom: -padding },
+ }
+) => find({ inside: props, from: positions, or: 'top' })
+
+const getVertiAbsol = (
+ props,
+ padding = getPadding(props),
+ positions = {
+ left: { left: -padding },
+ right: { right: -padding },
+ }
+) => find({ inside: props, from: positions, or: 'right' })
+
+const Badge = props => {
+ const {
+ background,
+ color,
+ value,
+ icon,
+ children,
+ top,
+ bottom,
+ left,
+ right,
+ height,
+ ...otherProps
+ } = props
+ const [horizPos, vertiPos, size, padding, absolute] = [
+ getHorizPos(props),
+ getVertiPos(props),
+ getSize(props),
+ getPadding(props),
+ { ...getHorizAbsol(props), ...getVertiAbsol(props) },
+ ]
+ if (value == null && !icon) {
+ return children
+ }
+ return (
+
+ {children}
+
+ {value != null && value}
+
+
+ )
+}
+
+export default Badge
diff --git a/client/react-native/common/components/Library/Icon.js b/client/react-native/common/components/Library/Icon.js
index efc251a9e5..c6e03a2a41 100644
--- a/client/react-native/common/components/Library/Icon.js
+++ b/client/react-native/common/components/Library/Icon.js
@@ -4,7 +4,7 @@ import IconAwesome from 'react-native-vector-icons/dist/FontAwesome'
import IconMatCom from 'react-native-vector-icons/dist/MaterialCommunityIcons'
import { colors } from '../../constants'
-const Icon = ({ name, color, rotate, style, ...props }) => {
+const Icon = ({ name, color, rotate, src, style, ...props }) => {
if (name == null) return null
const [type, iconName] = [
name.split('-', 1)[0],
diff --git a/client/react-native/common/components/Library/Image.js b/client/react-native/common/components/Library/Image.js
new file mode 100644
index 0000000000..5a88cdb4c8
--- /dev/null
+++ b/client/react-native/common/components/Library/Image.js
@@ -0,0 +1,8 @@
+import React from 'react'
+import { Image as ImageNative } from 'react-native'
+
+const Image = ({ src, style }) => {
+ return
+}
+
+export default Image
diff --git a/client/react-native/common/components/Library/ListItem.js b/client/react-native/common/components/Library/ListItem.js
index 1fbea65a60..00dbc85e4a 100644
--- a/client/react-native/common/components/Library/ListItem.js
+++ b/client/react-native/common/components/Library/ListItem.js
@@ -21,7 +21,7 @@ export default class ListItem extends PureComponent {
{
align,
self,
onPress,
+ absolute,
} = props
const styleProp = [
{
+ position: absolute && 'absolute',
+ ...(typeof absolute === 'object' ? absolute : {}),
backgroundColor:
(background === true && colors.blackGrey) ||
background ||
diff --git a/client/react-native/common/components/Library/index.js b/client/react-native/common/components/Library/index.js
index b7a2eb8032..95d063c31b 100644
--- a/client/react-native/common/components/Library/index.js
+++ b/client/react-native/common/components/Library/index.js
@@ -9,3 +9,5 @@ export Flex from './Flex'
export Separator from './Separator'
export Button from './Button'
export CustomTextInput from './CustomTextInput.js'
+export Image from './Image'
+export Badge from './Badge'