wip: use react-native-modal, swipe close + scrollview for content
This commit is contained in:
Loewy
parent
bc7b066864
commit
b865f78e22
@ -1,3 +1,3 @@
|
||||
# .env.development
|
||||
API_URI="http://192.168.1.28:8000/graphql"
|
||||
DEV_USER_ID=1
|
||||
API_URI="http://192.168.0.6:8000/graphql"
|
||||
# DEV_USER_ID=1
|
||||
|
||||
@ -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
|
||||
@ -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",
|
||||
|
||||
@ -22,7 +22,6 @@ export default function SessionDetails() {
|
||||
return (
|
||||
<>
|
||||
<SlideModal modalVisible={visible} setModalVisible={setVisible}>
|
||||
<View style={styles.container}>
|
||||
<View style={styles.headerSection}>
|
||||
<Text style={styles.header}>{sessionTitle}</Text>
|
||||
<Text>{date}</Text>
|
||||
@ -53,10 +52,10 @@ export default function SessionDetails() {
|
||||
</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>
|
||||
</View>
|
||||
</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,
|
||||
padding: 20,
|
||||
paddingHorizontal: 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",
|
||||
},
|
||||
|
||||
@ -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"
|
||||
transparent={true}
|
||||
visible={modalVisible}
|
||||
onRequestClose={() => {
|
||||
setModalVisible(!modalVisible);
|
||||
}}
|
||||
hasBackdrop={true}
|
||||
isVisible={modalVisible}
|
||||
onBackdropPress={() => setModalVisible(false)}
|
||||
onSwipeComplete={() => setModalVisible(false)}
|
||||
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>
|
||||
);
|
||||
|
||||
@ -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",
|
||||
alignItems: "flex-end",
|
||||
marginTop: STATUS_BAR_HEIGHT ?? 54,
|
||||
},
|
||||
modalView: {
|
||||
marginTop: STATUS_BAR_HEIGHT + MODAL_TOP_PADDING ?? 54 + MODAL_TOP_PADDING,
|
||||
backgroundColor: "white",
|
||||
height: "90%",
|
||||
borderTopLeftRadius: MODAL_TOP_RADIUS,
|
||||
borderTopRightRadius: MODAL_TOP_RADIUS,
|
||||
width: "100%",
|
||||
borderTopRightRadius: 20,
|
||||
borderTopLeftRadius: 20,
|
||||
},
|
||||
columnText: {
|
||||
fontSize: 18,
|
||||
color: colors.themeBrown,
|
||||
fontWeight: "600",
|
||||
contentStyles: {
|
||||
paddingBottom: 20,
|
||||
},
|
||||
columnIcon: {
|
||||
fontSize: 25,
|
||||
color: colors.themeBrown,
|
||||
fontWeight: "500",
|
||||
grabber: {
|
||||
alignSelf: "center",
|
||||
width: 40,
|
||||
height: 5,
|
||||
backgroundColor: "#ccc",
|
||||
borderRadius: 2.5,
|
||||
marginVertical: 15,
|
||||
},
|
||||
noMargin: {
|
||||
margin: 0,
|
||||
},
|
||||
});
|
||||
|
||||
19
yarn.lock
19
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"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user