2 files changed, 52 insertions, 0 deletions
diff --git a/src/components/messages/MessagesHeader.tsx b/src/components/messages/MessagesHeader.tsx
new file mode 100644
index 00000000..47a84bf3
--- /dev/null
+++ b/src/components/messages/MessagesHeader.tsx
@@ -0,0 +1,51 @@
+import * as React from 'react';
+import {Alert, StyleSheet, View} from 'react-native';
+import {Text} from 'react-native-animatable';
+import {TouchableOpacity} from 'react-native-gesture-handler';
+import {normalize} from '../../utils';
+
+type MessagesHeaderProps = {};
+
+const MessagesHeader: React.FC<MessagesHeaderProps> = () => {
+  return (
+    <View style={styles.header}>
+      <Text style={styles.headerText}>Messages</Text>
+      <Text style={styles.unreadText}>2 unread</Text>
+      <View style={styles.flex} />
+      <TouchableOpacity
+        style={styles.compose}
+        onPress={() => {
+          Alert.alert('hi');
+        }}>
+        <Text>Compose</Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  flex: {
+    flex: 1,
+  },
+  header: {
+    marginHorizontal: '8%',
+    marginTop: '5%',
+    alignItems: 'center',
+    flexDirection: 'row',
+  },
+  headerText: {
+    fontWeight: '700',
+    fontSize: normalize(18),
+    lineHeight: normalize(21),
+  },
+  unreadText: {
+    color: '#8F01FF',
+    marginLeft: 10,
+    fontWeight: '700',
+    lineHeight: normalize(17),
+    fontSize: normalize(14),
+  },
+  compose: {},
+});
+
+export default MessagesHeader;
diff --git a/src/components/messages/index.ts b/src/components/messages/index.ts
new file mode 100644
index 00000000..2d6bb581
--- /dev/null
+++ b/src/components/messages/index.ts
@@ -0,0 +1 @@
+export {default as MessagesHeader} from './MessagesHeader';