Add chat tab. Add GiftedChat & customize it a bit

app.json

@@ -17,6 +17,10 @@
       "usesAppleSignIn": true,
       "config": {
         "usesNonExemptEncryption": false
+      },
+      "infoPList": {
+        "NSLocationWhenInUseUsageDescription": "This app uses your location in order to allow you to share your location in chat.",
+        "NSCameraUsageDescription": "This app uses your camera to take photos & send them in the chat."
       }
     },
     "android": {
@@ -38,6 +42,12 @@
         {
           "faceIDPermission": "Allow $(PRODUCT_NAME) to access your Face ID biometric data."
         }
+      ],
+      [
+        "expo-location",
+        {
+          "locationAlwaysAndWhenInUsePermission": "Allow $(PRODUCT_NAME) to use your location."
+        }
       ]
     ],
     "experiments": {

app/(tabs)/_layout.tsx

@@ -30,6 +30,17 @@ const TabLayout = () => {
           ),
         }}
       />
+      
+      <Tabs.Screen
+        name='messages'
+        options={{
+          title: 'Messages',
+          tabBarIcon: ({ color, focused }) => (
+            <TabBarIcon name={focused ? 'chatbubbles' : 'chatbubbles-outline'} color={color} />
+          ),
+        }}
+      />
+
       <Tabs.Screen
         name='settings'
         options={{

app/(tabs)/index.tsx

@@ -1,14 +1,64 @@
-import { StyleSheet } from "react-native";
+import React, { useEffect, useState } from "react";
+import { StyleSheet, Alert } from "react-native";
 import { ThemedText } from "@/components/ThemedText";
 import { ThemedView } from "@/components/ThemedView";
 import { Colors } from '@/constants/Colors';
 import { useColorScheme } from '@/hooks/useColorScheme';
 import FontAwesome from "@expo/vector-icons/FontAwesome";
-
 import Button from "@/components/buttons/Button";
+import { getUserData } from "@/components/services/securestorage/UserData";
 
 const Index = () => {
   const scheme = useColorScheme() ?? 'light';
+  const [pushToken, setPushToken] = useState<string | null>(null);
+
+  useEffect(() => {
+    const fetchUserData = async () => {
+      const userData = await getUserData();
+      if (userData) {
+        setPushToken(userData.pushToken);
+      }
+    };
+    fetchUserData();
+  }, []);
+
+  const sendPushNotification = async () => {
+    if (!pushToken) {
+      Alert.alert('Error', 'Push token not available');
+    return;
+    }
+
+    const message = {
+      to: pushToken,
+      sound: 'default',
+      title: 'Hey Baby!',
+      body: 'Are you ready for push notifications?!?',
+      data: {
+        someData: 'goes here'
+      },
+    };
+
+    try {
+      const response = await fetch(`https://exp.host/--/api/v2/push/send`, {
+          method: 'POST',
+          headers: {
+            Accept: 'application/json',
+            'Accept-encoding': 'gzip, deflate',
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify(message),
+      });
+
+      const result = await response.json();
+      console.log('Result:', result);
+      Alert.alert('Success', 'Push notification sent successfully');
+
+    } catch (error) {
+      console.error('Error sending push notification:', error);
+      Alert.alert('Error', 'Failed to send push notification');
+    }
+  };
+
   return (
     <ThemedView style={styles.container}>
       <ThemedText style={styles.text}>
@@ -16,9 +66,9 @@ const Index = () => {
       </ThemedText>
       <ThemedView style={styles.footerContainer}>
         <Button width={220} height={60}
-          onPress={() => alert('You pressed a button.')}
+          onPress={sendPushNotification}
         >
-        <FontAwesome name="picture-o" size={18}
+        <FontAwesome name="bell" size={18}
           color={Colors[scheme].background} style={styles.buttonIcon}
         />
         <ThemedText
@@ -27,7 +77,7 @@ const Index = () => {
             {color: Colors[scheme].background}
           ]}
         >
-          Press this button
+          Send Push Notification
         </ThemedText>
         </Button>
       </ThemedView>

app/(tabs)/messages.tsx

@@ -0,0 +1,320 @@
+import React, { useCallback, useReducer } from 'react'
+import { ThemedView } from '@/components/ThemedView'
+import { ThemedText } from '@/components/ThemedText'
+import { Alert, Linking, Platform, StyleSheet } from 'react-native'
+import { MaterialIcons } from '@expo/vector-icons'
+import {
+  GiftedChat,
+  IMessage,
+  Send,
+  SendProps,
+  SystemMessage,
+} from 'react-native-gifted-chat'
+import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context'
+import NavBar from '@/components/chat/NavBar'
+import AccessoryBar from '@/components/chat/AccessoryBar'
+import CustomActions from '@/components/chat/CustomActions'
+import CustomView from '@/components/chat/CustomView'
+import earlierMessages from '@/components/chat/data/earlierMessages'
+import messagesData from '@/components/chat/data/messages'
+import * as Clipboard from 'expo-clipboard'
+
+const user = {
+  _id: 1,
+  name: 'Developer',
+}
+
+// const otherUser = {
+//   _id: 2,
+//   name: 'React Native',
+//   avatar: 'https://facebook.github.io/react/img/logo_og.png',
+// }
+
+interface IState {
+  messages: any[]
+  step: number
+  loadEarlier?: boolean
+  isLoadingEarlier?: boolean
+  isTyping: boolean
+}
+
+enum ActionKind {
+  SEND_MESSAGE = 'SEND_MESSAGE',
+  LOAD_EARLIER_MESSAGES = 'LOAD_EARLIER_MESSAGES',
+  LOAD_EARLIER_START = 'LOAD_EARLIER_START',
+  SET_IS_TYPING = 'SET_IS_TYPING',
+  // LOAD_EARLIER_END = 'LOAD_EARLIER_END',
+}
+
+// An interface for our actions
+interface StateAction {
+  type: ActionKind
+  payload?: any
+}
+
+function reducer (state: IState, action: StateAction) {
+  switch (action.type) {
+    case ActionKind.SEND_MESSAGE: {
+      return {
+        ...state,
+        step: state.step + 1,
+        messages: action.payload,
+      }
+    }
+    case ActionKind.LOAD_EARLIER_MESSAGES: {
+      return {
+        ...state,
+        loadEarlier: true,
+        isLoadingEarlier: false,
+        messages: action.payload,
+      }
+    }
+    case ActionKind.LOAD_EARLIER_START: {
+      return {
+        ...state,
+        isLoadingEarlier: true,
+      }
+    }
+    case ActionKind.SET_IS_TYPING: {
+      return {
+        ...state,
+        isTyping: action.payload,
+      }
+    }
+  }
+}
+
+const App = () => {
+  const [state, dispatch] = useReducer(reducer, {
+    messages: messagesData,
+    step: 0,
+    loadEarlier: true,
+    isLoadingEarlier: false,
+    isTyping: false,
+  })
+
+  const onSend = useCallback(
+    (messages: any[]) => {
+      const sentMessages = [{ ...messages[0], sent: true, received: true }]
+      const newMessages = GiftedChat.append(
+        state.messages,
+        sentMessages,
+        Platform.OS !== 'web'
+      )
+
+      dispatch({ type: ActionKind.SEND_MESSAGE, payload: newMessages })
+    },
+    [dispatch, state.messages]
+  )
+
+  const onLoadEarlier = useCallback(() => {
+    dispatch({ type: ActionKind.LOAD_EARLIER_START })
+    setTimeout(() => {
+      const newMessages = GiftedChat.prepend(
+        state.messages,
+        earlierMessages() as IMessage[],
+        Platform.OS !== 'web'
+      )
+
+      dispatch({ type: ActionKind.LOAD_EARLIER_MESSAGES, payload: newMessages })
+    }, 1500) // simulating network
+  }, [dispatch, state.messages])
+
+  const parsePatterns = useCallback(() => {
+    return [
+      {
+        pattern: /#(\w+)/,
+        style: { textDecorationLine: 'underline', color: 'darkorange' },
+        onPress: () => Linking.openURL('http://gifted.chat'),
+      },
+    ]
+  }, [])
+
+  const onLongPressAvatar = useCallback((pressedUser: any) => {
+    Alert.alert(JSON.stringify(pressedUser))
+  }, [])
+
+  const onPressAvatar = useCallback(() => {
+    Alert.alert('On avatar press')
+  }, [])
+
+  const handleLongPress = useCallback((context: unknown, currentMessage: object) => {
+    if (!currentMessage.text)
+      return
+
+    const options = [
+      'Copy text',
+      'Cancel',
+    ]
+
+    const cancelButtonIndex = options.length - 1
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    ;(context as any).actionSheet().showActionSheetWithOptions(
+      {
+        options,
+        cancelButtonIndex,
+      },
+      (buttonIndex: number) => {
+        switch (buttonIndex) {
+          case 0:
+            Clipboard.setStringAsync(currentMessage.text)
+            break
+          default:
+            break
+        }
+      }
+    )
+  }, [])
+
+  const onQuickReply = useCallback((replies: any[]) => {
+    const createdAt = new Date()
+    if (replies.length === 1)
+      onSend([
+        {
+          createdAt,
+          _id: Math.round(Math.random() * 1000000),
+          text: replies[0].title,
+          user,
+        },
+      ])
+    else if (replies.length > 1)
+      onSend([
+        {
+          createdAt,
+          _id: Math.round(Math.random() * 1000000),
+          text: replies.map(reply => reply.title).join(', '),
+          user,
+        },
+      ])
+    else
+      console.warn('replies param is not set correctly')
+  }, [])
+
+  const renderQuickReplySend = useCallback(() => {
+    return <ThemedText>{' custom send =>'}</ThemedText>
+  }, [])
+
+  const setIsTyping = useCallback(
+    (isTyping: boolean) => {
+      dispatch({ type: ActionKind.SET_IS_TYPING, payload: isTyping })
+    },
+    [dispatch]
+  )
+
+  const onSendFromUser = useCallback(
+    (messages: IMessage[] = []) => {
+      const createdAt = new Date()
+      const messagesToUpload = messages.map(message => ({
+        ...message,
+        user,
+        createdAt,
+        _id: Math.round(Math.random() * 1000000),
+      }))
+
+      onSend(messagesToUpload)
+    },
+    [onSend]
+  )
+
+  const renderAccessory = useCallback(() => {
+    return (
+      <AccessoryBar
+        onSend={onSendFromUser}
+        isTyping={() => setIsTyping(!state.isTyping)}
+      />
+    )
+  }, [onSendFromUser, setIsTyping, state.isTyping])
+
+  const renderCustomActions = useCallback(
+    props =>
+      Platform.OS === 'web'
+        ? null
+        : (
+          <CustomActions {...props} onSend={onSendFromUser} />
+        ),
+    [onSendFromUser]
+  )
+
+  const renderSystemMessage = useCallback(props => {
+    return (
+      <SystemMessage
+        {...props}
+        containerStyle={{
+          marginBottom: 15,
+        }}
+        textStyle={{
+          fontSize: 14,
+        }}
+      />
+    )
+  }, [])
+
+  const renderCustomView = useCallback(props => {
+    return <CustomView {...props} />
+  }, [])
+
+  const renderSend = useCallback((props: SendProps<IMessage>) => {
+    return (
+      <Send {...props} containerStyle={{ justifyContent: 'center', paddingHorizontal: 10 }}>
+        <MaterialIcons size={30} color={'tomato'} name={'send'} />
+      </Send>
+    )
+  }, [])
+
+  return (
+    <SafeAreaView style={styles.fill}>
+      <NavBar />
+      <ThemedView style={styles.fill}>
+        <GiftedChat
+          messages={state.messages}
+          onSend={onSend}
+          loadEarlier={state.loadEarlier}
+          onLoadEarlier={onLoadEarlier}
+          isLoadingEarlier={state.isLoadingEarlier}
+          parsePatterns={parsePatterns}
+          user={user}
+          scrollToBottom
+          onPressAvatar={onPressAvatar}
+          onLongPressAvatar={onLongPressAvatar}
+          onLongPress={handleLongPress}
+          onQuickReply={onQuickReply}
+          quickReplyStyle={{ borderRadius: 2 }}
+          quickReplyTextStyle={{
+            fontWeight: '200',
+          }}
+          renderQuickReplySend={renderQuickReplySend}
+          renderAccessory={renderAccessory}
+          renderActions={renderCustomActions}
+          renderSystemMessage={renderSystemMessage}
+          renderCustomView={renderCustomView}
+          renderSend={renderSend}
+          keyboardShouldPersistTaps='never'
+          timeTextStyle={{
+            left: { color: 'red' },
+            right: { color: 'yellow' },
+          }}
+          isTyping={state.isTyping}
+          inverted={Platform.OS !== 'web'}
+          infiniteScroll
+        />
+      </ThemedView>
+    </SafeAreaView>
+  )
+}
+
+const AppWrapper = () => {
+  return (
+    <SafeAreaProvider>
+      <App />
+    </SafeAreaProvider>
+  )
+}
+
+const styles = StyleSheet.create({
+  fill: {
+    flex: 1,
+  },
+})
+
+export default AppWrapper

components/chat/AccessoryBar.tsx

@@ -0,0 +1,53 @@
+import { MaterialIcons } from '@expo/vector-icons'
+import React from 'react'
+import { StyleSheet, TouchableOpacity } from 'react-native'
+import { ThemedView } from '@/components/ThemedView'
+
+import {
+  getLocationAsync,
+  pickImageAsync,
+  takePictureAsync,
+} from '@/components/chat/mediaUtils'
+
+export default class AccessoryBar extends React.Component<any> {
+  render () {
+    const { onSend, isTyping } = this.props
+
+    return (
+      <ThemedView style={styles.container}>
+        <Button onPress={() => pickImageAsync(onSend)} name='photo' />
+        <Button onPress={() => takePictureAsync(onSend)} name='camera' />
+        <Button onPress={() => getLocationAsync(onSend)} name='my-location' />
+        <Button
+          onPress={() => {
+            isTyping()
+          }}
+          name='chat'
+        />
+      </ThemedView>
+    )
+  }
+}
+
+const Button = ({
+  onPress,
+  size = 30,
+  color = 'rgba(255,255,255, 0.8)',
+  ...props
+}) => (
+  <TouchableOpacity onPress={onPress}>
+    <MaterialIcons size={size} color={color} {...props} />
+  </TouchableOpacity>
+)
+
+const styles = StyleSheet.create({
+  container: {
+    height: 44,
+    width: '100%',
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    alignItems: 'center',
+    borderTopWidth: StyleSheet.hairlineWidth,
+    borderTopColor: 'rgba(0,0,0,0.3)',
+  },
+})

components/chat/CustomActions.tsx

@@ -0,0 +1,111 @@
+import React, { useCallback } from 'react'
+import {
+  StyleProp,
+  ViewStyle,
+  TextStyle,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native'
+
+import { useActionSheet } from '@expo/react-native-action-sheet'
+import {
+  getLocationAsync,
+  pickImageAsync,
+  takePictureAsync,
+} from '@/components/chat/mediaUtils'
+
+interface Props {
+  renderIcon?: () => React.ReactNode
+  wrapperStyle?: StyleProp<ViewStyle>
+  containerStyle?: StyleProp<ViewStyle>
+  iconTextStyle?: StyleProp<TextStyle>
+  onSend: (messages: unknown) => void
+}
+
+const CustomActions = ({
+  renderIcon,
+  iconTextStyle,
+  containerStyle,
+  wrapperStyle,
+  onSend,
+}: Props) => {
+  const { showActionSheetWithOptions } = useActionSheet()
+
+  const onActionsPress = useCallback(() => {
+    const options = [
+      'Choose From Library',
+      'Take Picture',
+      'Send Location',
+      'Cancel',
+    ]
+    const cancelButtonIndex = options.length - 1
+
+    showActionSheetWithOptions(
+      {
+        options,
+        cancelButtonIndex,
+      },
+      async buttonIndex => {
+        switch (buttonIndex) {
+          case 0:
+            pickImageAsync(onSend)
+            return
+          case 1:
+            takePictureAsync(onSend)
+            return
+          case 2:
+            getLocationAsync(onSend)
+        }
+      }
+    )
+  }, [showActionSheetWithOptions, onSend])
+
+  const renderIconComponent = useCallback(() => {
+    if (renderIcon)
+      return renderIcon()
+
+    return (
+      <View style={[styles.wrapper, wrapperStyle]}>
+        <Text style={[styles.iconText, iconTextStyle]}>+</Text>
+      </View>
+    )
+  }, [renderIcon, wrapperStyle, iconTextStyle])
+
+  return (
+    <TouchableOpacity
+      style={[styles.container, containerStyle]}
+      onPress={onActionsPress}
+    >
+      {renderIconComponent()}
+    </TouchableOpacity>
+  )
+}
+
+export default CustomActions
+
+const styles = StyleSheet.create({
+  container: {
+    width: 26,
+    height: 26,
+    marginLeft: 10,
+    marginBottom: 10,
+  },
+  wrapper: {
+    borderRadius: 13,
+    borderColor: '#b2b2b2',
+    borderWidth: 2,
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  iconText: {
+    color: '#b2b2b2',
+    fontWeight: 'bold',
+    fontSize: 16,
+    lineHeight: 16,
+    backgroundColor: 'transparent',
+    textAlign: 'center',
+  },
+})

components/chat/CustomView.tsx

@@ -0,0 +1,92 @@
+import React, { useCallback } from 'react'
+import * as Linking from 'expo-linking'
+import {
+  Platform,
+  StyleSheet,
+  TouchableOpacity,
+  View,
+  Text,
+  StyleProp,
+  ViewStyle,
+} from 'react-native'
+import MapView from 'react-native-maps'
+
+interface Props {
+  currentMessage: any
+  containerStyle?: StyleProp<ViewStyle>
+  mapViewStyle?: StyleProp<ViewStyle>
+}
+
+const CustomView = ({
+  currentMessage,
+  containerStyle,
+  mapViewStyle,
+}: Props) => {
+  const openMapAsync = useCallback(async () => {
+    if (Platform.OS === 'web') {
+      alert('Opening the map is not supported.')
+      return
+    }
+
+    const { location = {} } = currentMessage
+
+    const url = Platform.select({
+      ios: `http://maps.apple.com/?ll=${location.latitude},${location.longitude}`,
+      default: `http://maps.google.com/?q=${location.latitude},${location.longitude}`,
+    })
+
+    try {
+      const supported = await Linking.canOpenURL(url)
+      if (supported)
+        return Linking.openURL(url)
+
+      alert('Opening the map is not supported.')
+    } catch (e) {
+      alert(e.message)
+    }
+  }, [currentMessage])
+
+  if (currentMessage.location)
+    return (
+      <TouchableOpacity
+        style={[styles.container, containerStyle]}
+        onPress={openMapAsync}
+      >
+        {Platform.OS !== 'web'
+          ? (
+            <MapView
+              style={[styles.mapView, mapViewStyle]}
+              region={{
+                latitude: currentMessage.location.latitude,
+                longitude: currentMessage.location.longitude,
+                latitudeDelta: 0.0922,
+                longitudeDelta: 0.0421,
+              }}
+              scrollEnabled={false}
+              zoomEnabled={false}
+            />
+          )
+          : (
+            <View style={{ padding: 15 }}>
+              <Text style={{ color: 'tomato', fontWeight: 'bold' }}>
+              Map not supported in web yet, sorry!
+              </Text>
+            </View>
+          )}
+      </TouchableOpacity>
+    )
+
+  return null
+}
+
+export default CustomView
+
+const styles = StyleSheet.create({
+  container: {},
+  mapView: {
+    width: 150,
+    height: 100,
+    borderRadius: 13,
+    margin: 3,
+  },
+})

components/chat/NavBar.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import { ThemedView } from '@/components/ThemedView'
+import { ThemedText } from '@/components/ThemedText'
+import { Platform } from 'react-native'
+
+const NavBar = () => {
+  if (Platform.OS === 'web')
+    return null
+
+  return (
+    <ThemedView
+      style={{
+        alignItems: 'center',
+        paddingTop: 10,
+      }}
+    >
+      <ThemedText>💬 Chat{'\n'}</ThemedText>
+    </ThemedView>
+  )
+}
+export default NavBar

components/chat/data/earlierMessages.js

@@ -0,0 +1,129 @@
+export default () => [
+  {
+    _id: Math.round(Math.random() * 1000000),
+    text:
+      'It uses the same design as React, letting you compose a rich mobile UI from declarative components https://facebook.github.io/react-native/',
+    createdAt: new Date(Date.UTC(2016, 7, 30, 17, 20, 0)),
+    user: {
+      _id: 1,
+      name: 'Developer',
+    },
+  },
+  {
+    _id: Math.round(Math.random() * 1000000),
+    text:
+      'It uses the same design as React, letting you compose a rich mobile UI from declarative components https://facebook.github.io/react-native/',
+    createdAt: new Date(Date.UTC(2016, 7, 30, 17, 20, 0)),
+    user: {
+      _id: 1,
+      name: 'Developer',
+    },
+  },
+  {
+    _id: Math.round(Math.random() * 1000000),
+    text:
+      'It uses the same design as React, letting you compose a rich mobile UI from declarative components https://facebook.github.io/react-native/',
+    createdAt: new Date(Date.UTC(2016, 7, 30, 17, 20, 0)),
+    user: {
+      _id: 1,
+      name: 'Developer',
+    },
+  },
+  {
+    _id: Math.round(Math.random() * 1000000),
+    text:
+      'It uses the same design as React, letting you compose a rich mobile UI from declarative components https://facebook.github.io/react-native/',
+    createdAt: new Date(Date.UTC(2016, 7, 30, 17, 20, 0)),
+    user: {
+      _id: 1,
+      name: 'Developer',
+    },
+  },
+  {
+    _id: Math.round(Math.random() * 1000000),
+    text: 'React Native lets you build mobile apps using only JavaScript',
+    createdAt: new Date(Date.UTC(2016, 7, 30, 17, 20, 0)),
+    user: {
+      _id: 1,
+      name: 'Developer',
+    },
+  },
+  {
+    _id: Math.round(Math.random() * 1000000),
+    text: 'React Native lets you build mobile apps using only JavaScript',
+    createdAt: new Date(Date.UTC(2016, 7, 30, 17, 20, 0)),
+    user: {
+      _id: 1,
+      name: 'Developer',
+    },
+  },
+  {
+    _id: Math.round(Math.random() * 1000000),
+    text: 'React Native lets you build mobile apps using only JavaScript',
+    createdAt: new Date(Date.UTC(2016, 7, 30, 17, 20, 0)),
+    user: {
+      _id: 1,
+      name: 'Developer',
+    },
+  },
+  {
+    _id: Math.round(Math.random() * 1000000),
+    text: 'React Native lets you build mobile apps using only JavaScript',
+    createdAt: new Date(Date.UTC(2016, 7, 30, 17, 20, 0)),
+    user: {
+      _id: 1,
+      name: 'Developer',
+    },
+  },
+  {
+    _id: Math.round(Math.random() * 1000000),
+    text: 'React Native lets you build mobile apps using only JavaScript',
+    createdAt: new Date(Date.UTC(2016, 7, 30, 17, 20, 0)),
+    user: {
+      _id: 1,
+      name: 'Developer',
+    },
+  },
+  {
+    _id: Math.round(Math.random() * 1000000),
+    text: 'React Native lets you build mobile apps using only JavaScript',
+    createdAt: new Date(Date.UTC(2016, 7, 30, 17, 20, 0)),
+    user: {
+      _id: 1,
+      name: 'Developer',
+    },
+  },
+  {
+    _id: Math.round(Math.random() * 1000000),
+    text: 'React Native lets you build mobile apps using only JavaScript',
+    createdAt: new Date(Date.UTC(2016, 7, 30, 17, 20, 0)),
+    user: {
+      _id: 1,
+      name: 'Developer',
+    },
+  },
+  {
+    _id: Math.round(Math.random() * 1000000),
+    text: 'React Native lets you build mobile apps using only JavaScript',
+    createdAt: new Date(Date.UTC(2016, 7, 30, 17, 20, 0)),
+    user: {
+      _id: 1,
+      name: 'Developer',
+    },
+  },
+  {
+    _id: Math.round(Math.random() * 1000000),
+    text: 'React Native lets you build mobile apps using only JavaScript',
+    createdAt: new Date(Date.UTC(2016, 7, 30, 17, 20, 0)),
+    user: {
+      _id: 1,
+      name: 'Developer',
+    },
+  },
+  {
+    _id: Math.round(Math.random() * 1000000),
+    text: 'This is a system message.',
+    createdAt: new Date(Date.UTC(2016, 7, 30, 17, 20, 0)),
+    system: true,
+  },
+]

components/chat/data/messages.js

@@ -0,0 +1,168 @@
+export default [
+  {
+    _id: 9,
+    text: '#awesome 3',
+    createdAt: new Date(),
+    user: {
+      _id: 1,
+      name: 'Developer',
+    },
+  },
+  {
+    _id: 8,
+    text: '#awesome 2',
+    createdAt: new Date(),
+    user: {
+      _id: 1,
+      name: 'Developer',
+    },
+  },
+  {
+    _id: 7,
+    text: '#awesome',
+    createdAt: new Date(),
+    user: {
+      _id: 1,
+      name: 'Developer',
+    },
+  },
+  {
+    _id: 6,
+    text: 'Paris',
+    createdAt: new Date(),
+    user: {
+      _id: 2,
+      name: 'React Native',
+    },
+    image:
+      'https://www.xtrafondos.com/wallpapers/torre-eiffel-en-paris-415.jpg',
+    sent: true,
+    received: true,
+  },
+  {
+    _id: 5,
+    text: 'Send me a picture!',
+    createdAt: new Date(),
+    user: {
+      _id: 1,
+      name: 'Developer',
+    },
+  },
+  {
+    _id: 4,
+    text: '',
+    createdAt: new Date(),
+    user: {
+      _id: 2,
+      name: 'React Native',
+    },
+    sent: true,
+    received: true,
+    location: {
+      latitude: 48.864601,
+      longitude: 2.398704,
+    },
+  },
+  {
+    _id: 3,
+    text: 'Where are you?',
+    createdAt: new Date(),
+    user: {
+      _id: 1,
+      name: 'Developer',
+    },
+  },
+  {
+    _id: 2,
+    text: 'Yes, and I use #GiftedChat!',
+    createdAt: new Date(),
+    user: {
+      _id: 2,
+      name: 'React Native',
+    },
+    sent: true,
+    received: true,
+  },
+  {
+    _id: 1,
+    text: 'Are you building a chat app?',
+    createdAt: new Date(),
+    user: {
+      _id: 1,
+      name: 'Developer',
+    },
+  },
+  {
+    _id: 10,
+    text: 'This is a quick reply. Do you love Gifted Chat? (radio) KEEP IT',
+    createdAt: new Date(),
+    quickReplies: {
+      type: 'radio', // or 'checkbox',
+      keepIt: true,
+      values: [
+        {
+          title: '😋 Yes',
+          value: 'yes',
+        },
+        {
+          title:
+            '📷 Yes, let me show you with a picture! Again let me show you with a picture!',
+          value: 'yes_picture',
+        },
+        {
+          title: '😞 Nope. What?',
+          value: 'no',
+        },
+      ],
+    },
+    user: {
+      _id: 2,
+      name: 'React Native',
+    },
+  },
+  {
+    _id: 20,
+    text: 'This is a quick reply. Do you love Gifted Chat? (checkbox)',
+    createdAt: new Date(),
+    quickReplies: {
+      type: 'checkbox', // or 'checkbox',
+      values: [
+        {
+          title: 'Yes',
+          value: 'yes',
+        },
+        {
+          title: 'Yes, let me show you with a picture!',
+          value: 'yes_picture',
+        },
+        {
+          title: 'Nope. What?',
+          value: 'no',
+        },
+      ],
+    },
+    user: {
+      _id: 2,
+      name: 'React Native',
+    },
+  },
+  {
+    _id: 30,
+    createdAt: new Date(),
+    video: 'https://media.giphy.com/media/3o6ZthZjk09Xx4ktZ6/giphy.mp4',
+    user: {
+      _id: 2,
+      name: 'React Native',
+    },
+  },
+  {
+    _id: 31,
+    createdAt: new Date(),
+    audio:
+      'https://file-examples.com/wp-content/uploads/2017/11/file_example_MP3_700KB.mp3',
+    user: {
+      _id: 2,
+      name: 'React Native',
+    },
+  },
+]

components/chat/mediaUtils.ts

@@ -0,0 +1,82 @@
+import * as Linking from 'expo-linking'
+import * as Location from 'expo-location'
+import * as Permissions from 'expo-permissions'
+import * as ImagePicker from 'expo-image-picker'
+
+import { Alert } from 'react-native'
+
+export default async function getPermissionAsync (
+  permission: Permissions.PermissionType
+) {
+  const { status } = await Permissions.askAsync(permission)
+  if (status !== 'granted') {
+    const permissionName = permission.toLowerCase().replace('_', ' ')
+    Alert.alert(
+      'Cannot be done 😞',
+      `If you would like to use this feature, you'll need to enable the ${permissionName} permission in your phone settings.`,
+      [
+        {
+          text: 'Let\'s go!',
+          onPress: () => Linking.openURL('app-settings:'),
+        },
+        { text: 'Nevermind', onPress: () => {}, style: 'cancel' },
+      ],
+      { cancelable: true }
+    )
+
+    return false
+  }
+  return true
+}
+
+export async function getLocationAsync (
+  onSend: (locations: { location: Location.LocationObjectCoords }[]) => void
+) {
+  const response = await Location.requestForegroundPermissionsAsync()
+  if (!response.granted)
+    return
+
+  const location = await Location.getCurrentPositionAsync()
+  if (!location)
+    return
+
+  onSend([{ location: location.coords }])
+}
+
+export async function pickImageAsync (
+  onSend: (images: { image: string }[]) => void
+) {
+  const response = await ImagePicker.requestMediaLibraryPermissionsAsync()
+  if (!response.granted)
+    return
+
+  const result = await ImagePicker.launchImageLibraryAsync({
+    allowsEditing: true,
+    aspect: [4, 3],
+  })
+
+  if (result.canceled)
+    return
+
+  const images = result.assets.map(({ uri: image }) => ({ image }))
+  onSend(images)
+}
+
+export async function takePictureAsync (
+  onSend: (images: { image: string }[]) => void
+) {
+  const response = await ImagePicker.requestCameraPermissionsAsync()
+  if (!response.granted)
+    return
+
+  const result = await ImagePicker.launchCameraAsync({
+    allowsEditing: true,
+    aspect: [4, 3],
+  })
+
+  if (result.canceled)
+    return
+
+  const images = result.assets.map(({ uri: image }) => ({ image }))
+  onSend(images)
+}

package-lock.json

@@ -12,13 +12,16 @@
         "@react-navigation/native": "^6.0.2",
         "expo": "~51.0.28",
         "expo-apple-authentication": "~6.4.2",
+        "expo-clipboard": "~6.0.3",
         "expo-constants": "~16.0.2",
         "expo-device": "~6.0.2",
         "expo-font": "~12.0.9",
         "expo-image": "~1.13.0",
         "expo-image-picker": "~15.0.7",
         "expo-linking": "~6.3.1",
+        "expo-location": "~17.0.1",
         "expo-notifications": "~0.28.18",
+        "expo-permissions": "^14.4.0",
         "expo-router": "~3.5.23",
         "expo-secure-store": "~13.0.2",
         "expo-splash-screen": "~0.27.5",
@@ -29,6 +32,9 @@
         "react-dom": "18.2.0",
         "react-native": "0.74.5",
         "react-native-gesture-handler": "~2.16.1",
+        "react-native-get-random-values": "~1.11.0",
+        "react-native-gifted-chat": "^2.6.4",
+        "react-native-maps": "1.14.0",
         "react-native-reanimated": "~3.10.1",
         "react-native-safe-area-context": "4.10.5",
         "react-native-screens": "3.31.1",
@@ -3378,6 +3384,19 @@
         "node": ">= 10.0.0"
       }
     },
+    "node_modules/@expo/react-native-action-sheet": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/@expo/react-native-action-sheet/-/react-native-action-sheet-4.1.0.tgz",
+      "integrity": "sha512-RILoWhREgjMdr1NUSmZa/cHg8onV2YPDAMOy0iIP1c3H7nT9QQZf5dQNHK8ehcLM82sarVxriBJyYSSHAx7j6w==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hoist-non-react-statics": "^3.3.1",
+        "hoist-non-react-statics": "^3.3.0"
+      },
+      "peerDependencies": {
+        "react": ">=18.0.0"
+      }
+    },
     "node_modules/@expo/rudder-sdk-node": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@expo/rudder-sdk-node/-/rudder-sdk-node-1.1.1.tgz",
@@ -7158,6 +7177,12 @@
       "integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==",
       "license": "MIT"
     },
+    "node_modules/@types/geojson": {
+      "version": "7946.0.14",
+      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.14.tgz",
+      "integrity": "sha512-WCfD5Ht3ZesJUsONdhvm84dmzWOiOzOAqOncN0++w0lBw1o8OuDNJF2McvvCef/yBqb/HYRahp1BYtODFQ8bRg==",
+      "license": "MIT"
+    },
     "node_modules/@types/graceful-fs": {
       "version": "4.1.9",
       "resolved": "https://registry.npmjs.org/@types/graceful-fs/-/graceful-fs-4.1.9.tgz",
@@ -7174,6 +7199,16 @@
       "integrity": "sha512-ynRvcq6wvqexJ9brDMS4BnBLzmr0e14d6ZJTEShTBWKymQiHwlAyGu0ZPEFI2Fh1U53F7tN9ufClWM5KvqkKOw==",
       "license": "MIT"
     },
+    "node_modules/@types/hoist-non-react-statics": {
+      "version": "3.3.5",
+      "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.5.tgz",
+      "integrity": "sha512-SbcrWzkKBw2cdwRTwQAswfpB9g9LJWfjtUeW/jvNwbhC8cpmmNYVePa+ncbUe0rGTQ7G3Ff6mYUN2VMfLVr+Sg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/react": "*",
+        "hoist-non-react-statics": "^3.3.0"
+      }
+    },
     "node_modules/@types/istanbul-lib-coverage": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.6.tgz",
@@ -7227,6 +7262,21 @@
       "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
       "license": "MIT"
     },
+    "node_modules/@types/lodash": {
+      "version": "4.17.10",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.10.tgz",
+      "integrity": "sha512-YpS0zzoduEhuOWjAotS6A5AVCva7X4lVlYLF0FYHAY9sdraBfnatttHItlWeZdGhuEkf+OzMNg2ZYAx8t+52uQ==",
+      "license": "MIT"
+    },
+    "node_modules/@types/lodash.isequal": {
+      "version": "4.5.8",
+      "resolved": "https://registry.npmjs.org/@types/lodash.isequal/-/lodash.isequal-4.5.8.tgz",
+      "integrity": "sha512-uput6pg4E/tj2LGxCZo9+y27JNyB2OZuuI/T5F+ylVDYuqICLG2/ktjxx0v6GvVntAf8TvEzeQLcV0ffRirXuA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/lodash": "*"
+      }
+    },
     "node_modules/@types/node": {
       "version": "18.19.55",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.55.tgz",
@@ -7249,14 +7299,12 @@
       "version": "15.7.13",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.13.tgz",
       "integrity": "sha512-hCZTSvwbzWGvhqxp/RqVqwU999pBf2vp7hzIjiYOsl8wqOmUxkQ6ddw1cV3l8811+kdUFus/q4d1Y3E3SyEifA==",
-      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/@types/react": {
       "version": "18.2.79",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.79.tgz",
       "integrity": "sha512-RwGAGXPl9kSXwdNTafkOEuFrTBD5SA2B3iEB96xi8+xu5ddUa/cpvyVCSNn+asgLCTHkb5ZxN8gbuibYJi4s1w==",
-      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@types/prop-types": "*",
@@ -9199,7 +9247,6 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/dag-map": {
@@ -10117,6 +10164,15 @@
         "expo": "*"
       }
     },
+    "node_modules/expo-clipboard": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/expo-clipboard/-/expo-clipboard-6.0.3.tgz",
+      "integrity": "sha512-RIKDsuHkYfaspifbFpVC8sBVFKR05L7Pj7mU2/XkbrW9m01OBNvdpGraXEMsTFCx97xMGsZpEw9pPquL4j4xVg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "expo": "*"
+      }
+    },
     "node_modules/expo-constants": {
       "version": "16.0.2",
       "resolved": "https://registry.npmjs.org/expo-constants/-/expo-constants-16.0.2.tgz",
@@ -10212,6 +10268,15 @@
         "invariant": "^2.2.4"
       }
     },
+    "node_modules/expo-location": {
+      "version": "17.0.1",
+      "resolved": "https://registry.npmjs.org/expo-location/-/expo-location-17.0.1.tgz",
+      "integrity": "sha512-m+OzotzlAXO3ZZ1uqW5GC25nXW868zN+ROyBA1V4VF6jGay1ZEs4URPglCVUDzZby2F5wt24cMzqDKw2IX6nRw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "expo": "*"
+      }
+    },
     "node_modules/expo-modules-autolinking": {
       "version": "1.11.3",
       "resolved": "https://registry.npmjs.org/expo-modules-autolinking/-/expo-modules-autolinking-1.11.3.tgz",
@@ -10400,6 +10465,15 @@
         "node": ">= 10.0.0"
       }
     },
+    "node_modules/expo-permissions": {
+      "version": "14.4.0",
+      "resolved": "https://registry.npmjs.org/expo-permissions/-/expo-permissions-14.4.0.tgz",
+      "integrity": "sha512-oAcnJ7dlZhpBydK73cwomA2xofizayVUz+FW5REl7dMu7MYyeN/3aqhlpZ3mYddrxvG161bqu97MQr01UixUnw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "expo": "*"
+      }
+    },
     "node_modules/expo-router": {
       "version": "3.5.23",
       "resolved": "https://registry.npmjs.org/expo-router/-/expo-router-3.5.23.tgz",
@@ -10651,6 +10725,12 @@
       "integrity": "sha512-dX7e/LHVJ6W3DE1MHWi9S1EYzDESENfLrYohG2G++ovZrYOkm4Knwa0mc1cn84xJOR4KEU0WSchhLbd0UklbHw==",
       "license": "Apache-2.0"
     },
+    "node_modules/fast-base64-decode": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fast-base64-decode/-/fast-base64-decode-1.0.0.tgz",
+      "integrity": "sha512-qwaScUgUGBYeDNRnbc/KyllVU88Jk1pRHPStuF/lO7B0/RTRLj7U0lkdTAutlBblY08rwZDff6tNU9cjv6j//Q==",
+      "license": "MIT"
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -15086,6 +15166,12 @@
       "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==",
       "license": "MIT"
     },
+    "node_modules/lodash.isequal": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
+      "integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==",
+      "license": "MIT"
+    },
     "node_modules/lodash.throttle": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
@@ -17276,6 +17362,12 @@
         }
       }
     },
+    "node_modules/react-native-communications": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/react-native-communications/-/react-native-communications-2.2.1.tgz",
+      "integrity": "sha512-5+C0X9mopI0+qxyQHzOPEi5v5rxNBQjxydPPiKMQSlX1RBIcJ8uTcqUPssQ9Mo8p6c1IKIWJUSqCj4jAmD0qVQ==",
+      "license": "MIT"
+    },
     "node_modules/react-native-gesture-handler": {
       "version": "2.16.2",
       "resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-2.16.2.tgz",
@@ -17293,6 +17385,59 @@
         "react-native": "*"
       }
     },
+    "node_modules/react-native-get-random-values": {
+      "version": "1.11.0",
+      "resolved": "https://registry.npmjs.org/react-native-get-random-values/-/react-native-get-random-values-1.11.0.tgz",
+      "integrity": "sha512-4BTbDbRmS7iPdhYLRcz3PGFIpFJBwNZg9g42iwa2P6FOv9vZj/xJc678RZXnLNZzd0qd7Q3CCF6Yd+CU2eoXKQ==",
+      "license": "MIT",
+      "dependencies": {
+        "fast-base64-decode": "^1.0.0"
+      },
+      "peerDependencies": {
+        "react-native": ">=0.56"
+      }
+    },
+    "node_modules/react-native-gifted-chat": {
+      "version": "2.6.4",
+      "resolved": "https://registry.npmjs.org/react-native-gifted-chat/-/react-native-gifted-chat-2.6.4.tgz",
+      "integrity": "sha512-Ut31I1w6g4hG/iMyC1mVNVPZCNAUfijbJaEbRmKQnTPG+nAvYFje57OHr5coe9w+IBWsJKKoNvaI4h8w9Il5aQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@expo/react-native-action-sheet": "^4.1.0",
+        "@types/lodash.isequal": "^4.5.8",
+        "dayjs": "^1.11.13",
+        "lodash.isequal": "^4.5.0",
+        "prop-types": "^15.8.1",
+        "react-native-communications": "^2.2.1",
+        "react-native-iphone-x-helper": "^1.3.1",
+        "react-native-lightbox-v2": "^0.9.0",
+        "react-native-parsed-text": "^0.0.22",
+        "uuid": "^10.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*",
+        "react-native-get-random-values": "*",
+        "react-native-reanimated": "*",
+        "react-native-safe-area-context": "*"
+      }
+    },
+    "node_modules/react-native-gifted-chat/node_modules/uuid": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-10.0.0.tgz",
+      "integrity": "sha512-8XkAphELsDnEGrDxUOHB3RGvXz6TeuYSGEZBOjtTtPm2lwhGBjLgOzLHB63IUWfBpNucQjND6d3AOudO+H3RWQ==",
+      "funding": [
+        "https://github.com/sponsors/broofa",
+        "https://github.com/sponsors/ctavan"
+      ],
+      "license": "MIT",
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
     "node_modules/react-native-helmet-async": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/react-native-helmet-async/-/react-native-helmet-async-2.0.4.tgz",
@@ -17307,6 +17452,60 @@
         "react": "^16.6.0 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/react-native-iphone-x-helper": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/react-native-iphone-x-helper/-/react-native-iphone-x-helper-1.3.1.tgz",
+      "integrity": "sha512-HOf0jzRnq2/aFUcdCJ9w9JGzN3gdEg0zFE4FyYlp4jtidqU03D5X7ZegGKfT1EWteR0gPBGp9ye5T5FvSWi9Yg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react-native": ">=0.42.0"
+      }
+    },
+    "node_modules/react-native-lightbox-v2": {
+      "version": "0.9.2",
+      "resolved": "https://registry.npmjs.org/react-native-lightbox-v2/-/react-native-lightbox-v2-0.9.2.tgz",
+      "integrity": "sha512-+8LwINeSWvPP69YAyWhiJQyaw4Gtu8X4EMvT3PEN615NrOeDaz8jOcIw73pzYJst3z4Z0vxvFB73iH16wCPXtw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-native": ">=0.61.0"
+      }
+    },
+    "node_modules/react-native-maps": {
+      "version": "1.14.0",
+      "resolved": "https://registry.npmjs.org/react-native-maps/-/react-native-maps-1.14.0.tgz",
+      "integrity": "sha512-ai7h4UdRLGPFCguz1fI8n4sKLEh35nZXHAH4nSWyAeHGrN8K9GjICu9Xd4Q5Ok4h+WwrM6Xz5pGbF3Qm1tO6iQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/geojson": "^7946.0.13"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "react": ">= 17.0.1",
+        "react-native": ">= 0.64.3",
+        "react-native-web": ">= 0.11"
+      },
+      "peerDependenciesMeta": {
+        "react-native-web": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-native-parsed-text": {
+      "version": "0.0.22",
+      "resolved": "https://registry.npmjs.org/react-native-parsed-text/-/react-native-parsed-text-0.0.22.tgz",
+      "integrity": "sha512-hfD83RDXZf9Fvth3DowR7j65fMnlqM9PpxZBGWkzVcUTFtqe6/yPcIoIAgrJbKn6YmtzkivmhWE2MCE4JKBXrQ==",
+      "license": "MIT",
+      "dependencies": {
+        "prop-types": "^15.7.x"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*"
+      }
+    },
     "node_modules/react-native-reanimated": {
       "version": "3.10.1",
       "resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-3.10.1.tgz",

package.json

@@ -19,13 +19,16 @@
     "@react-navigation/native": "^6.0.2",
     "expo": "~51.0.28",
     "expo-apple-authentication": "~6.4.2",
+    "expo-clipboard": "~6.0.3",
     "expo-constants": "~16.0.2",
     "expo-device": "~6.0.2",
     "expo-font": "~12.0.9",
     "expo-image": "~1.13.0",
     "expo-image-picker": "~15.0.7",
     "expo-linking": "~6.3.1",
+    "expo-location": "~17.0.1",
     "expo-notifications": "~0.28.18",
+    "expo-permissions": "^14.4.0",
     "expo-router": "~3.5.23",
     "expo-secure-store": "~13.0.2",
     "expo-splash-screen": "~0.27.5",
@@ -36,10 +39,13 @@
     "react-dom": "18.2.0",
     "react-native": "0.74.5",
     "react-native-gesture-handler": "~2.16.1",
+    "react-native-get-random-values": "~1.11.0",
+    "react-native-gifted-chat": "^2.6.4",
     "react-native-reanimated": "~3.10.1",
     "react-native-safe-area-context": "4.10.5",
     "react-native-screens": "3.31.1",
-    "react-native-web": "~0.19.10"
+    "react-native-web": "~0.19.10",
+    "react-native-maps": "1.14.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",