feat(location): add bottom sheet

floriaaan · Aug 7, 2023 · 14f9391 · 14f9391
1 parent 395c042
commit 14f9391
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 10 deletions.
diff --git a/apps/mobile/components/user/location.tsx b/apps/mobile/components/user/location.tsx
@@ -1,10 +1,21 @@
-import { Text, View } from "react-native";
+import { useRef } from "react";
+import { Text, TouchableOpacity, View } from "react-native";
+import RBSheet from "react-native-raw-bottom-sheet";
 
 export const UserLocation = () => {
+  const refRBSheet = useRef<RBSheet>(null);
+
   return (
-    <View className="flex flex-col">
-      <Text className="text-sm font-bold text-black">24 rue Émile Zola - 76100 Rouen</Text>
-      <Text className="text-xs text-black/60">mercredi 18 janvier - 12:15 - 12:35</Text>
-    </View>
+    <>
+      <TouchableOpacity onPress={() => refRBSheet.current?.open()} className="flex flex-col">
+        <Text className="text-sm font-bold text-black">24 rue Émile Zola - 76100 Rouen</Text>
+        <Text className="text-xs text-black/60">mercredi 18 janvier - 12:15 - 12:35</Text>
+      </TouchableOpacity>
+      <RBSheet ref={refRBSheet} closeOnDragDown closeOnPressMask>
+        <View className="absolute flex items-center flex-1 w-full h-full bg-white">
+          <Text>Awesome 🎉</Text>
+        </View>
+      </RBSheet>
+    </>
   );
 };
diff --git a/apps/mobile/expo-env.d.ts b/apps/mobile/expo-env.d.ts
@@ -1,3 +1,3 @@
 /// <reference types="expo-router/types" />
 
-// NOTE: This file should not be edited and should be in your git ignore
+// NOTE: This file should not be edited and should be in your git ignore
diff --git a/apps/mobile/package-lock.json b/apps/mobile/package-lock.json
diff --git a/apps/mobile/package.json b/apps/mobile/package.json
@@ -17,6 +17,7 @@
   },
   "dependencies": {
     "@expo/vector-icons": "^13.0.0",
+    "@gorhom/bottom-sheet": "^4.4.7",
     "@legendapp/motion": "^2.2.1",
     "@react-navigation/drawer": "^6.6.3",
     "@react-navigation/native": "^6.0.2",
@@ -38,6 +39,7 @@
     "react-native-gesture-handler": "~2.12.0",
     "react-native-maps": "1.7.1",
     "react-native-maps-directions": "^1.9.0",
+    "react-native-raw-bottom-sheet": "^2.2.0",
     "react-native-reanimated": "~3.3.0",
     "react-native-safe-area-context": "4.6.3",
     "react-native-screens": "~3.22.0",