wip: use react-native-modal, swipe close + scrollview for content

.env.development

@@ -1,3 +1,3 @@
 # .env.development
-API_URI="http://192.168.1.28:8000/graphql"
+API_URI="http://192.168.0.6:8000/graphql"
-DEV_USER_ID=1
+# DEV_USER_ID=1

android/gradle.properties

@@ -54,4 +54,4 @@ expo.webp.animated=false
 
 # Enable network inspector
 EX_DEV_CLIENT_NETWORK_INSPECTOR=true
-android.aapt2FromMavenOverride=/nix/store/6nrdbhdcmrig3vr80sc7qf9lna5cs1gb-android-sdk-env/share/android-sdk/build-tools/33.0.0/aapt2
+android.aapt2FromMavenOverride=/nix/store/byfv81hvdjqslk28s3pnwnjm4f03m901-android-sdk-env/share/android-sdk/build-tools/33.0.0/aapt2

package.json

@@ -49,12 +49,13 @@
 		"graphql": "^16.8.1",
 		"jest": "^29.2.1",
 		"jest-expo": "~49.0.0",
-		"railbird-gql": "git+https://dev.railbird.ai/railbird/railbird-gql.git#master",
+		"railbird-gql": "git+https://dev.railbird.ai/railbird/railbird-gql.git#ce8cfd6a68d7b27f478c99dd5ae74a411d4d0c77",
 		"react": "18.2.0",
 		"react-native": "0.72.6",
 		"react-native-dotenv": "^3.4.9",
 		"react-native-dropdown-picker": "^5.4.6",
 		"react-native-fs": "^2.20.0",
+		"react-native-modal": "^13.0.1",
 		"react-native-reanimated": "^3.6.2",
 		"react-native-safe-area-context": "^4.8.2",
 		"react-native-screens": "~3.22.0",

src/component/modals/session-details.tsx

@@ -22,41 +22,40 @@ export default function SessionDetails() {
 	return (
 		<>
 			<SlideModal modalVisible={visible} setModalVisible={setVisible}>
-				<View style={styles.container}>
+				<View style={styles.headerSection}>
-					<View style={styles.headerSection}>
+					<Text style={styles.header}>{sessionTitle}</Text>
-						<Text style={styles.header}>{sessionTitle}</Text>
+					<Text>{date}</Text>
-						<Text>{date}</Text>
-					</View>
-					<Image
-						source={{ uri: "https://picsum.photos/200" }}
-						style={styles.image}
-					/>
-					<View style={styles.statsContainer}>
-						<View style={styles.statColumn}>
-							<View style={styles.statItem}>
-								<Text style={styles.statLabel}>TIME PLAYED</Text>
-								<Text style={styles.statValue}>{timePlayed}</Text>
-							</View>
-							<View style={styles.statItem}>
-								<Text style={styles.statLabel}>MEDIAN RUN</Text>
-								<Text style={styles.statValue}>{medianRun}</Text>
-							</View>
-						</View>
-						<View style={styles.statColumn}>
-							<View style={styles.statItem}>
-								<Text style={styles.statLabel}>MAKE RATE</Text>
-								<Text style={styles.statValue}>{makeRate}</Text>
-							</View>
-							<View style={styles.statItem}>
-								<Text style={styles.statLabel}>SHOT PACING</Text>
-								<Text style={styles.statValue}>{shotPacing}</Text>
-							</View>
-						</View>
-					</View>
-					<View style={styles.horizontalDivider} />
-					<Text style={styles.gameType}>{gameType}</Text>
-					<Text style={styles.notes}>{notes}</Text>
 				</View>
+				<Image
+					source={{ uri: "https://picsum.photos/200" }}
+					style={styles.image}
+				/>
+				<View style={styles.statsContainer}>
+					<View style={styles.statColumn}>
+						<View style={styles.statItem}>
+							<Text style={styles.statLabel}>TIME PLAYED</Text>
+							<Text style={styles.statValue}>{timePlayed}</Text>
+						</View>
+						<View style={styles.statItem}>
+							<Text style={styles.statLabel}>MEDIAN RUN</Text>
+							<Text style={styles.statValue}>{medianRun}</Text>
+						</View>
+					</View>
+					<View style={styles.statColumn}>
+						<View style={styles.statItem}>
+							<Text style={styles.statLabel}>MAKE RATE</Text>
+							<Text style={styles.statValue}>{makeRate}</Text>
+						</View>
+						<View style={styles.statItem}>
+							<Text style={styles.statLabel}>SHOT PACING</Text>
+							<Text style={styles.statValue}>{shotPacing}</Text>
+						</View>
+					</View>
+				</View>
+				{/* USE A BETTER SYSTEM FOR THE DIVIDER, COULD ATTACH TO OTHER COMPONENT */}
+				<View style={styles.horizontalDivider} />
+				<Text style={styles.gameType}>{gameType}</Text>
+				<Text style={styles.notes}>{notes}</Text>
 			</SlideModal>
 			<Button title="show modal" onPress={() => setVisible(true)} />
 		</>
@@ -64,14 +63,9 @@ export default function SessionDetails() {
 }
 
 const styles = StyleSheet.create({
-	container: {
-		flex: 1,
-		backgroundColor: "white",
-		borderRadius: 20,
-	},
 	headerSection: {
-		marginTop: 15,
+		paddingHorizontal: 20,
-		padding: 20,
+		paddingVertical: 15,
 	},
 	header: {
 		fontSize: 24,
@@ -101,7 +95,7 @@ const styles = StyleSheet.create({
 		textAlign: "center",
 	},
 	statValue: {
-		fontSize: 18,
+		fontSize: 28,
 		fontWeight: "bold",
 		textAlign: "center",
 	},

src/component/modals/slide-modal.tsx

@@ -1,24 +1,58 @@
 import React from "react";
-import { Modal, View } from "react-native";
+import { ScrollView, View } from "react-native";
+import Modal from "react-native-modal";
 
 import { modal } from "../../styles";
 
+interface SlideModalInterface {
+	modalVisible: boolean;
+	setModalVisible: Function;
+	children: React.ReactNode;
+}
+
+/**
+ * SlideModal Component
+ *
+ * A modal component that slides down from the bottom of the screen and can be dismissed by swiping down or tapping the backdrop.
+ *
+ * @param {Object} props - Props for SlideModal component.
+ * @param {boolean} props.modalVisible - State variable that controls the visibility of the modal.
+ * @param {Function} props.setModalVisible - State setter function to update the visibility of the modal.
+ * @param {React.ReactNode} props.children - The content to be rendered inside the modal.
+ *
+ * @component
+ * @example
+ * const [modalVisible, setModalVisible] = useState(false);
+ *
+ * return (
+ *   <SlideModal
+ *     modalVisible={modalVisible}
+ *     setModalVisible={setModalVisible}
+ *   >
+ *     <Text>Modal Content</Text>
+ *   </SlideModal>
+ * );
+ */
 export default function SlideModal({
 	modalVisible,
 	setModalVisible,
 	children,
-}) {
+}: SlideModalInterface): React.JSX.Element {
 	return (
 		<Modal
-			animationType="slide"
+			hasBackdrop={true}
-			transparent={true}
+			isVisible={modalVisible}
-			visible={modalVisible}
+			onBackdropPress={() => setModalVisible(false)}
-			onRequestClose={() => {
+			onSwipeComplete={() => setModalVisible(false)}
-				setModalVisible(!modalVisible);
+			swipeDirection="down"
-			}}
+			style={modal.noMargin}
+			propagateSwipe
 		>
 			<View style={modal.alignModalContainer}>
-				<View style={modal.modalView}>{children}</View>
+				<View style={modal.grabber} />
+				<ScrollView contentContainerStyle={modal.contentStyles}>
+					{children}
+				</ScrollView>
 			</View>
 		</Modal>
 	);

src/styles.ts

@@ -68,28 +68,31 @@ export const shadows = {
 	},
 };
 
+// MODAL STYLES
+const MODAL_TOP_PADDING = 20;
+const MODAL_TOP_RADIUS = 20;
+
 export const modal = StyleSheet.create({
 	alignModalContainer: {
 		flex: 1,
-		justifyContent: "flex-start",
+		marginTop: STATUS_BAR_HEIGHT + MODAL_TOP_PADDING ?? 54 + MODAL_TOP_PADDING,
-		alignItems: "flex-end",
-		marginTop: STATUS_BAR_HEIGHT ?? 54,
-	},
-	modalView: {
 		backgroundColor: "white",
-		height: "90%",
+		borderTopLeftRadius: MODAL_TOP_RADIUS,
+		borderTopRightRadius: MODAL_TOP_RADIUS,
 		width: "100%",
-		borderTopRightRadius: 20,
-		borderTopLeftRadius: 20,
 	},
-	columnText: {
+	contentStyles: {
-		fontSize: 18,
+		paddingBottom: 20,
-		color: colors.themeBrown,
-		fontWeight: "600",
 	},
-	columnIcon: {
+	grabber: {
-		fontSize: 25,
+		alignSelf: "center",
-		color: colors.themeBrown,
+		width: 40,
-		fontWeight: "500",
+		height: 5,
+		backgroundColor: "#ccc",
+		borderRadius: 2.5,
+		marginVertical: 15,
+	},
+	noMargin: {
+		margin: 0,
 	},
 });

yarn.lock

@@ -9710,7 +9710,7 @@ prompts@^2.0.1, prompts@^2.2.1, prompts@^2.3.2, prompts@^2.4.0, prompts@^2.4.2:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
-prop-types@*, prop-types@^15.6.0, prop-types@^15.7.2, prop-types@^15.8.1:
+prop-types@*, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -9798,7 +9798,7 @@ queue@6.0.2:
   dependencies:
     inherits "~2.0.3"
 
-"railbird-gql@git+https://dev.railbird.ai/railbird/railbird-gql.git#master":
+"railbird-gql@git+https://dev.railbird.ai/railbird/railbird-gql.git#ce8cfd6a68d7b27f478c99dd5ae74a411d4d0c77":
   version "1.0.0"
   resolved "git+https://dev.railbird.ai/railbird/railbird-gql.git#ce8cfd6a68d7b27f478c99dd5ae74a411d4d0c77"
   dependencies:
@@ -9862,6 +9862,13 @@ react-is@^17.0.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
 
+react-native-animatable@1.3.3:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/react-native-animatable/-/react-native-animatable-1.3.3.tgz#a13a4af8258e3bb14d0a9d839917e9bb9274ec8a"
+  integrity sha512-2ckIxZQAsvWn25Ho+DK3d1mXIgj7tITkrS4pYDvx96WyOttSvzzFeQnM2od0+FUMzILbdHDsDEqZvnz1DYNQ1w==
+  dependencies:
+    prop-types "^15.7.2"
+
 react-native-dotenv@^3.4.9:
   version "3.4.9"
   resolved "https://registry.yarnpkg.com/react-native-dotenv/-/react-native-dotenv-3.4.9.tgz#621c5b0c1d0c5c7f569bfe5a1d804bec7885c010"
@@ -9882,6 +9889,14 @@ react-native-fs@^2.20.0:
     base-64 "^0.1.0"
     utf8 "^3.0.0"
 
+react-native-modal@^13.0.1:
+  version "13.0.1"
+  resolved "https://registry.yarnpkg.com/react-native-modal/-/react-native-modal-13.0.1.tgz#691f1e646abb96fa82c1788bf18a16d585da37cd"
+  integrity sha512-UB+mjmUtf+miaG/sDhOikRfBOv0gJdBU2ZE1HtFWp6UixW9jCk/bhGdHUgmZljbPpp0RaO/6YiMmQSSK3kkMaw==
+  dependencies:
+    prop-types "^15.6.2"
+    react-native-animatable "1.3.3"
+
 react-native-reanimated@^3.6.2:
   version "3.6.2"
   resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-3.6.2.tgz#8a48c37251cbd3b665a659444fa9778f5b510356"