feat: bottom sheet component

app/src/components/modal/BottomSheet.tsx

@@ -0,0 +1,99 @@
+import { useEffect, useRef, useState } from 'react';
+import {
+  Animated,
+  Dimensions,
+  Modal,
+  PanResponder,
+  Pressable,
+  StyleSheet,
+  View,
+} from 'react-native';
+
+import { bottomSheetStyle } from '@/styles';
+
+type Props = {
+  visible: boolean;
+  onClose: () => void;
+  children: React.ReactNode;
+  snapHeight?: number;
+};
+
+const SCREEN_HEIGHT = Dimensions.get('window').height;
+const DEFAULT_SNAP_HEIGHT = 0.9;
+const CLOSE_THRESHOLD = 120;
+const DRAG_ACTIVATION_THRESHOLD = 5;
+
+const BottomSheet = ({ visible, onClose, children, snapHeight = DEFAULT_SNAP_HEIGHT }: Props) => {
+  const [internalVisible, setInternalVisible] = useState(false);
+  const translateY = useRef(new Animated.Value(SCREEN_HEIGHT)).current;
+  const SHEET_MAX_HEIGHT = SCREEN_HEIGHT * snapHeight;
+
+  const panResponder = useRef(
+    PanResponder.create({
+      onStartShouldSetPanResponder: () => true,
+      onMoveShouldSetPanResponder: (_, gestureState) =>
+        Math.abs(gestureState.dy) > DRAG_ACTIVATION_THRESHOLD,
+      onPanResponderMove: (_, gestureState) => {
+        const newY = SCREEN_HEIGHT - SHEET_MAX_HEIGHT + gestureState.dy;
+        if (newY >= SCREEN_HEIGHT - SHEET_MAX_HEIGHT) {
+          translateY.setValue(newY);
+        }
+      },
+      onPanResponderRelease: (_, gestureState) => {
+        if (gestureState.dy > CLOSE_THRESHOLD) {
+          onClose();
+        } else {
+          Animated.spring(translateY, {
+            toValue: SCREEN_HEIGHT - SHEET_MAX_HEIGHT,
+            useNativeDriver: true,
+            stiffness: 100,
+            damping: 20,
+          }).start();
+        }
+      },
+    }),
+  ).current;
+
+  useEffect(() => {
+    if (visible) {
+      setInternalVisible(true);
+      Animated.spring(translateY, {
+        toValue: SCREEN_HEIGHT - SHEET_MAX_HEIGHT,
+        useNativeDriver: true,
+        stiffness: 250,
+        damping: 28,
+        mass: 1,
+      }).start();
+    } else {
+      Animated.timing(translateY, {
+        toValue: SCREEN_HEIGHT,
+        duration: 220,
+        useNativeDriver: true,
+      }).start(() => setInternalVisible(false));
+    }
+  }, [visible, translateY, SHEET_MAX_HEIGHT]);
+
+  if (!internalVisible) {
+    return null;
+  }
+
+  return (
+    <Modal transparent animationType="none" visible={internalVisible}>
+      <Pressable style={styles.backdrop} onPress={onClose} />
+      <Animated.View
+        style={[styles.sheet, { height: SHEET_MAX_HEIGHT, transform: [{ translateY }] }]}
+      >
+        <View style={styles.grabber} {...panResponder.panHandlers} />
+        {children}
+      </Animated.View>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  backdrop: bottomSheetStyle.backdrop,
+  sheet: bottomSheetStyle.sheet,
+  grabber: bottomSheetStyle.grabber,
+});
+
+export default BottomSheet;

app/src/components/navigation/CreateChatButton.tsx

@@ -3,9 +3,13 @@ import { TouchableOpacity, StyleSheet } from 'react-native';
 import OutlinedIcon from '@/components/common/OutlinedIcon';
 import { navigationStyle } from '@/styles';
 
-const CreateChatButton = () => {
+type Props = {
+  onPress?: () => void;
+};
+
+const CreateChatButton = ({ onPress }: Props) => {
   return (
-    <TouchableOpacity style={styles.topBarIconWrapper} onPress={() => {}}>
+    <TouchableOpacity style={styles.topBarIconWrapper} onPress={onPress}>
       <OutlinedIcon
         name="edit-square"
         color={navigationStyle.header.rightIconColorSecondary}

app/src/i18n/en/chat.json

@@ -1,13 +1,18 @@
 {
-"chatsScreen": {
-    "emptyStateTitle": "No chats",
-    "emptyStateDescription": "No chats found."
-},
+  "chatsScreen": {
+      "emptyStateTitle": "No chats",
+      "emptyStateDescription": "No chats found."
+  },
   "messagesScreen": {
     "emptyStateTitle": "No messages",
     "emptyStateDescription": "No messages in this conversation yet."
   },
   "chat": {
     "messageInputPlaceholder": "Type a message"
+  },
+  "createChatWizard": {
+    "title": "Create chat",
+    "next": "Next",
+    "cancel": "Cancel"
   }
 }

app/src/screens/chat/ChatScreen.tsx

@@ -1,14 +1,16 @@
 import { useNavigation, useFocusEffect } from '@react-navigation/native';
 import type { StackNavigationProp } from '@react-navigation/stack';
 import { useQueryClient } from '@tanstack/react-query';
-import { useEffect, useCallback } from 'react';
+import { useEffect, useCallback, useLayoutEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import StatusMessage from '@/components/common/EmptyStateHelper';
 import ListViewChat from '@/components/list/ListViewChat';
+import CreateChatButton from '@/components/navigation/CreateChatButton';
 import { useAccount } from '@/context/AccountContext';
 import { useChats, ChatsProvider } from '@/context/ChatsContext';
 import { useSignalR } from '@/context/SignalRContext';
+import CreateChatModal from '@/screens/chat/CreateChatModal';
 import type { RootStackParamList } from '@/types/navigation';
 import type { EntitySubscription } from '@/types/signalr';
 import { TestIDs } from '@/utils/testID';
@@ -30,6 +32,8 @@ const ChatScreenContent = () => {
     fetchChats,
   } = useChats();
 
+  const [isCreateChatVisible, setCreateChatVisible] = useState(false);
+
   const { userData } = useAccount();
   const userId = userData?.id;
   const currentAccountId = userData?.currentAccount?.id;
@@ -40,6 +44,12 @@ const ChatScreenContent = () => {
   const navigation = useNavigation<StackNavigationProp<RootStackParamList>>();
   const { subscribe, addMessageListener, isConnected } = useSignalR();
 
+  useLayoutEffect(() => {
+    navigation.setOptions({
+      headerRight: () => <CreateChatButton onPress={() => setCreateChatVisible(true)} />,
+    });
+  }, [navigation]);
+
   useEffect(() => {
     void subscribe(CHAT_SUBSCRIPTIONS);
   }, [subscribe, isConnected]);
@@ -91,6 +101,7 @@ const ChatScreenContent = () => {
           });
         }}
       />
+      <CreateChatModal visible={isCreateChatVisible} onClose={() => setCreateChatVisible(false)} />
     </StatusMessage>
   );
 };

app/src/screens/chat/CreateChatModal.tsx

@@ -0,0 +1,131 @@
+import { useNavigation } from '@react-navigation/native';
+import type { StackNavigationProp } from '@react-navigation/stack';
+import { useState, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  View,
+  Text,
+  TextInput,
+  ScrollView,
+  StyleSheet,
+  KeyboardAvoidingView,
+  TouchableOpacity,
+  Platform,
+  Button,
+} from 'react-native';
+
+import BottomSheet from '@/components/modal/BottomSheet';
+import { createChatWizardStyle, inputStyle } from '@/styles';
+import type { RootStackParamList } from '@/types/navigation';
+
+type Props = {
+  visible: boolean;
+  onClose: () => void;
+};
+
+const CreateChatModal = ({ visible, onClose }: Props) => {
+  const [step, setStep] = useState(0);
+  const [chatType, setChatType] = useState<'group' | 'direct' | null>(null);
+  const [chatName, setChatName] = useState('');
+
+  const { t } = useTranslation();
+
+  const navigation = useNavigation<StackNavigationProp<RootStackParamList>>();
+
+  const handleClose = useCallback(() => {
+    setStep(0);
+    setChatType(null);
+    setChatName('');
+    onClose();
+  }, [onClose]);
+
+  const handleNext = () => {
+    if (step === 0) {
+      if (!chatType) return;
+      setStep(1);
+    } else if (step === 1) {
+      if (!chatName.trim()) return;
+      setStep(2);
+    } else if (step === 2) {
+      navigation.navigate('chatConversation', { id: 'CHT-123-4565' });
+      handleClose();
+    }
+  };
+
+  return (
+    <BottomSheet visible={visible} onClose={handleClose}>
+      <View style={styles.headerRow}>
+        <View style={styles.headerSide}>
+          <TouchableOpacity onPress={handleClose}>
+            <Text style={styles.headerTextCancel}>{t('createChatWizard.cancel')}</Text>
+          </TouchableOpacity>
+        </View>
+        <View style={styles.headerCenter}>
+          <Text style={styles.headerTitle}>{t('createChatWizard.title')}</Text>
+        </View>
+        <View style={styles.headerSide}>
+          {step > 0 && (
+            <TouchableOpacity onPress={handleNext}>
+              <Text style={styles.headerTextNext}>{t('createChatWizard.next')}</Text>
+            </TouchableOpacity>
+          )}
+        </View>
+      </View>
+      <KeyboardAvoidingView
+        behavior="height"
+        keyboardVerticalOffset={Platform.OS === 'ios' ? 200 : 0}
+      >
+        {step === 0 && (
+          <View>
+            <Button
+              title="Group Chat"
+              onPress={() => {
+                setChatType('group');
+                setStep(1);
+              }}
+            />
+            <Button
+              title="Direct Chat: John Doe"
+              onPress={() => {
+                handleClose();
+                navigation.navigate('chatConversation', { id: 'CHT-234-2345' });
+              }}
+            />
+          </View>
+        )}
+
+        {step === 1 && (
+          <View>
+            <TextInput
+              placeholder="Enter chat name"
+              value={chatName}
+              onChangeText={setChatName}
+              style={styles.input}
+              autoFocus
+            />
+          </View>
+        )}
+
+        {step === 2 && (
+          <View>
+            <ScrollView>
+              <Text>User list placeholder</Text>
+            </ScrollView>
+          </View>
+        )}
+      </KeyboardAvoidingView>
+    </BottomSheet>
+  );
+};
+
+const styles = StyleSheet.create({
+  headerRow: createChatWizardStyle.headerRow,
+  headerSide: createChatWizardStyle.headerSide,
+  headerCenter: createChatWizardStyle.headerCenter,
+  headerTitle: createChatWizardStyle.headerTitle,
+  headerTextCancel: createChatWizardStyle.headerTextCancel,
+  headerTextNext: createChatWizardStyle.headerTextNext,
+  input: inputStyle.container,
+});
+
+export default CreateChatModal;

app/src/screens/index.ts

@@ -28,6 +28,7 @@ export { default as EnrollmentDetailsScreen } from './enrollments/EnrollmentDeta
 export { default as CertificateDetailsScreen } from './certificates/CertificateDetailsScreen';
 export { default as ChatScreen } from './chat/ChatScreen';
 export { default as ChatConversationScreen } from './chat/ChatConversationScreen';
+export { default as CreateChatModal } from './chat/CreateChatModal';
 
 export { WelcomeScreen } from './auth';
 export { LoadingScreen } from './loading';

app/src/styles/components/bottomSheet.ts

@@ -0,0 +1,30 @@
+import { BorderRadius, Color, Spacing } from '../tokens';
+
+export const bottomSheetStyle = {
+  backdrop: {
+    position: 'absolute',
+    left: Spacing.spacing0,
+    right: Spacing.spacing0,
+    top: Spacing.spacing0,
+    bottom: Spacing.spacing0,
+    backgroundColor: Color.fills.overlay,
+  },
+  sheet: {
+    position: 'absolute',
+    bottom: Spacing.spacing0,
+    width: '100%',
+    backgroundColor: Color.brand.white,
+    borderTopLeftRadius: BorderRadius.md,
+    borderTopRightRadius: BorderRadius.md,
+    paddingHorizontal: Spacing.spacing2,
+    paddingBottom: Spacing.spacing2,
+  },
+  grabber: {
+    width: 36,
+    height: 5,
+    borderRadius: BorderRadius.xxs,
+    backgroundColor: Color.gray.gray3,
+    alignSelf: 'center',
+    marginTop: Spacing.spacingSmall6,
+  },
+} as const;

app/src/styles/components/chat.ts

@@ -99,3 +99,35 @@ export const chatMessageStyle = {
     },
   },
 } as const;
+
+const wizardHeaderButtonCommon = {
+  fontSize: Typography.fontSize.font3,
+  color: Color.brand.type,
+};
+
+export const createChatWizardStyle = {
+  headerRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: Spacing.spacing2,
+  },
+  headerSide: {
+    minWidth: 60,
+  },
+  headerCenter: {
+    flex: 1,
+    alignItems: 'center',
+  },
+  headerTitle: {
+    fontSize: Typography.fontSize.font4,
+    fontWeight: Typography.fontWeight.medium,
+    lineHeight: Typography.lineHeight.height5,
+  },
+  headerTextCancel: {
+    ...wizardHeaderButtonCommon,
+  },
+  headerTextNext: {
+    ...wizardHeaderButtonCommon,
+    color: Color.brand.primary,
+  },
+} as const;