0.2.34

app/(app)/(tabs)/_layout.tsx

@@ -0,0 +1,56 @@
+import {Pressable, View} from 'react-native';
+import {Icon, useDooboo} from 'dooboo-ui';
+import {Link, Tabs, useRouter} from 'expo-router';
+
+function SettingsMenu(): JSX.Element {
+  const {theme} = useDooboo();
+  const {push} = useRouter();
+
+  return (
+    <Link asChild href="/modal">
+      <Pressable onPress={() => push('settings')}>
+        {({pressed}) => (
+          <Icon
+            color={theme.text.basic}
+            name="List"
+            size={22}
+            style={{marginRight: 15, opacity: pressed ? 0.5 : 1}}
+          />
+        )}
+      </Pressable>
+    </Link>
+  );
+}
+
+export default function TabLayout(): JSX.Element {
+  const {theme} = useDooboo();
+
+  return (
+    <Tabs
+      screenOptions={{
+        tabBarActiveTintColor: theme.role.primary,
+      }}
+    >
+      <Tabs.Screen
+        name="index"
+        options={{
+          title: '커뮤니티',
+          tabBarIcon: () => (
+            <Icon color={theme.text.label} name="Article" size={24} />
+          ),
+          headerRight: () => <View>{SettingsMenu()}</View>,
+        }}
+      />
+      <Tabs.Screen
+        name="profile"
+        options={{
+          title: '프로필',
+          tabBarIcon: () => (
+            <Icon color={theme.text.label} name="User" size={24} />
+          ),
+          headerRight: () => <View>{SettingsMenu()}</View>,
+        }}
+      />
+    </Tabs>
+  );
+}

app/(app)/(tabs)/index.tsx

@@ -0,0 +1,29 @@
+import {View} from 'react-native';
+import styled, {css} from '@emotion/native';
+import {Fab, Typography} from 'dooboo-ui';
+import {Stack} from 'expo-router';
+
+const Container = styled.View`
+  flex: 1;
+  align-self: stretch;
+  background-color: ${({theme}) => theme.bg.basic};
+`;
+
+export default function Community(): JSX.Element {
+  return (
+    <Container>
+      <Stack.Screen options={{title: '커뮤니티'}} />
+      <Typography.Heading3>커뮤니티</Typography.Heading3>
+      <Fab
+        animationDuration={300}
+        fabIcon="Plus"
+        onPressFab={() => {
+          console.log('onPressFab');
+        }}
+        style={css`
+          bottom: 16px;
+        `}
+      />
+    </Container>
+  );
+}

app/(app)/(tabs)/profile.tsx

@@ -0,0 +1,11 @@
+import {View} from 'react-native';
+import {Typography} from 'dooboo-ui';
+import {Stack} from 'expo-router';
+
+export default function Index(): JSX.Element {
+  return (
+    <View>
+      <Typography.Heading3>프로필</Typography.Heading3>
+    </View>
+  );
+}

app/_layout.tsx

@@ -131,6 +131,7 @@ function Layout(): JSX.Element | null {
               ),
           }}
         >
+          <Stack.Screen name="(app)/(tabs)" options={{headerShown: false}} />
           {/* Note: Only modals are written here.  */}
         </Stack>
       </Content>

test/app/index.test.tsx

@@ -3,7 +3,7 @@ import 'react-native';
 import type {RenderAPI} from '@testing-library/react-native';
 import {render, waitFor} from '@testing-library/react-native';
 
-import Page from '../../app/(app)/index';
+import Page from '../../app/(app)/(tabs)/_layout';
 import {createTestElement, createTestProps} from '../testUtils';
 
 let props: any;