Add Clubhouse example

example/src/App.tsx

@@ -18,9 +18,10 @@ import { createStackNavigator } from '@react-navigation/stack';
 
 // Screens
 import Home, { ToggleThemeButton } from './screens/Home';
+import Playground from './screens/Playground';
 import Whatsapp from './screens/Whatsapp';
 import Telegram from './screens/Telegram';
-import Playground from './screens/Playground';
+import Clubhouse, { ClubhouseNavButton } from './screens/Clubhouse';
 
 // Hold Menu
 import { HoldMenuProvider } from 'react-native-hold-menu';
@@ -97,6 +98,18 @@ const App = () => {
                 options={{ ...headerOptions }}
                 component={Telegram}
               />
+              <Stack.Screen
+                name="Clubhouse"
+                options={{
+                  headerStyle: {
+                    backgroundColor: StyleGuide.palette.clubhouse.background,
+                    shadowColor: StyleGuide.palette.clubhouse.background,
+                  },
+                  headerTintColor: StyleGuide.palette.light.color,
+                  headerLeft: () => <ClubhouseNavButton />,
+                }}
+                component={Clubhouse}
+              />
             </Stack.Navigator>
           </NavigationContainer>
         </HoldMenuProvider>

example/src/screens/Clubhouse/Clubhouse.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import StyleGuide from '../../utilities/styleGuide';
+
+const Clubhouse = () => {
+  return <View style={styles.container} />;
+};
+
+export default Clubhouse;
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: StyleGuide.palette.clubhouse.background,
+    flex: 1,
+  },
+});

example/src/screens/Clubhouse/ClubhouseNavButton.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import Icons from 'react-native-vector-icons/Feather';
+
+import { HoldItem } from 'react-native-hold-menu';
+
+const ClubhouseNavButton = () => {
+  return (
+    <View style={styles.container}>
+      <HoldItem items={[{ title: 'Profile', onProfile: () => {} }]}>
+        <Icons name="chevron-left" size={24} />
+      </HoldItem>
+    </View>
+  );
+};
+
+export default ClubhouseNavButton;
+
+const styles = StyleSheet.create({
+  container: {
+    marginLeft: 16,
+  },
+});

example/src/screens/Clubhouse/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Clubhouse';
+export { default as ClubhouseNavButton } from './ClubhouseNavButton';

example/src/utilities/styleGuide.ts

@@ -40,10 +40,13 @@ const StyleGuide = {
         color: '#474747',
       },
       dark: {
-        background: 'black',
+        background: '#FFF',
         color: '#FFF',
       },
     },
+    clubhouse: {
+      background: '#F3F0E7',
+    },
   },
   typography: {
     body: {