From bb934217dd7a4e936d398f31ff2fc157ceb55389 Mon Sep 17 00:00:00 2001 From: Kimi Yap Date: Sun, 20 Oct 2024 18:06:39 +0800 Subject: [PATCH] feat: add drawer and orientation functionality for articles page Signed-off-by: Kimi Yap --- app.json | 19 +- app/(articles)/[article].tsx | 349 +++++++++++++++++++++++++++++++---- app/(articles)/articles.tsx | 22 ++- babel.config.js | 1 + gesture-handler.js | 0 gesture-handler.native.js | 1 + index.js | 4 + metro.config.js | 7 + package-lock.json | 186 +++++++++++++++++-- package.json | 8 +- 10 files changed, 536 insertions(+), 61 deletions(-) create mode 100644 gesture-handler.js create mode 100644 gesture-handler.native.js create mode 100644 index.js create mode 100644 metro.config.js diff --git a/app.json b/app.json index 1c49cd2..1b133bf 100644 --- a/app.json +++ b/app.json @@ -13,7 +13,8 @@ "backgroundColor": "#ffffff" }, "ios": { - "supportsTablet": true + "supportsTablet": true, + "requireFullScreen": true }, "android": { "package": "com.safsbe.mentalhealthapp" @@ -25,7 +26,21 @@ }, "plugins": [ "expo-router", - "expo-secure-store" + "expo-secure-store", + [ + "expo-build-properties", { + "android": { + "usesCleartextTraffic": true + }, + "ios": { + + } + }], + [ + "expo-screen-orientation", { + "initialOrientation": "DEFAULT" + } + ] ], "experiments": { "typedRoutes": true diff --git a/app/(articles)/[article].tsx b/app/(articles)/[article].tsx index bb1c939..9dc175d 100644 --- a/app/(articles)/[article].tsx +++ b/app/(articles)/[article].tsx @@ -1,19 +1,63 @@ -import {View, Text, Pressable, StyleSheet, ScrollView} from 'react-native'; +import {View, Text, Pressable, StyleSheet, ScrollView, BackHandler, Animated, Button } from 'react-native'; import {Image} from 'expo-image'; import {router, Stack, useLocalSearchParams} from 'expo-router'; -import React from 'react'; +import { DrawerContentScrollView, DrawerItem, createDrawerNavigator } from '@react-navigation/drawer'; +import React, {useRef, useMemo, useState} from 'react'; import {WebView} from 'react-native-webview'; -import {FontAwesome5} from '@expo/vector-icons'; +import {FontAwesome6} from '@expo/vector-icons'; +import * as ScreenOrientation from 'expo-screen-orientation'; +import { HeaderBackButton } from '@react-navigation/elements'; +import PagerView, { PagerViewOnPageSelectedEventData, PageScrollStateChangedNativeEvent } from 'react-native-pager-view'; +import {Drawer} from 'react-native-drawer-layout'; export default function ArticleView() { - const {title, id = 0} = useLocalSearchParams<{title: string; id?: string}>(); + const {category, title, page = 0, id = 0} = useLocalSearchParams<{category: string, title: string, page: string, id: string}>(); console.log({title}); console.log({id}, id); + + async function changeToLandscapeOrientation() { + await ScreenOrientation.lockAsync(5); // Sets to ANY landscape => See https://docs.expo.dev/versions/latest/sdk/screen-orientation/#orientationlock + } + + async function changeToPortraitOrientation() { + await ScreenOrientation.lockAsync(2); // Sets to ANY portrait => See https://docs.expo.dev/versions/latest/sdk/screen-orientation/#orientationlock + } + + changeToLandscapeOrientation(); + const articleList = [ - require('../../assets/articleAssets/selfcare/mindfulpause.html'), - require('../../assets/articleAssets/selfcare/understandingsleep.html'), + { + articleName: "mindfulpause", + pages: [ + require('../../assets/articleAssets/selfcare/mindfulpause/page1.html'), + require('../../assets/articleAssets/selfcare/mindfulpause/page2.html'), + require('../../assets/articleAssets/selfcare/mindfulpause/page3.html'), + require('../../assets/articleAssets/selfcare/mindfulpause/page4.html'), + require('../../assets/articleAssets/selfcare/mindfulpause/page5.html'), + require('../../assets/articleAssets/selfcare/mindfulpause/page6.html'), + require('../../assets/articleAssets/selfcare/mindfulpause/page7.html'), + require('../../assets/articleAssets/selfcare/mindfulpause/page8.html'), + require('../../assets/articleAssets/selfcare/mindfulpause/page9.html'), + require('../../assets/articleAssets/selfcare/mindfulpause/page10.html'), + ] + }, + { + articleName: "understandingsleep", + pages: [ + require('../../assets/articleAssets/selfcare/understandingsleep/page1.html'), + require('../../assets/articleAssets/selfcare/understandingsleep/page2.html'), + require('../../assets/articleAssets/selfcare/understandingsleep/page3.html'), + require('../../assets/articleAssets/selfcare/understandingsleep/page4.html'), + require('../../assets/articleAssets/selfcare/understandingsleep/page5.html'), + require('../../assets/articleAssets/selfcare/understandingsleep/page6.html'), + require('../../assets/articleAssets/selfcare/understandingsleep/page7.html'), + require('../../assets/articleAssets/selfcare/understandingsleep/page8.html'), + require('../../assets/articleAssets/selfcare/understandingsleep/page9.html'), + require('../../assets/articleAssets/selfcare/understandingsleep/page10.html'), + ] + }, require('../../assets/articleAssets/selfcare/sleepqualitychecklist.html'), require('../../assets/articleAssets/understandingyourself/knowyourpersonalitytype.html'), require('../../assets/articleAssets/understandingyourself/identifyandtameyouremotions.html'), @@ -24,41 +68,217 @@ export default function ArticleView() { require('../../assets/articleAssets/aboutmentalhealth/asd.html'), require('../../assets/articleAssets/aboutmentalhealth/bipolar.html'), require('../../assets/articleAssets/aboutmentalhealth/whatispsychotherapy.html'), - require('../../assets/articleAssets/storiesfromothers/helplines.html'), + //drequire('../../assets/articleAssets/storiesfromothers/helplines.html'), + { + articleName: "helplines", + pages: [ + require('../../assets/articleAssets/storiesfromothers/helplines/page1.html'), + require('../../assets/articleAssets/storiesfromothers/helplines/page2.html'), + require('../../assets/articleAssets/storiesfromothers/helplines/page3.html'), + require('../../assets/articleAssets/storiesfromothers/helplines/page4.html'), + require('../../assets/articleAssets/storiesfromothers/helplines/page5.html'), + require('../../assets/articleAssets/storiesfromothers/helplines/page6.html'), + ] + } ]; + const categorySelectionHeaders = { + "selfcare": ['TL:DR', 'What is it', 'How to Apply It'], + "understandingyourself": ['TL:DR', 'What is it', 'What\'s Next'], + "aboutmentalhealth": ['TL:DR', 'What is it', 'Symptoms', 'Impact on NS', 'Treatment'], + "storiesfromothers": ['TL:DR'], + } + + + const articleSectionPageNumbers = [ + { + id: 0, + collection: "selfcare", + header: [0, 2, 4], // page numbers for respective sections listed above @ categorySelectionHeaders + }, + { + id: 1, + collection: "selfcare", + header: [0, 1, 7], + }, + { + id: 2, + collection: "selfcare", + header: [], + }, + { + id: 3, + collection: "understandingyourself", + header: [], + }, + { + id: 4, + collection: "understandingyourself", + header: [], + }, + { + id: 5, + collection: "understandingyourself", + header: [], + }, + { + id: 6, + collection: "understandingyourself", + header: [], + }, + { + id: 7, + collection: "understandingyourself", + header: [], + }, + { + id: 8, + collection: "aboutmentalhealth", + header: [], + }, + { + id: 9, + collection: "aboutmentalhealth", + header: [], + }, + { + id: 10, + collection: "aboutmentalhealth", + header: [], + }, + { + id: 11, + collection: "aboutmentalhealth", + header: [], + }, + { + id: 12, + collection: "storiesfromothers", + header: [], + }, + ] + + const ref = useRef(null); + const [activePage, setActivePage] = useState(0); + + // @ts-ignore + const articlePages = articleList[id].pages.length; + + console.log(`Current Page: ${activePage+1} | Total Pages: ${articlePages}`); + + const pageDisplay = `${activePage+1} / ${articlePages}`; + + function Section({header, category, title, pageIndex, id, active}: {header: string, category: string, title: string, pageIndex: number, id: number, active: boolean}) { + + console.log(pageIndex); + + return ( + + router.navigate(`/thisarticle?category=${category}&title=${title}&page=${pageIndex}&id=${id}`)} style={styles.sectionTitleText}>{header} + onPress={() => ref.current?.setPageWithoutAnimation(pageIndex)}>{header} + + ) + } + + // @ts-ignore + const handleNavigationChange = (newNavState) => { + const { url, target } = newNavState; + if (!url) return; + + console.log(target); + } + + const filterOption = articleSectionPageNumbers.filter(x => x.id === +id)[0]; + + // console.log(filterOption) // debug + + // Drawer + + const [open, setOpen] = useState(false); + + // End Drawer + return ( - - - - - - - - - Test2 + + setOpen(true)} + onClose={() => setOpen(false)} + drawerPosition='right' + drawerStyle={styles.drawer} + renderDrawerContent={() => ( + // This shit is inside the drawer + + {// @ts-ignore + categorySelectionHeaders[filterOption.collection].map((sectionTitle, index) => ( + // @ts-ignore +
// For jumping to the right sections + ))} + + )}> + + ( + changeToPortraitOrientation() && router.back()} + /> + ), + headerRight: () => ( + setOpen((prevOpen) => !(prevOpen))}> + + + ), + }} /> + {/* + {// @ts-ignore + categorySelectionHeaders[filterOption.collection].map((sectionTitle, index) => ( + // @ts-ignore +
// For jumping to the right sections + ))} + */} + {setActivePage(e.nativeEvent.position)}}> + { // @ts-ignore + articleList[id].pages.map((pageLink, index) => ( + + ))} + + + + {pageDisplay} + + - - - - + ); } @@ -66,7 +286,7 @@ export default function ArticleView() { const styles = StyleSheet.create({ webview: { maxHeight: '100%', - flex: 1, + height: "100%", }, navigationBar: { maxHeight: '10%', @@ -74,14 +294,14 @@ const styles = StyleSheet.create({ flexDirection: 'row', justifyContent: 'center', alignItems: 'center', - backgroundColor: '#A2B6C3', + // backgroundColor: '#A2B6C3', // debug }, changePageButton: { flex: 1, alignSelf: 'center', alignItems: 'center', justifyContent: 'center', - backgroundColor: '#B4E4D9', + // backgroundColor: '#B4E4D9', // debug maxWidth: '20%', height: '80%', }, @@ -89,8 +309,55 @@ const styles = StyleSheet.create({ flex: 1, alignSelf: 'center', alignItems: 'center', - backgroundColor: '#D5C5B5', + justifyContent: 'center', + // backgroundColor: '#D5C5B5', // debug maxWidth: '25%', height: '80%', }, + sectionGroup: { + flexDirection: 'row', + height: "auto", + // width: "15%", + marginTop: 10, + maxHeight: "100%", + justifyContent: 'center', + alignItems: 'center', + gap: 10, + flexWrap: 'wrap', + // backgroundColor: '#C6C6C7', // debug + }, + sectionButton: { + width: '90%', + paddingHorizontal: 5, + paddingVertical: 8, + borderRadius: 10, + borderWidth: 1, + borderColor: 'grey', + // backgroundColor: '#A5A5A5', // debug + }, + sectionButtonActive: { + backgroundColor: 'grey', + width: '90%', + paddingHorizontal: 5, + paddingVertical: 8, + borderRadius: 10, + borderWidth: 1, + borderColor: 'grey', + // backgroundColor: '#A5A5A5', // debug + }, + sectionButtonText: { + fontSize: 16, + color: 'grey', + fontWeight: 'bold', + textAlign: 'center' + }, + sectionButtonTextActive: { + fontSize: 16, + color: 'white', + fontWeight: 'bold', + textAlign: 'center' + }, + drawer: { + width: '20%', + } }); diff --git a/app/(articles)/articles.tsx b/app/(articles)/articles.tsx index 6768bfc..6baa15a 100644 --- a/app/(articles)/articles.tsx +++ b/app/(articles)/articles.tsx @@ -1,9 +1,21 @@ -import {View, Text, Pressable, StyleSheet} from 'react-native'; +import {View, Text, Pressable, StyleSheet, BackHandler} from 'react-native'; import {Image} from 'expo-image'; import {router, Stack, useLocalSearchParams} from 'expo-router'; import React from 'react'; +import * as ScreenOrientation from 'expo-screen-orientation'; export default function Articles() { + + async function changeOrientation() { + await ScreenOrientation.lockAsync(2); // Sets to ANY portrait => See https://docs.expo.dev/versions/latest/sdk/screen-orientation/#orientationlock + } + + BackHandler.addEventListener('hardwareBackPress', function() { + changeOrientation(); + }) + + changeOrientation(); + const {category} = useLocalSearchParams<{category?: string}>(); // get the category let headerTitle = ''; @@ -95,8 +107,8 @@ export default function Articles() { /> {ArticleList.filter(x => x.category === category).map( - ({title, id}, index) => ( - + ({category, title, id}, index) => ( + ), )} @@ -104,7 +116,7 @@ export default function Articles() { ); } -function ArticleEntry({title, id}: {title: string; id: string}) { +function ArticleEntry({category, title, page=0, id}: {category: string, title: string; page: number, id: number}) { const styles = StyleSheet.create({ article: { borderRadius: 12, @@ -128,7 +140,7 @@ function ArticleEntry({title, id}: {title: string; id: string}) { return ( router.push(`/thisarticle?title=${title}&id=${id}`)} // If it shows an error, ignore it - it works + onPress={() => router.push(`/thisarticle?category=${category}&title=${title}&page=${page}&id=${id}`)} // If it shows an error, ignore it - it works style={styles.article} > {title} diff --git a/babel.config.js b/babel.config.js index 9d89e13..d872de3 100644 --- a/babel.config.js +++ b/babel.config.js @@ -2,5 +2,6 @@ module.exports = function (api) { api.cache(true); return { presets: ['babel-preset-expo'], + plugins: ['react-native-reanimated/plugin'], }; }; diff --git a/gesture-handler.js b/gesture-handler.js new file mode 100644 index 0000000..e69de29 diff --git a/gesture-handler.native.js b/gesture-handler.native.js new file mode 100644 index 0000000..60d1207 --- /dev/null +++ b/gesture-handler.native.js @@ -0,0 +1 @@ +import 'react-native-gesture-handler' \ No newline at end of file diff --git a/index.js b/index.js new file mode 100644 index 0000000..546b50b --- /dev/null +++ b/index.js @@ -0,0 +1,4 @@ +// See https://github.com/t3-oss/create-t3-turbo/issues/741#issuecomment-1817662268 + +import './gesture-handler'; +import 'expo-router/entry'; diff --git a/metro.config.js b/metro.config.js new file mode 100644 index 0000000..02f53f9 --- /dev/null +++ b/metro.config.js @@ -0,0 +1,7 @@ +// Learn more https://docs.expo.io/guides/customizing-metro +const { getDefaultConfig } = require('expo/metro-config'); + +/* @type {import('expo/metro-config').MetroConfig} */ +const config = getDefaultConfig(__dirname); + +module.exports = config; \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index a3a9e4b..98a9498 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,11 +16,13 @@ "@react-navigation/native": "^6.0.2", "expo": "~51.0.28", "expo-av": "~14.0.7", + "expo-build-properties": "~0.12.5", "expo-constants": "~16.0.2", "expo-font": "~12.0.9", "expo-image": "~1.12.15", "expo-linking": "~6.3.1", "expo-router": "~3.5.23", + "expo-screen-orientation": "~7.0.5", "expo-secure-store": "~13.0.2", "expo-splash-screen": "~0.27.5", "expo-status-bar": "~1.12.1", @@ -30,8 +32,10 @@ "react": "18.2.0", "react-dom": "18.2.0", "react-native": "0.74.5", + "react-native-drawer-layout": "^3.3.2", "react-native-gesture-handler": "~2.16.1", - "react-native-reanimated": "~3.10.1", + "react-native-pager-view": "^6.4.1", + "react-native-reanimated": "3.16.0", "react-native-safe-area-context": "4.10.5", "react-native-screens": "3.31.1", "react-native-web": "~0.19.10", @@ -1078,7 +1082,6 @@ "resolved": "https://registry.npmjs.org/@babel/plugin-transform-class-properties/-/plugin-transform-class-properties-7.25.4.tgz", "integrity": "sha512-nZeZHyCWPfjkdU5pA/uHiTaDAFUEqkpzf1YoQT2NeSynCGYq9rxfyI3XpQbfx/a0hSnFH6TGlEXvae5Vi7GD8g==", "license": "MIT", - "peer": true, "dependencies": { "@babel/helper-create-class-features-plugin": "^7.25.4", "@babel/helper-plugin-utils": "^7.24.8" @@ -2135,9 +2138,9 @@ "integrity": "sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==" }, "node_modules/@babel/runtime": { - "version": "7.25.6", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.25.6.tgz", - "integrity": "sha512-VBj9MYyDb9tuLq7yzqjgzt6Q+IBQLrGZfdjOekyEirZPHxXWoTSGUTMrpsfi58Up73d13NfYLv8HT9vmznjzhQ==", + "version": "7.25.7", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.25.7.tgz", + "integrity": "sha512-FjoyLe754PMiYsFaN5C94ttGiOmBNYTf6pLr4xXHAT5uctHb092PBszndLDR5XA/jghQvn4n7JMHl7dmTgbm9w==", "dependencies": { "regenerator-runtime": "^0.14.0" }, @@ -7555,6 +7558,27 @@ "react": "*" } }, + "node_modules/@react-navigation/drawer": { + "version": "6.7.2", + "resolved": "https://registry.npmjs.org/@react-navigation/drawer/-/drawer-6.7.2.tgz", + "integrity": "sha512-o4g2zgTZa2+oLd+8V33etrSM38KIqu8S/zCBTsdsHUoQyVE7JNRiv3Qgq/jMvEb8PZCqWmm7jHItcgzrBuwyOQ==", + "optional": true, + "peer": true, + "dependencies": { + "@react-navigation/elements": "^1.3.31", + "color": "^4.2.3", + "warn-once": "^0.1.0" + }, + "peerDependencies": { + "@react-navigation/native": "^6.0.0", + "react": "*", + "react-native": "*", + "react-native-gesture-handler": ">= 1.0.0", + "react-native-reanimated": ">= 1.0.0", + "react-native-safe-area-context": ">= 3.0.0", + "react-native-screens": ">= 3.0.0" + } + }, "node_modules/@react-navigation/elements": { "version": "1.3.31", "resolved": "https://registry.npmjs.org/@react-navigation/elements/-/elements-1.3.31.tgz", @@ -7945,10 +7969,18 @@ "@types/node": "*" } }, + "node_modules/@types/parse-json": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz", + "integrity": "sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==", + "dev": true, + "optional": true, + "peer": true + }, "node_modules/@types/prop-types": { - "version": "15.7.12", - "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz", - "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==", + "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 }, "node_modules/@types/react": { @@ -8903,6 +8935,81 @@ "node": "^14.15.0 || ^16.10.0 || >=18.0.0" } }, + "node_modules/babel-plugin-macros": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz", + "integrity": "sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==", + "dev": true, + "optional": true, + "peer": true, + "dependencies": { + "@babel/runtime": "^7.12.5", + "cosmiconfig": "^7.0.0", + "resolve": "^1.19.0" + }, + "engines": { + "node": ">=10", + "npm": ">=6" + } + }, + "node_modules/babel-plugin-macros/node_modules/cosmiconfig": { + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz", + "integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==", + "dev": true, + "optional": true, + "peer": true, + "dependencies": { + "@types/parse-json": "^4.0.0", + "import-fresh": "^3.2.1", + "parse-json": "^5.0.0", + "path-type": "^4.0.0", + "yaml": "^1.10.0" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/babel-plugin-macros/node_modules/import-fresh": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", + "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==", + "dev": true, + "optional": true, + "peer": true, + "dependencies": { + "parent-module": "^1.0.0", + "resolve-from": "^4.0.0" + }, + "engines": { + "node": ">=6" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/babel-plugin-macros/node_modules/resolve-from": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz", + "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==", + "dev": true, + "optional": true, + "peer": true, + "engines": { + "node": ">=4" + } + }, + "node_modules/babel-plugin-macros/node_modules/yaml": { + "version": "1.10.2", + "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz", + "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==", + "dev": true, + "optional": true, + "peer": true, + "engines": { + "node": ">= 6" + } + }, "node_modules/babel-plugin-polyfill-corejs2": { "version": "0.4.11", "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.11.tgz", @@ -11794,6 +11901,29 @@ "expo": "*" } }, + "node_modules/expo-build-properties": { + "version": "0.12.5", + "resolved": "https://registry.npmjs.org/expo-build-properties/-/expo-build-properties-0.12.5.tgz", + "integrity": "sha512-donC1le0PYfLKCPKRMGQoixuWuwDWCngzXSoQXUPsgHTDHQUKr8aw+lcWkTwZcItgNovcnk784I0dyfYDcxybA==", + "dependencies": { + "ajv": "^8.11.0", + "semver": "^7.6.0" + }, + "peerDependencies": { + "expo": "*" + } + }, + "node_modules/expo-build-properties/node_modules/semver": { + "version": "7.6.3", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz", + "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==", + "bin": { + "semver": "bin/semver.js" + }, + "engines": { + "node": ">=10" + } + }, "node_modules/expo-constants": { "version": "16.0.2", "resolved": "https://registry.npmjs.org/expo-constants/-/expo-constants-16.0.2.tgz", @@ -12020,6 +12150,14 @@ } } }, + "node_modules/expo-screen-orientation": { + "version": "7.0.5", + "resolved": "https://registry.npmjs.org/expo-screen-orientation/-/expo-screen-orientation-7.0.5.tgz", + "integrity": "sha512-1j0MzVzYpjKQo4BWowQ3ZYwC3OnddX/8k06C8VYTAxMyd8ou1k+rG4tm+GIV2n2RSzc3g7cfPlQwSYr3/SGmbg==", + "peerDependencies": { + "expo": "*" + } + }, "node_modules/expo-secure-store": { "version": "13.0.2", "resolved": "https://registry.npmjs.org/expo-secure-store/-/expo-secure-store-13.0.2.tgz", @@ -19370,6 +19508,20 @@ } } }, + "node_modules/react-native-drawer-layout": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/react-native-drawer-layout/-/react-native-drawer-layout-3.3.2.tgz", + "integrity": "sha512-Xr2qNT+v6lbVlWSuijx9D6p1NX6d2rE9wa7/Vpg9wy9EtSZGRP71F8XTkug9kgG+KlsxNcdWhqMFm/0lbPmlpQ==", + "dependencies": { + "use-latest-callback": "^0.2.1" + }, + "peerDependencies": { + "react": "*", + "react-native": "*", + "react-native-gesture-handler": ">= 1.0.0", + "react-native-reanimated": ">= 1.0.0" + } + }, "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", @@ -19399,16 +19551,28 @@ "react": "^16.6.0 || ^17.0.0 || ^18.0.0" } }, + "node_modules/react-native-pager-view": { + "version": "6.4.1", + "resolved": "https://registry.npmjs.org/react-native-pager-view/-/react-native-pager-view-6.4.1.tgz", + "integrity": "sha512-HnDxXTRHnR6WJ/vnOitv0C32KG9MJjxLnxswuQlBJmQ7RxF2GWOHSPIRAdZ9fLxdLstV38z9Oz1C95+t+yXkcg==", + "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", - "integrity": "sha512-sfxg6vYphrDc/g4jf/7iJ7NRi+26z2+BszPmvmk0Vnrz6FL7HYljJqTf531F1x6tFmsf+FEAmuCtTUIXFLVo9w==", + "version": "3.16.0", + "resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-3.16.0.tgz", + "integrity": "sha512-DDyp5/sFeDTsb7lf/iYVwyRmbfzO/+vsUjGV4YHeI9RbelG9GpZRJoxyv5CN0PXsEjQiXk4XJ8rxYDopCg9bsg==", "dependencies": { "@babel/plugin-transform-arrow-functions": "^7.0.0-0", + "@babel/plugin-transform-class-properties": "^7.0.0-0", + "@babel/plugin-transform-classes": "^7.0.0-0", "@babel/plugin-transform-nullish-coalescing-operator": "^7.0.0-0", "@babel/plugin-transform-optional-chaining": "^7.0.0-0", "@babel/plugin-transform-shorthand-properties": "^7.0.0-0", "@babel/plugin-transform-template-literals": "^7.0.0-0", + "@babel/plugin-transform-unicode-regex": "^7.0.0-0", "@babel/preset-typescript": "^7.16.7", "convert-source-map": "^2.0.0", "invariant": "^2.2.4" diff --git a/package.json b/package.json index 450dba9..cf85a83 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@safsbe/mental-health-app", - "main": "expo-router/entry", + "main": "index.js", "version": "0.1.0", "scripts": { "prepare": "husky", @@ -41,11 +41,13 @@ "@react-navigation/native": "^6.0.2", "expo": "~51.0.28", "expo-av": "~14.0.7", + "expo-build-properties": "~0.12.5", "expo-constants": "~16.0.2", "expo-font": "~12.0.9", "expo-image": "~1.12.15", "expo-linking": "~6.3.1", "expo-router": "~3.5.23", + "expo-screen-orientation": "~7.0.5", "expo-secure-store": "~13.0.2", "expo-splash-screen": "~0.27.5", "expo-status-bar": "~1.12.1", @@ -55,8 +57,10 @@ "react": "18.2.0", "react-dom": "18.2.0", "react-native": "0.74.5", + "react-native-drawer-layout": "^3.3.2", "react-native-gesture-handler": "~2.16.1", - "react-native-reanimated": "~3.10.1", + "react-native-pager-view": "^6.4.1", + "react-native-reanimated": "3.16.0", "react-native-safe-area-context": "4.10.5", "react-native-screens": "3.31.1", "react-native-web": "~0.19.10",