My lists are done

src/components/Menu/Container.tsx

@@ -0,0 +1,8 @@
+import React from 'react'
+import { View } from 'react-native'
+
+const MenuContainer: React.FC = ({ ...props }) => {
+  return <View>{props.children}</View>
+}
+
+export default MenuContainer

src/components/Menu/Header.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { StyleSheet, Text } from 'react-native'
+
+export interface Props {
+  heading: string
+}
+
+const MenuHeader: React.FC<Props> = ({ heading }) => {
+  return <Text style={styles.header}>{heading}</Text>
+}
+
+const styles = StyleSheet.create({
+  header: {
+    marginTop: 12,
+    paddingLeft: 12,
+    paddingRight: 12
+  }
+})
+
+export default MenuHeader

src/components/Menu/Item.tsx

@@ -0,0 +1,70 @@
+import React from 'react'
+import { Pressable, StyleSheet, Text, View } from 'react-native'
+import { useNavigation } from '@react-navigation/native'
+import { Feather } from '@expo/vector-icons'
+
+export interface Props {
+  icon?: string
+  title: string
+  navigateTo?: string
+  navigateToParams?: {}
+}
+
+const Core: React.FC<Props> = ({ icon, title, navigateTo }) => {
+  return (
+    <View style={styles.core}>
+      {icon && <Feather name={icon} size={24} style={styles.iconLeading} />}
+      <Text>{title}</Text>
+      {navigateTo && (
+        <Feather
+          name='chevron-right'
+          size={24}
+          color='lightgray'
+          style={styles.iconNavigation}
+        />
+      )}
+    </View>
+  )
+}
+
+const MenuItem: React.FC<Props> = ({ ...props }) => {
+  const navigation = useNavigation()
+
+  return props.navigateTo ? (
+    <Pressable
+      style={styles.base}
+      onPress={() => {
+        navigation.navigate(props.navigateTo!, props.navigateToParams)
+      }}
+    >
+      <Core {...props} />
+    </Pressable>
+  ) : (
+    <View style={styles.base}>
+      <Core {...props} />
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  base: {
+    height: 50,
+    borderBottomColor: 'lightgray',
+    borderBottomWidth: 1
+  },
+  core: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingLeft: 12,
+    paddingRight: 12
+  },
+  iconLeading: {
+    marginRight: 8
+  },
+  iconNavigation: {
+    marginLeft: 'auto'
+  }
+})
+
+export default MenuItem