From 3b1084674b3fe38f40762a338e02d4e20140b416 Mon Sep 17 00:00:00 2001 From: Youssouf EL Azizi Date: Thu, 1 Feb 2024 17:10:50 +0100 Subject: [PATCH 01/14] feat: migrate to nativewind v4 --- babel.config.js | 6 +- global.css | 3 + metro.config.js | 6 +- nativewind-env.d.ts | 1 + package.json | 3 +- pnpm-lock.yaml | 284 +++++++++++++------- src/app/(app)/_layout.tsx | 1 + src/app/(app)/settings.tsx | 2 +- src/app/(app)/style.tsx | 16 +- src/app/_layout.tsx | 3 + src/app/feed/[id].tsx | 8 +- src/components/button-variants.tsx | 24 +- src/components/card.tsx | 11 +- src/components/color-variants.tsx | 8 +- src/components/login-form.tsx | 3 +- src/components/settings/item.tsx | 14 +- src/components/settings/items-container.tsx | 2 +- src/components/text-variants.tsx | 34 --- src/components/title.tsx | 8 +- src/components/typography.tsx | 27 ++ src/core/hooks/use-selected-theme.tsx | 4 +- src/ui/core/activity-indicator.tsx | 4 - src/ui/core/button.tsx | 186 +++++++------ src/ui/core/image.tsx | 7 +- src/ui/core/index.tsx | 16 +- src/ui/core/input/input.tsx | 94 ++++--- src/ui/core/list/empty-list.tsx | 3 +- src/ui/core/modal/dynamic-modal.tsx | 38 +++ src/ui/core/modal/index.tsx | 1 + src/ui/core/modal/modal-header.tsx | 27 +- src/ui/core/modal/modal.tsx | 2 +- src/ui/core/modal/x-close.tsx | 5 +- src/ui/core/pressable.tsx | 4 - src/ui/core/progress-bar.tsx | 51 ++++ src/ui/core/scroll-view.tsx | 6 - src/ui/core/select/controlled-select.tsx | 11 +- src/ui/core/select/icons.tsx | 7 +- src/ui/core/select/options.tsx | 11 +- src/ui/core/select/select.tsx | 109 ++++---- src/ui/core/text.tsx | 64 ++--- src/ui/core/touchable-opacity.tsx | 4 - src/ui/core/view.tsx | 6 - src/ui/icons/caret-down.tsx | 15 ++ src/ui/icons/index.tsx | 1 + tailwind.config.js | 2 + 45 files changed, 667 insertions(+), 475 deletions(-) create mode 100644 global.css create mode 100644 nativewind-env.d.ts delete mode 100644 src/components/text-variants.tsx create mode 100644 src/components/typography.tsx delete mode 100644 src/ui/core/activity-indicator.tsx create mode 100644 src/ui/core/modal/dynamic-modal.tsx delete mode 100644 src/ui/core/pressable.tsx create mode 100644 src/ui/core/progress-bar.tsx delete mode 100644 src/ui/core/scroll-view.tsx delete mode 100644 src/ui/core/touchable-opacity.tsx delete mode 100644 src/ui/core/view.tsx create mode 100644 src/ui/icons/caret-down.tsx diff --git a/babel.config.js b/babel.config.js index 5c770389..06392144 100644 --- a/babel.config.js +++ b/babel.config.js @@ -1,7 +1,10 @@ module.exports = function (api) { api.cache(true); return { - presets: ['babel-preset-expo'], + presets: [ + ['babel-preset-expo', { jsxImportSource: 'nativewind' }], + 'nativewind/babel', + ], plugins: [ [ 'module-resolver', @@ -24,7 +27,6 @@ module.exports = function (api) { ], }, ], - ['nativewind/babel', { mode: 'compileOnly' }], 'react-native-reanimated/plugin', ], }; diff --git a/global.css b/global.css new file mode 100644 index 00000000..b5c61c95 --- /dev/null +++ b/global.css @@ -0,0 +1,3 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; diff --git a/metro.config.js b/metro.config.js index 9430b0f9..f3321ba3 100644 --- a/metro.config.js +++ b/metro.config.js @@ -1,4 +1,6 @@ -// Learn more https://docs.expo.io/guides/customizing-metro const { getDefaultConfig } = require('expo/metro-config'); +const { withNativeWind } = require('nativewind/metro'); -module.exports = getDefaultConfig(__dirname); +const config = getDefaultConfig(__dirname); + +module.exports = withNativeWind(config, { input: './global.css' }); diff --git a/nativewind-env.d.ts b/nativewind-env.d.ts new file mode 100644 index 00000000..a13e3136 --- /dev/null +++ b/nativewind-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/package.json b/package.json index 2e835cb6..2795997a 100644 --- a/package.json +++ b/package.json @@ -62,7 +62,7 @@ "expo-system-ui": "~2.9.3", "i18next": "^22.5.1", "lodash.memoize": "^4.1.2", - "nativewind": "^2.0.11", + "nativewind": "^4.0.23", "react": "18.2.0", "react-dom": "18.2.0", "react-error-boundary": "^3.1.4", @@ -80,6 +80,7 @@ "react-native-svg": "14.1.0", "react-native-web": "~0.19.10", "react-query-kit": "^1.5.2", + "tailwind-variants": "^0.1.20", "zod": "^3.22.4", "zustand": "^4.5.0" }, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 79eb6d25..2aed3f55 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -78,8 +78,8 @@ dependencies: specifier: ^4.1.2 version: 4.1.2 nativewind: - specifier: ^2.0.11 - version: 2.0.11(react@18.2.0)(tailwindcss@3.3.2) + specifier: ^4.0.23 + version: 4.0.23(@babel/core@7.23.7)(react-native-reanimated@3.6.1)(react-native-safe-area-context@4.8.2)(react-native-svg@14.1.0)(react-native@0.73.2)(react@18.2.0)(tailwindcss@3.3.2) react: specifier: 18.2.0 version: 18.2.0 @@ -131,6 +131,9 @@ dependencies: react-query-kit: specifier: ^1.5.2 version: 1.5.2(@tanstack/react-query@4.36.1) + tailwind-variants: + specifier: ^0.1.20 + version: 0.1.20(tailwindcss@3.3.2) zod: specifier: ^3.22.4 version: 3.22.4 @@ -435,13 +438,6 @@ packages: dependencies: '@babel/types': 7.23.6 - /@babel/helper-module-imports@7.18.6: - resolution: {integrity: sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA==} - engines: {node: '>=6.9.0'} - dependencies: - '@babel/types': 7.19.0 - dev: false - /@babel/helper-module-imports@7.22.15: resolution: {integrity: sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w==} engines: {node: '>=6.9.0'} @@ -1684,15 +1680,6 @@ packages: transitivePeerDependencies: - supports-color - /@babel/types@7.19.0: - resolution: {integrity: sha512-YuGopBq3ke25BVSiS6fgF49Ul9gH1x70Bcr6bqRLjWCkcX8Hre1/5+z+IiWOIerRMSSEfGZVB9z9kyq7wVs9YA==} - engines: {node: '>=6.9.0'} - dependencies: - '@babel/helper-string-parser': 7.23.4 - '@babel/helper-validator-identifier': 7.22.20 - to-fast-properties: 2.0.0 - dev: false - /@babel/types@7.23.6: resolution: {integrity: sha512-+uarb83brBzPKN38NX1MkB6vb6+mwvR6amUulqAE7ccQw1pEl+bCia9TbdG1lsnFP7lZySvUn37CHyXQdfTwzg==} engines: {node: '>=6.9.0'} @@ -4695,6 +4682,22 @@ packages: resolution: {integrity: sha512-Xj9XuRuz3nTSbaTXWv3itLOcxyF4oPD8douBBmj7U9BBC6nEBYfyOJYQMf/8PJAFotC62UY5dFfIGEPr7WswzQ==} dev: false + /babel-plugin-tester@11.0.4(@babel/core@7.23.7): + resolution: {integrity: sha512-cqswtpSPo0e++rZB0l/54EG17LL25l9gLgh59yXfnmNxX+2lZTIOpx2zt4YI9QIClVXc8xf63J6yWwKkzy0jNg==} + engines: {node: ^14.20.0 || ^16.16.0 || >=18.5.0} + peerDependencies: + '@babel/core': '>=7.11.6' + dependencies: + '@babel/core': 7.23.7 + core-js: 3.35.1 + debug: 4.3.4 + lodash.mergewith: 4.6.2 + prettier: 2.8.8 + strip-indent: 3.0.0 + transitivePeerDependencies: + - supports-color + dev: false + /babel-plugin-transform-flow-enums@0.0.2(@babel/core@7.23.7): resolution: {integrity: sha512-g4aaCrDDOsWjbm0PUUeVnkcVd6AKJsVc/MbnPhEotEpkeJQP6b8nzewohQi7+QS8UyPehOhGWn0nOwjvWpmMvQ==} dependencies: @@ -5046,10 +5049,6 @@ packages: resolution: {integrity: sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==} engines: {node: '>=10'} - /camelize@1.0.1: - resolution: {integrity: sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==} - dev: false - /caniuse-lite@1.0.30001579: resolution: {integrity: sha512-u5AUVkixruKHJjw/pj9wISlcMpgFWzSrczLZbrqBSxukQixmg0SJ5sZTpvaFvxU0HoQKd4yoyAogyrAz9pzJnA==} @@ -5457,6 +5456,11 @@ packages: dependencies: browserslist: 4.22.2 + /core-js@3.35.1: + resolution: {integrity: sha512-IgdsbxNyMskrTFxa9lWHyMwAJU5gXOPP+1yO+K59d50VLVAIDAbs7gIv705KzALModfK3ZrSZTPNpC0PQgIZuw==} + requiresBuild: true + dev: false + /core-util-is@1.0.3: resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==} @@ -5581,21 +5585,12 @@ packages: resolution: {integrity: sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==} engines: {node: '>=8'} - /css-color-keywords@1.0.0: - resolution: {integrity: sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==} - engines: {node: '>=4'} - dev: false - /css-in-js-utils@3.1.0: resolution: {integrity: sha512-fJAcud6B3rRu+KHYk+Bwf+WFL2MDCJJ1XG9x137tJQ0xYxor7XziQtuGFbWNdqrvF4Tk26O3H73nfVqXt/fW1A==} dependencies: hyphenate-style-name: 1.0.4 dev: false - /css-mediaquery@0.1.2: - resolution: {integrity: sha512-COtn4EROW5dBGlE/4PiKnh6rZpAPxDeFLaEEwt4i10jpDMFt2EhQGS79QmmrO+iKCHv0PU/HrOWEhijFd1x99Q==} - dev: false - /css-select@5.1.0: resolution: {integrity: sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==} dependencies: @@ -5606,14 +5601,6 @@ packages: nth-check: 2.1.1 dev: false - /css-to-react-native@3.2.0: - resolution: {integrity: sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==} - dependencies: - camelize: 1.0.1 - css-color-keywords: 1.0.0 - postcss-value-parser: 4.2.0 - dev: false - /css-tree@1.1.3: resolution: {integrity: sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==} engines: {node: '>=8.0.0'} @@ -6889,10 +6876,6 @@ packages: - utf-8-validate dev: false - /extend@3.0.2: - resolution: {integrity: sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==} - dev: false - /external-editor@3.1.0: resolution: {integrity: sha512-hMQ4CX1p1izmuLYyZqLMO/qGNw10wSv9QDCPfzXfyFrOaCSSoRfqE1Kf1s5an66J5JZC62NewG+mK49jOCtQew==} engines: {node: '>=4'} @@ -9148,6 +9131,15 @@ packages: dev: false optional: true + /lightningcss-darwin-arm64@1.22.0: + resolution: {integrity: sha512-aH2be3nNny+It5YEVm8tBSSdRlBVWQV8m2oJ7dESiYRzyY/E/bQUe2xlw5caaMuhlM9aoTMtOH25yzMhir0qPg==} + engines: {node: '>= 12.0.0'} + cpu: [arm64] + os: [darwin] + requiresBuild: true + dev: false + optional: true + /lightningcss-darwin-x64@1.19.0: resolution: {integrity: sha512-Lif1wD6P4poaw9c/4Uh2z+gmrWhw/HtXFoeZ3bEsv6Ia4tt8rOJBdkfVaUJ6VXmpKHALve+iTyP2+50xY1wKPw==} engines: {node: '>= 12.0.0'} @@ -9157,6 +9149,24 @@ packages: dev: false optional: true + /lightningcss-darwin-x64@1.22.0: + resolution: {integrity: sha512-9KHRFA0Y6mNxRHeoQMp0YaI0R0O2kOgUlYPRjuasU4d+pI8NRhVn9bt0yX9VPs5ibWX1RbDViSPtGJvYYrfVAQ==} + engines: {node: '>= 12.0.0'} + cpu: [x64] + os: [darwin] + requiresBuild: true + dev: false + optional: true + + /lightningcss-freebsd-x64@1.22.0: + resolution: {integrity: sha512-xaYL3xperGwD85rQioDb52ozF3NAJb+9wrge3jD9lxGffplu0Mn35rXMptB8Uc2N9Mw1i3Bvl7+z1evlqVl7ww==} + engines: {node: '>= 12.0.0'} + cpu: [x64] + os: [freebsd] + requiresBuild: true + dev: false + optional: true + /lightningcss-linux-arm-gnueabihf@1.19.0: resolution: {integrity: sha512-P15VXY5682mTXaiDtbnLYQflc8BYb774j2R84FgDLJTN6Qp0ZjWEFyN1SPqyfTj2B2TFjRHRUvQSSZ7qN4Weig==} engines: {node: '>= 12.0.0'} @@ -9166,6 +9176,15 @@ packages: dev: false optional: true + /lightningcss-linux-arm-gnueabihf@1.22.0: + resolution: {integrity: sha512-epQGvXIjOuxrZpMpMnRjK54ZqzhiHhCPLtHvw2fb6NeK2kK9YtF0wqmeTBiQ1AkbWfnnXGTstYaFNiadNK+StQ==} + engines: {node: '>= 12.0.0'} + cpu: [arm] + os: [linux] + requiresBuild: true + dev: false + optional: true + /lightningcss-linux-arm64-gnu@1.19.0: resolution: {integrity: sha512-zwXRjWqpev8wqO0sv0M1aM1PpjHz6RVIsBcxKszIG83Befuh4yNysjgHVplF9RTU7eozGe3Ts7r6we1+Qkqsww==} engines: {node: '>= 12.0.0'} @@ -9175,6 +9194,15 @@ packages: dev: false optional: true + /lightningcss-linux-arm64-gnu@1.22.0: + resolution: {integrity: sha512-AArGtKSY4DGTA8xP8SDyNyKtpsUl1Rzq6FW4JomeyUQ4nBrR71uPChksTpj3gmWuGhZeRKLeCUI1DBid/zhChg==} + engines: {node: '>= 12.0.0'} + cpu: [arm64] + os: [linux] + requiresBuild: true + dev: false + optional: true + /lightningcss-linux-arm64-musl@1.19.0: resolution: {integrity: sha512-vSCKO7SDnZaFN9zEloKSZM5/kC5gbzUjoJQ43BvUpyTFUX7ACs/mDfl2Eq6fdz2+uWhUh7vf92c4EaaP4udEtA==} engines: {node: '>= 12.0.0'} @@ -9184,6 +9212,15 @@ packages: dev: false optional: true + /lightningcss-linux-arm64-musl@1.22.0: + resolution: {integrity: sha512-RRraNgP8hnBPhInTTUdlFm+z16C/ghbxBG51Sw00hd7HUyKmEUKRozyc5od+/N6pOrX/bIh5vIbtMXIxsos0lg==} + engines: {node: '>= 12.0.0'} + cpu: [arm64] + os: [linux] + requiresBuild: true + dev: false + optional: true + /lightningcss-linux-x64-gnu@1.19.0: resolution: {integrity: sha512-0AFQKvVzXf9byrXUq9z0anMGLdZJS+XSDqidyijI5njIwj6MdbvX2UZK/c4FfNmeRa2N/8ngTffoIuOUit5eIQ==} engines: {node: '>= 12.0.0'} @@ -9193,6 +9230,15 @@ packages: dev: false optional: true + /lightningcss-linux-x64-gnu@1.22.0: + resolution: {integrity: sha512-grdrhYGRi2KrR+bsXJVI0myRADqyA7ekprGxiuK5QRNkv7kj3Yq1fERDNyzZvjisHwKUi29sYMClscbtl+/Zpw==} + engines: {node: '>= 12.0.0'} + cpu: [x64] + os: [linux] + requiresBuild: true + dev: false + optional: true + /lightningcss-linux-x64-musl@1.19.0: resolution: {integrity: sha512-SJoM8CLPt6ECCgSuWe+g0qo8dqQYVcPiW2s19dxkmSI5+Uu1GIRzyKA0b7QqmEXolA+oSJhQqCmJpzjY4CuZAg==} engines: {node: '>= 12.0.0'} @@ -9202,6 +9248,15 @@ packages: dev: false optional: true + /lightningcss-linux-x64-musl@1.22.0: + resolution: {integrity: sha512-t5f90X+iQUtIyR56oXIHMBUyQFX/zwmPt72E6Dane3P8KNGlkijTg2I75XVQS860gNoEFzV7Mm5ArRRA7u5CAQ==} + engines: {node: '>= 12.0.0'} + cpu: [x64] + os: [linux] + requiresBuild: true + dev: false + optional: true + /lightningcss-win32-x64-msvc@1.19.0: resolution: {integrity: sha512-C+VuUTeSUOAaBZZOPT7Etn/agx/MatzJzGRkeV+zEABmPuntv1zihncsi+AyGmjkkzq3wVedEy7h0/4S84mUtg==} engines: {node: '>= 12.0.0'} @@ -9211,6 +9266,15 @@ packages: dev: false optional: true + /lightningcss-win32-x64-msvc@1.22.0: + resolution: {integrity: sha512-64HTDtOOZE9PUCZJiZZQpyqXBbdby1lnztBccnqh+NtbKxjnGzP92R2ngcgeuqMPecMNqNWxgoWgTGpC+yN5Sw==} + engines: {node: '>= 12.0.0'} + cpu: [x64] + os: [win32] + requiresBuild: true + dev: false + optional: true + /lightningcss@1.19.0: resolution: {integrity: sha512-yV5UR7og+Og7lQC+70DA7a8ta1uiOPnWPJfxa0wnxylev5qfo4P+4iMpzWAdYWOca4jdNQZii+bDL/l+4hUXIA==} engines: {node: '>= 12.0.0'} @@ -9227,6 +9291,23 @@ packages: lightningcss-win32-x64-msvc: 1.19.0 dev: false + /lightningcss@1.22.0: + resolution: {integrity: sha512-+z0qvwRVzs4XGRXelnWRNwqsXUx8k3bSkbP8vD42kYKSk3z9OM2P3e/gagT7ei/gwh8DTS80LZOFZV6lm8Z8Fg==} + engines: {node: '>= 12.0.0'} + dependencies: + detect-libc: 1.0.3 + optionalDependencies: + lightningcss-darwin-arm64: 1.22.0 + lightningcss-darwin-x64: 1.22.0 + lightningcss-freebsd-x64: 1.22.0 + lightningcss-linux-arm-gnueabihf: 1.22.0 + lightningcss-linux-arm64-gnu: 1.22.0 + lightningcss-linux-arm64-musl: 1.22.0 + lightningcss-linux-x64-gnu: 1.22.0 + lightningcss-linux-x64-musl: 1.22.0 + lightningcss-win32-x64-msvc: 1.22.0 + dev: false + /lilconfig@2.1.0: resolution: {integrity: sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==} engines: {node: '>=10'} @@ -9403,7 +9484,6 @@ packages: /lodash.mergewith@4.6.2: resolution: {integrity: sha512-GK3g5RPZWTRSeLSpgP8Xhra+pnjBC56q9FZYe1d5RN3TJ35dbkGy3YqBSMbyCrlbi+CM9Z3Jk5yTL7RCsqboyQ==} - dev: true /lodash.set@4.3.2: resolution: {integrity: sha512-4hNPN5jlm/N/HLMCO43v8BXKq9Z7QdAGc/VGrRD61w8gN9g/6jF9A4L1pbUgBLCffi0w9VsXfTOij5x8iTyFvg==} @@ -10040,28 +10120,22 @@ packages: engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1} hasBin: true - /nativewind@2.0.11(react@18.2.0)(tailwindcss@3.3.2): - resolution: {integrity: sha512-qCEXUwKW21RYJ33KRAJl3zXq2bCq82WoI564fI21D/TiqhfmstZOqPN53RF8qK1NDK6PGl56b2xaTxgObEePEg==} - engines: {node: '>=14.18'} + /nativewind@4.0.23(@babel/core@7.23.7)(react-native-reanimated@3.6.1)(react-native-safe-area-context@4.8.2)(react-native-svg@14.1.0)(react-native@0.73.2)(react@18.2.0)(tailwindcss@3.3.2): + resolution: {integrity: sha512-7eKMjcdoZMqxmPwJhLwe5VbuwCNTdIXChxV9n4FwdzKTpZX3kNGj95J7fpqpefFPRT6yYp6SqK2n6TG/BSzA+w==} + engines: {node: '>=16'} peerDependencies: - tailwindcss: ~3 + tailwindcss: '>3.3.0' dependencies: - '@babel/generator': 7.23.6 - '@babel/helper-module-imports': 7.18.6 - '@babel/types': 7.19.0 - css-mediaquery: 0.1.2 - css-to-react-native: 3.2.0 - micromatch: 4.0.5 - postcss: 8.4.33 - postcss-calc: 8.2.4(postcss@8.4.33) - postcss-color-functional-notation: 4.2.4(postcss@8.4.33) - postcss-css-variables: 0.18.0(postcss@8.4.33) - postcss-nested: 5.0.6(postcss@8.4.33) - react-is: 18.2.0 + react-native-css-interop: 0.0.22(@babel/core@7.23.7)(react-native-reanimated@3.6.1)(react-native-safe-area-context@4.8.2)(react-native-svg@14.1.0)(react-native@0.73.2)(react@18.2.0)(tailwindcss@3.3.2) tailwindcss: 3.3.2(ts-node@10.9.2) - use-sync-external-store: 1.2.0(react@18.2.0) transitivePeerDependencies: + - '@babel/core' - react + - react-native + - react-native-reanimated + - react-native-safe-area-context + - react-native-svg + - supports-color dev: false /natural-compare-lite@1.4.0: @@ -10822,37 +10896,6 @@ packages: engines: {node: '>=12.13.0'} dev: false - /postcss-calc@8.2.4(postcss@8.4.33): - resolution: {integrity: sha512-SmWMSJmB8MRnnULldx0lQIyhSNvuDl9HfrZkaqqE/WHAhToYsAvDq+yAsA/kIyINDszOp3Rh0GFoNuH5Ypsm3Q==} - peerDependencies: - postcss: ^8.2.2 - dependencies: - postcss: 8.4.33 - postcss-selector-parser: 6.0.15 - postcss-value-parser: 4.2.0 - dev: false - - /postcss-color-functional-notation@4.2.4(postcss@8.4.33): - resolution: {integrity: sha512-2yrTAUZUab9s6CpxkxC4rVgFEVaR6/2Pipvi6qcgvnYiVqZcbDHEoBDhrXzyb7Efh2CCfHQNtcqWcIruDTIUeg==} - engines: {node: ^12 || ^14 || >=16} - peerDependencies: - postcss: ^8.2 - dependencies: - postcss: 8.4.33 - postcss-value-parser: 4.2.0 - dev: false - - /postcss-css-variables@0.18.0(postcss@8.4.33): - resolution: {integrity: sha512-lYS802gHbzn1GI+lXvy9MYIYDuGnl1WB4FTKoqMQqJ3Mab09A7a/1wZvGTkCEZJTM8mSbIyb1mJYn8f0aPye0Q==} - peerDependencies: - postcss: ^8.2.6 - dependencies: - balanced-match: 1.0.2 - escape-string-regexp: 1.0.5 - extend: 3.0.2 - postcss: 8.4.33 - dev: false - /postcss-import@15.1.0(postcss@8.4.33): resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==} engines: {node: '>=14.0.0'} @@ -10890,16 +10933,6 @@ packages: ts-node: 10.9.2(@types/node@20.5.1)(typescript@5.3.3) yaml: 2.3.4 - /postcss-nested@5.0.6(postcss@8.4.33): - resolution: {integrity: sha512-rKqm2Fk0KbA8Vt3AdGN0FB9OBOMDVajMG6ZCf/GoHgdxUJ4sBFp0A/uMIRm+MJUdo33YXEtjqIz8u7DAp8B7DA==} - engines: {node: '>=12.0'} - peerDependencies: - postcss: ^8.2.14 - dependencies: - postcss: 8.4.33 - postcss-selector-parser: 6.0.15 - dev: false - /postcss-nested@6.0.1(postcss@8.4.33): resolution: {integrity: sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==} engines: {node: '>=12.0'} @@ -10948,7 +10981,6 @@ packages: resolution: {integrity: sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==} engines: {node: '>=10.13.0'} hasBin: true - dev: true /pretty-bytes@5.6.0: resolution: {integrity: sha512-FFw039TmrBqFK8ma/7OL3sDz/VytdtJr044/QUJtH0wK9lb9jLq9tJyIxUwtQJHwar2BqtiA4iCWSwo9JLkzFg==} @@ -11206,6 +11238,38 @@ packages: react-native: 0.73.2(@babel/core@7.23.7)(@babel/preset-env@7.23.8)(react@18.2.0) dev: false + /react-native-css-interop@0.0.22(@babel/core@7.23.7)(react-native-reanimated@3.6.1)(react-native-safe-area-context@4.8.2)(react-native-svg@14.1.0)(react-native@0.73.2)(react@18.2.0)(tailwindcss@3.3.2): + resolution: {integrity: sha512-JHLYHlLEqM13dy0XSxIPOWvqmQkPrqUt+KHPkbLV0sIiw/4aN6B5TPsNKZFX9bJJaZ//dAECn782R0MqDrTBWQ==} + engines: {node: '>=16'} + peerDependencies: + react: '>=18' + react-native: '*' + react-native-reanimated: '>=3.3.0' + react-native-safe-area-context: '*' + react-native-svg: '*' + tailwindcss: ~3 + peerDependenciesMeta: + react-native-safe-area-context: + optional: true + react-native-svg: + optional: true + dependencies: + '@babel/helper-module-imports': 7.22.15 + '@babel/traverse': 7.23.7 + '@babel/types': 7.23.6 + babel-plugin-tester: 11.0.4(@babel/core@7.23.7) + lightningcss: 1.22.0 + react: 18.2.0 + react-native: 0.73.2(@babel/core@7.23.7)(@babel/preset-env@7.23.8)(react@18.2.0) + react-native-reanimated: 3.6.1(@babel/core@7.23.7)(@babel/plugin-proposal-nullish-coalescing-operator@7.18.6)(@babel/plugin-proposal-optional-chaining@7.21.0)(@babel/plugin-transform-arrow-functions@7.23.3)(@babel/plugin-transform-shorthand-properties@7.23.3)(@babel/plugin-transform-template-literals@7.23.3)(react-native@0.73.2)(react@18.2.0) + react-native-safe-area-context: 4.8.2(react-native@0.73.2)(react@18.2.0) + react-native-svg: 14.1.0(react-native@0.73.2)(react@18.2.0) + tailwindcss: 3.3.2(ts-node@10.9.2) + transitivePeerDependencies: + - '@babel/core' + - supports-color + dev: false + /react-native-flash-message@0.4.2(prop-types@15.8.1)(react-native@0.73.2)(react@18.2.0): resolution: {integrity: sha512-YvdXRW9AGMTI99S3DJZhLO0mbk/ehKv/UQf4/Df+3dtGi8DlkidRbyqCQZk1WMtZ7rN85PMTGr/xEI9CF9z0YA==} peerDependencies: @@ -12472,6 +12536,20 @@ packages: resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==} dev: true + /tailwind-merge@1.14.0: + resolution: {integrity: sha512-3mFKyCo/MBcgyOTlrY8T7odzZFx+w+qKSMAmdFzRvqBfLlSigU6TZnlFHK0lkMwj9Bj8OYU+9yW9lmGuS0QEnQ==} + dev: false + + /tailwind-variants@0.1.20(tailwindcss@3.3.2): + resolution: {integrity: sha512-AMh7x313t/V+eTySKB0Dal08RHY7ggYK0MSn/ad8wKWOrDUIzyiWNayRUm2PIJ4VRkvRnfNuyRuKbLV3EN+ewQ==} + engines: {node: '>=16.x', pnpm: '>=7.x'} + peerDependencies: + tailwindcss: '*' + dependencies: + tailwind-merge: 1.14.0 + tailwindcss: 3.3.2(ts-node@10.9.2) + dev: false + /tailwindcss@3.3.2(ts-node@10.9.2): resolution: {integrity: sha512-9jPkMiIBXvPc2KywkraqsUfbfj+dHDb+JPWtSJa9MLFdrPyazI7q6WX2sUrm7R9eVR7qqv3Pas7EvQFzxKnI6w==} engines: {node: '>=14.0.0'} diff --git a/src/app/(app)/_layout.tsx b/src/app/(app)/_layout.tsx index 797b91d5..53ba4433 100644 --- a/src/app/(app)/_layout.tsx +++ b/src/app/(app)/_layout.tsx @@ -46,6 +46,7 @@ export default function TabLayout() { name="style" options={{ title: 'Style', + headerShown: false, tabBarIcon: ({ color }) => , }} /> diff --git a/src/app/(app)/settings.tsx b/src/app/(app)/settings.tsx index 4d61f8e0..9f7af03a 100644 --- a/src/app/(app)/settings.tsx +++ b/src/app/(app)/settings.tsx @@ -31,7 +31,7 @@ export default function Settings() { - + {translate('settings.title')} diff --git a/src/app/(app)/style.tsx b/src/app/(app)/style.tsx index b45834c8..a17511a6 100644 --- a/src/app/(app)/style.tsx +++ b/src/app/(app)/style.tsx @@ -1,22 +1,20 @@ import * as React from 'react'; import { ButtonVariants } from '@/components/button-variants'; -import { ColorVariants } from '@/components/color-variants'; -import { InputVariants } from '@/components/input-variants'; -import { TextVariants } from '@/components/text-variants'; -import { FocusAwareStatusBar, ScrollView, View } from '@/ui'; +import { Typography } from '@/components/typography'; +import { FocusAwareStatusBar, SafeAreaView, ScrollView } from '@/ui'; export default function Style() { return ( <> - - - - + + + {/* + */} - + ); diff --git a/src/app/_layout.tsx b/src/app/_layout.tsx index 39d65744..a2b375d4 100644 --- a/src/app/_layout.tsx +++ b/src/app/_layout.tsx @@ -12,6 +12,9 @@ import { useThemeConfig } from '@/core/use-theme-config'; export { ErrorBoundary } from 'expo-router'; +// Import global CSS file +import '../../global.css'; + export const unstable_settings = { initialRouteName: '(app)', }; diff --git a/src/app/feed/[id].tsx b/src/app/feed/[id].tsx index 59c516a5..12edf769 100644 --- a/src/app/feed/[id].tsx +++ b/src/app/feed/[id].tsx @@ -26,9 +26,7 @@ export default function Post() { - - Error loading post - + Error loading post ); } @@ -37,8 +35,8 @@ export default function Post() { - {data.title} - {data.body} + {data.title} + {data.body} ); } diff --git a/src/components/button-variants.tsx b/src/components/button-variants.tsx index dd0bbeea..a948b981 100644 --- a/src/components/button-variants.tsx +++ b/src/components/button-variants.tsx @@ -1,30 +1,22 @@ import React from 'react'; -import { Button, buttonVariants, View } from '@/ui'; +import { Button, View } from '@/ui'; import { Title } from './title'; -type variant = keyof typeof buttonVariants; - export const ButtonVariants = () => { return ( <> <View> - {(Object.keys(buttonVariants) as variant[]) - .filter((v) => v !== 'defaults') - .map((variant, index) => { - return ( - <Button - key={`button-${index}`} - label={`${variant.toUpperCase()} BUTTON`} - variant={variant} - /> - ); - })} - <Button label="Button" loading={true} variant="primary" /> + <Button label="Button" /> + <Button label="Button" variant="secondary" /> + <Button label="Button" variant="outline" /> + <Button label="Button" variant="destructive" /> + <Button label="Button" variant="ghost" /> + <Button label="Button" loading={true} /> <Button label="Button" loading={true} variant="outline" /> - <Button label="PRIMARY BUTTON DISABLED" disabled variant="primary" /> + <Button label="PRIMARY BUTTON DISABLED" disabled /> <Button label="SECONDARY BUTTON DISABLED" disabled diff --git a/src/components/card.tsx b/src/components/card.tsx index 52076278..a5e718fa 100644 --- a/src/components/card.tsx +++ b/src/components/card.tsx @@ -9,19 +9,18 @@ type Props = Post; export const Card = ({ title, body, id }: Props) => { return ( <Link href={`/feed/${id}`} asChild> - <Pressable className="m-2 block overflow-hidden rounded-xl bg-neutral-200 p-2 shadow-xl dark:bg-charcoal-900"> + <Pressable className="m-2 overflow-hidden rounded-xl bg-neutral-200 p-2 shadow-xl dark:bg-charcoal-900"> <Image - className="h-56 w-full object-cover " + className="h-56 w-full" + contentFit="cover" source={{ uri: 'https://images.unsplash.com/photo-1524758631624-e2822e304c36?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80', }} /> <View> - <Text variant="md" numberOfLines={1} className="font-bold"> - {title} - </Text> - <Text variant="xs" numberOfLines={3}> + <Text className="py-2 text-2xl font-bold">{title}</Text> + <Text numberOfLines={3} className="leading-snug"> {body} </Text> </View> diff --git a/src/components/color-variants.tsx b/src/components/color-variants.tsx index 1569c733..39994819 100644 --- a/src/components/color-variants.tsx +++ b/src/components/color-variants.tsx @@ -21,9 +21,7 @@ const ColorVariant = ({ name }: { name: ColorName }) => { if (typeof colors[name] === 'string') return null; return ( <View className="pt-2"> - <Text variant="md" className="font-medium"> - {name.toUpperCase()} - </Text> + <Text className="font-medium">{name.toUpperCase()}</Text> <View className=" flex-row flex-wrap content-between justify-between "> {Object.entries(colors[name]).map(([key, value]) => { return ( @@ -46,9 +44,9 @@ const ColorCard = ({ color, value }: { value: string; color: string }) => { style={{ backgroundColor: color }} className={`h-[42px] w-[42px] items-center justify-center rounded-full border-[1px] border-neutral-200 dark:border-charcoal-700`} > - <Text variant="sm">{value}</Text> + <Text className="text-sm">{value}</Text> </View> - <Text variant="sm">{color}</Text> + <Text className="text-sm">{color}</Text> </View> ); }; diff --git a/src/components/login-form.tsx b/src/components/login-form.tsx index 1b7feb76..278b42cb 100644 --- a/src/components/login-form.tsx +++ b/src/components/login-form.tsx @@ -32,7 +32,7 @@ export const LoginForm = ({ onSubmit = () => {} }: LoginFormProps) => { }); return ( <View className="flex-1 justify-center p-4"> - <Text testID="form-title" variant="h1" className="pb-6 text-center"> + <Text testID="form-title" className="pb-6 text-center text-2xl"> Sign In </Text> @@ -61,7 +61,6 @@ export const LoginForm = ({ onSubmit = () => {} }: LoginFormProps) => { testID="login-button" label="Login" onPress={handleSubmit(onSubmit)} - variant="primary" /> </View> ); diff --git a/src/components/settings/item.tsx b/src/components/settings/item.tsx index 735ccdc7..33d1f0cb 100644 --- a/src/components/settings/item.tsx +++ b/src/components/settings/item.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import type { TxKeyPath } from '@/core'; -import { ArrowRight, Text, TouchableOpacity, View } from '@/ui'; +import { ArrowRight, Pressable, Text, View } from '@/ui'; type ItemProps = { text: TxKeyPath; @@ -12,26 +12,24 @@ type ItemProps = { export const Item = ({ text, value, icon, onPress }: ItemProps) => { const isPressable = onPress !== undefined; - const Container = isPressable ? TouchableOpacity : View; return ( - <Container + <Pressable onPress={onPress} + pointerEvents={isPressable ? 'auto' : 'none'} className="flex-1 flex-row items-center justify-between px-4 py-2" > <View className="flex-row items-center"> {icon && <View className="pr-2">{icon}</View>} - <Text variant="md" tx={text} /> + <Text tx={text} /> </View> <View className="flex-row items-center"> - <Text variant="md" className="text-neutral-600 dark:text-white"> - {value} - </Text> + <Text className="text-neutral-600 dark:text-white">{value}</Text> {isPressable && ( <View className="pl-2"> <ArrowRight /> </View> )} </View> - </Container> + </Pressable> ); }; diff --git a/src/components/settings/items-container.tsx b/src/components/settings/items-container.tsx index 2696f80e..3c83cec0 100644 --- a/src/components/settings/items-container.tsx +++ b/src/components/settings/items-container.tsx @@ -11,7 +11,7 @@ type Props = { export const ItemsContainer = ({ children, title }: Props) => { return ( <> - {title && <Text variant="lg" className="pb-2 pt-4" tx={title} />} + {title && <Text className="pb-2 pt-4 text-lg" tx={title} />} { <View className=" rounded-md border-[1px] border-neutral-200 dark:border-charcoal-700 dark:bg-charcoal-800"> {children} diff --git a/src/components/text-variants.tsx b/src/components/text-variants.tsx deleted file mode 100644 index 25b8da04..00000000 --- a/src/components/text-variants.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import React from 'react'; - -import { Text, textVariants, View } from '@/ui'; - -import { Title } from './title'; - -type variant = keyof typeof textVariants; - -export const TextVariants = () => { - return ( - <> - <Title text="Typography" /> - <View> - {(Object.keys(textVariants) as variant[]) - .filter((v) => v !== 'defaults') - .map((variant, index) => { - return ( - <View className="mb-4 flex-row" key={`text-${index}`}> - <Text variant={variant} className="pr-2 font-light"> - {variant.toUpperCase()} Text - </Text> - <Text variant={variant} className="pr-2 font-medium"> - {variant.toUpperCase()} Text - </Text> - <Text variant={variant} className="pr-2 font-bold"> - {variant.toUpperCase()} Text - </Text> - </View> - ); - })} - </View> - </> - ); -}; diff --git a/src/components/title.tsx b/src/components/title.tsx index 1527fb84..a0dd88af 100644 --- a/src/components/title.tsx +++ b/src/components/title.tsx @@ -7,11 +7,9 @@ type Props = { }; export const Title = ({ text }: Props) => { return ( - <View className="flex-row items-center justify-center pb-2 pt-4"> - <Text variant="lg" className="pr-2"> - {text} - </Text> - <View className="h-[2px] flex-1 bg-neutral-200" /> + <View className="flex-row items-center justify-center py-4 pb-2"> + <Text className="pr-2 text-2xl">{text}</Text> + <View className="h-[2px] flex-1 bg-neutral-300" /> </View> ); }; diff --git a/src/components/typography.tsx b/src/components/typography.tsx new file mode 100644 index 00000000..cd027eaf --- /dev/null +++ b/src/components/typography.tsx @@ -0,0 +1,27 @@ +import React from 'react'; + +import { Text, View } from '@/ui'; + +import { Title } from './title'; + +export const Typography = () => { + return ( + <> + <Title text="Typography" /> + <View className="mb-4 flex-col"> + <Text className="text-3xl tracking-tight"> + H1: Lorem ipsum dolor sit + </Text> + <Text className="text-2xl ">H2: Lorem ipsum dolor sit</Text> + <Text className="text-xl ">H3: Lorem ipsum dolor sit</Text> + <Text className="text-lg ">H4: Lorem ipsum dolor sit</Text> + <Text className="text-base"> + Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cumque quasi + aut, expedita tempore ratione quidem in, corporis quia minus et + dolorem sunt temporibus iusto consequatur culpa. Omnis sequi debitis + recusandae? + </Text> + </View> + </> + ); +}; diff --git a/src/core/hooks/use-selected-theme.tsx b/src/core/hooks/use-selected-theme.tsx index 82ddf4cc..e213c7f4 100644 --- a/src/core/hooks/use-selected-theme.tsx +++ b/src/core/hooks/use-selected-theme.tsx @@ -1,4 +1,4 @@ -import { NativeWindStyleSheet, useColorScheme } from 'nativewind'; +import { useColorScheme } from 'nativewind'; import React from 'react'; import { useMMKVString } from 'react-native-mmkv'; @@ -33,6 +33,6 @@ export const loadSelectedTheme = () => { const theme = storage.getString(SELECTED_THEME); if (theme !== undefined) { console.log('theme', theme); - NativeWindStyleSheet.setColorScheme(theme as ColorSchemeType); + // setColorScheme.setColorScheme(theme as ColorSchemeType); } }; diff --git a/src/ui/core/activity-indicator.tsx b/src/ui/core/activity-indicator.tsx deleted file mode 100644 index 956a5120..00000000 --- a/src/ui/core/activity-indicator.tsx +++ /dev/null @@ -1,4 +0,0 @@ -import { styled } from 'nativewind'; -import { ActivityIndicator as NActivityIndicator } from 'react-native'; - -export const ActivityIndicator = styled(NActivityIndicator); diff --git a/src/ui/core/button.tsx b/src/ui/core/button.tsx index a83a02b3..a28c76e8 100644 --- a/src/ui/core/button.tsx +++ b/src/ui/core/button.tsx @@ -1,85 +1,121 @@ import React from 'react'; -import type { TouchableOpacityProps } from 'react-native'; +import type { PressableProps, View } from 'react-native'; +import { ActivityIndicator, Pressable, Text } from 'react-native'; +import type { VariantProps } from 'tailwind-variants'; +import { tv } from 'tailwind-variants'; -import { ActivityIndicator } from './activity-indicator'; -import { Text } from './text'; -import { TouchableOpacity } from './touchable-opacity'; - -type Variant = { - container: string; - label: string; - indicator: string; -}; -type VariantName = 'defaults' | 'primary' | 'outline' | 'secondary'; -type BVariant = { - [key in VariantName]: Variant; -}; - -export const buttonVariants: BVariant = { - defaults: { - container: - 'flex-row items-center justify-center rounded-full px-12 py-3 my-2', - label: 'text-[16px] font-medium text-white', - indicator: 'text-white h-[30px]', +const button = tv({ + slots: { + container: 'flex flex-row items-center justify-center rounded-md my-2', + label: 'text-base font-[600] font-jakarta', + indicator: 'text-black h-6', }, - primary: { - container: 'bg-black', - label: '', - indicator: 'text-white', - }, - secondary: { - container: 'bg-primary-600', - label: 'text-secondary-600', - indicator: 'text-white', + + variants: { + variant: { + default: { + container: 'bg-primary-10', + }, + secondary: { + container: 'bg-primary-600', + label: 'text-secondary-600', + indicator: 'text-white', + }, + outline: { + container: 'border border-neutral-400', + label: 'text-black dark:text-charcoal-100', + indicator: 'text-black', + }, + destructive: { + container: 'bg-red-600', + label: 'text-white', + indicator: 'text-white', + }, + ghost: { + container: 'bg-white', + label: 'text-black', + indicator: 'text-black', + }, + link: { + container: 'bg-transparent', + label: 'text-black', + indicator: 'text-black', + }, + }, + size: { + default: { + container: 'h-10 px-4', + label: 'text-base', + }, + lg: { + container: 'h-12 px-8', + label: 'text-xl', + }, + sm: { + container: 'h-8 px-2', + label: 'text-sm', + }, + icon: { container: 'h-9 w-9' }, + }, + disabled: { + true: { + container: 'bg-neutral-300', + label: 'text-neutral-600', + indicator: 'text-neutral-400', + }, + }, + fullWidth: { + true: { + container: '', + }, + false: { + container: 'self-center', + }, + }, }, - outline: { - container: 'border border-neutral-400', - label: 'text-black dark:text-charcoal-100', - indicator: 'text-black', + defaultVariants: { + variant: 'default', + disabled: false, + fullWidth: true, + size: 'default', }, -}; +}); -interface Props extends TouchableOpacityProps { - variant?: VariantName; +type ButtonVariants = VariantProps<typeof button>; +interface Props extends ButtonVariants, Omit<PressableProps, 'disabled'> { label?: string; loading?: boolean; } -export const Button = ({ - label, - loading = false, - variant = 'primary', - disabled = false, - ...props -}: Props) => { - return ( - <TouchableOpacity - disabled={disabled || loading} - className={` - ${buttonVariants.defaults.container} - ${buttonVariants[variant].container} - ${disabled ? 'opacity-50' : ''} - `} - {...props} - > - {loading ? ( - <ActivityIndicator - size="small" - className={` - ${buttonVariants.defaults.indicator} - ${buttonVariants[variant].indicator} - `} - /> - ) : ( - <Text - className={` - ${buttonVariants.defaults.label} - ${buttonVariants[variant].label} - `} - > - {label} - </Text> - )} - </TouchableOpacity> - ); -}; +export const Button = React.forwardRef<View, Props>( + ( + { + label: text, + loading = false, + variant = 'default', + disabled = false, + size = 'default', + ...props + }, + ref + ) => { + const styles = React.useMemo( + () => button({ variant, disabled, size }), + [variant, disabled, size] + ); + return ( + <Pressable + disabled={disabled || loading} + className={styles.container()} + {...props} + ref={ref} + > + {loading ? ( + <ActivityIndicator size="small" className={styles.indicator()} /> + ) : ( + <Text className={styles.label()}>{text}</Text> + )} + </Pressable> + ); + } +); diff --git a/src/ui/core/image.tsx b/src/ui/core/image.tsx index 45623bde..6c6e6166 100644 --- a/src/ui/core/image.tsx +++ b/src/ui/core/image.tsx @@ -1,13 +1,14 @@ import type { ImageProps } from 'expo-image'; import { Image as NImage } from 'expo-image'; -import { styled } from 'nativewind'; +import { cssInterop } from 'nativewind'; import * as React from 'react'; -const SImage = styled(NImage); export type ImgProps = ImageProps & { className?: string; }; +cssInterop(NImage, { className: 'style' }); + export const Image = ({ style, className, @@ -15,7 +16,7 @@ export const Image = ({ ...props }: ImgProps) => { return ( - <SImage + <NImage className={className} placeholder={placeholder} style={style} diff --git a/src/ui/core/index.tsx b/src/ui/core/index.tsx index fd99328e..ded36a8e 100644 --- a/src/ui/core/index.tsx +++ b/src/ui/core/index.tsx @@ -1,13 +1,19 @@ -export * from './activity-indicator'; export * from './button'; export * from './image'; export * from './input'; export * from './list'; export * from './modal'; -export * from './pressable'; -export * from './scroll-view'; +export * from './progress-bar'; export * from './select'; export * from './select/options'; export * from './text'; -export * from './touchable-opacity'; -export * from './view'; + +// export base components from react-native +export { + ActivityIndicator, + Pressable, + ScrollView, + TouchableOpacity, + View, +} from 'react-native'; +export { SafeAreaView } from 'react-native-safe-area-context'; diff --git a/src/ui/core/input/input.tsx b/src/ui/core/input/input.tsx index a43797ea..0e5c42d0 100644 --- a/src/ui/core/input/input.tsx +++ b/src/ui/core/input/input.tsx @@ -1,16 +1,44 @@ -import { styled, useColorScheme } from 'nativewind'; import * as React from 'react'; import type { TextInput, TextInputProps } from 'react-native'; -import { StyleSheet } from 'react-native'; +import { I18nManager, StyleSheet, View } from 'react-native'; import { TextInput as NTextInput } from 'react-native'; - -import { isRTL } from '@/core'; +import { tv } from 'tailwind-variants'; import colors from '../../theme/colors'; import { Text } from '../text'; -import { View } from '../view'; -const STextInput = styled(NTextInput); +const inputTv = tv({ + slots: { + container: 'mb-2', + label: 'text-grey-100 dark:text-charcoal-100 text-sm', + input: + 'mt-0 border-[0.5px] font-jakarta text-base leading-5 font-[500] px-4 py-3 rounded-xl bg-neutral-100 border-neutral-300 ', + }, + + variants: { + focused: { + true: { + input: 'border-neutral-400', + }, + }, + error: { + true: { + input: 'border-danger-600', + label: 'text-danger-600', + }, + }, + disabled: { + true: { + input: 'bg-neutral-200', + }, + }, + }, + defaultVariants: { + focused: false, + error: false, + disabled: false, + }, +}); export interface NInputProps extends TextInputProps { label?: string; @@ -20,57 +48,37 @@ export interface NInputProps extends TextInputProps { export const Input = React.forwardRef<TextInput, NInputProps>((props, ref) => { const { label, error, ...inputProps } = props; - const { colorScheme } = useColorScheme(); - const isDark = colorScheme === 'dark'; const [isFocussed, setIsFocussed] = React.useState(false); const onBlur = React.useCallback(() => setIsFocussed(false), []); const onFocus = React.useCallback(() => setIsFocussed(true), []); - const borderColor = error - ? 'border-danger-600' - : isFocussed - ? isDark - ? 'border-white' - : 'border-neutral-600' - : isDark - ? 'border-charcoal-700' - : 'border-neutral-400'; + const styles = React.useMemo( + () => + inputTv({ + error: Boolean(error), + focused: isFocussed, + disabled: Boolean(props.disabled), + }), + [error, isFocussed, props.disabled] + ); - const bgColor = isDark - ? 'bg-charcoal-800' - : error - ? 'bg-danger-50' - : 'bg-neutral-200'; - const textDirection = isRTL ? 'text-right' : 'text-left'; return ( - <View className="mb-4"> - {label && ( - <Text - variant="md" - className={ - error - ? 'text-danger-600' - : isDark - ? 'text-charcoal-100' - : 'text-black' - } - > - {label} - </Text> - )} - <STextInput - testID="STextInput" + <View className={styles.container()}> + {label && <Text className={styles.label()}>{label}</Text>} + <NTextInput + testID="NTextInput" ref={ref} placeholderTextColor={colors.neutral[400]} - className={`mt-0 border-[1px] py-4 px-2 ${borderColor} rounded-md ${bgColor} text-[16px] ${textDirection} dark:text-charcoal-100`} + className={styles.input()} onBlur={onBlur} onFocus={onFocus} {...inputProps} style={StyleSheet.flatten([ - { writingDirection: isRTL ? 'rtl' : 'ltr' }, + { writingDirection: I18nManager.isRTL ? 'rtl' : 'ltr' }, + inputProps.style, ])} /> - {error && <Text variant="error">{error}</Text>} + {error && <Text className="text-sm text-danger-400">{error}</Text>} </View> ); }); diff --git a/src/ui/core/list/empty-list.tsx b/src/ui/core/list/empty-list.tsx index a9212dd7..db337000 100644 --- a/src/ui/core/list/empty-list.tsx +++ b/src/ui/core/list/empty-list.tsx @@ -1,9 +1,8 @@ import React from 'react'; -import { ActivityIndicator } from 'react-native'; +import { ActivityIndicator, View } from 'react-native'; import { NoData } from '../../icons'; import { Text } from '../text'; -import { View } from '../view'; type Props = { isLoading: boolean; }; diff --git a/src/ui/core/modal/dynamic-modal.tsx b/src/ui/core/modal/dynamic-modal.tsx new file mode 100644 index 00000000..85fc7752 --- /dev/null +++ b/src/ui/core/modal/dynamic-modal.tsx @@ -0,0 +1,38 @@ +import type { BottomSheetModal } from '@gorhom/bottom-sheet'; +import { + BottomSheetView, + useBottomSheetDynamicSnapPoints, +} from '@gorhom/bottom-sheet'; +import * as React from 'react'; + +import { Modal, useModal } from './modal'; +import type { DynamicModalProps, ModalRef } from './types'; + +export const DynamicModal = React.forwardRef( + ( + { snapPoints = ['CONTENT_HEIGHT'], children, ...props }: DynamicModalProps, + ref: ModalRef + ) => { + const modal = useModal(); + const { animatedHandleHeight, animatedContentHeight, handleContentLayout } = + useBottomSheetDynamicSnapPoints(snapPoints as Array<number | string>); // cast to remove shared values type + + React.useImperativeHandle( + ref, + () => (modal.ref.current as BottomSheetModal) || null + ); + + return ( + <Modal + {...props} + ref={modal.ref} + handleHeight={animatedHandleHeight} + contentHeight={animatedContentHeight} + > + <BottomSheetView onLayout={handleContentLayout}> + {children} + </BottomSheetView> + </Modal> + ); + } +); diff --git a/src/ui/core/modal/index.tsx b/src/ui/core/modal/index.tsx index d9e303ab..5cc42839 100644 --- a/src/ui/core/modal/index.tsx +++ b/src/ui/core/modal/index.tsx @@ -1,2 +1,3 @@ +export * from './dynamic-modal'; export * from './modal'; export * from './types'; diff --git a/src/ui/core/modal/modal-header.tsx b/src/ui/core/modal/modal-header.tsx index 10e7b76f..6c7899e4 100644 --- a/src/ui/core/modal/modal-header.tsx +++ b/src/ui/core/modal/modal-header.tsx @@ -1,8 +1,7 @@ import * as React from 'react'; +import { Pressable, View } from 'react-native'; -import { Pressable } from '../pressable'; import { Text } from '../text'; -import { View } from '../view'; import { XClose } from './x-close'; type ModalHeaderProps = { @@ -13,15 +12,19 @@ type ModalHeaderProps = { export const ModalHeader = React.memo( ({ title, dismiss }: ModalHeaderProps) => { return ( - <View className="flex-row py-4 px-2"> - <View className="h-[24px] w-[24px]" /> - <View className="flex-1"> - <Text className="text-center text-[16px] font-bold text-[#26313D]"> - {title} - </Text> - </View> + <> + {title && ( + <View className="flex-row px-2 py-4"> + <View className="h-[24px] w-[24px]" /> + <View className="flex-1"> + <Text className="text-center text-[16px] font-bold text-[#26313D]"> + {title} + </Text> + </View> + </View> + )} <CloseButton close={dismiss} /> - </View> + </> ); } ); @@ -30,13 +33,13 @@ const CloseButton = ({ close }: { close: () => void }) => { return ( <Pressable onPress={close} - className="h-[24px] w-[24px] items-center justify-center " + className="absolute right-3 top-3 h-[24px] w-[24px] items-center justify-center " hitSlop={{ top: 20, bottom: 20, left: 20, right: 20 }} accessibilityLabel="close modal" accessibilityRole="button" accessibilityHint="closes the modal" > - <XClose fill="fill-gray-600 dark:fill-gray-300" /> + <XClose fill="#000" /> </Pressable> ); }; diff --git a/src/ui/core/modal/modal.tsx b/src/ui/core/modal/modal.tsx index d960ac5a..fef04357 100644 --- a/src/ui/core/modal/modal.tsx +++ b/src/ui/core/modal/modal.tsx @@ -1,8 +1,8 @@ import type { BottomSheetModalProps } from '@gorhom/bottom-sheet'; import { BottomSheetModal } from '@gorhom/bottom-sheet'; import * as React from 'react'; +import { View } from 'react-native'; -import { View } from '../view'; import { renderBackdrop } from './modal-backdrop'; import { ModalHeader } from './modal-header'; import type { ModalProps, ModalRef } from './types'; diff --git a/src/ui/core/modal/x-close.tsx b/src/ui/core/modal/x-close.tsx index c13e5d1a..103d5e65 100644 --- a/src/ui/core/modal/x-close.tsx +++ b/src/ui/core/modal/x-close.tsx @@ -1,4 +1,3 @@ -import { styled } from 'nativewind'; import * as React from 'react'; import type { SvgProps } from 'react-native-svg'; import Svg, { Path } from 'react-native-svg'; @@ -12,6 +11,4 @@ const SvgComponent = ({ fill = '#001136', ...props }: SvgProps) => ( </Svg> ); -export const XClose = styled(SvgComponent, { - classProps: ['fill'], -}); +export const XClose = SvgComponent; diff --git a/src/ui/core/pressable.tsx b/src/ui/core/pressable.tsx deleted file mode 100644 index e9997677..00000000 --- a/src/ui/core/pressable.tsx +++ /dev/null @@ -1,4 +0,0 @@ -import { styled } from 'nativewind'; -import { Pressable as NPressable } from 'react-native'; - -export const Pressable = styled(NPressable); diff --git a/src/ui/core/progress-bar.tsx b/src/ui/core/progress-bar.tsx new file mode 100644 index 00000000..afdb4623 --- /dev/null +++ b/src/ui/core/progress-bar.tsx @@ -0,0 +1,51 @@ +import React, { forwardRef, useImperativeHandle } from 'react'; +import Animated, { + Easing, + useAnimatedStyle, + useSharedValue, + withTiming, +} from 'react-native-reanimated'; +import { twMerge } from 'tailwind-merge'; + +import { View } from '../core'; +type Props = { + initialProgress?: number; + className?: string; +}; + +export type ProgressBarRef = { + setProgress: (value: number) => void; +}; + +export const ProgressBar = forwardRef<ProgressBarRef, Props>( + ({ initialProgress = 0, className = '' }, ref) => { + const progress = useSharedValue<number>(initialProgress ?? 0); + useImperativeHandle( + ref, + () => { + return { + setProgress: (value: number) => { + progress.value = withTiming(value, { + duration: 250, + easing: Easing.inOut(Easing.quad), + }); + }, + }; + }, + [progress] + ); + + const style = useAnimatedStyle(() => { + return { + width: `${progress.value}%`, + backgroundColor: '#000', + height: 2, + }; + }); + return ( + <View className={twMerge(` bg-[#EAEAEA]`, className)}> + <Animated.View style={style} /> + </View> + ); + } +); diff --git a/src/ui/core/scroll-view.tsx b/src/ui/core/scroll-view.tsx deleted file mode 100644 index 69c0c08e..00000000 --- a/src/ui/core/scroll-view.tsx +++ /dev/null @@ -1,6 +0,0 @@ -import { styled } from 'nativewind'; -import { ScrollView as NScrollView } from 'react-native'; - -export const ScrollView = styled(NScrollView, { - classProps: ['contentContainerStyle', 'className'], -}); diff --git a/src/ui/core/select/controlled-select.tsx b/src/ui/core/select/controlled-select.tsx index 3190ef7d..0d06d4cd 100644 --- a/src/ui/core/select/controlled-select.tsx +++ b/src/ui/core/select/controlled-select.tsx @@ -14,12 +14,19 @@ interface ControlledSelectProps<T extends FieldValues> export function ControlledSelect<T extends FieldValues>( props: ControlledSelectProps<T> ) { - const { name, control, rules, ...selectProps } = props; + const { name, control, rules, onSelect: onNSelect, ...selectProps } = props; const { field, fieldState } = useController({ control, name, rules }); + const onSelect = React.useCallback( + (value: string | number) => { + field.onChange(value); + onNSelect?.(value); + }, + [field, onNSelect] + ); return ( <Select - onSelect={field.onChange} + onSelect={onSelect} value={field.value} error={fieldState.error?.message} {...selectProps} diff --git a/src/ui/core/select/icons.tsx b/src/ui/core/select/icons.tsx index e5749775..3059b2da 100644 --- a/src/ui/core/select/icons.tsx +++ b/src/ui/core/select/icons.tsx @@ -1,4 +1,3 @@ -import { styled } from 'nativewind'; import * as React from 'react'; import type { SvgProps } from 'react-native-svg'; import Svg, { Path } from 'react-native-svg'; @@ -12,7 +11,7 @@ export const Arrow = ({ color = '#000', ...props }: SvgProps) => ( </Svg> ); -const _Check = ({ fill = '#000', ...props }: SvgProps) => ( +export const Check = ({ fill = '#000', ...props }: SvgProps) => ( <Svg width={25} height={24} fill="none" viewBox="0 0 25 24" {...props}> <Path d="m20.256 6.75-10.5 10.5L4.506 12" @@ -23,7 +22,3 @@ const _Check = ({ fill = '#000', ...props }: SvgProps) => ( /> </Svg> ); - -export const Check = styled(_Check, { - classProps: ['fill'], -}); diff --git a/src/ui/core/select/options.tsx b/src/ui/core/select/options.tsx index c0d754b6..541544ea 100644 --- a/src/ui/core/select/options.tsx +++ b/src/ui/core/select/options.tsx @@ -2,12 +2,11 @@ import type { BottomSheetModal } from '@gorhom/bottom-sheet'; import { BottomSheetFlatList } from '@gorhom/bottom-sheet'; import { useColorScheme } from 'nativewind'; import * as React from 'react'; -import { type PressableProps } from 'react-native'; +import { Pressable, type PressableProps } from 'react-native'; import { colors } from '@/ui/theme'; import { Modal } from '../modal'; -import { Pressable } from '../pressable'; import { Text } from '../text'; import { Check } from './icons'; @@ -71,13 +70,11 @@ const Option = React.memo( }) => { return ( <Pressable - className="flex-row items-center border-b-[1px] border-neutral-300 bg-white py-2 px-3 dark:border-charcoal-700 dark:bg-charcoal-800" + className="flex-row items-center border-b-[1px] border-neutral-300 bg-white px-3 py-2 dark:border-charcoal-700 dark:bg-charcoal-800" {...props} > - <Text variant="md" className="flex-1 dark:text-charcoal-100 "> - {label} - </Text> - {selected && <Check fill="fill-black dark:fill-white" />} + <Text className="flex-1 dark:text-charcoal-100 ">{label}</Text> + {selected && <Check fill="#000" />} </Pressable> ); } diff --git a/src/ui/core/select/select.tsx b/src/ui/core/select/select.tsx index afd20609..a7c2e8bb 100644 --- a/src/ui/core/select/select.tsx +++ b/src/ui/core/select/select.tsx @@ -1,16 +1,50 @@ import { useColorScheme } from 'nativewind'; import * as React from 'react'; +import { TouchableOpacity, View } from 'react-native'; +import { tv } from 'tailwind-variants'; +import { CaretDown } from '@/ui/icons'; import colors from '@/ui/theme/colors'; import { useModal } from '../modal'; import { Text } from '../text'; -import { TouchableOpacity } from '../touchable-opacity'; -import { View } from '../view'; -import { Arrow } from './icons'; import type { Option } from './options'; import { Options } from './options'; +const selectTv = tv({ + slots: { + container: 'mb-4', + label: 'text-grey-100 dark:text-charcoal-100 text-sm', + input: + 'mt-0 flex-row items-center justify-center border-[0.5px] border-grey-50 px-3 py-3 rounded-xl', + inputValue: 'dark:text-charcoal-100', + }, + + variants: { + focused: { + true: { + input: 'border-neutral-600', + }, + }, + error: { + true: { + input: 'border-danger-600', + label: 'text-danger-600', + inputValue: 'text-danger-600', + }, + }, + disabled: { + true: { + input: 'bg-neutral-200', + }, + }, + }, + defaultVariants: { + error: false, + disabled: false, + }, +}); + export interface SelectProps { value?: string | number; label?: string; @@ -43,67 +77,40 @@ export const Select = (props: SelectProps) => { [modal, onSelect] ); - const { borderColor, bgColor, valueColor, labelColor } = useColors(!!error); + const styles = React.useMemo( + () => + selectTv({ + error: Boolean(error), + disabled, + }), + [error, disabled] + ); - const textValue = - value !== undefined - ? options?.filter((t) => t.value === value)?.[0]?.label ?? placeholder - : placeholder; + const textValue = React.useMemo( + () => + value !== undefined + ? options?.filter((t) => t.value === value)?.[0]?.label ?? placeholder + : placeholder, + [value, options, placeholder] + ); return ( <> - <View className="mb-4"> - {label && ( - <Text variant="md" className={labelColor}> - {label} - </Text> - )} + <View className={styles.container()}> + {label && <Text className={styles.label()}>{label}</Text>} <TouchableOpacity - className={`mt-0 flex-row items-center justify-center border-[1px] py-3 px-2 ${borderColor} rounded-md ${bgColor} text-[16px]`} + className={styles.input()} disabled={disabled} onPress={modal.present} > <View className="flex-1"> - <Text variant="md" className={valueColor}> - {textValue} - </Text> + <Text className={styles.inputValue()}>{textValue}</Text> </View> - <Arrow color={isDark ? colors.white : colors.black} /> + <CaretDown color={isDark ? colors.white : colors.black} /> </TouchableOpacity> - {error && <Text variant="error">{error}</Text>} + {error && <Text className="text-sm text-danger-300">{error}</Text>} </View> <Options ref={modal.ref} options={options} onSelect={onSelectOption} /> </> ); }; - -const useColors = (error: boolean) => { - const { colorScheme } = useColorScheme(); - const isDark = colorScheme === 'dark'; - - const borderColor = error - ? 'border-danger-600' - : isDark - ? 'border-charcoal-700' - : 'border-neutral-400'; - - const bgColor = isDark - ? 'bg-charcoal-800' - : error - ? 'bg-danger-50' - : 'bg-neutral-200'; - - const labelColor = error - ? 'text-danger-600' - : isDark - ? 'text-charcoal-100' - : 'text-black'; - - const valueColor = error - ? 'text-danger-600' - : isDark - ? 'text-charcoal-100' - : 'text-neutral-600'; - - return { borderColor, bgColor, labelColor, valueColor } as const; -}; diff --git a/src/ui/core/text.tsx b/src/ui/core/text.tsx index 9f58c5ea..4903d79f 100644 --- a/src/ui/core/text.tsx +++ b/src/ui/core/text.tsx @@ -1,57 +1,45 @@ -// In Text.tsx -import { styled } from 'nativewind'; import React from 'react'; -import type { TextProps } from 'react-native'; -import { StyleSheet, Text as NNText } from 'react-native'; +import type { TextProps, TextStyle } from 'react-native'; +import { I18nManager, StyleSheet, Text as NNText } from 'react-native'; +import { twMerge } from 'tailwind-merge'; -import type { TxKeyPath } from '@/core'; -import { isRTL, translate } from '@/core'; - -const SText = styled(NNText); +import type { TxKeyPath } from '@/core/i18n'; +import { translate } from '@/core/i18n'; interface Props extends TextProps { - variant?: keyof typeof textVariants; className?: string; tx?: TxKeyPath; } -export const textVariants = { - defaults: 'text-base text-black dark:text-white font-inter font-normal', - h1: 'text-[32px] leading-[48px] font-medium', - h2: 'text-[28px] leading-[42px] font-medium', - h3: 'text-[24px] leading-[36px] font-medium', - xl: 'text-[20px] leading-[30px]', - lg: 'text-[18px] leading-[30px]', - md: '', - sm: 'text-[14px] leading-[21px]', - xs: 'text-[12px] leading-[18px]', - error: ' text-[12px] leading-[30px] text-danger-500', -}; - export const Text = ({ - variant = 'md', className = '', style, tx, children, ...props }: Props) => { - const content = tx ? translate(tx) : children; - return ( - <SText - className={` + const textStyle = React.useMemo( + () => + twMerge( + 'text-base text-black dark:text-white font-jakarta font-normal', + className + ), + [className] + ); - ${textVariants.defaults} - ${textVariants[variant]} - ${className} - `} - style={StyleSheet.flatten([ - { writingDirection: isRTL ? 'rtl' : 'ltr' }, + const nStyle = React.useMemo( + () => + StyleSheet.flatten([ + { + writingDirection: I18nManager.isRTL ? 'rtl' : 'ltr', + }, style, - ])} - {...props} - > - {content} - </SText> + ]) as TextStyle, + [style] + ); + return ( + <NNText className={textStyle} style={nStyle} {...props}> + {tx ? translate(tx) : children} + </NNText> ); }; diff --git a/src/ui/core/touchable-opacity.tsx b/src/ui/core/touchable-opacity.tsx deleted file mode 100644 index 030b418c..00000000 --- a/src/ui/core/touchable-opacity.tsx +++ /dev/null @@ -1,4 +0,0 @@ -import { styled } from 'nativewind'; -import { TouchableOpacity as NTouchableOpacity } from 'react-native'; - -export const TouchableOpacity = styled(NTouchableOpacity); diff --git a/src/ui/core/view.tsx b/src/ui/core/view.tsx deleted file mode 100644 index 5c63bd5c..00000000 --- a/src/ui/core/view.tsx +++ /dev/null @@ -1,6 +0,0 @@ -import { styled } from 'nativewind'; -import { View as RNView } from 'react-native'; -import { SafeAreaView as NSafeAreaView } from 'react-native-safe-area-context'; - -export const View = styled(RNView); -export const SafeAreaView = styled(NSafeAreaView); diff --git a/src/ui/icons/caret-down.tsx b/src/ui/icons/caret-down.tsx new file mode 100644 index 00000000..b5cd0244 --- /dev/null +++ b/src/ui/icons/caret-down.tsx @@ -0,0 +1,15 @@ +import * as React from 'react'; +import type { SvgProps } from 'react-native-svg'; +import Svg, { Path } from 'react-native-svg'; + +export const CaretDown = ({ color = '#000', ...props }: SvgProps) => ( + <Svg width={12} height={13} fill="none" {...props}> + <Path + stroke={color} + strokeLinecap="round" + strokeLinejoin="round" + strokeWidth={1.5} + d="M9.75 4.744 6 8.494l-3.75-3.75" + /> + </Svg> +); diff --git a/src/ui/icons/index.tsx b/src/ui/icons/index.tsx index 4349fb13..4ff9e95e 100644 --- a/src/ui/icons/index.tsx +++ b/src/ui/icons/index.tsx @@ -1,4 +1,5 @@ export * from './arrow-right'; +export * from './caret-down'; export * from './feed'; export * from './github'; export * from './home'; diff --git a/tailwind.config.js b/tailwind.config.js index 48df0df9..0784c9f9 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -2,7 +2,9 @@ const colors = require('./src/ui/theme/colors'); /** @type {import('tailwindcss').Config} */ module.exports = { + // NOTE: Update this to include the paths to all of your component files. content: ['./src/**/*.{js,jsx,ts,tsx}'], + presets: [require('nativewind/preset')], theme: { extend: { fontFamily: { From abb349725dfe33012b666be80244f82bc0770a87 Mon Sep 17 00:00:00 2001 From: Youssouf EL Azizi <youssoufelazizi@gmail.com> Date: Thu, 1 Feb 2024 17:29:55 +0100 Subject: [PATCH 02/14] chore: expo doctor fix --- package.json | 10 +-- pnpm-lock.yaml | 222 ++++++++++++++++++++----------------------------- 2 files changed, 94 insertions(+), 138 deletions(-) diff --git a/package.json b/package.json index 2795997a..ceff0417 100644 --- a/package.json +++ b/package.json @@ -48,15 +48,15 @@ "@tanstack/react-query": "^4.36.1", "app-icon-badge": "^0.0.15", "axios": "^1.6.5", - "expo": "~50.0.3", - "expo-build-properties": "~0.11.0", + "expo": "~50.0.5", + "expo-build-properties": "~0.11.1", "expo-constants": "~15.4.5", - "expo-dev-client": "~3.3.7", + "expo-dev-client": "~3.3.8", "expo-font": "~11.10.2", "expo-image": "~1.10.5", "expo-linking": "~6.2.2", "expo-localization": "~14.8.3", - "expo-router": "~3.4.5", + "expo-router": "~3.4.6", "expo-splash-screen": "0.26.4", "expo-status-bar": "~1.11.1", "expo-system-ui": "~2.9.3", @@ -73,7 +73,7 @@ "react-native-flash-message": "^0.4.2", "react-native-gesture-handler": "~2.14.1", "react-native-mmkv": "2.6.3", - "react-native-reanimated": "~3.6.1", + "react-native-reanimated": "~3.6.2", "react-native-restart": "0.0.27", "react-native-safe-area-context": "4.8.2", "react-native-screens": "~3.29.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 2aed3f55..ee80100c 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -10,7 +10,7 @@ dependencies: version: 3.1.1(react-native@0.73.2) '@gorhom/bottom-sheet': specifier: ^4.6.0 - version: 4.6.0(@types/react@18.2.48)(react-native-gesture-handler@2.14.1)(react-native-reanimated@3.6.1)(react-native@0.73.2)(react@18.2.0) + version: 4.6.0(@types/react@18.2.48)(react-native-gesture-handler@2.14.1)(react-native-reanimated@3.6.2)(react-native@0.73.2)(react@18.2.0) '@hookform/resolvers': specifier: ^2.9.11 version: 2.9.11(react-hook-form@7.49.3) @@ -36,41 +36,41 @@ dependencies: specifier: ^1.6.5 version: 1.6.5 expo: - specifier: ~50.0.3 - version: 50.0.3(@babel/core@7.23.7)(@react-native/babel-preset@0.73.19) + specifier: ~50.0.5 + version: 50.0.5(@babel/core@7.23.7)(@react-native/babel-preset@0.73.19) expo-build-properties: - specifier: ~0.11.0 - version: 0.11.0(expo@50.0.3) + specifier: ~0.11.1 + version: 0.11.1(expo@50.0.5) expo-constants: specifier: ~15.4.5 - version: 15.4.5(expo@50.0.3) + version: 15.4.5(expo@50.0.5) expo-dev-client: - specifier: ~3.3.7 - version: 3.3.7(expo@50.0.3) + specifier: ~3.3.8 + version: 3.3.8(expo@50.0.5) expo-font: specifier: ~11.10.2 - version: 11.10.2(expo@50.0.3) + version: 11.10.2(expo@50.0.5) expo-image: specifier: ~1.10.5 - version: 1.10.5(expo@50.0.3) + version: 1.10.5(expo@50.0.5) expo-linking: specifier: ~6.2.2 - version: 6.2.2(expo@50.0.3) + version: 6.2.2(expo@50.0.5) expo-localization: specifier: ~14.8.3 - version: 14.8.3(expo@50.0.3) + version: 14.8.3(expo@50.0.5) expo-router: - specifier: ~3.4.5 - version: 3.4.5(@testing-library/jest-native@5.4.3)(expo-constants@15.4.5)(expo-linking@6.2.2)(expo-modules-autolinking@1.10.2)(expo-status-bar@1.11.1)(expo@50.0.3)(react-dom@18.2.0)(react-native-reanimated@3.6.1)(react-native-safe-area-context@4.8.2)(react-native-screens@3.29.0)(react-native@0.73.2)(react@18.2.0) + specifier: ~3.4.6 + version: 3.4.6(@testing-library/jest-native@5.4.3)(expo-constants@15.4.5)(expo-linking@6.2.2)(expo-modules-autolinking@1.10.2)(expo-status-bar@1.11.1)(expo@50.0.5)(react-dom@18.2.0)(react-native-reanimated@3.6.2)(react-native-safe-area-context@4.8.2)(react-native-screens@3.29.0)(react-native@0.73.2)(react@18.2.0) expo-splash-screen: specifier: 0.26.4 - version: 0.26.4(expo-modules-autolinking@1.10.2)(expo@50.0.3) + version: 0.26.4(expo-modules-autolinking@1.10.2)(expo@50.0.5) expo-status-bar: specifier: ~1.11.1 version: 1.11.1 expo-system-ui: specifier: ~2.9.3 - version: 2.9.3(expo@50.0.3) + version: 2.9.3(expo@50.0.5) i18next: specifier: ^22.5.1 version: 22.5.1 @@ -79,7 +79,7 @@ dependencies: version: 4.1.2 nativewind: specifier: ^4.0.23 - version: 4.0.23(@babel/core@7.23.7)(react-native-reanimated@3.6.1)(react-native-safe-area-context@4.8.2)(react-native-svg@14.1.0)(react-native@0.73.2)(react@18.2.0)(tailwindcss@3.3.2) + version: 4.0.23(@babel/core@7.23.7)(react-native-reanimated@3.6.2)(react-native-safe-area-context@4.8.2)(react-native-svg@14.1.0)(react-native@0.73.2)(react@18.2.0)(tailwindcss@3.3.2) react: specifier: 18.2.0 version: 18.2.0 @@ -111,8 +111,8 @@ dependencies: specifier: 2.6.3 version: 2.6.3(react-native@0.73.2)(react@18.2.0) react-native-reanimated: - specifier: ~3.6.1 - version: 3.6.1(@babel/core@7.23.7)(@babel/plugin-proposal-nullish-coalescing-operator@7.18.6)(@babel/plugin-proposal-optional-chaining@7.21.0)(@babel/plugin-transform-arrow-functions@7.23.3)(@babel/plugin-transform-shorthand-properties@7.23.3)(@babel/plugin-transform-template-literals@7.23.3)(react-native@0.73.2)(react@18.2.0) + specifier: ~3.6.2 + version: 3.6.2(@babel/core@7.23.7)(@babel/plugin-proposal-nullish-coalescing-operator@7.18.6)(@babel/plugin-proposal-optional-chaining@7.21.0)(@babel/plugin-transform-arrow-functions@7.23.3)(@babel/plugin-transform-shorthand-properties@7.23.3)(@babel/plugin-transform-template-literals@7.23.3)(react-native@0.73.2)(react@18.2.0) react-native-restart: specifier: 0.0.27 version: 0.0.27(react-native@0.73.2)(react@18.2.0) @@ -1920,8 +1920,8 @@ packages: safe-json-stringify: 1.2.0 dev: false - /@expo/cli@0.17.2(@react-native/babel-preset@0.73.19)(expo-modules-autolinking@1.10.2): - resolution: {integrity: sha512-0uJGuiV8XGjsTGnga95CiCZAtAymtQlo8FxRBp7AjLKpG/oTXG7+s368H7ZIC+XQBsvWx83iv+HyXQfOtPbsxQ==} + /@expo/cli@0.17.4(@react-native/babel-preset@0.73.19)(expo-modules-autolinking@1.10.2): + resolution: {integrity: sha512-6pswecVC9qCBp1qa004D2HjPeXKYDaw/PhyUOsqnF7AUCwunlKa1tJO0Ik8zxzF68kuywIOXUnTJl74Z2aHqiw==} hasBin: true dependencies: '@babel/runtime': 7.23.8 @@ -2207,27 +2207,6 @@ packages: base64-js: 1.5.1 xmlbuilder: 14.0.0 - /@expo/prebuild-config@6.7.3(expo-modules-autolinking@1.10.2): - resolution: {integrity: sha512-jZIHzlnvdg4Gnln06XR9tvirL3hSp/Jh48COhLKs51vb3THCWumUytZBS4DSMdvGwf8btnaB01Zg00xQhSDBsA==} - peerDependencies: - expo-modules-autolinking: '>=0.8.1' - dependencies: - '@expo/config': 8.5.4 - '@expo/config-plugins': 7.8.4 - '@expo/config-types': 50.0.0 - '@expo/image-utils': 0.4.1 - '@expo/json-file': 8.3.0 - debug: 4.3.4 - expo-modules-autolinking: 1.10.2 - fs-extra: 9.1.0 - resolve-from: 5.0.0 - semver: 7.5.3 - xml2js: 0.6.0 - transitivePeerDependencies: - - encoding - - supports-color - dev: false - /@expo/prebuild-config@6.7.4(expo-modules-autolinking@1.10.2): resolution: {integrity: sha512-x8EUdCa8DTMZ/dtEXjHAdlP+ljf6oSeSKNzhycXiHhpMSMG9jEhV28ocCwc6cKsjK5GziweEiHwvrj6+vsBlhA==} peerDependencies: @@ -2337,7 +2316,7 @@ packages: resolution: {integrity: sha512-k2Ty1JcVojjJFwrg/ThKi2ujJ7XNLYaFGNB/bWT9wGR+oSMJHMa5w+CUq6p/pVrKeNNgA7pCqEcjSnHVoqJQFw==} dev: false - /@gorhom/bottom-sheet@4.6.0(@types/react@18.2.48)(react-native-gesture-handler@2.14.1)(react-native-reanimated@3.6.1)(react-native@0.73.2)(react@18.2.0): + /@gorhom/bottom-sheet@4.6.0(@types/react@18.2.48)(react-native-gesture-handler@2.14.1)(react-native-reanimated@3.6.2)(react-native@0.73.2)(react@18.2.0): resolution: {integrity: sha512-XgNflkhATUqTIiMDGuLaQZAtjUzcrhGOEJGHT+7Tou1ctTMb958YRGGnU9KFo5TkD6YCZcfWfxHPi9F0FF+DjA==} peerDependencies: '@types/react': '*' @@ -2358,7 +2337,7 @@ packages: react: 18.2.0 react-native: 0.73.2(@babel/core@7.23.7)(@babel/preset-env@7.23.8)(react@18.2.0) react-native-gesture-handler: 2.14.1(react-native@0.73.2)(react@18.2.0) - react-native-reanimated: 3.6.1(@babel/core@7.23.7)(@babel/plugin-proposal-nullish-coalescing-operator@7.18.6)(@babel/plugin-proposal-optional-chaining@7.21.0)(@babel/plugin-transform-arrow-functions@7.23.3)(@babel/plugin-transform-shorthand-properties@7.23.3)(@babel/plugin-transform-template-literals@7.23.3)(react-native@0.73.2)(react@18.2.0) + react-native-reanimated: 3.6.2(@babel/core@7.23.7)(@babel/plugin-proposal-nullish-coalescing-operator@7.18.6)(@babel/plugin-proposal-optional-chaining@7.21.0)(@babel/plugin-transform-arrow-functions@7.23.3)(@babel/plugin-transform-shorthand-properties@7.23.3)(@babel/plugin-transform-template-literals@7.23.3)(react-native@0.73.2)(react@18.2.0) dev: false /@gorhom/portal@1.0.14(react-native@0.73.2)(react@18.2.0): @@ -6569,13 +6548,13 @@ packages: jest-util: 29.7.0 dev: true - /expo-asset@9.0.2(expo@50.0.3): + /expo-asset@9.0.2(expo@50.0.5): resolution: {integrity: sha512-PzYKME1MgUOoUvwtdzhAyXkjXOXGiSYqGKG/MsXwWr0Ef5wlBaBm2DCO9V6KYbng5tBPFu6hTjoRNil1tBOSow==} dependencies: '@react-native/assets-registry': 0.73.1 blueimp-md5: 2.19.0 - expo-constants: 15.4.5(expo@50.0.3) - expo-file-system: 16.0.5(expo@50.0.3) + expo-constants: 15.4.5(expo@50.0.5) + expo-file-system: 16.0.5(expo@50.0.5) invariant: 2.2.4 md5-file: 3.2.3 transitivePeerDependencies: @@ -6583,149 +6562,139 @@ packages: - supports-color dev: false - /expo-build-properties@0.11.0(expo@50.0.3): - resolution: {integrity: sha512-14+UjV4uKCI5KsOw/BTL++T3N1OPWnOvLGoF39/o9XjB4t0wqXoSrcEl6ZbtH/b3xzd6dj9pnDDBLWDn/7uKvQ==} + /expo-build-properties@0.11.1(expo@50.0.5): + resolution: {integrity: sha512-m4j4aEjFaDuBE6KWYMxDhWgLzzSmpE7uHKAwtvXyNmRK+6JKF0gjiXi0sXgI5ngNppDQpsyPFMvqG7uQpRuCuw==} peerDependencies: expo: '*' dependencies: ajv: 8.12.0 - expo: 50.0.3(@babel/core@7.23.7)(@react-native/babel-preset@0.73.19) + expo: 50.0.5(@babel/core@7.23.7)(@react-native/babel-preset@0.73.19) semver: 7.5.4 dev: false - /expo-constants@15.4.5(expo@50.0.3): + /expo-constants@15.4.5(expo@50.0.5): resolution: {integrity: sha512-1pVVjwk733hbbIjtQcvUFCme540v4gFemdNlaxM2UXKbfRCOh2hzgKN5joHMOysoXQe736TTUrRj7UaZI5Yyhg==} peerDependencies: expo: '*' dependencies: '@expo/config': 8.5.4 - expo: 50.0.3(@babel/core@7.23.7)(@react-native/babel-preset@0.73.19) + expo: 50.0.5(@babel/core@7.23.7)(@react-native/babel-preset@0.73.19) transitivePeerDependencies: - supports-color dev: false - /expo-dev-client@3.3.7(expo@50.0.3): - resolution: {integrity: sha512-dsucMzezNuP7zxSxYi1EbIA16j491tD9joUlGlpvBW1IylxUmbPraOqUqdXsDxRIAJh5HgJx/8X03Xoo1j7YKw==} + /expo-dev-client@3.3.8(expo@50.0.5): + resolution: {integrity: sha512-6JpcxncWiWwq1w6SPrePpTa20z3D1qmAMMHd8f05lSCUPVBn4jTwpzrKEpGaA3EubLE5SEdxPVmvmyWw/oFFMQ==} peerDependencies: expo: '*' dependencies: - expo: 50.0.3(@babel/core@7.23.7)(@react-native/babel-preset@0.73.19) - expo-dev-launcher: 3.6.4(expo@50.0.3) - expo-dev-menu: 4.5.5(expo@50.0.3) - expo-dev-menu-interface: 1.7.2(expo@50.0.3) - expo-manifests: 0.13.2(expo@50.0.3) - expo-updates-interface: 0.15.3(expo@50.0.3) + expo: 50.0.5(@babel/core@7.23.7)(@react-native/babel-preset@0.73.19) + expo-dev-launcher: 3.6.6(expo@50.0.5) + expo-dev-menu: 4.5.5(expo@50.0.5) + expo-dev-menu-interface: 1.7.2(expo@50.0.5) + expo-manifests: 0.13.2(expo@50.0.5) + expo-updates-interface: 0.15.3(expo@50.0.5) transitivePeerDependencies: - supports-color dev: false - /expo-dev-launcher@3.6.4(expo@50.0.3): - resolution: {integrity: sha512-i5NGm2QeVl7ePk9nyvW1hAEg29FRMltNNEkRiK/AF77ObrD0YG/FhhidQL8C/SIIm/3RcsjAiw4buF5QRoieKg==} + /expo-dev-launcher@3.6.6(expo@50.0.5): + resolution: {integrity: sha512-jVI1YZS1YJTrniIL53BOxSZUMyJCeDLuS9SlRx1vC3tnTTN3srg5pU/zCK/DifwbF7i6NtA1iLPSBVu2K4040A==} peerDependencies: expo: '*' dependencies: ajv: 8.11.0 - expo: 50.0.3(@babel/core@7.23.7)(@react-native/babel-preset@0.73.19) - expo-dev-menu: 4.5.4(expo@50.0.3) - expo-manifests: 0.13.2(expo@50.0.3) + expo: 50.0.5(@babel/core@7.23.7)(@react-native/babel-preset@0.73.19) + expo-dev-menu: 4.5.5(expo@50.0.5) + expo-manifests: 0.13.2(expo@50.0.5) resolve-from: 5.0.0 semver: 7.5.4 transitivePeerDependencies: - supports-color dev: false - /expo-dev-menu-interface@1.7.2(expo@50.0.3): + /expo-dev-menu-interface@1.7.2(expo@50.0.5): resolution: {integrity: sha512-V/geSB9rW0IPTR+d7E5CcvkV0uVUCE7SMHZqE/J0/dH06Wo8AahB16fimXeh5/hTL2Qztq8CQ41xpFUBoA9TEw==} peerDependencies: expo: '*' dependencies: - expo: 50.0.3(@babel/core@7.23.7)(@react-native/babel-preset@0.73.19) + expo: 50.0.5(@babel/core@7.23.7)(@react-native/babel-preset@0.73.19) dev: false - /expo-dev-menu@4.5.4(expo@50.0.3): - resolution: {integrity: sha512-TLCfXKI7r5PJpMKUcslKz9J7tChdYdm6DmOEYwFQC3OLcegXzCT/H92WfTdVXU+xz5XYTcyvnIZQa7/d2Ig90g==} - peerDependencies: - expo: '*' - dependencies: - expo: 50.0.3(@babel/core@7.23.7)(@react-native/babel-preset@0.73.19) - expo-dev-menu-interface: 1.7.2(expo@50.0.3) - semver: 7.5.4 - dev: false - - /expo-dev-menu@4.5.5(expo@50.0.3): + /expo-dev-menu@4.5.5(expo@50.0.5): resolution: {integrity: sha512-PcbI/SqAvueOIEtR1O0s+WvVD7yizQSqXisDSkBrTym3u8XZSN+K730kz2Z64ukY9YIPG4qWR4sd+9rcjsbMWw==} peerDependencies: expo: '*' dependencies: - expo: 50.0.3(@babel/core@7.23.7)(@react-native/babel-preset@0.73.19) - expo-dev-menu-interface: 1.7.2(expo@50.0.3) + expo: 50.0.5(@babel/core@7.23.7)(@react-native/babel-preset@0.73.19) + expo-dev-menu-interface: 1.7.2(expo@50.0.5) semver: 7.5.4 dev: false - /expo-file-system@16.0.5(expo@50.0.3): + /expo-file-system@16.0.5(expo@50.0.5): resolution: {integrity: sha512-JpKMbKfwTaMCbwUwq7MwcSbPR7r+IqZEL3RFam3ClPHDtKLnlEoywREeaDsWjSZb7dS25hG3WqXspfTuugCDvg==} peerDependencies: expo: '*' dependencies: - expo: 50.0.3(@babel/core@7.23.7)(@react-native/babel-preset@0.73.19) + expo: 50.0.5(@babel/core@7.23.7)(@react-native/babel-preset@0.73.19) dev: false - /expo-font@11.10.2(expo@50.0.3): + /expo-font@11.10.2(expo@50.0.5): resolution: {integrity: sha512-AE0Q0LiWiVosQ/jlKUPoWoob7p3GwYM2xmLoUkuopO9RYh9NL1hZKHiMKcWBZyDG8Gww1GtBQwh7ZREST8+jjQ==} peerDependencies: expo: '*' dependencies: - expo: 50.0.3(@babel/core@7.23.7)(@react-native/babel-preset@0.73.19) + expo: 50.0.5(@babel/core@7.23.7)(@react-native/babel-preset@0.73.19) fontfaceobserver: 2.3.0 dev: false - /expo-image@1.10.5(expo@50.0.3): + /expo-image@1.10.5(expo@50.0.5): resolution: {integrity: sha512-IiqSU9FxpoNeSFbtVLHdLq9MIHtAUYI1hcNGXoj3fpNpPEUdjN41mPftLQPIszfWWBxgrjUu4trIVXuf/Ijy+w==} peerDependencies: expo: '*' dependencies: '@react-native/assets-registry': 0.73.1 - expo: 50.0.3(@babel/core@7.23.7)(@react-native/babel-preset@0.73.19) + expo: 50.0.5(@babel/core@7.23.7)(@react-native/babel-preset@0.73.19) dev: false /expo-json-utils@0.12.3: resolution: {integrity: sha512-4pypQdinpNc6XY9wsZk56njvzDh+B/9mISr7FPP3CVk1QGB1nSLh883/BCDSgnsephATZkC5HG+cdE60kCAR6A==} dev: false - /expo-keep-awake@12.8.2(expo@50.0.3): + /expo-keep-awake@12.8.2(expo@50.0.5): resolution: {integrity: sha512-uiQdGbSX24Pt8nGbnmBtrKq6xL/Tm3+DuDRGBk/3ZE/HlizzNosGRIufIMJ/4B4FRw4dw8KU81h2RLuTjbay6g==} peerDependencies: expo: '*' dependencies: - expo: 50.0.3(@babel/core@7.23.7)(@react-native/babel-preset@0.73.19) + expo: 50.0.5(@babel/core@7.23.7)(@react-native/babel-preset@0.73.19) dev: false - /expo-linking@6.2.2(expo@50.0.3): + /expo-linking@6.2.2(expo@50.0.5): resolution: {integrity: sha512-FEe6lP4f7xFT/vjoHRG+tt6EPVtkEGaWNK1smpaUevmNdyCJKqW0PDB8o8sfG6y7fly8ULe8qg3HhKh5J7aqUQ==} dependencies: - expo-constants: 15.4.5(expo@50.0.3) + expo-constants: 15.4.5(expo@50.0.5) invariant: 2.2.4 transitivePeerDependencies: - expo - supports-color dev: false - /expo-localization@14.8.3(expo@50.0.3): + /expo-localization@14.8.3(expo@50.0.5): resolution: {integrity: sha512-leg1e+7ocUgfNWa7Men/g16waXtdSpBMR9tCdv3CG4wztmFU8C+87VAnnVkvHi4CCUkTLzhP3y0FcE6KIWTwdw==} peerDependencies: expo: '*' dependencies: - expo: 50.0.3(@babel/core@7.23.7)(@react-native/babel-preset@0.73.19) + expo: 50.0.5(@babel/core@7.23.7)(@react-native/babel-preset@0.73.19) rtl-detect: 1.1.2 dev: false - /expo-manifests@0.13.2(expo@50.0.3): + /expo-manifests@0.13.2(expo@50.0.5): resolution: {integrity: sha512-l0Sia1WmLULx8V41K8RzGLsFoTe4qqthPRGpHjItsYn8ZB6lRrdTBM9OYp2McIflgqN1HAimUCQMFIwJyH+UmA==} peerDependencies: expo: '*' dependencies: '@expo/config': 8.5.4 - expo: 50.0.3(@babel/core@7.23.7)(@react-native/babel-preset@0.73.19) + expo: 50.0.5(@babel/core@7.23.7)(@react-native/babel-preset@0.73.19) expo-json-utils: 0.12.3 transitivePeerDependencies: - supports-color @@ -6751,8 +6720,8 @@ packages: invariant: 2.2.4 dev: false - /expo-router@3.4.5(@testing-library/jest-native@5.4.3)(expo-constants@15.4.5)(expo-linking@6.2.2)(expo-modules-autolinking@1.10.2)(expo-status-bar@1.11.1)(expo@50.0.3)(react-dom@18.2.0)(react-native-reanimated@3.6.1)(react-native-safe-area-context@4.8.2)(react-native-screens@3.29.0)(react-native@0.73.2)(react@18.2.0): - resolution: {integrity: sha512-7wemslk5gsl7GUtqfHM/ZlBHJuY24ob6T5bNhx9+EhRka+Oupf1ocoDenSGa+T9sY4DkPNXkY+DvZuVMrtGOBg==} + /expo-router@3.4.6(@testing-library/jest-native@5.4.3)(expo-constants@15.4.5)(expo-linking@6.2.2)(expo-modules-autolinking@1.10.2)(expo-status-bar@1.11.1)(expo@50.0.5)(react-dom@18.2.0)(react-native-reanimated@3.6.2)(react-native-safe-area-context@4.8.2)(react-native-screens@3.29.0)(react-native@0.73.2)(react@18.2.0): + resolution: {integrity: sha512-yxl0QE4KAqLmLyH8AxWsGSV3M34jsAE8X75cOB2oaK0+Pu9VHSUf6w3iRi93IiJ0rOUXm8jKrjhfhZOrrNh7EA==} peerDependencies: '@react-navigation/drawer': ^6.5.8 '@testing-library/jest-native': '*' @@ -6778,13 +6747,13 @@ packages: '@react-navigation/native': 6.1.9(react-native@0.73.2)(react@18.2.0) '@react-navigation/native-stack': 6.9.17(@react-navigation/native@6.1.9)(react-native-safe-area-context@4.8.2)(react-native-screens@3.29.0)(react-native@0.73.2)(react@18.2.0) '@testing-library/jest-native': 5.4.3(react-native@0.73.2)(react-test-renderer@18.2.0)(react@18.2.0) - expo: 50.0.3(@babel/core@7.23.7)(@react-native/babel-preset@0.73.19) - expo-constants: 15.4.5(expo@50.0.3) - expo-linking: 6.2.2(expo@50.0.3) - expo-splash-screen: 0.26.3(expo-modules-autolinking@1.10.2)(expo@50.0.3) + expo: 50.0.5(@babel/core@7.23.7)(@react-native/babel-preset@0.73.19) + expo-constants: 15.4.5(expo@50.0.5) + expo-linking: 6.2.2(expo@50.0.5) + expo-splash-screen: 0.26.4(expo-modules-autolinking@1.10.2)(expo@50.0.5) expo-status-bar: 1.11.1 react-helmet-async: 1.3.0(react-dom@18.2.0)(react@18.2.0) - react-native-reanimated: 3.6.1(@babel/core@7.23.7)(@babel/plugin-proposal-nullish-coalescing-operator@7.18.6)(@babel/plugin-proposal-optional-chaining@7.21.0)(@babel/plugin-transform-arrow-functions@7.23.3)(@babel/plugin-transform-shorthand-properties@7.23.3)(@babel/plugin-transform-template-literals@7.23.3)(react-native@0.73.2)(react@18.2.0) + react-native-reanimated: 3.6.2(@babel/core@7.23.7)(@babel/plugin-proposal-nullish-coalescing-operator@7.18.6)(@babel/plugin-proposal-optional-chaining@7.21.0)(@babel/plugin-transform-arrow-functions@7.23.3)(@babel/plugin-transform-shorthand-properties@7.23.3)(@babel/plugin-transform-template-literals@7.23.3)(react-native@0.73.2)(react@18.2.0) react-native-safe-area-context: 4.8.2(react-native@0.73.2)(react@18.2.0) react-native-screens: 3.29.0(react-native@0.73.2)(react@18.2.0) schema-utils: 4.2.0 @@ -6797,26 +6766,13 @@ packages: - supports-color dev: false - /expo-splash-screen@0.26.3(expo-modules-autolinking@1.10.2)(expo@50.0.3): - resolution: {integrity: sha512-zV+2J/stwdirINrcs/d0BTVjKGUoZyN2j5vTp4H4dwWWU/gA0yAkzzh5eGHySg+yTqMSr7sPJkiyZh2Hek2vBQ==} - peerDependencies: - expo: '*' - dependencies: - '@expo/prebuild-config': 6.7.3(expo-modules-autolinking@1.10.2) - expo: 50.0.3(@babel/core@7.23.7)(@react-native/babel-preset@0.73.19) - transitivePeerDependencies: - - encoding - - expo-modules-autolinking - - supports-color - dev: false - - /expo-splash-screen@0.26.4(expo-modules-autolinking@1.10.2)(expo@50.0.3): + /expo-splash-screen@0.26.4(expo-modules-autolinking@1.10.2)(expo@50.0.5): resolution: {integrity: sha512-2DwofTQ0FFQCsvDysm/msENsbyNsJiAJwK3qK/oXeizECAPqD7bK19J4z9kuEbr7ORPX9MLnTQYKl6kmX3keUg==} peerDependencies: expo: '*' dependencies: '@expo/prebuild-config': 6.7.4(expo-modules-autolinking@1.10.2) - expo: 50.0.3(@babel/core@7.23.7)(@react-native/babel-preset@0.73.19) + expo: 50.0.5(@babel/core@7.23.7)(@react-native/babel-preset@0.73.19) transitivePeerDependencies: - encoding - expo-modules-autolinking @@ -6827,41 +6783,41 @@ packages: resolution: {integrity: sha512-ddQEtCOgYHTLlFUe/yH67dDBIoct5VIULthyT3LRJbEwdpzAgueKsX2FYK02ldh440V87PWKCamh7R9evk1rrg==} dev: false - /expo-system-ui@2.9.3(expo@50.0.3): + /expo-system-ui@2.9.3(expo@50.0.5): resolution: {integrity: sha512-RNFNBLJ9lhnjOGrHhtfDc15Ry/lF+SA4kwulmHzYGqaTeYvsL9q0K0+m9qmxuDdrbKJkuurvzvjVylDNnKNFVg==} peerDependencies: expo: '*' dependencies: '@react-native/normalize-color': 2.1.0 debug: 4.3.4 - expo: 50.0.3(@babel/core@7.23.7)(@react-native/babel-preset@0.73.19) + expo: 50.0.5(@babel/core@7.23.7)(@react-native/babel-preset@0.73.19) transitivePeerDependencies: - supports-color dev: false - /expo-updates-interface@0.15.3(expo@50.0.3): + /expo-updates-interface@0.15.3(expo@50.0.5): resolution: {integrity: sha512-uLvsbaCmUsXgJqeen8rYH/jPr874ZUCXEvWpKHxrCv5/XATPlYEaDuecbNSGQ+cu78i6MdtB4BHOwZmoH2d47A==} peerDependencies: expo: '*' dependencies: - expo: 50.0.3(@babel/core@7.23.7)(@react-native/babel-preset@0.73.19) + expo: 50.0.5(@babel/core@7.23.7)(@react-native/babel-preset@0.73.19) dev: false - /expo@50.0.3(@babel/core@7.23.7)(@react-native/babel-preset@0.73.19): - resolution: {integrity: sha512-3Yk42YShkugC90S24Dbo0mhrq/N3Kfn30FscrjCk3o8ldXh9OdE5RhVi/mc5Cqp28nw5a4DfiGSDFs0mA0t2ng==} + /expo@50.0.5(@babel/core@7.23.7)(@react-native/babel-preset@0.73.19): + resolution: {integrity: sha512-gfZbJv8eqVG1xX8QqlQHF4Mn6HnLFuE14Kq5FRUVZQWE+IhlrP+mr+un7Zdp/3a63Bp/VkPzHi77G1bVP1pM7A==} hasBin: true dependencies: '@babel/runtime': 7.23.8 - '@expo/cli': 0.17.2(@react-native/babel-preset@0.73.19)(expo-modules-autolinking@1.10.2) + '@expo/cli': 0.17.4(@react-native/babel-preset@0.73.19)(expo-modules-autolinking@1.10.2) '@expo/config': 8.5.4 '@expo/config-plugins': 7.8.4 '@expo/metro-config': 0.17.3(@react-native/babel-preset@0.73.19) '@expo/vector-icons': 14.0.0 babel-preset-expo: 10.0.1(@babel/core@7.23.7) - expo-asset: 9.0.2(expo@50.0.3) - expo-file-system: 16.0.5(expo@50.0.3) - expo-font: 11.10.2(expo@50.0.3) - expo-keep-awake: 12.8.2(expo@50.0.3) + expo-asset: 9.0.2(expo@50.0.5) + expo-file-system: 16.0.5(expo@50.0.5) + expo-font: 11.10.2(expo@50.0.5) + expo-keep-awake: 12.8.2(expo@50.0.5) expo-modules-autolinking: 1.10.2 expo-modules-core: 1.11.8 fbemitter: 3.0.0 @@ -10120,13 +10076,13 @@ packages: engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1} hasBin: true - /nativewind@4.0.23(@babel/core@7.23.7)(react-native-reanimated@3.6.1)(react-native-safe-area-context@4.8.2)(react-native-svg@14.1.0)(react-native@0.73.2)(react@18.2.0)(tailwindcss@3.3.2): + /nativewind@4.0.23(@babel/core@7.23.7)(react-native-reanimated@3.6.2)(react-native-safe-area-context@4.8.2)(react-native-svg@14.1.0)(react-native@0.73.2)(react@18.2.0)(tailwindcss@3.3.2): resolution: {integrity: sha512-7eKMjcdoZMqxmPwJhLwe5VbuwCNTdIXChxV9n4FwdzKTpZX3kNGj95J7fpqpefFPRT6yYp6SqK2n6TG/BSzA+w==} engines: {node: '>=16'} peerDependencies: tailwindcss: '>3.3.0' dependencies: - react-native-css-interop: 0.0.22(@babel/core@7.23.7)(react-native-reanimated@3.6.1)(react-native-safe-area-context@4.8.2)(react-native-svg@14.1.0)(react-native@0.73.2)(react@18.2.0)(tailwindcss@3.3.2) + react-native-css-interop: 0.0.22(@babel/core@7.23.7)(react-native-reanimated@3.6.2)(react-native-safe-area-context@4.8.2)(react-native-svg@14.1.0)(react-native@0.73.2)(react@18.2.0)(tailwindcss@3.3.2) tailwindcss: 3.3.2(ts-node@10.9.2) transitivePeerDependencies: - '@babel/core' @@ -11238,7 +11194,7 @@ packages: react-native: 0.73.2(@babel/core@7.23.7)(@babel/preset-env@7.23.8)(react@18.2.0) dev: false - /react-native-css-interop@0.0.22(@babel/core@7.23.7)(react-native-reanimated@3.6.1)(react-native-safe-area-context@4.8.2)(react-native-svg@14.1.0)(react-native@0.73.2)(react@18.2.0)(tailwindcss@3.3.2): + /react-native-css-interop@0.0.22(@babel/core@7.23.7)(react-native-reanimated@3.6.2)(react-native-safe-area-context@4.8.2)(react-native-svg@14.1.0)(react-native@0.73.2)(react@18.2.0)(tailwindcss@3.3.2): resolution: {integrity: sha512-JHLYHlLEqM13dy0XSxIPOWvqmQkPrqUt+KHPkbLV0sIiw/4aN6B5TPsNKZFX9bJJaZ//dAECn782R0MqDrTBWQ==} engines: {node: '>=16'} peerDependencies: @@ -11261,7 +11217,7 @@ packages: lightningcss: 1.22.0 react: 18.2.0 react-native: 0.73.2(@babel/core@7.23.7)(@babel/preset-env@7.23.8)(react@18.2.0) - react-native-reanimated: 3.6.1(@babel/core@7.23.7)(@babel/plugin-proposal-nullish-coalescing-operator@7.18.6)(@babel/plugin-proposal-optional-chaining@7.21.0)(@babel/plugin-transform-arrow-functions@7.23.3)(@babel/plugin-transform-shorthand-properties@7.23.3)(@babel/plugin-transform-template-literals@7.23.3)(react-native@0.73.2)(react@18.2.0) + react-native-reanimated: 3.6.2(@babel/core@7.23.7)(@babel/plugin-proposal-nullish-coalescing-operator@7.18.6)(@babel/plugin-proposal-optional-chaining@7.21.0)(@babel/plugin-transform-arrow-functions@7.23.3)(@babel/plugin-transform-shorthand-properties@7.23.3)(@babel/plugin-transform-template-literals@7.23.3)(react-native@0.73.2)(react@18.2.0) react-native-safe-area-context: 4.8.2(react-native@0.73.2)(react@18.2.0) react-native-svg: 14.1.0(react-native@0.73.2)(react@18.2.0) tailwindcss: 3.3.2(ts-node@10.9.2) @@ -11316,8 +11272,8 @@ packages: react-native: 0.73.2(@babel/core@7.23.7)(@babel/preset-env@7.23.8)(react@18.2.0) dev: false - /react-native-reanimated@3.6.1(@babel/core@7.23.7)(@babel/plugin-proposal-nullish-coalescing-operator@7.18.6)(@babel/plugin-proposal-optional-chaining@7.21.0)(@babel/plugin-transform-arrow-functions@7.23.3)(@babel/plugin-transform-shorthand-properties@7.23.3)(@babel/plugin-transform-template-literals@7.23.3)(react-native@0.73.2)(react@18.2.0): - resolution: {integrity: sha512-F4vG9Yf9PKmE3GaWtVGUpzj3SM6YY2cx1yRHCwiMd1uY7W0gU017LfcVUorboJnj0y5QZqEriEK1Usq2Y8YZqg==} + /react-native-reanimated@3.6.2(@babel/core@7.23.7)(@babel/plugin-proposal-nullish-coalescing-operator@7.18.6)(@babel/plugin-proposal-optional-chaining@7.21.0)(@babel/plugin-transform-arrow-functions@7.23.3)(@babel/plugin-transform-shorthand-properties@7.23.3)(@babel/plugin-transform-template-literals@7.23.3)(react-native@0.73.2)(react@18.2.0): + resolution: {integrity: sha512-IIMREMOrxhtK35drfpzh2UhxNqAOHnuvGgtMofj7yHcMj16tmWZR2zFvMUf6z2MfmXv+aVgFQ6TRZ6yKYf7LNA==} peerDependencies: '@babel/core': ^7.0.0-0 '@babel/plugin-proposal-nullish-coalescing-operator': ^7.0.0-0 From e24d8a530ccf5c6f157a4bb215a41fd3e199f47c Mon Sep 17 00:00:00 2001 From: Youssouf EL Azizi <youssoufelazizi@gmail.com> Date: Tue, 6 Feb 2024 00:14:29 +0100 Subject: [PATCH 03/14] fix: fix button variants --- src/app/(app)/style.tsx | 4 +-- src/components/button-variants.tsx | 28 ---------------- src/components/buttons.tsx | 52 ++++++++++++++++++++++++++++++ src/ui/core/button.tsx | 34 +++++++++++++------ 4 files changed, 78 insertions(+), 40 deletions(-) delete mode 100644 src/components/button-variants.tsx create mode 100644 src/components/buttons.tsx diff --git a/src/app/(app)/style.tsx b/src/app/(app)/style.tsx index a17511a6..4e4f0766 100644 --- a/src/app/(app)/style.tsx +++ b/src/app/(app)/style.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import { ButtonVariants } from '@/components/button-variants'; +import { Buttons } from '@/components/buttons'; import { Typography } from '@/components/typography'; import { FocusAwareStatusBar, SafeAreaView, ScrollView } from '@/ui'; @@ -13,7 +13,7 @@ export default function Style() { <Typography /> {/* <ColorVariants /> <InputVariants /> */} - <ButtonVariants /> + <Buttons /> </SafeAreaView> </ScrollView> </> diff --git a/src/components/button-variants.tsx b/src/components/button-variants.tsx deleted file mode 100644 index a948b981..00000000 --- a/src/components/button-variants.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import React from 'react'; - -import { Button, View } from '@/ui'; - -import { Title } from './title'; - -export const ButtonVariants = () => { - return ( - <> - <Title text="Buttons" /> - <View> - <Button label="Button" /> - <Button label="Button" variant="secondary" /> - <Button label="Button" variant="outline" /> - <Button label="Button" variant="destructive" /> - <Button label="Button" variant="ghost" /> - <Button label="Button" loading={true} /> - <Button label="Button" loading={true} variant="outline" /> - <Button label="PRIMARY BUTTON DISABLED" disabled /> - <Button - label="SECONDARY BUTTON DISABLED" - disabled - variant="secondary" - /> - </View> - </> - ); -}; diff --git a/src/components/buttons.tsx b/src/components/buttons.tsx new file mode 100644 index 00000000..480939f1 --- /dev/null +++ b/src/components/buttons.tsx @@ -0,0 +1,52 @@ +import React from 'react'; + +import { Button, View } from '@/ui'; + +import { Title } from './title'; + +export const Buttons = () => { + return ( + <> + <Title text="Buttons" /> + <View> + <View className="flex-row flex-wrap"> + <Button label="small" size="sm" className="mr-2" /> + <Button + label="small" + loading + size="sm" + className="mr-2 min-w-[60px]" + /> + <Button + label="small" + size="sm" + variant="secondary" + className="mr-2" + /> + <Button label="small" size="sm" variant="outline" className="mr-2" /> + <Button + label="small" + size="sm" + variant="destructive" + className="mr-2" + /> + <Button label="small" size="sm" variant="ghost" className="mr-2" /> + <Button label="small" size="sm" disabled className="mr-2" /> + </View> + <Button label="Default Button" /> + <Button label="Secondary Button" variant="secondary" /> + <Button label="Outline Button" variant="outline" /> + <Button label="Destructive Button" variant="destructive" /> + <Button label="Ghost Button" variant="ghost" /> + <Button label="Button" loading={true} /> + <Button label="Button" loading={true} variant="outline" /> + <Button label="Default Button Disabled" disabled /> + <Button + label="Secondary Button Disabled" + disabled + variant="secondary" + /> + </View> + </> + ); +}; diff --git a/src/ui/core/button.tsx b/src/ui/core/button.tsx index a28c76e8..5f61f75e 100644 --- a/src/ui/core/button.tsx +++ b/src/ui/core/button.tsx @@ -6,15 +6,16 @@ import { tv } from 'tailwind-variants'; const button = tv({ slots: { - container: 'flex flex-row items-center justify-center rounded-md my-2', + container: 'flex flex-row items-center justify-center rounded-md my-2 px-4', label: 'text-base font-[600] font-jakarta', - indicator: 'text-black h-6', + indicator: 'text-white h-6', }, variants: { variant: { default: { - container: 'bg-primary-10', + container: 'bg-black', + label: 'text-white', }, secondary: { container: 'bg-primary-600', @@ -32,8 +33,8 @@ const button = tv({ indicator: 'text-white', }, ghost: { - container: 'bg-white', - label: 'text-black', + container: 'bg-transparent', + label: 'text-black underline underline-offset-4', indicator: 'text-black', }, link: { @@ -52,8 +53,9 @@ const button = tv({ label: 'text-xl', }, sm: { - container: 'h-8 px-2', + container: 'h-8 px-3', label: 'text-sm', + indicator: 'h-2', }, icon: { container: 'h-9 w-9' }, }, @@ -85,6 +87,8 @@ type ButtonVariants = VariantProps<typeof button>; interface Props extends ButtonVariants, Omit<PressableProps, 'disabled'> { label?: string; loading?: boolean; + className?: string; + textClassName?: string; } export const Button = React.forwardRef<View, Props>( @@ -95,6 +99,8 @@ export const Button = React.forwardRef<View, Props>( variant = 'default', disabled = false, size = 'default', + className = '', + textClassName = '', ...props }, ref @@ -106,14 +112,22 @@ export const Button = React.forwardRef<View, Props>( return ( <Pressable disabled={disabled || loading} - className={styles.container()} + className={styles.container({ className })} {...props} ref={ref} > - {loading ? ( - <ActivityIndicator size="small" className={styles.indicator()} /> + {props.children ? ( + props.children ) : ( - <Text className={styles.label()}>{text}</Text> + <> + {loading ? ( + <ActivityIndicator size="small" className={styles.indicator()} /> + ) : ( + <Text className={styles.label({ className: textClassName })}> + {text} + </Text> + )} + </> )} </Pressable> ); From 10cffaa7b3a5c311e9525a6a4962f9c27a3b4bfa Mon Sep 17 00:00:00 2001 From: Youssouf EL Azizi <youssoufelazizi@gmail.com> Date: Tue, 6 Feb 2024 00:16:26 +0100 Subject: [PATCH 04/14] feat: update modal implementation --- ios/Podfile.lock | 42 +++---- src/ui/core/modal.tsx | 168 +++++++++++++++++++++++++++ src/ui/core/modal/dynamic-modal.tsx | 38 ------ src/ui/core/modal/index.tsx | 3 - src/ui/core/modal/modal-backdrop.tsx | 7 -- src/ui/core/modal/modal-header.tsx | 45 ------- src/ui/core/modal/modal.tsx | 76 ------------ src/ui/core/modal/types.ts | 16 --- src/ui/core/modal/x-close.tsx | 14 --- 9 files changed, 189 insertions(+), 220 deletions(-) create mode 100644 src/ui/core/modal.tsx delete mode 100644 src/ui/core/modal/dynamic-modal.tsx delete mode 100644 src/ui/core/modal/index.tsx delete mode 100644 src/ui/core/modal/modal-backdrop.tsx delete mode 100644 src/ui/core/modal/modal-header.tsx delete mode 100644 src/ui/core/modal/modal.tsx delete mode 100644 src/ui/core/modal/types.ts delete mode 100644 src/ui/core/modal/x-close.tsx diff --git a/ios/Podfile.lock b/ios/Podfile.lock index 187d1fde..590d52ba 100644 --- a/ios/Podfile.lock +++ b/ios/Podfile.lock @@ -8,17 +8,17 @@ PODS: - EXJSONUtils (0.12.3) - EXManifests (0.13.2): - ExpoModulesCore - - Expo (50.0.3): + - Expo (50.0.5): - ExpoModulesCore - - expo-dev-client (3.3.7): + - expo-dev-client (3.3.8): - EXManifests - expo-dev-launcher - expo-dev-menu - expo-dev-menu-interface - EXUpdatesInterface - - expo-dev-launcher (3.6.4): + - expo-dev-launcher (3.6.6): - EXManifests - - expo-dev-launcher/Main (= 3.6.4) + - expo-dev-launcher/Main (= 3.6.6) - expo-dev-menu - expo-dev-menu-interface - ExpoModulesCore @@ -27,7 +27,7 @@ PODS: - RCT-Folly (= 2022.05.16.00) - React-Core - React-RCTAppDelegate - - expo-dev-launcher/Main (3.6.4): + - expo-dev-launcher/Main (3.6.6): - EXManifests - expo-dev-launcher/Unsafe - expo-dev-menu @@ -38,7 +38,7 @@ PODS: - RCT-Folly (= 2022.05.16.00) - React-Core - React-RCTAppDelegate - - expo-dev-launcher/Unsafe (3.6.4): + - expo-dev-launcher/Unsafe (3.6.6): - EXManifests - expo-dev-menu - expo-dev-menu-interface @@ -48,14 +48,14 @@ PODS: - RCT-Folly (= 2022.05.16.00) - React-Core - React-RCTAppDelegate - - expo-dev-menu (4.5.4): - - expo-dev-menu/Main (= 4.5.4) - - expo-dev-menu/ReactNativeCompatibles (= 4.5.4) + - expo-dev-menu (4.5.5): + - expo-dev-menu/Main (= 4.5.5) + - expo-dev-menu/ReactNativeCompatibles (= 4.5.5) - glog - RCT-Folly (= 2022.05.16.00) - React-Core - expo-dev-menu-interface (1.7.2) - - expo-dev-menu/Main (4.5.4): + - expo-dev-menu/Main (4.5.5): - EXManifests - expo-dev-menu-interface - expo-dev-menu/Vendored @@ -63,23 +63,23 @@ PODS: - glog - RCT-Folly (= 2022.05.16.00) - React-Core - - expo-dev-menu/ReactNativeCompatibles (4.5.4): + - expo-dev-menu/ReactNativeCompatibles (4.5.5): - glog - RCT-Folly (= 2022.05.16.00) - React-Core - - expo-dev-menu/SafeAreaView (4.5.4): + - expo-dev-menu/SafeAreaView (4.5.5): - ExpoModulesCore - glog - RCT-Folly (= 2022.05.16.00) - React-Core - - expo-dev-menu/Vendored (4.5.4): + - expo-dev-menu/Vendored (4.5.5): - expo-dev-menu/SafeAreaView - glog - RCT-Folly (= 2022.05.16.00) - React-Core - ExpoFileSystem (16.0.5): - ExpoModulesCore - - ExpoHead (3.4.5): + - ExpoHead (3.4.6): - ExpoModulesCore - ExpoImage (1.10.5): - ExpoModulesCore @@ -1197,7 +1197,7 @@ PODS: - glog - RCT-Folly (= 2022.05.16.00) - React-Core - - RNReanimated (3.6.1): + - RNReanimated (3.6.2): - glog - RCT-Folly (= 2022.05.16.00) - React-Core @@ -1478,13 +1478,13 @@ SPEC CHECKSUMS: EXFont: 21b9c760abd593ce8f0d5386b558ced76018506f EXJSONUtils: 5c42959e87be238b045ef37cc5268b16a6c0ad4a EXManifests: 5e8c29f36c716af768a4ea47ec05e1b89ab93091 - Expo: 88b4aa68115bbb57c1a07cc30161c2352ab2fc25 - expo-dev-client: 80a81d82fd401673ab11702ce9e54115a8852f3b - expo-dev-launcher: 448a2c920d487f3f04958fb32c00204f92d5b3ac - expo-dev-menu: 2c26766f836f9ff51b889a245dcbabb604c1c5ea + Expo: 49cded7844f2ec4ffb1cc3b86504853f26952935 + expo-dev-client: 025dce84f48b04c60c3891547732f001f6aad777 + expo-dev-launcher: 3cddfcd8e54748d0046af07dc8e4f58dbb045e93 + expo-dev-menu: 8088833c320b616a312ffe438fbea5df276c010e expo-dev-menu-interface: 7ba029c9d1a82ac22b9b584c00514860b060553e ExpoFileSystem: 04795dd4d47e76eaf12e38c92091f77d794f9e7f - ExpoHead: dda4dd22972750dd2baa5c0231b86dc6e10ddfd9 + ExpoHead: b4f7388cd19ef0513ec0c0329ec995c03024300d ExpoImage: 2b71f20472f293c1fbbf2400795b03d5bf8dd598 ExpoKeepAwake: 0f5cad99603a3268e50af9a6eb8b76d0d9ac956c ExpoLocalization: f5f5d71dc0c9514d3d77b2771144f6fed6398d04 @@ -1551,7 +1551,7 @@ SPEC CHECKSUMS: ReactNativeAvoidSoftinput: b4ec4c8084c397a91800d21170a9949a263d288a RNFlashList: 4b4b6b093afc0df60ae08f9cbf6ccd4c836c667a RNGestureHandler: 25b969a1ffc806b9f9ad2e170d4a3b049c6af85e - RNReanimated: 57f436e7aa3d277fbfed05e003230b43428157c0 + RNReanimated: 5589be82dc26b3f94738eb7c6b1f942787532b25 RNScreens: b582cb834dc4133307562e930e8fa914b8c04ef2 RNSVG: ba3e7232f45e34b7b47e74472386cf4e1a676d0a SDWebImage: 750adf017a315a280c60fde706ab1e552a3ae4e9 diff --git a/src/ui/core/modal.tsx b/src/ui/core/modal.tsx new file mode 100644 index 00000000..e37663c5 --- /dev/null +++ b/src/ui/core/modal.tsx @@ -0,0 +1,168 @@ +/** + * Modal + * Dependencies: + * - @gorhom/bottom-sheet. + * + * Props: + * - All `BottomSheetModalProps` props. + * - `title` (string | undefined): Optional title for the modal header. + * + * Usage Example: + * import { Modal, useModal } from '@gorhom/bottom-sheet'; + * + * function DisplayModal() { + * const { ref, present, dismiss } = useModal(); + * + * return ( + * <View> + * <Modal + * snapPoints={['60%']} // optional + * title="Modal Title" + * ref={ref} + * > + * Modal Content + * </Modal> + * </View> + * ); + * } + * + */ + +import type { BottomSheetModalProps } from '@gorhom/bottom-sheet'; +import { BottomSheetModal } from '@gorhom/bottom-sheet'; +import * as React from 'react'; +import { Pressable, View } from 'react-native'; +import { Path, Svg } from 'react-native-svg'; + +import { renderBackdrop } from './bottom-sheet'; +import { Text } from './text'; + +type ModalProps = BottomSheetModalProps & { + title?: string; +}; + +type ModalRef = React.ForwardedRef<BottomSheetModal>; + +type ModalHeaderProps = { + title?: string; + dismiss: () => void; +}; + +export const useModal = () => { + const ref = React.useRef<BottomSheetModal>(null); + const present = React.useCallback((data?: any) => { + ref.current?.present(data); + }, []); + const dismiss = React.useCallback(() => { + ref.current?.dismiss(); + }, []); + return { ref, present, dismiss }; +}; + +export const Modal = React.forwardRef( + ( + { + snapPoints: _snapPoints = ['60%'], + title, + detached = false, + ...props + }: ModalProps, + ref: ModalRef + ) => { + const detachedProps = React.useMemo( + () => getDetachedProps(detached), + [detached] + ); + const modal = useModal(); + const snapPoints = React.useMemo(() => _snapPoints, [_snapPoints]); + + React.useImperativeHandle( + ref, + () => (modal.ref.current as BottomSheetModal) || null + ); + + const renderHandleComponent = React.useCallback( + () => ( + <> + <View className="mt-2 h-1 w-12 self-center rounded-lg bg-gray-400 dark:bg-gray-700" /> + <ModalHeader title={title} dismiss={modal.dismiss} /> + </> + ), + [title, modal.dismiss] + ); + + return ( + <BottomSheetModal + {...props} + {...detachedProps} + ref={modal.ref} + index={0} + snapPoints={snapPoints} + backdropComponent={props.backdropComponent || renderBackdrop} + handleComponent={renderHandleComponent} + /> + ); + } +); + +/** + * + * @param detached + * @returns + * + * @description + * In case the modal is detached, we need to add some extra props to the modal to make it look like a detached modal. + */ + +const getDetachedProps = (detached: boolean) => { + if (detached) { + return { + detached: true, + bottomInset: 46, + style: { marginHorizontal: 16, overflow: 'hidden' }, + } as Partial<BottomSheetModalProps>; + } + return {} as Partial<BottomSheetModalProps>; +}; + +/** + * ModalHeader + */ + +const ModalHeader = React.memo(({ title, dismiss }: ModalHeaderProps) => { + return ( + <> + {title && ( + <View className="flex-row px-2 py-4"> + <View className="h-[24px] w-[24px]" /> + <View className="flex-1"> + <Text className="text-center text-[16px] font-bold text-[#26313D] dark:text-white"> + {title} + </Text> + </View> + </View> + )} + <CloseButton close={dismiss} /> + </> + ); +}); + +const CloseButton = ({ close }: { close: () => void }) => { + return ( + <Pressable + onPress={close} + className="absolute right-3 top-3 h-[24px] w-[24px] items-center justify-center " + hitSlop={{ top: 20, bottom: 20, left: 20, right: 20 }} + accessibilityLabel="close modal" + accessibilityRole="button" + accessibilityHint="closes the modal" + > + <Svg width={24} height={24} fill="none" viewBox="0 0 24 24"> + <Path + d="M18.707 6.707a1 1 0 0 0-1.414-1.414L12 10.586 6.707 5.293a1 1 0 0 0-1.414 1.414L10.586 12l-5.293 5.293a1 1 0 1 0 1.414 1.414L12 13.414l5.293 5.293a1 1 0 0 0 1.414-1.414L13.414 12l5.293-5.293Z" + fill="dark:fille-charcoal-100 light:fill-white" + /> + </Svg> + </Pressable> + ); +}; diff --git a/src/ui/core/modal/dynamic-modal.tsx b/src/ui/core/modal/dynamic-modal.tsx deleted file mode 100644 index 85fc7752..00000000 --- a/src/ui/core/modal/dynamic-modal.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import type { BottomSheetModal } from '@gorhom/bottom-sheet'; -import { - BottomSheetView, - useBottomSheetDynamicSnapPoints, -} from '@gorhom/bottom-sheet'; -import * as React from 'react'; - -import { Modal, useModal } from './modal'; -import type { DynamicModalProps, ModalRef } from './types'; - -export const DynamicModal = React.forwardRef( - ( - { snapPoints = ['CONTENT_HEIGHT'], children, ...props }: DynamicModalProps, - ref: ModalRef - ) => { - const modal = useModal(); - const { animatedHandleHeight, animatedContentHeight, handleContentLayout } = - useBottomSheetDynamicSnapPoints(snapPoints as Array<number | string>); // cast to remove shared values type - - React.useImperativeHandle( - ref, - () => (modal.ref.current as BottomSheetModal) || null - ); - - return ( - <Modal - {...props} - ref={modal.ref} - handleHeight={animatedHandleHeight} - contentHeight={animatedContentHeight} - > - <BottomSheetView onLayout={handleContentLayout}> - {children} - </BottomSheetView> - </Modal> - ); - } -); diff --git a/src/ui/core/modal/index.tsx b/src/ui/core/modal/index.tsx deleted file mode 100644 index 5cc42839..00000000 --- a/src/ui/core/modal/index.tsx +++ /dev/null @@ -1,3 +0,0 @@ -export * from './dynamic-modal'; -export * from './modal'; -export * from './types'; diff --git a/src/ui/core/modal/modal-backdrop.tsx b/src/ui/core/modal/modal-backdrop.tsx deleted file mode 100644 index 87e8db14..00000000 --- a/src/ui/core/modal/modal-backdrop.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import type { BottomSheetBackdropProps } from '@gorhom/bottom-sheet'; -import { BottomSheetBackdrop } from '@gorhom/bottom-sheet'; -import React from 'react'; - -export const renderBackdrop = (props: BottomSheetBackdropProps) => ( - <BottomSheetBackdrop appearsOnIndex={0} disappearsOnIndex={-1} {...props} /> -); diff --git a/src/ui/core/modal/modal-header.tsx b/src/ui/core/modal/modal-header.tsx deleted file mode 100644 index 6c7899e4..00000000 --- a/src/ui/core/modal/modal-header.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import * as React from 'react'; -import { Pressable, View } from 'react-native'; - -import { Text } from '../text'; -import { XClose } from './x-close'; - -type ModalHeaderProps = { - title?: string; - dismiss: () => void; -}; - -export const ModalHeader = React.memo( - ({ title, dismiss }: ModalHeaderProps) => { - return ( - <> - {title && ( - <View className="flex-row px-2 py-4"> - <View className="h-[24px] w-[24px]" /> - <View className="flex-1"> - <Text className="text-center text-[16px] font-bold text-[#26313D]"> - {title} - </Text> - </View> - </View> - )} - <CloseButton close={dismiss} /> - </> - ); - } -); - -const CloseButton = ({ close }: { close: () => void }) => { - return ( - <Pressable - onPress={close} - className="absolute right-3 top-3 h-[24px] w-[24px] items-center justify-center " - hitSlop={{ top: 20, bottom: 20, left: 20, right: 20 }} - accessibilityLabel="close modal" - accessibilityRole="button" - accessibilityHint="closes the modal" - > - <XClose fill="#000" /> - </Pressable> - ); -}; diff --git a/src/ui/core/modal/modal.tsx b/src/ui/core/modal/modal.tsx deleted file mode 100644 index fef04357..00000000 --- a/src/ui/core/modal/modal.tsx +++ /dev/null @@ -1,76 +0,0 @@ -import type { BottomSheetModalProps } from '@gorhom/bottom-sheet'; -import { BottomSheetModal } from '@gorhom/bottom-sheet'; -import * as React from 'react'; -import { View } from 'react-native'; - -import { renderBackdrop } from './modal-backdrop'; -import { ModalHeader } from './modal-header'; -import type { ModalProps, ModalRef } from './types'; - -export const useModal = () => { - const ref = React.useRef<BottomSheetModal>(null); - const present = React.useCallback((data?: any) => { - ref.current?.present(data); - }, []); - const dismiss = React.useCallback(() => { - ref.current?.dismiss(); - }, []); - return { ref, present, dismiss }; -}; - -export const Modal = React.forwardRef( - ( - { - snapPoints: _snapPoints = ['60%'], - title, - detached = false, - ...props - }: ModalProps, - ref: ModalRef - ) => { - const detachedProps = React.useMemo( - () => getDetachedProps(detached), - [detached] - ); - const modal = useModal(); - const snapPoints = React.useMemo(() => _snapPoints, [_snapPoints]); - - React.useImperativeHandle( - ref, - () => (modal.ref.current as BottomSheetModal) || null - ); - - const renderHandleComponent = React.useCallback( - () => ( - <> - <View className="mt-2 h-1 w-12 self-center rounded-lg bg-gray-400 dark:bg-gray-700" /> - <ModalHeader title={title} dismiss={modal.dismiss} /> - </> - ), - [title, modal.dismiss] - ); - - return ( - <BottomSheetModal - {...props} - {...detachedProps} - ref={modal.ref} - index={0} - snapPoints={snapPoints} - backdropComponent={props.backdropComponent || renderBackdrop} - handleComponent={renderHandleComponent} - /> - ); - } -); - -const getDetachedProps = (detached: boolean) => { - if (detached) { - return { - detached: true, - bottomInset: 46, - style: { marginHorizontal: 16, overflow: 'hidden' }, - } as Partial<BottomSheetModalProps>; - } - return {} as Partial<BottomSheetModalProps>; -}; diff --git a/src/ui/core/modal/types.ts b/src/ui/core/modal/types.ts deleted file mode 100644 index d9b26acf..00000000 --- a/src/ui/core/modal/types.ts +++ /dev/null @@ -1,16 +0,0 @@ -import type { - BottomSheetModal, - BottomSheetModalProps, -} from '@gorhom/bottom-sheet'; - -export type ModalProps = BottomSheetModalProps & { - title?: string; -}; - -// can't accept children as function because we can't pass ref to function component -export type DynamicModalProps = Omit<ModalProps, 'children' | 'snapPoints'> & { - children: React.ReactNode; - snapPoints?: Array<number | string>; -}; - -export type ModalRef = React.ForwardedRef<BottomSheetModal>; diff --git a/src/ui/core/modal/x-close.tsx b/src/ui/core/modal/x-close.tsx deleted file mode 100644 index 103d5e65..00000000 --- a/src/ui/core/modal/x-close.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import * as React from 'react'; -import type { SvgProps } from 'react-native-svg'; -import Svg, { Path } from 'react-native-svg'; - -const SvgComponent = ({ fill = '#001136', ...props }: SvgProps) => ( - <Svg width={24} height={24} fill="none" viewBox="0 0 24 24" {...props}> - <Path - d="M18.707 6.707a1 1 0 0 0-1.414-1.414L12 10.586 6.707 5.293a1 1 0 0 0-1.414 1.414L10.586 12l-5.293 5.293a1 1 0 1 0 1.414 1.414L12 13.414l5.293 5.293a1 1 0 0 0 1.414-1.414L13.414 12l5.293-5.293Z" - fill={fill} - /> - </Svg> -); - -export const XClose = SvgComponent; From d3622ecbba6dd74043a999d64f91e529c973cc2d Mon Sep 17 00:00:00 2001 From: Elena Bitire <elena@obytes.com> Date: Wed, 14 Feb 2024 17:53:17 +0200 Subject: [PATCH 05/14] fix: fix input & select components --- src/app/(app)/style.tsx | 5 +++-- src/components/{input-variants.tsx => inputs.tsx} | 2 +- src/ui/core/input/input.tsx | 8 ++++++-- src/ui/core/select/select.tsx | 8 ++++++-- 4 files changed, 16 insertions(+), 7 deletions(-) rename src/components/{input-variants.tsx => inputs.tsx} (95%) diff --git a/src/app/(app)/style.tsx b/src/app/(app)/style.tsx index 4e4f0766..191cd27c 100644 --- a/src/app/(app)/style.tsx +++ b/src/app/(app)/style.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import { Buttons } from '@/components/buttons'; +import { Inputs } from '@/components/inputs'; import { Typography } from '@/components/typography'; import { FocusAwareStatusBar, SafeAreaView, ScrollView } from '@/ui'; @@ -11,8 +12,8 @@ export default function Style() { <ScrollView> <SafeAreaView className="flex-1 px-4"> <Typography /> - {/* <ColorVariants /> - <InputVariants /> */} + {/* <ColorVariants /> */} + <Inputs /> <Buttons /> </SafeAreaView> </ScrollView> diff --git a/src/components/input-variants.tsx b/src/components/inputs.tsx similarity index 95% rename from src/components/input-variants.tsx rename to src/components/inputs.tsx index 50f9ce8a..f0db653c 100644 --- a/src/components/input-variants.tsx +++ b/src/components/inputs.tsx @@ -11,7 +11,7 @@ const options: Option[] = [ { value: 'vanilla', label: 'Vanilla' }, ]; -export const InputVariants = () => { +export const Inputs = () => { const [value, setValue] = React.useState<string | number | undefined>(); return ( <> diff --git a/src/ui/core/input/input.tsx b/src/ui/core/input/input.tsx index 0e5c42d0..1b1256ed 100644 --- a/src/ui/core/input/input.tsx +++ b/src/ui/core/input/input.tsx @@ -24,7 +24,7 @@ const inputTv = tv({ error: { true: { input: 'border-danger-600', - label: 'text-danger-600', + label: 'text-danger-600 dark:text-danger-600', }, }, disabled: { @@ -78,7 +78,11 @@ export const Input = React.forwardRef<TextInput, NInputProps>((props, ref) => { inputProps.style, ])} /> - {error && <Text className="text-sm text-danger-400">{error}</Text>} + {error && ( + <Text className="text-sm text-danger-400 dark:text-danger-600"> + {error} + </Text> + )} </View> ); }); diff --git a/src/ui/core/select/select.tsx b/src/ui/core/select/select.tsx index a7c2e8bb..b0a71145 100644 --- a/src/ui/core/select/select.tsx +++ b/src/ui/core/select/select.tsx @@ -29,7 +29,7 @@ const selectTv = tv({ error: { true: { input: 'border-danger-600', - label: 'text-danger-600', + label: 'text-danger-600 dark:text-danger-600', inputValue: 'text-danger-600', }, }, @@ -108,7 +108,11 @@ export const Select = (props: SelectProps) => { </View> <CaretDown color={isDark ? colors.white : colors.black} /> </TouchableOpacity> - {error && <Text className="text-sm text-danger-300">{error}</Text>} + {error && ( + <Text className="text-sm text-danger-300 dark:text-danger-600"> + {error} + </Text> + )} </View> <Options ref={modal.ref} options={options} onSelect={onSelectOption} /> </> From 4702c70518978fd8d505058367e927edef35be5b Mon Sep 17 00:00:00 2001 From: Elena Bitire <elena@obytes.com> Date: Wed, 14 Feb 2024 18:03:02 +0200 Subject: [PATCH 06/14] fix: fix expo doctor --- package.json | 12 +- pnpm-lock.yaml | 599 ++++++++++++++++++++++++++++--------------------- 2 files changed, 343 insertions(+), 268 deletions(-) diff --git a/package.json b/package.json index ceff0417..1a8103a9 100644 --- a/package.json +++ b/package.json @@ -38,7 +38,7 @@ "e2e-test": "maestro test .maestro/ -e APP_ID=com.obytes.development" }, "dependencies": { - "@expo/metro-runtime": "^3.1.1", + "@expo/metro-runtime": "^3.1.3", "@gorhom/bottom-sheet": "^4.6.0", "@hookform/resolvers": "^2.9.11", "@react-navigation/bottom-tabs": "^6.5.11", @@ -48,15 +48,15 @@ "@tanstack/react-query": "^4.36.1", "app-icon-badge": "^0.0.15", "axios": "^1.6.5", - "expo": "~50.0.5", + "expo": "~50.0.6", "expo-build-properties": "~0.11.1", "expo-constants": "~15.4.5", "expo-dev-client": "~3.3.8", "expo-font": "~11.10.2", - "expo-image": "~1.10.5", + "expo-image": "~1.10.6", "expo-linking": "~6.2.2", "expo-localization": "~14.8.3", - "expo-router": "~3.4.6", + "expo-router": "~3.4.7", "expo-splash-screen": "0.26.4", "expo-status-bar": "~1.11.1", "expo-system-ui": "~2.9.3", @@ -68,7 +68,7 @@ "react-error-boundary": "^3.1.4", "react-hook-form": "^7.49.3", "react-i18next": "^12.3.1", - "react-native": "0.73.2", + "react-native": "0.73.4", "react-native-avoid-softinput": "^4.0.2", "react-native-flash-message": "^0.4.2", "react-native-gesture-handler": "~2.14.1", @@ -112,7 +112,7 @@ "husky": "^8.0.3", "jest": "^29.7.0", "jest-environment-jsdom": "^29.7.0", - "jest-expo": "50.0.1", + "jest-expo": "50.0.2", "jest-junit": "^16.0.0", "lint-staged": "^13.3.0", "metro-babel-register": "^0.73.10", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ee80100c..5d2dc274 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -6,29 +6,29 @@ settings: dependencies: '@expo/metro-runtime': - specifier: ^3.1.1 - version: 3.1.1(react-native@0.73.2) + specifier: ^3.1.3 + version: 3.1.3(react-native@0.73.4) '@gorhom/bottom-sheet': specifier: ^4.6.0 - version: 4.6.0(@types/react@18.2.48)(react-native-gesture-handler@2.14.1)(react-native-reanimated@3.6.2)(react-native@0.73.2)(react@18.2.0) + version: 4.6.0(@types/react@18.2.48)(react-native-gesture-handler@2.14.1)(react-native-reanimated@3.6.2)(react-native@0.73.4)(react@18.2.0) '@hookform/resolvers': specifier: ^2.9.11 version: 2.9.11(react-hook-form@7.49.3) '@react-navigation/bottom-tabs': specifier: ^6.5.11 - version: 6.5.11(@react-navigation/native@6.1.9)(react-native-safe-area-context@4.8.2)(react-native-screens@3.29.0)(react-native@0.73.2)(react@18.2.0) + version: 6.5.11(@react-navigation/native@6.1.9)(react-native-safe-area-context@4.8.2)(react-native-screens@3.29.0)(react-native@0.73.4)(react@18.2.0) '@react-navigation/native': specifier: ^6.1.9 - version: 6.1.9(react-native@0.73.2)(react@18.2.0) + version: 6.1.9(react-native@0.73.4)(react@18.2.0) '@react-navigation/native-stack': specifier: ^6.9.17 - version: 6.9.17(@react-navigation/native@6.1.9)(react-native-safe-area-context@4.8.2)(react-native-screens@3.29.0)(react-native@0.73.2)(react@18.2.0) + version: 6.9.17(@react-navigation/native@6.1.9)(react-native-safe-area-context@4.8.2)(react-native-screens@3.29.0)(react-native@0.73.4)(react@18.2.0) '@shopify/flash-list': specifier: 1.6.3 - version: 1.6.3(@babel/runtime@7.23.8)(react-native@0.73.2)(react@18.2.0) + version: 1.6.3(@babel/runtime@7.23.8)(react-native@0.73.4)(react@18.2.0) '@tanstack/react-query': specifier: ^4.36.1 - version: 4.36.1(react-dom@18.2.0)(react-native@0.73.2)(react@18.2.0) + version: 4.36.1(react-dom@18.2.0)(react-native@0.73.4)(react@18.2.0) app-icon-badge: specifier: ^0.0.15 version: 0.0.15 @@ -36,41 +36,41 @@ dependencies: specifier: ^1.6.5 version: 1.6.5 expo: - specifier: ~50.0.5 - version: 50.0.5(@babel/core@7.23.7)(@react-native/babel-preset@0.73.19) + specifier: ~50.0.6 + version: 50.0.6(@babel/core@7.23.7)(@react-native/babel-preset@0.73.21) expo-build-properties: specifier: ~0.11.1 - version: 0.11.1(expo@50.0.5) + version: 0.11.1(expo@50.0.6) expo-constants: specifier: ~15.4.5 - version: 15.4.5(expo@50.0.5) + version: 15.4.5(expo@50.0.6) expo-dev-client: specifier: ~3.3.8 - version: 3.3.8(expo@50.0.5) + version: 3.3.8(expo@50.0.6) expo-font: specifier: ~11.10.2 - version: 11.10.2(expo@50.0.5) + version: 11.10.2(expo@50.0.6) expo-image: - specifier: ~1.10.5 - version: 1.10.5(expo@50.0.5) + specifier: ~1.10.6 + version: 1.10.6(expo@50.0.6) expo-linking: specifier: ~6.2.2 - version: 6.2.2(expo@50.0.5) + version: 6.2.2(expo@50.0.6) expo-localization: specifier: ~14.8.3 - version: 14.8.3(expo@50.0.5) + version: 14.8.3(expo@50.0.6) expo-router: - specifier: ~3.4.6 - version: 3.4.6(@testing-library/jest-native@5.4.3)(expo-constants@15.4.5)(expo-linking@6.2.2)(expo-modules-autolinking@1.10.2)(expo-status-bar@1.11.1)(expo@50.0.5)(react-dom@18.2.0)(react-native-reanimated@3.6.2)(react-native-safe-area-context@4.8.2)(react-native-screens@3.29.0)(react-native@0.73.2)(react@18.2.0) + specifier: ~3.4.7 + version: 3.4.7(@testing-library/jest-native@5.4.3)(expo-constants@15.4.5)(expo-linking@6.2.2)(expo-modules-autolinking@1.10.3)(expo-status-bar@1.11.1)(expo@50.0.6)(react-dom@18.2.0)(react-native-reanimated@3.6.2)(react-native-safe-area-context@4.8.2)(react-native-screens@3.29.0)(react-native@0.73.4)(react@18.2.0) expo-splash-screen: specifier: 0.26.4 - version: 0.26.4(expo-modules-autolinking@1.10.2)(expo@50.0.5) + version: 0.26.4(expo-modules-autolinking@1.10.3)(expo@50.0.6) expo-status-bar: specifier: ~1.11.1 version: 1.11.1 expo-system-ui: specifier: ~2.9.3 - version: 2.9.3(expo@50.0.5) + version: 2.9.3(expo@50.0.6) i18next: specifier: ^22.5.1 version: 22.5.1 @@ -79,7 +79,7 @@ dependencies: version: 4.1.2 nativewind: specifier: ^4.0.23 - version: 4.0.23(@babel/core@7.23.7)(react-native-reanimated@3.6.2)(react-native-safe-area-context@4.8.2)(react-native-svg@14.1.0)(react-native@0.73.2)(react@18.2.0)(tailwindcss@3.3.2) + version: 4.0.23(@babel/core@7.23.7)(react-native-reanimated@3.6.2)(react-native-safe-area-context@4.8.2)(react-native-svg@14.1.0)(react-native@0.73.4)(react@18.2.0)(tailwindcss@3.3.2) react: specifier: 18.2.0 version: 18.2.0 @@ -94,37 +94,37 @@ dependencies: version: 7.49.3(react@18.2.0) react-i18next: specifier: ^12.3.1 - version: 12.3.1(i18next@22.5.1)(react-dom@18.2.0)(react-native@0.73.2)(react@18.2.0) + version: 12.3.1(i18next@22.5.1)(react-dom@18.2.0)(react-native@0.73.4)(react@18.2.0) react-native: - specifier: 0.73.2 - version: 0.73.2(@babel/core@7.23.7)(@babel/preset-env@7.23.8)(react@18.2.0) + specifier: 0.73.4 + version: 0.73.4(@babel/core@7.23.7)(@babel/preset-env@7.23.8)(react@18.2.0) react-native-avoid-softinput: specifier: ^4.0.2 - version: 4.0.2(react-native@0.73.2)(react@18.2.0) + version: 4.0.2(react-native@0.73.4)(react@18.2.0) react-native-flash-message: specifier: ^0.4.2 - version: 0.4.2(prop-types@15.8.1)(react-native@0.73.2)(react@18.2.0) + version: 0.4.2(prop-types@15.8.1)(react-native@0.73.4)(react@18.2.0) react-native-gesture-handler: specifier: ~2.14.1 - version: 2.14.1(react-native@0.73.2)(react@18.2.0) + version: 2.14.1(react-native@0.73.4)(react@18.2.0) react-native-mmkv: specifier: 2.6.3 - version: 2.6.3(react-native@0.73.2)(react@18.2.0) + version: 2.6.3(react-native@0.73.4)(react@18.2.0) react-native-reanimated: specifier: ~3.6.2 - version: 3.6.2(@babel/core@7.23.7)(@babel/plugin-proposal-nullish-coalescing-operator@7.18.6)(@babel/plugin-proposal-optional-chaining@7.21.0)(@babel/plugin-transform-arrow-functions@7.23.3)(@babel/plugin-transform-shorthand-properties@7.23.3)(@babel/plugin-transform-template-literals@7.23.3)(react-native@0.73.2)(react@18.2.0) + version: 3.6.2(@babel/core@7.23.7)(@babel/plugin-proposal-nullish-coalescing-operator@7.18.6)(@babel/plugin-proposal-optional-chaining@7.21.0)(@babel/plugin-transform-arrow-functions@7.23.3)(@babel/plugin-transform-shorthand-properties@7.23.3)(@babel/plugin-transform-template-literals@7.23.3)(react-native@0.73.4)(react@18.2.0) react-native-restart: specifier: 0.0.27 - version: 0.0.27(react-native@0.73.2)(react@18.2.0) + version: 0.0.27(react-native@0.73.4)(react@18.2.0) react-native-safe-area-context: specifier: 4.8.2 - version: 4.8.2(react-native@0.73.2)(react@18.2.0) + version: 4.8.2(react-native@0.73.4)(react@18.2.0) react-native-screens: specifier: ~3.29.0 - version: 3.29.0(react-native@0.73.2)(react@18.2.0) + version: 3.29.0(react-native@0.73.4)(react@18.2.0) react-native-svg: specifier: 14.1.0 - version: 14.1.0(react-native@0.73.2)(react@18.2.0) + version: 14.1.0(react-native@0.73.4)(react@18.2.0) react-native-web: specifier: ~0.19.10 version: 0.19.10(react-dom@18.2.0)(react@18.2.0) @@ -162,10 +162,10 @@ devDependencies: version: 5.17.0 '@testing-library/jest-native': specifier: ^5.4.3 - version: 5.4.3(react-native@0.73.2)(react-test-renderer@18.2.0)(react@18.2.0) + version: 5.4.3(react-native@0.73.4)(react-test-renderer@18.2.0)(react@18.2.0) '@testing-library/react-native': specifier: ^11.5.4 - version: 11.5.4(jest@29.7.0)(react-native@0.73.2)(react-test-renderer@18.2.0)(react@18.2.0) + version: 11.5.4(jest@29.7.0)(react-native@0.73.4)(react-test-renderer@18.2.0)(react@18.2.0) '@types/i18n-js': specifier: ^3.8.9 version: 3.8.9 @@ -224,8 +224,8 @@ devDependencies: specifier: ^29.7.0 version: 29.7.0 jest-expo: - specifier: 50.0.1 - version: 50.0.1(@babel/core@7.23.7)(jest@29.7.0)(react@18.2.0) + specifier: 50.0.2 + version: 50.0.2(@babel/core@7.23.7)(jest@29.7.0)(react@18.2.0) jest-junit: specifier: ^16.0.0 version: 16.0.0 @@ -1920,8 +1920,8 @@ packages: safe-json-stringify: 1.2.0 dev: false - /@expo/cli@0.17.4(@react-native/babel-preset@0.73.19)(expo-modules-autolinking@1.10.2): - resolution: {integrity: sha512-6pswecVC9qCBp1qa004D2HjPeXKYDaw/PhyUOsqnF7AUCwunlKa1tJO0Ik8zxzF68kuywIOXUnTJl74Z2aHqiw==} + /@expo/cli@0.17.5(@react-native/babel-preset@0.73.21)(expo-modules-autolinking@1.10.3): + resolution: {integrity: sha512-9cMquL/5bBfV73CbZcWipk3KZSo8mBqdgvkoWCtEtnnlm/879ayxzMWjVIgT5yV4w+X7+N6KkBSUIIj4t9Xqew==} hasBin: true dependencies: '@babel/runtime': 7.23.8 @@ -1932,11 +1932,11 @@ packages: '@expo/env': 0.2.1 '@expo/image-utils': 0.4.1 '@expo/json-file': 8.3.0 - '@expo/metro-config': 0.17.3(@react-native/babel-preset@0.73.19) + '@expo/metro-config': 0.17.4(@react-native/babel-preset@0.73.21) '@expo/osascript': 2.1.0 '@expo/package-manager': 1.4.2 '@expo/plist': 0.1.0 - '@expo/prebuild-config': 6.7.4(expo-modules-autolinking@1.10.2) + '@expo/prebuild-config': 6.7.4(expo-modules-autolinking@1.10.3) '@expo/rudder-sdk-node': 1.1.1 '@expo/spawn-async': 1.5.0 '@expo/xcpretty': 4.3.1 @@ -1990,6 +1990,7 @@ packages: send: 0.18.0 slugify: 1.6.6 source-map-support: 0.5.21 + stacktrace-parser: 0.1.10 structured-headers: 0.4.1 tar: 6.2.0 temp-dir: 2.0.0 @@ -2129,8 +2130,8 @@ packages: json5: 2.2.3 write-file-atomic: 2.4.3 - /@expo/metro-config@0.17.3(@react-native/babel-preset@0.73.19): - resolution: {integrity: sha512-YW8ixbaz6yL7/Mg1rJJejiAAVQQKjGY1wXvT2Dh487r/r9/j1yE1YRS/oRY1yItYzbnHvO0p0jMnEGfiFYL3Tg==} + /@expo/metro-config@0.17.4(@react-native/babel-preset@0.73.21): + resolution: {integrity: sha512-PxqDMuVjXQeboa6Aj8kNj4iTxIpwpfoYlF803qOjf1LE1ePlREnWNwqy65ESCBnCmekYIO5hhm1Nksa+xCvuyg==} peerDependencies: '@react-native/babel-preset': '*' dependencies: @@ -2142,7 +2143,7 @@ packages: '@expo/env': 0.2.1 '@expo/json-file': 8.3.0 '@expo/spawn-async': 1.7.2 - '@react-native/babel-preset': 0.73.19(@babel/core@7.23.7)(@babel/preset-env@7.23.8) + '@react-native/babel-preset': 0.73.21(@babel/core@7.23.7)(@babel/preset-env@7.23.8) babel-preset-fbjs: 3.4.0(@babel/core@7.23.7) chalk: 4.1.2 debug: 4.3.4 @@ -2159,20 +2160,12 @@ packages: - supports-color dev: false - /@expo/metro-runtime@3.1.1(react-native@0.73.2): - resolution: {integrity: sha512-NTtSgYIDqoJb/3m6uxus08PcJO7FguHRRg/ZLRBXt/NNPtJ1bk9eLGspZaa5jbSniVZe2AIXW9VGPi/GwKmIbQ==} + /@expo/metro-runtime@3.1.3(react-native@0.73.4): + resolution: {integrity: sha512-u1CaQJJlSgvxBB5NJ6YMVvSDTTRzjT71dHpEBnKPZhpFv5ebVry52FZ2sEeEEA6mHG5zGxWXmHImW3hNKHh8EA==} peerDependencies: react-native: '*' dependencies: - react-native: 0.73.2(@babel/core@7.23.7)(@babel/preset-env@7.23.8)(react@18.2.0) - dev: false - - /@expo/metro-runtime@3.1.2(react-native@0.73.2): - resolution: {integrity: sha512-Wekv2AZ3HY0NG9Im8AMB1KHGyHjmALg6xekVK34724I/DLtcocLKtQEP04oI9GcAZBotAhROHH5E4ADhJAEgYg==} - peerDependencies: - react-native: '*' - dependencies: - react-native: 0.73.2(@babel/core@7.23.7)(@babel/preset-env@7.23.8)(react@18.2.0) + react-native: 0.73.4(@babel/core@7.23.7)(@babel/preset-env@7.23.8)(react@18.2.0) dev: false /@expo/osascript@2.1.0: @@ -2207,7 +2200,7 @@ packages: base64-js: 1.5.1 xmlbuilder: 14.0.0 - /@expo/prebuild-config@6.7.4(expo-modules-autolinking@1.10.2): + /@expo/prebuild-config@6.7.4(expo-modules-autolinking@1.10.3): resolution: {integrity: sha512-x8EUdCa8DTMZ/dtEXjHAdlP+ljf6oSeSKNzhycXiHhpMSMG9jEhV28ocCwc6cKsjK5GziweEiHwvrj6+vsBlhA==} peerDependencies: expo-modules-autolinking: '>=0.8.1' @@ -2218,7 +2211,7 @@ packages: '@expo/image-utils': 0.4.1 '@expo/json-file': 8.3.0 debug: 4.3.4 - expo-modules-autolinking: 1.10.2 + expo-modules-autolinking: 1.10.3 fs-extra: 9.1.0 resolve-from: 5.0.0 semver: 7.5.3 @@ -2316,7 +2309,7 @@ packages: resolution: {integrity: sha512-k2Ty1JcVojjJFwrg/ThKi2ujJ7XNLYaFGNB/bWT9wGR+oSMJHMa5w+CUq6p/pVrKeNNgA7pCqEcjSnHVoqJQFw==} dev: false - /@gorhom/bottom-sheet@4.6.0(@types/react@18.2.48)(react-native-gesture-handler@2.14.1)(react-native-reanimated@3.6.2)(react-native@0.73.2)(react@18.2.0): + /@gorhom/bottom-sheet@4.6.0(@types/react@18.2.48)(react-native-gesture-handler@2.14.1)(react-native-reanimated@3.6.2)(react-native@0.73.4)(react@18.2.0): resolution: {integrity: sha512-XgNflkhATUqTIiMDGuLaQZAtjUzcrhGOEJGHT+7Tou1ctTMb958YRGGnU9KFo5TkD6YCZcfWfxHPi9F0FF+DjA==} peerDependencies: '@types/react': '*' @@ -2331,16 +2324,16 @@ packages: '@types/react-native': optional: true dependencies: - '@gorhom/portal': 1.0.14(react-native@0.73.2)(react@18.2.0) + '@gorhom/portal': 1.0.14(react-native@0.73.4)(react@18.2.0) '@types/react': 18.2.48 invariant: 2.2.4 react: 18.2.0 - react-native: 0.73.2(@babel/core@7.23.7)(@babel/preset-env@7.23.8)(react@18.2.0) - react-native-gesture-handler: 2.14.1(react-native@0.73.2)(react@18.2.0) - react-native-reanimated: 3.6.2(@babel/core@7.23.7)(@babel/plugin-proposal-nullish-coalescing-operator@7.18.6)(@babel/plugin-proposal-optional-chaining@7.21.0)(@babel/plugin-transform-arrow-functions@7.23.3)(@babel/plugin-transform-shorthand-properties@7.23.3)(@babel/plugin-transform-template-literals@7.23.3)(react-native@0.73.2)(react@18.2.0) + react-native: 0.73.4(@babel/core@7.23.7)(@babel/preset-env@7.23.8)(react@18.2.0) + react-native-gesture-handler: 2.14.1(react-native@0.73.4)(react@18.2.0) + react-native-reanimated: 3.6.2(@babel/core@7.23.7)(@babel/plugin-proposal-nullish-coalescing-operator@7.18.6)(@babel/plugin-proposal-optional-chaining@7.21.0)(@babel/plugin-transform-arrow-functions@7.23.3)(@babel/plugin-transform-shorthand-properties@7.23.3)(@babel/plugin-transform-template-literals@7.23.3)(react-native@0.73.4)(react@18.2.0) dev: false - /@gorhom/portal@1.0.14(react-native@0.73.2)(react@18.2.0): + /@gorhom/portal@1.0.14(react-native@0.73.4)(react@18.2.0): resolution: {integrity: sha512-MXyL4xvCjmgaORr/rtryDNFy3kU4qUbKlwtQqqsygd0xX3mhKjOLn6mQK8wfu0RkoE0pBE0nAasRoHua+/QZ7A==} peerDependencies: react: '*' @@ -2348,7 +2341,7 @@ packages: dependencies: nanoid: 3.3.7 react: 18.2.0 - react-native: 0.73.2(@babel/core@7.23.7)(@babel/preset-env@7.23.8)(react@18.2.0) + react-native: 0.73.4(@babel/core@7.23.7)(@babel/preset-env@7.23.8)(react@18.2.0) dev: false /@graphql-typed-document-node/core@3.2.0(graphql@15.8.0): @@ -3100,19 +3093,19 @@ packages: react: 18.2.0 dev: false - /@react-native-community/cli-clean@12.3.0: - resolution: {integrity: sha512-iAgLCOWYRGh9ukr+eVQnhkV/OqN3V2EGd/in33Ggn/Mj4uO6+oUncXFwB+yjlyaUNz6FfjudhIz09yYGSF+9sg==} + /@react-native-community/cli-clean@12.3.2: + resolution: {integrity: sha512-90k2hCX0ddSFPT7EN7h5SZj0XZPXP0+y/++v262hssoey3nhurwF57NGWN0XAR0o9BSW7+mBfeInfabzDraO6A==} dependencies: - '@react-native-community/cli-tools': 12.3.0 + '@react-native-community/cli-tools': 12.3.2 chalk: 4.1.2 execa: 5.1.1 transitivePeerDependencies: - encoding - /@react-native-community/cli-config@12.3.0: - resolution: {integrity: sha512-BrTn5ndFD9uOxO8kxBQ32EpbtOvAsQExGPI7SokdI4Zlve70FziLtTq91LTlTUgMq1InVZn/jJb3VIDk6BTInQ==} + /@react-native-community/cli-config@12.3.2: + resolution: {integrity: sha512-UUCzDjQgvAVL/57rL7eOuFUhd+d+6qfM7V8uOegQFeFEmSmvUUDLYoXpBa5vAK9JgQtSqMBJ1Shmwao+/oElxQ==} dependencies: - '@react-native-community/cli-tools': 12.3.0 + '@react-native-community/cli-tools': 12.3.2 chalk: 4.1.2 cosmiconfig: 5.2.1 deepmerge: 4.3.1 @@ -3121,20 +3114,20 @@ packages: transitivePeerDependencies: - encoding - /@react-native-community/cli-debugger-ui@12.3.0: - resolution: {integrity: sha512-w3b0iwjQlk47GhZWHaeTG8kKH09NCMUJO729xSdMBXE8rlbm4kHpKbxQY9qKb6NlfWSJN4noGY+FkNZS2rRwnQ==} + /@react-native-community/cli-debugger-ui@12.3.2: + resolution: {integrity: sha512-nSWQUL+51J682DlfcC1bjkUbQbGvHCC25jpqTwHIjmmVjYCX1uHuhPSqQKgPNdvtfOkrkACxczd7kVMmetxY2Q==} dependencies: serve-static: 1.15.0 transitivePeerDependencies: - supports-color - /@react-native-community/cli-doctor@12.3.0: - resolution: {integrity: sha512-BPCwNNesoQMkKsxB08Ayy6URgGQ8Kndv6mMhIvJSNdST3J1+x3ehBHXzG9B9Vfi+DrTKRb8lmEl/b/7VkDlPkA==} + /@react-native-community/cli-doctor@12.3.2: + resolution: {integrity: sha512-GrAabdY4qtBX49knHFvEAdLtCjkmndjTeqhYO6BhsbAeKOtspcLT/0WRgdLIaKODRa61ADNB3K5Zm4dU0QrZOg==} dependencies: - '@react-native-community/cli-config': 12.3.0 - '@react-native-community/cli-platform-android': 12.3.0 - '@react-native-community/cli-platform-ios': 12.3.0 - '@react-native-community/cli-tools': 12.3.0 + '@react-native-community/cli-config': 12.3.2 + '@react-native-community/cli-platform-android': 12.3.2 + '@react-native-community/cli-platform-ios': 12.3.2 + '@react-native-community/cli-tools': 12.3.2 chalk: 4.1.2 command-exists: 1.2.9 deepmerge: 4.3.1 @@ -3151,21 +3144,21 @@ packages: transitivePeerDependencies: - encoding - /@react-native-community/cli-hermes@12.3.0: - resolution: {integrity: sha512-G6FxpeZBO4AimKZwtWR3dpXRqTvsmEqlIkkxgwthdzn3LbVjDVIXKpVYU9PkR5cnT+KuAUxO0WwthrJ6Nmrrlg==} + /@react-native-community/cli-hermes@12.3.2: + resolution: {integrity: sha512-SL6F9O8ghp4ESBFH2YAPLtIN39jdnvGBKnK4FGKpDCjtB3DnUmDsGFlH46S+GGt5M6VzfG2eeKEOKf3pZ6jUzA==} dependencies: - '@react-native-community/cli-platform-android': 12.3.0 - '@react-native-community/cli-tools': 12.3.0 + '@react-native-community/cli-platform-android': 12.3.2 + '@react-native-community/cli-tools': 12.3.2 chalk: 4.1.2 hermes-profile-transformer: 0.0.6 ip: 1.1.8 transitivePeerDependencies: - encoding - /@react-native-community/cli-platform-android@12.3.0: - resolution: {integrity: sha512-VU1NZw63+GLU2TnyQ919bEMThpHQ/oMFju9MCfrd3pyPJz4Sn+vc3NfnTDUVA5Z5yfLijFOkHIHr4vo/C9bjnw==} + /@react-native-community/cli-platform-android@12.3.2: + resolution: {integrity: sha512-MZ5nO8yi/N+Fj2i9BJcJ9C/ez+9/Ir7lQt49DWRo9YDmzye66mYLr/P2l/qxsixllbbDi7BXrlLpxaEhMrDopg==} dependencies: - '@react-native-community/cli-tools': 12.3.0 + '@react-native-community/cli-tools': 12.3.2 chalk: 4.1.2 execa: 5.1.1 fast-xml-parser: 4.3.3 @@ -3174,10 +3167,10 @@ packages: transitivePeerDependencies: - encoding - /@react-native-community/cli-platform-ios@12.3.0: - resolution: {integrity: sha512-H95Sgt3wT7L8V75V0syFJDtv4YgqK5zbu69ko4yrXGv8dv2EBi6qZP0VMmkqXDamoPm9/U7tDTdbcf26ctnLfg==} + /@react-native-community/cli-platform-ios@12.3.2: + resolution: {integrity: sha512-OcWEAbkev1IL6SUiQnM6DQdsvfsKZhRZtoBNSj9MfdmwotVZSOEZJ+IjZ1FR9ChvMWayO9ns/o8LgoQxr1ZXeg==} dependencies: - '@react-native-community/cli-tools': 12.3.0 + '@react-native-community/cli-tools': 12.3.2 chalk: 4.1.2 execa: 5.1.1 fast-xml-parser: 4.3.3 @@ -3186,14 +3179,14 @@ packages: transitivePeerDependencies: - encoding - /@react-native-community/cli-plugin-metro@12.3.0: - resolution: {integrity: sha512-tYNHIYnNmxrBcsqbE2dAnLMzlKI3Cp1p1xUgTrNaOMsGPDN1epzNfa34n6Nps3iwKElSL7Js91CzYNqgTalucA==} + /@react-native-community/cli-plugin-metro@12.3.2: + resolution: {integrity: sha512-FpFBwu+d2E7KRhYPTkKvQsWb2/JKsJv+t1tcqgQkn+oByhp+qGyXBobFB8/R3yYvRRDCSDhS+atWTJzk9TjM8g==} - /@react-native-community/cli-server-api@12.3.0: - resolution: {integrity: sha512-Rode8NrdyByC+lBKHHn+/W8Zu0c+DajJvLmOWbe2WY/ECvnwcd9MHHbu92hlT2EQaJ9LbLhGrSbQE3cQy9EOCw==} + /@react-native-community/cli-server-api@12.3.2: + resolution: {integrity: sha512-iwa7EO9XFA/OjI5pPLLpI/6mFVqv8L73kNck3CNOJIUCCveGXBKK0VMyOkXaf/BYnihgQrXh+x5cxbDbggr7+Q==} dependencies: - '@react-native-community/cli-debugger-ui': 12.3.0 - '@react-native-community/cli-tools': 12.3.0 + '@react-native-community/cli-debugger-ui': 12.3.2 + '@react-native-community/cli-tools': 12.3.2 compression: 1.7.4 connect: 3.7.0 errorhandler: 1.5.1 @@ -3207,8 +3200,8 @@ packages: - supports-color - utf-8-validate - /@react-native-community/cli-tools@12.3.0: - resolution: {integrity: sha512-2GafnCr8D88VdClwnm9KZfkEb+lzVoFdr/7ybqhdeYM0Vnt/tr2N+fM1EQzwI1DpzXiBzTYemw8GjRq+Utcz2Q==} + /@react-native-community/cli-tools@12.3.2: + resolution: {integrity: sha512-nDH7vuEicHI2TI0jac/DjT3fr977iWXRdgVAqPZFFczlbs7A8GQvEdGnZ1G8dqRUmg+kptw0e4hwczAOG89JzQ==} dependencies: appdirsjs: 1.2.7 chalk: 4.1.2 @@ -3223,25 +3216,25 @@ packages: transitivePeerDependencies: - encoding - /@react-native-community/cli-types@12.3.0: - resolution: {integrity: sha512-MgOkmrXH4zsGxhte4YqKL7d+N8ZNEd3w1wo56MZlhu5WabwCJh87wYpU5T8vyfujFLYOFuFK5jjlcbs8F4/WDw==} + /@react-native-community/cli-types@12.3.2: + resolution: {integrity: sha512-9D0UEFqLW8JmS16mjHJxUJWX8E+zJddrHILSH8AJHZ0NNHv4u2DXKdb0wFLMobFxGNxPT+VSOjc60fGvXzWHog==} dependencies: joi: 17.12.0 - /@react-native-community/cli@12.3.0: - resolution: {integrity: sha512-XeQohi2E+S2+MMSz97QcEZ/bWpi8sfKiQg35XuYeJkc32Til2g0b97jRpn0/+fV0BInHoG1CQYWwHA7opMsrHg==} + /@react-native-community/cli@12.3.2: + resolution: {integrity: sha512-WgoUWwLDcf/G1Su2COUUVs3RzAwnV/vUTdISSpAUGgSc57mPabaAoUctKTnfYEhCnE3j02k3VtaVPwCAFRO3TQ==} engines: {node: '>=18'} hasBin: true dependencies: - '@react-native-community/cli-clean': 12.3.0 - '@react-native-community/cli-config': 12.3.0 - '@react-native-community/cli-debugger-ui': 12.3.0 - '@react-native-community/cli-doctor': 12.3.0 - '@react-native-community/cli-hermes': 12.3.0 - '@react-native-community/cli-plugin-metro': 12.3.0 - '@react-native-community/cli-server-api': 12.3.0 - '@react-native-community/cli-tools': 12.3.0 - '@react-native-community/cli-types': 12.3.0 + '@react-native-community/cli-clean': 12.3.2 + '@react-native-community/cli-config': 12.3.2 + '@react-native-community/cli-debugger-ui': 12.3.2 + '@react-native-community/cli-doctor': 12.3.2 + '@react-native-community/cli-hermes': 12.3.2 + '@react-native-community/cli-plugin-metro': 12.3.2 + '@react-native-community/cli-server-api': 12.3.2 + '@react-native-community/cli-tools': 12.3.2 + '@react-native-community/cli-types': 12.3.2 chalk: 4.1.2 commander: 9.5.0 deepmerge: 4.3.1 @@ -3300,6 +3293,16 @@ packages: transitivePeerDependencies: - '@babel/preset-env' - supports-color + dev: false + + /@react-native/babel-plugin-codegen@0.73.4(@babel/preset-env@7.23.8): + resolution: {integrity: sha512-XzRd8MJGo4Zc5KsphDHBYJzS1ryOHg8I2gOZDAUCGcwLFhdyGu1zBNDJYH2GFyDrInn9TzAbRIf3d4O+eltXQQ==} + engines: {node: '>=18'} + dependencies: + '@react-native/codegen': 0.73.3(@babel/preset-env@7.23.8) + transitivePeerDependencies: + - '@babel/preset-env' + - supports-color /@react-native/babel-preset@0.73.19(@babel/core@7.23.7)(@babel/preset-env@7.23.8): resolution: {integrity: sha512-ujon01uMOREZecIltQxPDmJ6xlVqAUFGI/JCSpeVYdxyXBoBH5dBb0ihj7h6LKH1q1jsnO9z4MxfddtypKkIbg==} @@ -3352,6 +3355,59 @@ packages: transitivePeerDependencies: - '@babel/preset-env' - supports-color + dev: false + + /@react-native/babel-preset@0.73.21(@babel/core@7.23.7)(@babel/preset-env@7.23.8): + resolution: {integrity: sha512-WlFttNnySKQMeujN09fRmrdWqh46QyJluM5jdtDNrkl/2Hx6N4XeDUGhABvConeK95OidVO7sFFf7sNebVXogA==} + engines: {node: '>=18'} + peerDependencies: + '@babel/core': '*' + dependencies: + '@babel/core': 7.23.7 + '@babel/plugin-proposal-async-generator-functions': 7.20.7(@babel/core@7.23.7) + '@babel/plugin-proposal-class-properties': 7.18.6(@babel/core@7.23.7) + '@babel/plugin-proposal-export-default-from': 7.23.3(@babel/core@7.23.7) + '@babel/plugin-proposal-nullish-coalescing-operator': 7.18.6(@babel/core@7.23.7) + '@babel/plugin-proposal-numeric-separator': 7.18.6(@babel/core@7.23.7) + '@babel/plugin-proposal-object-rest-spread': 7.20.7(@babel/core@7.23.7) + '@babel/plugin-proposal-optional-catch-binding': 7.18.6(@babel/core@7.23.7) + '@babel/plugin-proposal-optional-chaining': 7.21.0(@babel/core@7.23.7) + '@babel/plugin-syntax-dynamic-import': 7.8.3(@babel/core@7.23.7) + '@babel/plugin-syntax-export-default-from': 7.23.3(@babel/core@7.23.7) + '@babel/plugin-syntax-flow': 7.23.3(@babel/core@7.23.7) + '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.23.7) + '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.23.7) + '@babel/plugin-transform-arrow-functions': 7.23.3(@babel/core@7.23.7) + '@babel/plugin-transform-async-to-generator': 7.23.3(@babel/core@7.23.7) + '@babel/plugin-transform-block-scoping': 7.23.4(@babel/core@7.23.7) + '@babel/plugin-transform-classes': 7.23.8(@babel/core@7.23.7) + '@babel/plugin-transform-computed-properties': 7.23.3(@babel/core@7.23.7) + '@babel/plugin-transform-destructuring': 7.23.3(@babel/core@7.23.7) + '@babel/plugin-transform-flow-strip-types': 7.23.3(@babel/core@7.23.7) + '@babel/plugin-transform-function-name': 7.23.3(@babel/core@7.23.7) + '@babel/plugin-transform-literals': 7.23.3(@babel/core@7.23.7) + '@babel/plugin-transform-modules-commonjs': 7.23.3(@babel/core@7.23.7) + '@babel/plugin-transform-named-capturing-groups-regex': 7.22.5(@babel/core@7.23.7) + '@babel/plugin-transform-parameters': 7.23.3(@babel/core@7.23.7) + '@babel/plugin-transform-private-methods': 7.23.3(@babel/core@7.23.7) + '@babel/plugin-transform-private-property-in-object': 7.23.4(@babel/core@7.23.7) + '@babel/plugin-transform-react-display-name': 7.23.3(@babel/core@7.23.7) + '@babel/plugin-transform-react-jsx': 7.23.4(@babel/core@7.23.7) + '@babel/plugin-transform-react-jsx-self': 7.23.3(@babel/core@7.23.7) + '@babel/plugin-transform-react-jsx-source': 7.23.3(@babel/core@7.23.7) + '@babel/plugin-transform-runtime': 7.23.7(@babel/core@7.23.7) + '@babel/plugin-transform-shorthand-properties': 7.23.3(@babel/core@7.23.7) + '@babel/plugin-transform-spread': 7.23.3(@babel/core@7.23.7) + '@babel/plugin-transform-sticky-regex': 7.23.3(@babel/core@7.23.7) + '@babel/plugin-transform-typescript': 7.23.6(@babel/core@7.23.7) + '@babel/plugin-transform-unicode-regex': 7.23.3(@babel/core@7.23.7) + '@babel/template': 7.22.15 + '@react-native/babel-plugin-codegen': 0.73.4(@babel/preset-env@7.23.8) + babel-plugin-transform-flow-enums: 0.0.2(@babel/core@7.23.7) + react-refresh: 0.14.0 + transitivePeerDependencies: + - '@babel/preset-env' + - supports-color /@react-native/codegen@0.73.2(@babel/preset-env@7.23.8): resolution: {integrity: sha512-lfy8S7umhE3QLQG5ViC4wg5N1Z+E6RnaeIw8w1voroQsXXGPB72IBozh8dAHR3+ceTxIU0KX3A8OpJI8e1+HpQ==} @@ -3369,15 +3425,33 @@ packages: nullthrows: 1.1.1 transitivePeerDependencies: - supports-color + dev: false + + /@react-native/codegen@0.73.3(@babel/preset-env@7.23.8): + resolution: {integrity: sha512-sxslCAAb8kM06vGy9Jyh4TtvjhcP36k/rvj2QE2Jdhdm61KvfafCATSIsOfc0QvnduWFcpXUPvAVyYwuv7PYDg==} + engines: {node: '>=18'} + peerDependencies: + '@babel/preset-env': ^7.1.6 + dependencies: + '@babel/parser': 7.23.6 + '@babel/preset-env': 7.23.8(@babel/core@7.23.7) + flow-parser: 0.206.0 + glob: 7.2.3 + invariant: 2.2.4 + jscodeshift: 0.14.0(@babel/preset-env@7.23.8) + mkdirp: 0.5.6 + nullthrows: 1.1.1 + transitivePeerDependencies: + - supports-color - /@react-native/community-cli-plugin@0.73.12(@babel/core@7.23.7)(@babel/preset-env@7.23.8): - resolution: {integrity: sha512-xWU06OkC1cX++Duh/cD/Wv+oZ0oSY3yqbtxAqQA2H3Q+MQltNNJM6MqIHt1VOZSabRf/LVlR1JL6U9TXJirkaw==} + /@react-native/community-cli-plugin@0.73.16(@babel/core@7.23.7)(@babel/preset-env@7.23.8): + resolution: {integrity: sha512-eNH3v3qJJF6f0n/Dck90qfC9gVOR4coAXMTdYECO33GfgjTi+73vf/SBqlXw9HICH/RNZYGPM3wca4FRF7TYeQ==} engines: {node: '>=18'} dependencies: - '@react-native-community/cli-server-api': 12.3.0 - '@react-native-community/cli-tools': 12.3.0 + '@react-native-community/cli-server-api': 12.3.2 + '@react-native-community/cli-tools': 12.3.2 '@react-native/dev-middleware': 0.73.7 - '@react-native/metro-babel-transformer': 0.73.13(@babel/core@7.23.7)(@babel/preset-env@7.23.8) + '@react-native/metro-babel-transformer': 0.73.15(@babel/core@7.23.7)(@babel/preset-env@7.23.8) chalk: 4.1.2 execa: 5.1.1 metro: 0.80.4 @@ -3423,14 +3497,14 @@ packages: resolution: {integrity: sha512-ewMwGcumrilnF87H4jjrnvGZEaPFCAC4ebraEK+CurDDmwST/bIicI4hrOAv+0Z0F7DEK4O4H7r8q9vH7IbN4g==} engines: {node: '>=18'} - /@react-native/metro-babel-transformer@0.73.13(@babel/core@7.23.7)(@babel/preset-env@7.23.8): - resolution: {integrity: sha512-k9AQifogQfgUXPlqQSoMtX2KUhniw4XvJl+nZ4hphCH7qiMDAwuP8OmkJbz5E/N+Ro9OFuLE7ax4GlwxaTsAWg==} + /@react-native/metro-babel-transformer@0.73.15(@babel/core@7.23.7)(@babel/preset-env@7.23.8): + resolution: {integrity: sha512-LlkSGaXCz+xdxc9819plmpsl4P4gZndoFtpjN3GMBIu6f7TBV0GVbyJAU4GE8fuAWPVSVL5ArOcdkWKSbI1klw==} engines: {node: '>=18'} peerDependencies: '@babel/core': '*' dependencies: '@babel/core': 7.23.7 - '@react-native/babel-preset': 0.73.19(@babel/core@7.23.7)(@babel/preset-env@7.23.8) + '@react-native/babel-preset': 0.73.21(@babel/core@7.23.7)(@babel/preset-env@7.23.8) hermes-parser: 0.15.0 nullthrows: 1.1.1 transitivePeerDependencies: @@ -3443,7 +3517,7 @@ packages: /@react-native/normalize-colors@0.73.2: resolution: {integrity: sha512-bRBcb2T+I88aG74LMVHaKms2p/T8aQd8+BZ7LuuzXlRfog1bMWWn/C5i0HVuvW4RPtXQYgIlGiXVDy9Ir1So/w==} - /@react-native/virtualized-lists@0.73.4(react-native@0.73.2): + /@react-native/virtualized-lists@0.73.4(react-native@0.73.4): resolution: {integrity: sha512-HpmLg1FrEiDtrtAbXiwCgXFYyloK/dOIPIuWW3fsqukwJEWAiTzm1nXGJ7xPU5XTHiWZ4sKup5Ebaj8z7iyWog==} engines: {node: '>=18'} peerDependencies: @@ -3451,9 +3525,9 @@ packages: dependencies: invariant: 2.2.4 nullthrows: 1.1.1 - react-native: 0.73.2(@babel/core@7.23.7)(@babel/preset-env@7.23.8)(react@18.2.0) + react-native: 0.73.4(@babel/core@7.23.7)(@babel/preset-env@7.23.8)(react@18.2.0) - /@react-navigation/bottom-tabs@6.5.11(@react-navigation/native@6.1.9)(react-native-safe-area-context@4.8.2)(react-native-screens@3.29.0)(react-native@0.73.2)(react@18.2.0): + /@react-navigation/bottom-tabs@6.5.11(@react-navigation/native@6.1.9)(react-native-safe-area-context@4.8.2)(react-native-screens@3.29.0)(react-native@0.73.4)(react@18.2.0): resolution: {integrity: sha512-CBN/NOdxnMvmjw+AJQI1kltOYaClTZmGec5pQ3ZNTPX86ytbIOylDIITKMfTgHZcIEFQDymx1SHeS++PIL3Szw==} peerDependencies: '@react-navigation/native': ^6.0.0 @@ -3462,13 +3536,13 @@ packages: react-native-safe-area-context: '>= 3.0.0' react-native-screens: '>= 3.0.0' dependencies: - '@react-navigation/elements': 1.3.21(@react-navigation/native@6.1.9)(react-native-safe-area-context@4.8.2)(react-native@0.73.2)(react@18.2.0) - '@react-navigation/native': 6.1.9(react-native@0.73.2)(react@18.2.0) + '@react-navigation/elements': 1.3.21(@react-navigation/native@6.1.9)(react-native-safe-area-context@4.8.2)(react-native@0.73.4)(react@18.2.0) + '@react-navigation/native': 6.1.9(react-native@0.73.4)(react@18.2.0) color: 4.2.3 react: 18.2.0 - react-native: 0.73.2(@babel/core@7.23.7)(@babel/preset-env@7.23.8)(react@18.2.0) - react-native-safe-area-context: 4.8.2(react-native@0.73.2)(react@18.2.0) - react-native-screens: 3.29.0(react-native@0.73.2)(react@18.2.0) + react-native: 0.73.4(@babel/core@7.23.7)(@babel/preset-env@7.23.8)(react@18.2.0) + react-native-safe-area-context: 4.8.2(react-native@0.73.4)(react@18.2.0) + react-native-screens: 3.29.0(react-native@0.73.4)(react@18.2.0) warn-once: 0.1.1 dev: false @@ -3486,7 +3560,7 @@ packages: use-latest-callback: 0.1.9(react@18.2.0) dev: false - /@react-navigation/elements@1.3.21(@react-navigation/native@6.1.9)(react-native-safe-area-context@4.8.2)(react-native@0.73.2)(react@18.2.0): + /@react-navigation/elements@1.3.21(@react-navigation/native@6.1.9)(react-native-safe-area-context@4.8.2)(react-native@0.73.4)(react@18.2.0): resolution: {integrity: sha512-eyS2C6McNR8ihUoYfc166O1D8VYVh9KIl0UQPI8/ZJVsStlfSTgeEEh+WXge6+7SFPnZ4ewzEJdSAHH+jzcEfg==} peerDependencies: '@react-navigation/native': ^6.0.0 @@ -3494,13 +3568,13 @@ packages: react-native: '*' react-native-safe-area-context: '>= 3.0.0' dependencies: - '@react-navigation/native': 6.1.9(react-native@0.73.2)(react@18.2.0) + '@react-navigation/native': 6.1.9(react-native@0.73.4)(react@18.2.0) react: 18.2.0 - react-native: 0.73.2(@babel/core@7.23.7)(@babel/preset-env@7.23.8)(react@18.2.0) - react-native-safe-area-context: 4.8.2(react-native@0.73.2)(react@18.2.0) + react-native: 0.73.4(@babel/core@7.23.7)(@babel/preset-env@7.23.8)(react@18.2.0) + react-native-safe-area-context: 4.8.2(react-native@0.73.4)(react@18.2.0) dev: false - /@react-navigation/native-stack@6.9.17(@react-navigation/native@6.1.9)(react-native-safe-area-context@4.8.2)(react-native-screens@3.29.0)(react-native@0.73.2)(react@18.2.0): + /@react-navigation/native-stack@6.9.17(@react-navigation/native@6.1.9)(react-native-safe-area-context@4.8.2)(react-native-screens@3.29.0)(react-native@0.73.4)(react@18.2.0): resolution: {integrity: sha512-X8p8aS7JptQq7uZZNFEvfEcPf6tlK4PyVwYDdryRbG98B4bh2wFQYMThxvqa+FGEN7USEuHdv2mF0GhFKfX0ew==} peerDependencies: '@react-navigation/native': ^6.0.0 @@ -3509,16 +3583,16 @@ packages: react-native-safe-area-context: '>= 3.0.0' react-native-screens: '>= 3.0.0' dependencies: - '@react-navigation/elements': 1.3.21(@react-navigation/native@6.1.9)(react-native-safe-area-context@4.8.2)(react-native@0.73.2)(react@18.2.0) - '@react-navigation/native': 6.1.9(react-native@0.73.2)(react@18.2.0) + '@react-navigation/elements': 1.3.21(@react-navigation/native@6.1.9)(react-native-safe-area-context@4.8.2)(react-native@0.73.4)(react@18.2.0) + '@react-navigation/native': 6.1.9(react-native@0.73.4)(react@18.2.0) react: 18.2.0 - react-native: 0.73.2(@babel/core@7.23.7)(@babel/preset-env@7.23.8)(react@18.2.0) - react-native-safe-area-context: 4.8.2(react-native@0.73.2)(react@18.2.0) - react-native-screens: 3.29.0(react-native@0.73.2)(react@18.2.0) + react-native: 0.73.4(@babel/core@7.23.7)(@babel/preset-env@7.23.8)(react@18.2.0) + react-native-safe-area-context: 4.8.2(react-native@0.73.4)(react@18.2.0) + react-native-screens: 3.29.0(react-native@0.73.4)(react@18.2.0) warn-once: 0.1.1 dev: false - /@react-navigation/native@6.1.9(react-native@0.73.2)(react@18.2.0): + /@react-navigation/native@6.1.9(react-native@0.73.4)(react@18.2.0): resolution: {integrity: sha512-AMuJDpwXE7UlfyhIXaUCCynXmv69Kb8NzKgKJO7v0k0L+u6xUTbt6xvshmJ79vsvaFyaEH9Jg5FMzek5/S5qNw==} peerDependencies: react: '*' @@ -3529,7 +3603,7 @@ packages: fast-deep-equal: 3.1.3 nanoid: 3.3.7 react: 18.2.0 - react-native: 0.73.2(@babel/core@7.23.7)(@babel/preset-env@7.23.8)(react@18.2.0) + react-native: 0.73.4(@babel/core@7.23.7)(@babel/preset-env@7.23.8)(react@18.2.0) dev: false /@react-navigation/routers@6.1.9: @@ -3634,7 +3708,7 @@ packages: join-component: 1.1.0 dev: false - /@shopify/flash-list@1.6.3(@babel/runtime@7.23.8)(react-native@0.73.2)(react@18.2.0): + /@shopify/flash-list@1.6.3(@babel/runtime@7.23.8)(react-native@0.73.4)(react@18.2.0): resolution: {integrity: sha512-XM2iu4CeD9SOEUxaGG3UkxfUxGPWG9yacga1yQSgskAjUsRDFTsD3y4Dyon9n8MfDwgrRpEwuijd+7NeQQoWaQ==} peerDependencies: '@babel/runtime': '*' @@ -3643,8 +3717,8 @@ packages: dependencies: '@babel/runtime': 7.23.8 react: 18.2.0 - react-native: 0.73.2(@babel/core@7.23.7)(@babel/preset-env@7.23.8)(react@18.2.0) - recyclerlistview: 4.2.0(react-native@0.73.2)(react@18.2.0) + react-native: 0.73.4(@babel/core@7.23.7)(@babel/preset-env@7.23.8)(react@18.2.0) + recyclerlistview: 4.2.0(react-native@0.73.4)(react@18.2.0) tslib: 2.4.0 dev: false @@ -3705,7 +3779,7 @@ packages: resolution: {integrity: sha512-DJSilV5+ytBP1FbFcEJovv4rnnm/CokuVvrBEtW/Va9DvuJ3HksbXUJEpI0aV1KtuL4ZoO9AVE6PyNLzF7tLeA==} dev: false - /@tanstack/react-query@4.36.1(react-dom@18.2.0)(react-native@0.73.2)(react@18.2.0): + /@tanstack/react-query@4.36.1(react-dom@18.2.0)(react-native@0.73.4)(react@18.2.0): resolution: {integrity: sha512-y7ySVHFyyQblPl3J3eQBWpXZkliroki3ARnBKsdJchlgt7yJLRDUcf4B8soufgiYt3pEQIkBWBx1N9/ZPIeUWw==} peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 @@ -3720,7 +3794,7 @@ packages: '@tanstack/query-core': 4.36.1 react: 18.2.0 react-dom: 18.2.0(react@18.2.0) - react-native: 0.73.2(@babel/core@7.23.7)(@babel/preset-env@7.23.8)(react@18.2.0) + react-native: 0.73.4(@babel/core@7.23.7)(@babel/preset-env@7.23.8)(react@18.2.0) use-sync-external-store: 1.2.0(react@18.2.0) dev: false @@ -3739,7 +3813,7 @@ packages: redent: 3.0.0 dev: true - /@testing-library/jest-native@5.4.3(react-native@0.73.2)(react-test-renderer@18.2.0)(react@18.2.0): + /@testing-library/jest-native@5.4.3(react-native@0.73.4)(react-test-renderer@18.2.0)(react@18.2.0): resolution: {integrity: sha512-/sSDGaOuE+PJ1Z9Kp4u7PQScSVVXGud59I/qsBFFJvIbcn4P6yYw6cBnBmbPF+X9aRIsTJRDl6gzw5ZkJNm66w==} peerDependencies: react: '>=16.0.0' @@ -3751,11 +3825,11 @@ packages: jest-matcher-utils: 29.7.0 pretty-format: 29.7.0 react: 18.2.0 - react-native: 0.73.2(@babel/core@7.23.7)(@babel/preset-env@7.23.8)(react@18.2.0) + react-native: 0.73.4(@babel/core@7.23.7)(@babel/preset-env@7.23.8)(react@18.2.0) react-test-renderer: 18.2.0(react@18.2.0) redent: 3.0.0 - /@testing-library/react-native@11.5.4(jest@29.7.0)(react-native@0.73.2)(react-test-renderer@18.2.0)(react@18.2.0): + /@testing-library/react-native@11.5.4(jest@29.7.0)(react-native@0.73.4)(react-test-renderer@18.2.0)(react@18.2.0): resolution: {integrity: sha512-6DRzMHqili5pp1JRm7fh80SAP48aR25b37gohlLoKbqGBpDw8BbZTad7Luzktm9MU5DQUm7xyzg07Z1CyveVFA==} peerDependencies: jest: '>=28.0.0' @@ -3769,7 +3843,7 @@ packages: jest: 29.7.0(@types/node@20.5.1)(ts-node@10.9.2) pretty-format: 29.7.0 react: 18.2.0 - react-native: 0.73.2(@babel/core@7.23.7)(@babel/preset-env@7.23.8)(react@18.2.0) + react-native: 0.73.4(@babel/core@7.23.7)(@babel/preset-env@7.23.8)(react@18.2.0) react-test-renderer: 18.2.0(react@18.2.0) dev: true @@ -6548,13 +6622,13 @@ packages: jest-util: 29.7.0 dev: true - /expo-asset@9.0.2(expo@50.0.5): + /expo-asset@9.0.2(expo@50.0.6): resolution: {integrity: sha512-PzYKME1MgUOoUvwtdzhAyXkjXOXGiSYqGKG/MsXwWr0Ef5wlBaBm2DCO9V6KYbng5tBPFu6hTjoRNil1tBOSow==} dependencies: '@react-native/assets-registry': 0.73.1 blueimp-md5: 2.19.0 - expo-constants: 15.4.5(expo@50.0.5) - expo-file-system: 16.0.5(expo@50.0.5) + expo-constants: 15.4.5(expo@50.0.6) + expo-file-system: 16.0.6(expo@50.0.6) invariant: 2.2.4 md5-file: 3.2.3 transitivePeerDependencies: @@ -6562,146 +6636,146 @@ packages: - supports-color dev: false - /expo-build-properties@0.11.1(expo@50.0.5): + /expo-build-properties@0.11.1(expo@50.0.6): resolution: {integrity: sha512-m4j4aEjFaDuBE6KWYMxDhWgLzzSmpE7uHKAwtvXyNmRK+6JKF0gjiXi0sXgI5ngNppDQpsyPFMvqG7uQpRuCuw==} peerDependencies: expo: '*' dependencies: ajv: 8.12.0 - expo: 50.0.5(@babel/core@7.23.7)(@react-native/babel-preset@0.73.19) + expo: 50.0.6(@babel/core@7.23.7)(@react-native/babel-preset@0.73.21) semver: 7.5.4 dev: false - /expo-constants@15.4.5(expo@50.0.5): + /expo-constants@15.4.5(expo@50.0.6): resolution: {integrity: sha512-1pVVjwk733hbbIjtQcvUFCme540v4gFemdNlaxM2UXKbfRCOh2hzgKN5joHMOysoXQe736TTUrRj7UaZI5Yyhg==} peerDependencies: expo: '*' dependencies: '@expo/config': 8.5.4 - expo: 50.0.5(@babel/core@7.23.7)(@react-native/babel-preset@0.73.19) + expo: 50.0.6(@babel/core@7.23.7)(@react-native/babel-preset@0.73.21) transitivePeerDependencies: - supports-color dev: false - /expo-dev-client@3.3.8(expo@50.0.5): + /expo-dev-client@3.3.8(expo@50.0.6): resolution: {integrity: sha512-6JpcxncWiWwq1w6SPrePpTa20z3D1qmAMMHd8f05lSCUPVBn4jTwpzrKEpGaA3EubLE5SEdxPVmvmyWw/oFFMQ==} peerDependencies: expo: '*' dependencies: - expo: 50.0.5(@babel/core@7.23.7)(@react-native/babel-preset@0.73.19) - expo-dev-launcher: 3.6.6(expo@50.0.5) - expo-dev-menu: 4.5.5(expo@50.0.5) - expo-dev-menu-interface: 1.7.2(expo@50.0.5) - expo-manifests: 0.13.2(expo@50.0.5) - expo-updates-interface: 0.15.3(expo@50.0.5) + expo: 50.0.6(@babel/core@7.23.7)(@react-native/babel-preset@0.73.21) + expo-dev-launcher: 3.6.6(expo@50.0.6) + expo-dev-menu: 4.5.5(expo@50.0.6) + expo-dev-menu-interface: 1.7.2(expo@50.0.6) + expo-manifests: 0.13.2(expo@50.0.6) + expo-updates-interface: 0.15.3(expo@50.0.6) transitivePeerDependencies: - supports-color dev: false - /expo-dev-launcher@3.6.6(expo@50.0.5): + /expo-dev-launcher@3.6.6(expo@50.0.6): resolution: {integrity: sha512-jVI1YZS1YJTrniIL53BOxSZUMyJCeDLuS9SlRx1vC3tnTTN3srg5pU/zCK/DifwbF7i6NtA1iLPSBVu2K4040A==} peerDependencies: expo: '*' dependencies: ajv: 8.11.0 - expo: 50.0.5(@babel/core@7.23.7)(@react-native/babel-preset@0.73.19) - expo-dev-menu: 4.5.5(expo@50.0.5) - expo-manifests: 0.13.2(expo@50.0.5) + expo: 50.0.6(@babel/core@7.23.7)(@react-native/babel-preset@0.73.21) + expo-dev-menu: 4.5.5(expo@50.0.6) + expo-manifests: 0.13.2(expo@50.0.6) resolve-from: 5.0.0 semver: 7.5.4 transitivePeerDependencies: - supports-color dev: false - /expo-dev-menu-interface@1.7.2(expo@50.0.5): + /expo-dev-menu-interface@1.7.2(expo@50.0.6): resolution: {integrity: sha512-V/geSB9rW0IPTR+d7E5CcvkV0uVUCE7SMHZqE/J0/dH06Wo8AahB16fimXeh5/hTL2Qztq8CQ41xpFUBoA9TEw==} peerDependencies: expo: '*' dependencies: - expo: 50.0.5(@babel/core@7.23.7)(@react-native/babel-preset@0.73.19) + expo: 50.0.6(@babel/core@7.23.7)(@react-native/babel-preset@0.73.21) dev: false - /expo-dev-menu@4.5.5(expo@50.0.5): + /expo-dev-menu@4.5.5(expo@50.0.6): resolution: {integrity: sha512-PcbI/SqAvueOIEtR1O0s+WvVD7yizQSqXisDSkBrTym3u8XZSN+K730kz2Z64ukY9YIPG4qWR4sd+9rcjsbMWw==} peerDependencies: expo: '*' dependencies: - expo: 50.0.5(@babel/core@7.23.7)(@react-native/babel-preset@0.73.19) - expo-dev-menu-interface: 1.7.2(expo@50.0.5) + expo: 50.0.6(@babel/core@7.23.7)(@react-native/babel-preset@0.73.21) + expo-dev-menu-interface: 1.7.2(expo@50.0.6) semver: 7.5.4 dev: false - /expo-file-system@16.0.5(expo@50.0.5): - resolution: {integrity: sha512-JpKMbKfwTaMCbwUwq7MwcSbPR7r+IqZEL3RFam3ClPHDtKLnlEoywREeaDsWjSZb7dS25hG3WqXspfTuugCDvg==} + /expo-file-system@16.0.6(expo@50.0.6): + resolution: {integrity: sha512-ATCHL7nEg2WwKeamW/SDTR9jBEqM5wncFq594ftKS5QFmhKIrX48d9jyPFGnNq+6h8AGPg4QKh2KCA4OY49L4g==} peerDependencies: expo: '*' dependencies: - expo: 50.0.5(@babel/core@7.23.7)(@react-native/babel-preset@0.73.19) + expo: 50.0.6(@babel/core@7.23.7)(@react-native/babel-preset@0.73.21) dev: false - /expo-font@11.10.2(expo@50.0.5): + /expo-font@11.10.2(expo@50.0.6): resolution: {integrity: sha512-AE0Q0LiWiVosQ/jlKUPoWoob7p3GwYM2xmLoUkuopO9RYh9NL1hZKHiMKcWBZyDG8Gww1GtBQwh7ZREST8+jjQ==} peerDependencies: expo: '*' dependencies: - expo: 50.0.5(@babel/core@7.23.7)(@react-native/babel-preset@0.73.19) + expo: 50.0.6(@babel/core@7.23.7)(@react-native/babel-preset@0.73.21) fontfaceobserver: 2.3.0 dev: false - /expo-image@1.10.5(expo@50.0.5): - resolution: {integrity: sha512-IiqSU9FxpoNeSFbtVLHdLq9MIHtAUYI1hcNGXoj3fpNpPEUdjN41mPftLQPIszfWWBxgrjUu4trIVXuf/Ijy+w==} + /expo-image@1.10.6(expo@50.0.6): + resolution: {integrity: sha512-vcnAIym1eU8vQgV1re1E7rVQZStJimBa4aPDhjFfzMzbddAF7heJuagyewiUkTzbZUwYzPaZAie6VJPyWx9Ueg==} peerDependencies: expo: '*' dependencies: '@react-native/assets-registry': 0.73.1 - expo: 50.0.5(@babel/core@7.23.7)(@react-native/babel-preset@0.73.19) + expo: 50.0.6(@babel/core@7.23.7)(@react-native/babel-preset@0.73.21) dev: false /expo-json-utils@0.12.3: resolution: {integrity: sha512-4pypQdinpNc6XY9wsZk56njvzDh+B/9mISr7FPP3CVk1QGB1nSLh883/BCDSgnsephATZkC5HG+cdE60kCAR6A==} dev: false - /expo-keep-awake@12.8.2(expo@50.0.5): + /expo-keep-awake@12.8.2(expo@50.0.6): resolution: {integrity: sha512-uiQdGbSX24Pt8nGbnmBtrKq6xL/Tm3+DuDRGBk/3ZE/HlizzNosGRIufIMJ/4B4FRw4dw8KU81h2RLuTjbay6g==} peerDependencies: expo: '*' dependencies: - expo: 50.0.5(@babel/core@7.23.7)(@react-native/babel-preset@0.73.19) + expo: 50.0.6(@babel/core@7.23.7)(@react-native/babel-preset@0.73.21) dev: false - /expo-linking@6.2.2(expo@50.0.5): + /expo-linking@6.2.2(expo@50.0.6): resolution: {integrity: sha512-FEe6lP4f7xFT/vjoHRG+tt6EPVtkEGaWNK1smpaUevmNdyCJKqW0PDB8o8sfG6y7fly8ULe8qg3HhKh5J7aqUQ==} dependencies: - expo-constants: 15.4.5(expo@50.0.5) + expo-constants: 15.4.5(expo@50.0.6) invariant: 2.2.4 transitivePeerDependencies: - expo - supports-color dev: false - /expo-localization@14.8.3(expo@50.0.5): + /expo-localization@14.8.3(expo@50.0.6): resolution: {integrity: sha512-leg1e+7ocUgfNWa7Men/g16waXtdSpBMR9tCdv3CG4wztmFU8C+87VAnnVkvHi4CCUkTLzhP3y0FcE6KIWTwdw==} peerDependencies: expo: '*' dependencies: - expo: 50.0.5(@babel/core@7.23.7)(@react-native/babel-preset@0.73.19) + expo: 50.0.6(@babel/core@7.23.7)(@react-native/babel-preset@0.73.21) rtl-detect: 1.1.2 dev: false - /expo-manifests@0.13.2(expo@50.0.5): + /expo-manifests@0.13.2(expo@50.0.6): resolution: {integrity: sha512-l0Sia1WmLULx8V41K8RzGLsFoTe4qqthPRGpHjItsYn8ZB6lRrdTBM9OYp2McIflgqN1HAimUCQMFIwJyH+UmA==} peerDependencies: expo: '*' dependencies: '@expo/config': 8.5.4 - expo: 50.0.5(@babel/core@7.23.7)(@react-native/babel-preset@0.73.19) + expo: 50.0.6(@babel/core@7.23.7)(@react-native/babel-preset@0.73.21) expo-json-utils: 0.12.3 transitivePeerDependencies: - supports-color dev: false - /expo-modules-autolinking@1.10.2: - resolution: {integrity: sha512-OEeoz0+zGx5EJwGtDm9pSywCr+gUCaisZV0mNkK7V3fuRl+EVPBSsI+957JwAc4ZxVps95jy28eLcRRtQ33yVg==} + /expo-modules-autolinking@1.10.3: + resolution: {integrity: sha512-pn4n2Dl4iRh/zUeiChjRIe1C7EqOw1qhccr85viQV7W6l5vgRpY0osE51ij5LKg/kJmGRcJfs12+PwbdTplbKw==} hasBin: true dependencies: '@expo/config': 8.5.4 @@ -6720,8 +6794,8 @@ packages: invariant: 2.2.4 dev: false - /expo-router@3.4.6(@testing-library/jest-native@5.4.3)(expo-constants@15.4.5)(expo-linking@6.2.2)(expo-modules-autolinking@1.10.2)(expo-status-bar@1.11.1)(expo@50.0.5)(react-dom@18.2.0)(react-native-reanimated@3.6.2)(react-native-safe-area-context@4.8.2)(react-native-screens@3.29.0)(react-native@0.73.2)(react@18.2.0): - resolution: {integrity: sha512-yxl0QE4KAqLmLyH8AxWsGSV3M34jsAE8X75cOB2oaK0+Pu9VHSUf6w3iRi93IiJ0rOUXm8jKrjhfhZOrrNh7EA==} + /expo-router@3.4.7(@testing-library/jest-native@5.4.3)(expo-constants@15.4.5)(expo-linking@6.2.2)(expo-modules-autolinking@1.10.3)(expo-status-bar@1.11.1)(expo@50.0.6)(react-dom@18.2.0)(react-native-reanimated@3.6.2)(react-native-safe-area-context@4.8.2)(react-native-screens@3.29.0)(react-native@0.73.4)(react@18.2.0): + resolution: {integrity: sha512-B1VLols+ErUqWtRHi9j/sQhxxwlsM7AJN+jEkvrPIfvhG7qpb1Usq13893ORcHvz/UhSHeEc9nKh7qx9hS6urw==} peerDependencies: '@react-navigation/drawer': ^6.5.8 '@testing-library/jest-native': '*' @@ -6740,22 +6814,22 @@ packages: react-native-reanimated: optional: true dependencies: - '@expo/metro-runtime': 3.1.2(react-native@0.73.2) + '@expo/metro-runtime': 3.1.3(react-native@0.73.4) '@expo/server': 0.3.0 '@radix-ui/react-slot': 1.0.1(react@18.2.0) - '@react-navigation/bottom-tabs': 6.5.11(@react-navigation/native@6.1.9)(react-native-safe-area-context@4.8.2)(react-native-screens@3.29.0)(react-native@0.73.2)(react@18.2.0) - '@react-navigation/native': 6.1.9(react-native@0.73.2)(react@18.2.0) - '@react-navigation/native-stack': 6.9.17(@react-navigation/native@6.1.9)(react-native-safe-area-context@4.8.2)(react-native-screens@3.29.0)(react-native@0.73.2)(react@18.2.0) - '@testing-library/jest-native': 5.4.3(react-native@0.73.2)(react-test-renderer@18.2.0)(react@18.2.0) - expo: 50.0.5(@babel/core@7.23.7)(@react-native/babel-preset@0.73.19) - expo-constants: 15.4.5(expo@50.0.5) - expo-linking: 6.2.2(expo@50.0.5) - expo-splash-screen: 0.26.4(expo-modules-autolinking@1.10.2)(expo@50.0.5) + '@react-navigation/bottom-tabs': 6.5.11(@react-navigation/native@6.1.9)(react-native-safe-area-context@4.8.2)(react-native-screens@3.29.0)(react-native@0.73.4)(react@18.2.0) + '@react-navigation/native': 6.1.9(react-native@0.73.4)(react@18.2.0) + '@react-navigation/native-stack': 6.9.17(@react-navigation/native@6.1.9)(react-native-safe-area-context@4.8.2)(react-native-screens@3.29.0)(react-native@0.73.4)(react@18.2.0) + '@testing-library/jest-native': 5.4.3(react-native@0.73.4)(react-test-renderer@18.2.0)(react@18.2.0) + expo: 50.0.6(@babel/core@7.23.7)(@react-native/babel-preset@0.73.21) + expo-constants: 15.4.5(expo@50.0.6) + expo-linking: 6.2.2(expo@50.0.6) + expo-splash-screen: 0.26.4(expo-modules-autolinking@1.10.3)(expo@50.0.6) expo-status-bar: 1.11.1 react-helmet-async: 1.3.0(react-dom@18.2.0)(react@18.2.0) - react-native-reanimated: 3.6.2(@babel/core@7.23.7)(@babel/plugin-proposal-nullish-coalescing-operator@7.18.6)(@babel/plugin-proposal-optional-chaining@7.21.0)(@babel/plugin-transform-arrow-functions@7.23.3)(@babel/plugin-transform-shorthand-properties@7.23.3)(@babel/plugin-transform-template-literals@7.23.3)(react-native@0.73.2)(react@18.2.0) - react-native-safe-area-context: 4.8.2(react-native@0.73.2)(react@18.2.0) - react-native-screens: 3.29.0(react-native@0.73.2)(react@18.2.0) + react-native-reanimated: 3.6.2(@babel/core@7.23.7)(@babel/plugin-proposal-nullish-coalescing-operator@7.18.6)(@babel/plugin-proposal-optional-chaining@7.21.0)(@babel/plugin-transform-arrow-functions@7.23.3)(@babel/plugin-transform-shorthand-properties@7.23.3)(@babel/plugin-transform-template-literals@7.23.3)(react-native@0.73.4)(react@18.2.0) + react-native-safe-area-context: 4.8.2(react-native@0.73.4)(react@18.2.0) + react-native-screens: 3.29.0(react-native@0.73.4)(react@18.2.0) schema-utils: 4.2.0 transitivePeerDependencies: - encoding @@ -6766,13 +6840,13 @@ packages: - supports-color dev: false - /expo-splash-screen@0.26.4(expo-modules-autolinking@1.10.2)(expo@50.0.5): + /expo-splash-screen@0.26.4(expo-modules-autolinking@1.10.3)(expo@50.0.6): resolution: {integrity: sha512-2DwofTQ0FFQCsvDysm/msENsbyNsJiAJwK3qK/oXeizECAPqD7bK19J4z9kuEbr7ORPX9MLnTQYKl6kmX3keUg==} peerDependencies: expo: '*' dependencies: - '@expo/prebuild-config': 6.7.4(expo-modules-autolinking@1.10.2) - expo: 50.0.5(@babel/core@7.23.7)(@react-native/babel-preset@0.73.19) + '@expo/prebuild-config': 6.7.4(expo-modules-autolinking@1.10.3) + expo: 50.0.6(@babel/core@7.23.7)(@react-native/babel-preset@0.73.21) transitivePeerDependencies: - encoding - expo-modules-autolinking @@ -6783,42 +6857,42 @@ packages: resolution: {integrity: sha512-ddQEtCOgYHTLlFUe/yH67dDBIoct5VIULthyT3LRJbEwdpzAgueKsX2FYK02ldh440V87PWKCamh7R9evk1rrg==} dev: false - /expo-system-ui@2.9.3(expo@50.0.5): + /expo-system-ui@2.9.3(expo@50.0.6): resolution: {integrity: sha512-RNFNBLJ9lhnjOGrHhtfDc15Ry/lF+SA4kwulmHzYGqaTeYvsL9q0K0+m9qmxuDdrbKJkuurvzvjVylDNnKNFVg==} peerDependencies: expo: '*' dependencies: '@react-native/normalize-color': 2.1.0 debug: 4.3.4 - expo: 50.0.5(@babel/core@7.23.7)(@react-native/babel-preset@0.73.19) + expo: 50.0.6(@babel/core@7.23.7)(@react-native/babel-preset@0.73.21) transitivePeerDependencies: - supports-color dev: false - /expo-updates-interface@0.15.3(expo@50.0.5): + /expo-updates-interface@0.15.3(expo@50.0.6): resolution: {integrity: sha512-uLvsbaCmUsXgJqeen8rYH/jPr874ZUCXEvWpKHxrCv5/XATPlYEaDuecbNSGQ+cu78i6MdtB4BHOwZmoH2d47A==} peerDependencies: expo: '*' dependencies: - expo: 50.0.5(@babel/core@7.23.7)(@react-native/babel-preset@0.73.19) + expo: 50.0.6(@babel/core@7.23.7)(@react-native/babel-preset@0.73.21) dev: false - /expo@50.0.5(@babel/core@7.23.7)(@react-native/babel-preset@0.73.19): - resolution: {integrity: sha512-gfZbJv8eqVG1xX8QqlQHF4Mn6HnLFuE14Kq5FRUVZQWE+IhlrP+mr+un7Zdp/3a63Bp/VkPzHi77G1bVP1pM7A==} + /expo@50.0.6(@babel/core@7.23.7)(@react-native/babel-preset@0.73.21): + resolution: {integrity: sha512-CVg0h9bmYeTWtw4EOL0HKNL+zu84YZl5nLWRPKrcpt8jox1VQQAYmvJGMdM5gSRxq5CFNLlWGxq9O8Zvfi1SOQ==} hasBin: true dependencies: '@babel/runtime': 7.23.8 - '@expo/cli': 0.17.4(@react-native/babel-preset@0.73.19)(expo-modules-autolinking@1.10.2) + '@expo/cli': 0.17.5(@react-native/babel-preset@0.73.21)(expo-modules-autolinking@1.10.3) '@expo/config': 8.5.4 '@expo/config-plugins': 7.8.4 - '@expo/metro-config': 0.17.3(@react-native/babel-preset@0.73.19) + '@expo/metro-config': 0.17.4(@react-native/babel-preset@0.73.21) '@expo/vector-icons': 14.0.0 babel-preset-expo: 10.0.1(@babel/core@7.23.7) - expo-asset: 9.0.2(expo@50.0.5) - expo-file-system: 16.0.5(expo@50.0.5) - expo-font: 11.10.2(expo@50.0.5) - expo-keep-awake: 12.8.2(expo@50.0.5) - expo-modules-autolinking: 1.10.2 + expo-asset: 9.0.2(expo@50.0.6) + expo-file-system: 16.0.6(expo@50.0.6) + expo-font: 11.10.2(expo@50.0.6) + expo-keep-awake: 12.8.2(expo@50.0.6) + expo-modules-autolinking: 1.10.3 expo-modules-core: 1.11.8 fbemitter: 3.0.0 whatwg-url-without-unicode: 8.0.0-3 @@ -8495,8 +8569,8 @@ packages: jest-mock: 29.7.0 jest-util: 29.7.0 - /jest-expo@50.0.1(@babel/core@7.23.7)(jest@29.7.0)(react@18.2.0): - resolution: {integrity: sha512-osvA63UDLJ/v7MG9UHjU7WJ0oZ0Krq9UhXxm2s6rdOlnt85ARocyMU57RC0T0yzPN47C9Ref45sEeOIxoV4Mzg==} + /jest-expo@50.0.2(@babel/core@7.23.7)(jest@29.7.0)(react@18.2.0): + resolution: {integrity: sha512-g9Vq4Cpndp6M+bWGNJfyxw+iiZm7o1XpaOEHgtyC1evdy4B9IsEWql1Y2xBH7uD79FwSKhaIz+xCQHZNhnSlAg==} hasBin: true dependencies: '@expo/config': 8.5.4 @@ -10076,13 +10150,13 @@ packages: engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1} hasBin: true - /nativewind@4.0.23(@babel/core@7.23.7)(react-native-reanimated@3.6.2)(react-native-safe-area-context@4.8.2)(react-native-svg@14.1.0)(react-native@0.73.2)(react@18.2.0)(tailwindcss@3.3.2): + /nativewind@4.0.23(@babel/core@7.23.7)(react-native-reanimated@3.6.2)(react-native-safe-area-context@4.8.2)(react-native-svg@14.1.0)(react-native@0.73.4)(react@18.2.0)(tailwindcss@3.3.2): resolution: {integrity: sha512-7eKMjcdoZMqxmPwJhLwe5VbuwCNTdIXChxV9n4FwdzKTpZX3kNGj95J7fpqpefFPRT6yYp6SqK2n6TG/BSzA+w==} engines: {node: '>=16'} peerDependencies: tailwindcss: '>3.3.0' dependencies: - react-native-css-interop: 0.0.22(@babel/core@7.23.7)(react-native-reanimated@3.6.2)(react-native-safe-area-context@4.8.2)(react-native-svg@14.1.0)(react-native@0.73.2)(react@18.2.0)(tailwindcss@3.3.2) + react-native-css-interop: 0.0.22(@babel/core@7.23.7)(react-native-reanimated@3.6.2)(react-native-safe-area-context@4.8.2)(react-native-svg@14.1.0)(react-native@0.73.4)(react@18.2.0)(tailwindcss@3.3.2) tailwindcss: 3.3.2(ts-node@10.9.2) transitivePeerDependencies: - '@babel/core' @@ -11154,7 +11228,7 @@ packages: react: 18.2.0 dev: false - /react-i18next@12.3.1(i18next@22.5.1)(react-dom@18.2.0)(react-native@0.73.2)(react@18.2.0): + /react-i18next@12.3.1(i18next@22.5.1)(react-dom@18.2.0)(react-native@0.73.4)(react@18.2.0): resolution: {integrity: sha512-5v8E2XjZDFzK7K87eSwC7AJcAkcLt5xYZ4+yTPDAW1i7C93oOY1dnr4BaQM7un4Hm+GmghuiPvevWwlca5PwDA==} peerDependencies: i18next: '>= 19.0.0' @@ -11172,7 +11246,7 @@ packages: i18next: 22.5.1 react: 18.2.0 react-dom: 18.2.0(react@18.2.0) - react-native: 0.73.2(@babel/core@7.23.7)(@babel/preset-env@7.23.8)(react@18.2.0) + react-native: 0.73.4(@babel/core@7.23.7)(@babel/preset-env@7.23.8)(react@18.2.0) dev: false /react-is@16.13.1: @@ -11184,17 +11258,17 @@ packages: /react-is@18.2.0: resolution: {integrity: sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==} - /react-native-avoid-softinput@4.0.2(react-native@0.73.2)(react@18.2.0): + /react-native-avoid-softinput@4.0.2(react-native@0.73.4)(react@18.2.0): resolution: {integrity: sha512-/i8xNWGjpu3hEPCVjW2WsWTsM/mC4zTBr3DabOrdPfgw9Ww0Na69YQY1TSXCjbTjJmWwfTToPK5OEVm+ZwHmiQ==} peerDependencies: react: '>=17.0.0' react-native: '>=0.65.0' dependencies: react: 18.2.0 - react-native: 0.73.2(@babel/core@7.23.7)(@babel/preset-env@7.23.8)(react@18.2.0) + react-native: 0.73.4(@babel/core@7.23.7)(@babel/preset-env@7.23.8)(react@18.2.0) dev: false - /react-native-css-interop@0.0.22(@babel/core@7.23.7)(react-native-reanimated@3.6.2)(react-native-safe-area-context@4.8.2)(react-native-svg@14.1.0)(react-native@0.73.2)(react@18.2.0)(tailwindcss@3.3.2): + /react-native-css-interop@0.0.22(@babel/core@7.23.7)(react-native-reanimated@3.6.2)(react-native-safe-area-context@4.8.2)(react-native-svg@14.1.0)(react-native@0.73.4)(react@18.2.0)(tailwindcss@3.3.2): resolution: {integrity: sha512-JHLYHlLEqM13dy0XSxIPOWvqmQkPrqUt+KHPkbLV0sIiw/4aN6B5TPsNKZFX9bJJaZ//dAECn782R0MqDrTBWQ==} engines: {node: '>=16'} peerDependencies: @@ -11216,17 +11290,17 @@ packages: babel-plugin-tester: 11.0.4(@babel/core@7.23.7) lightningcss: 1.22.0 react: 18.2.0 - react-native: 0.73.2(@babel/core@7.23.7)(@babel/preset-env@7.23.8)(react@18.2.0) - react-native-reanimated: 3.6.2(@babel/core@7.23.7)(@babel/plugin-proposal-nullish-coalescing-operator@7.18.6)(@babel/plugin-proposal-optional-chaining@7.21.0)(@babel/plugin-transform-arrow-functions@7.23.3)(@babel/plugin-transform-shorthand-properties@7.23.3)(@babel/plugin-transform-template-literals@7.23.3)(react-native@0.73.2)(react@18.2.0) - react-native-safe-area-context: 4.8.2(react-native@0.73.2)(react@18.2.0) - react-native-svg: 14.1.0(react-native@0.73.2)(react@18.2.0) + react-native: 0.73.4(@babel/core@7.23.7)(@babel/preset-env@7.23.8)(react@18.2.0) + react-native-reanimated: 3.6.2(@babel/core@7.23.7)(@babel/plugin-proposal-nullish-coalescing-operator@7.18.6)(@babel/plugin-proposal-optional-chaining@7.21.0)(@babel/plugin-transform-arrow-functions@7.23.3)(@babel/plugin-transform-shorthand-properties@7.23.3)(@babel/plugin-transform-template-literals@7.23.3)(react-native@0.73.4)(react@18.2.0) + react-native-safe-area-context: 4.8.2(react-native@0.73.4)(react@18.2.0) + react-native-svg: 14.1.0(react-native@0.73.4)(react@18.2.0) tailwindcss: 3.3.2(ts-node@10.9.2) transitivePeerDependencies: - '@babel/core' - supports-color dev: false - /react-native-flash-message@0.4.2(prop-types@15.8.1)(react-native@0.73.2)(react@18.2.0): + /react-native-flash-message@0.4.2(prop-types@15.8.1)(react-native@0.73.4)(react@18.2.0): resolution: {integrity: sha512-YvdXRW9AGMTI99S3DJZhLO0mbk/ehKv/UQf4/Df+3dtGi8DlkidRbyqCQZk1WMtZ7rN85PMTGr/xEI9CF9z0YA==} peerDependencies: prop-types: ^15.0 || ^16.0 @@ -11235,11 +11309,11 @@ packages: dependencies: prop-types: 15.8.1 react: 18.2.0 - react-native: 0.73.2(@babel/core@7.23.7)(@babel/preset-env@7.23.8)(react@18.2.0) - react-native-iphone-screen-helper: 2.1.1(react-native@0.73.2) + react-native: 0.73.4(@babel/core@7.23.7)(@babel/preset-env@7.23.8)(react@18.2.0) + react-native-iphone-screen-helper: 2.1.1(react-native@0.73.4) dev: false - /react-native-gesture-handler@2.14.1(react-native@0.73.2)(react@18.2.0): + /react-native-gesture-handler@2.14.1(react-native@0.73.4)(react@18.2.0): resolution: {integrity: sha512-YiM1BApV4aKeuwsM6O4C2ufwewYEKk6VMXOt0YqEZFMwABBFWhXLySFZYjBSNRU2USGppJbfHP1q1DfFQpKhdA==} peerDependencies: react: '*' @@ -11251,28 +11325,28 @@ packages: lodash: 4.17.21 prop-types: 15.8.1 react: 18.2.0 - react-native: 0.73.2(@babel/core@7.23.7)(@babel/preset-env@7.23.8)(react@18.2.0) + react-native: 0.73.4(@babel/core@7.23.7)(@babel/preset-env@7.23.8)(react@18.2.0) dev: false - /react-native-iphone-screen-helper@2.1.1(react-native@0.73.2): + /react-native-iphone-screen-helper@2.1.1(react-native@0.73.4): resolution: {integrity: sha512-geuw/bli83+tOg8UpoioLk1H1aEy0wnMDusWkCazsyH6fSk6qzmgaZ2cRyyJRU8s2tG87HctZFKGTkyYzcUcfA==} peerDependencies: react-native: '>=0.42.0' dependencies: - react-native: 0.73.2(@babel/core@7.23.7)(@babel/preset-env@7.23.8)(react@18.2.0) + react-native: 0.73.4(@babel/core@7.23.7)(@babel/preset-env@7.23.8)(react@18.2.0) dev: false - /react-native-mmkv@2.6.3(react-native@0.73.2)(react@18.2.0): + /react-native-mmkv@2.6.3(react-native@0.73.4)(react@18.2.0): resolution: {integrity: sha512-CkLAU5EX18eDw0Q+h6qEXPvynb+NVDu54cOY3h4h9VUhaaflfAmGWBJRQCBQz5M0VdnS8utjgJNryTAWKUTqpw==} peerDependencies: react: '*' react-native: '>=0.71.0' dependencies: react: 18.2.0 - react-native: 0.73.2(@babel/core@7.23.7)(@babel/preset-env@7.23.8)(react@18.2.0) + react-native: 0.73.4(@babel/core@7.23.7)(@babel/preset-env@7.23.8)(react@18.2.0) dev: false - /react-native-reanimated@3.6.2(@babel/core@7.23.7)(@babel/plugin-proposal-nullish-coalescing-operator@7.18.6)(@babel/plugin-proposal-optional-chaining@7.21.0)(@babel/plugin-transform-arrow-functions@7.23.3)(@babel/plugin-transform-shorthand-properties@7.23.3)(@babel/plugin-transform-template-literals@7.23.3)(react-native@0.73.2)(react@18.2.0): + /react-native-reanimated@3.6.2(@babel/core@7.23.7)(@babel/plugin-proposal-nullish-coalescing-operator@7.18.6)(@babel/plugin-proposal-optional-chaining@7.21.0)(@babel/plugin-transform-arrow-functions@7.23.3)(@babel/plugin-transform-shorthand-properties@7.23.3)(@babel/plugin-transform-template-literals@7.23.3)(react-native@0.73.4)(react@18.2.0): resolution: {integrity: sha512-IIMREMOrxhtK35drfpzh2UhxNqAOHnuvGgtMofj7yHcMj16tmWZR2zFvMUf6z2MfmXv+aVgFQ6TRZ6yKYf7LNA==} peerDependencies: '@babel/core': ^7.0.0-0 @@ -11295,30 +11369,30 @@ packages: convert-source-map: 2.0.0 invariant: 2.2.4 react: 18.2.0 - react-native: 0.73.2(@babel/core@7.23.7)(@babel/preset-env@7.23.8)(react@18.2.0) + react-native: 0.73.4(@babel/core@7.23.7)(@babel/preset-env@7.23.8)(react@18.2.0) dev: false - /react-native-restart@0.0.27(react-native@0.73.2)(react@18.2.0): + /react-native-restart@0.0.27(react-native@0.73.4)(react@18.2.0): resolution: {integrity: sha512-8KScVICrXwcTSJ1rjWkqVTHyEKQIttm5AIMGSK1QG1+RS5owYlE4z/1DykOTdWfVl9l16FIk0w9Xzk9ZO6jxlA==} peerDependencies: react: '*' react-native: '*' dependencies: react: 18.2.0 - react-native: 0.73.2(@babel/core@7.23.7)(@babel/preset-env@7.23.8)(react@18.2.0) + react-native: 0.73.4(@babel/core@7.23.7)(@babel/preset-env@7.23.8)(react@18.2.0) dev: false - /react-native-safe-area-context@4.8.2(react-native@0.73.2)(react@18.2.0): + /react-native-safe-area-context@4.8.2(react-native@0.73.4)(react@18.2.0): resolution: {integrity: sha512-ffUOv8BJQ6RqO3nLml5gxJ6ab3EestPiyWekxdzO/1MQ7NF8fW1Mzh1C5QE9yq573Xefnc7FuzGXjtesZGv7cQ==} peerDependencies: react: '*' react-native: '*' dependencies: react: 18.2.0 - react-native: 0.73.2(@babel/core@7.23.7)(@babel/preset-env@7.23.8)(react@18.2.0) + react-native: 0.73.4(@babel/core@7.23.7)(@babel/preset-env@7.23.8)(react@18.2.0) dev: false - /react-native-screens@3.29.0(react-native@0.73.2)(react@18.2.0): + /react-native-screens@3.29.0(react-native@0.73.4)(react@18.2.0): resolution: {integrity: sha512-yB1GoAMamFAcYf4ku94uBPn0/ani9QG7NdI98beJ5cet2YFESYYzuEIuU+kt+CNRcO8qqKeugxlfgAa3HyTqlg==} peerDependencies: react: '*' @@ -11326,11 +11400,11 @@ packages: dependencies: react: 18.2.0 react-freeze: 1.0.3(react@18.2.0) - react-native: 0.73.2(@babel/core@7.23.7)(@babel/preset-env@7.23.8)(react@18.2.0) + react-native: 0.73.4(@babel/core@7.23.7)(@babel/preset-env@7.23.8)(react@18.2.0) warn-once: 0.1.1 dev: false - /react-native-svg@14.1.0(react-native@0.73.2)(react@18.2.0): + /react-native-svg@14.1.0(react-native@0.73.4)(react@18.2.0): resolution: {integrity: sha512-HeseElmEk+AXGwFZl3h56s0LtYD9HyGdrpg8yd9QM26X+d7kjETrRQ9vCjtxuT5dCZEIQ5uggU1dQhzasnsCWA==} peerDependencies: react: '*' @@ -11339,7 +11413,7 @@ packages: css-select: 5.1.0 css-tree: 1.1.3 react: 18.2.0 - react-native: 0.73.2(@babel/core@7.23.7)(@babel/preset-env@7.23.8)(react@18.2.0) + react-native: 0.73.4(@babel/core@7.23.7)(@babel/preset-env@7.23.8)(react@18.2.0) dev: false /react-native-web@0.19.10(react-dom@18.2.0)(react@18.2.0): @@ -11362,28 +11436,29 @@ packages: - encoding dev: false - /react-native@0.73.2(@babel/core@7.23.7)(@babel/preset-env@7.23.8)(react@18.2.0): - resolution: {integrity: sha512-7zj9tcUYpJUBdOdXY6cM8RcXYWkyql4kMyGZflW99E5EuFPoC7Ti+ZQSl7LP9ZPzGD0vMfslwyDW0I4tPWUCFw==} + /react-native@0.73.4(@babel/core@7.23.7)(@babel/preset-env@7.23.8)(react@18.2.0): + resolution: {integrity: sha512-VtS+Yr6OOTIuJGDECIYWzNU8QpJjASQYvMtfa/Hvm/2/h5GdB6W9H9TOmh13x07Lj4AOhNMx3XSsz6TdrO4jIg==} engines: {node: '>=18'} hasBin: true peerDependencies: react: 18.2.0 dependencies: '@jest/create-cache-key-function': 29.7.0 - '@react-native-community/cli': 12.3.0 - '@react-native-community/cli-platform-android': 12.3.0 - '@react-native-community/cli-platform-ios': 12.3.0 + '@react-native-community/cli': 12.3.2 + '@react-native-community/cli-platform-android': 12.3.2 + '@react-native-community/cli-platform-ios': 12.3.2 '@react-native/assets-registry': 0.73.1 - '@react-native/codegen': 0.73.2(@babel/preset-env@7.23.8) - '@react-native/community-cli-plugin': 0.73.12(@babel/core@7.23.7)(@babel/preset-env@7.23.8) + '@react-native/codegen': 0.73.3(@babel/preset-env@7.23.8) + '@react-native/community-cli-plugin': 0.73.16(@babel/core@7.23.7)(@babel/preset-env@7.23.8) '@react-native/gradle-plugin': 0.73.4 '@react-native/js-polyfills': 0.73.1 '@react-native/normalize-colors': 0.73.2 - '@react-native/virtualized-lists': 0.73.4(react-native@0.73.2) + '@react-native/virtualized-lists': 0.73.4(react-native@0.73.4) abort-controller: 3.0.0 anser: 1.4.10 ansi-regex: 5.0.1 base64-js: 1.5.1 + chalk: 4.1.2 deprecated-react-native-prop-types: 5.0.0 event-target-shim: 5.0.1 flow-enums-runtime: 0.0.6 @@ -11423,7 +11498,7 @@ packages: '@tanstack/react-query': optional: true dependencies: - '@tanstack/react-query': 4.36.1(react-dom@18.2.0)(react-native@0.73.2)(react@18.2.0) + '@tanstack/react-query': 4.36.1(react-dom@18.2.0)(react-native@0.73.4)(react@18.2.0) dev: false /react-refresh@0.14.0: @@ -11523,7 +11598,7 @@ packages: source-map: 0.6.1 tslib: 2.6.2 - /recyclerlistview@4.2.0(react-native@0.73.2)(react@18.2.0): + /recyclerlistview@4.2.0(react-native@0.73.4)(react@18.2.0): resolution: {integrity: sha512-uuBCi0c+ggqHKwrzPX4Z/mJOzsBbjZEAwGGmlwpD/sD7raXixdAbdJ6BTcAmuWG50Cg4ru9p12M94Njwhr/27A==} peerDependencies: react: '>= 15.2.1' @@ -11532,7 +11607,7 @@ packages: lodash.debounce: 4.0.8 prop-types: 15.8.1 react: 18.2.0 - react-native: 0.73.2(@babel/core@7.23.7)(@babel/preset-env@7.23.8)(react@18.2.0) + react-native: 0.73.4(@babel/core@7.23.7)(@babel/preset-env@7.23.8)(react@18.2.0) ts-object-utils: 0.0.5 dev: false From a94e290bd15f09d29d1407e24804c073c7f5661b Mon Sep 17 00:00:00 2001 From: Elena Bitire <elena@obytes.com> Date: Wed, 14 Feb 2024 18:09:00 +0200 Subject: [PATCH 07/14] fix: fix svg styling warning --- src/ui/core/modal.tsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/ui/core/modal.tsx b/src/ui/core/modal.tsx index e37663c5..3e3c89bc 100644 --- a/src/ui/core/modal.tsx +++ b/src/ui/core/modal.tsx @@ -30,10 +30,13 @@ import type { BottomSheetModalProps } from '@gorhom/bottom-sheet'; import { BottomSheetModal } from '@gorhom/bottom-sheet'; +import { useColorScheme } from 'nativewind'; import * as React from 'react'; import { Pressable, View } from 'react-native'; import { Path, Svg } from 'react-native-svg'; +import { colors } from '@/ui/theme'; + import { renderBackdrop } from './bottom-sheet'; import { Text } from './text'; @@ -148,6 +151,10 @@ const ModalHeader = React.memo(({ title, dismiss }: ModalHeaderProps) => { }); const CloseButton = ({ close }: { close: () => void }) => { + const { colorScheme } = useColorScheme(); + const isDark = colorScheme === 'dark'; + const buttonColor = isDark ? colors.charcoal[100] : colors.white; + return ( <Pressable onPress={close} @@ -160,7 +167,7 @@ const CloseButton = ({ close }: { close: () => void }) => { <Svg width={24} height={24} fill="none" viewBox="0 0 24 24"> <Path d="M18.707 6.707a1 1 0 0 0-1.414-1.414L12 10.586 6.707 5.293a1 1 0 0 0-1.414 1.414L10.586 12l-5.293 5.293a1 1 0 1 0 1.414 1.414L12 13.414l5.293 5.293a1 1 0 0 0 1.414-1.414L13.414 12l5.293-5.293Z" - fill="dark:fille-charcoal-100 light:fill-white" + fill={buttonColor} /> </Svg> </Pressable> From 667793249c87946475e553cc60243756652f8d86 Mon Sep 17 00:00:00 2001 From: Elena Bitire <elena@obytes.com> Date: Thu, 15 Feb 2024 12:42:51 +0200 Subject: [PATCH 08/14] refactor: refactor svg close button element --- src/ui/core/modal.tsx | 20 ++++++++------------ 1 file changed, 8 insertions(+), 12 deletions(-) diff --git a/src/ui/core/modal.tsx b/src/ui/core/modal.tsx index 3e3c89bc..2590a060 100644 --- a/src/ui/core/modal.tsx +++ b/src/ui/core/modal.tsx @@ -30,13 +30,10 @@ import type { BottomSheetModalProps } from '@gorhom/bottom-sheet'; import { BottomSheetModal } from '@gorhom/bottom-sheet'; -import { useColorScheme } from 'nativewind'; import * as React from 'react'; import { Pressable, View } from 'react-native'; import { Path, Svg } from 'react-native-svg'; -import { colors } from '@/ui/theme'; - import { renderBackdrop } from './bottom-sheet'; import { Text } from './text'; @@ -151,10 +148,6 @@ const ModalHeader = React.memo(({ title, dismiss }: ModalHeaderProps) => { }); const CloseButton = ({ close }: { close: () => void }) => { - const { colorScheme } = useColorScheme(); - const isDark = colorScheme === 'dark'; - const buttonColor = isDark ? colors.charcoal[100] : colors.white; - return ( <Pressable onPress={close} @@ -164,11 +157,14 @@ const CloseButton = ({ close }: { close: () => void }) => { accessibilityRole="button" accessibilityHint="closes the modal" > - <Svg width={24} height={24} fill="none" viewBox="0 0 24 24"> - <Path - d="M18.707 6.707a1 1 0 0 0-1.414-1.414L12 10.586 6.707 5.293a1 1 0 0 0-1.414 1.414L10.586 12l-5.293 5.293a1 1 0 1 0 1.414 1.414L12 13.414l5.293 5.293a1 1 0 0 0 1.414-1.414L13.414 12l5.293-5.293Z" - fill={buttonColor} - /> + <Svg + className="fill-charcoal-100 dark:fill-white" + width={24} + height={24} + fill="none" + viewBox="0 0 24 24" + > + <Path d="M18.707 6.707a1 1 0 0 0-1.414-1.414L12 10.586 6.707 5.293a1 1 0 0 0-1.414 1.414L10.586 12l-5.293 5.293a1 1 0 1 0 1.414 1.414L12 13.414l5.293 5.293a1 1 0 0 0 1.414-1.414L13.414 12l5.293-5.293Z" /> </Svg> </Pressable> ); From 304f5f2f0508fff6fb41739fce1264665504c4f0 Mon Sep 17 00:00:00 2001 From: Elena Bitire <elena@obytes.com> Date: Thu, 15 Feb 2024 17:09:24 +0200 Subject: [PATCH 09/14] feat: update input implementation --- src/ui/core/{input => }/input.tsx | 46 ++++++++++++++++++++++++-- src/ui/core/input/controlled-input.tsx | 46 -------------------------- src/ui/core/input/index.tsx | 2 -- 3 files changed, 44 insertions(+), 50 deletions(-) rename src/ui/core/{input => }/input.tsx (67%) delete mode 100644 src/ui/core/input/controlled-input.tsx delete mode 100644 src/ui/core/input/index.tsx diff --git a/src/ui/core/input/input.tsx b/src/ui/core/input.tsx similarity index 67% rename from src/ui/core/input/input.tsx rename to src/ui/core/input.tsx index 1b1256ed..46e82baa 100644 --- a/src/ui/core/input/input.tsx +++ b/src/ui/core/input.tsx @@ -1,11 +1,18 @@ import * as React from 'react'; +import type { + Control, + FieldValues, + Path, + RegisterOptions, +} from 'react-hook-form'; +import { useController } from 'react-hook-form'; import type { TextInput, TextInputProps } from 'react-native'; import { I18nManager, StyleSheet, View } from 'react-native'; import { TextInput as NTextInput } from 'react-native'; import { tv } from 'tailwind-variants'; -import colors from '../../theme/colors'; -import { Text } from '../text'; +import colors from '../theme/colors'; +import { Text } from './text'; const inputTv = tv({ slots: { @@ -46,6 +53,22 @@ export interface NInputProps extends TextInputProps { error?: string; } +type TRule = Omit< + RegisterOptions, + 'valueAsNumber' | 'valueAsDate' | 'setValueAs' +>; + +export type RuleType<T> = { [name in keyof T]: TRule }; +export type InputControllerType<T extends FieldValues> = { + name: Path<T>; + control: Control<T>; + rules?: TRule; +}; + +interface ControlledInputProps<T extends FieldValues> + extends NInputProps, + InputControllerType<T> {} + export const Input = React.forwardRef<TextInput, NInputProps>((props, ref) => { const { label, error, ...inputProps } = props; const [isFocussed, setIsFocussed] = React.useState(false); @@ -86,3 +109,22 @@ export const Input = React.forwardRef<TextInput, NInputProps>((props, ref) => { </View> ); }); + +// only used with react-hook-form +export function ControlledInput<T extends FieldValues>( + props: ControlledInputProps<T> +) { + const { name, control, rules, ...inputProps } = props; + + const { field, fieldState } = useController({ control, name, rules }); + return ( + <Input + ref={field.ref} + autoCapitalize="none" + onChangeText={field.onChange} + value={field.value as string} + {...inputProps} + error={fieldState.error?.message} + /> + ); +} diff --git a/src/ui/core/input/controlled-input.tsx b/src/ui/core/input/controlled-input.tsx deleted file mode 100644 index a10438e0..00000000 --- a/src/ui/core/input/controlled-input.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import * as React from 'react'; -import type { - Control, - FieldValues, - Path, - RegisterOptions, -} from 'react-hook-form'; -import { useController } from 'react-hook-form'; - -import type { NInputProps } from './input'; -import { Input } from './input'; - -type TRule = Omit< - RegisterOptions, - 'valueAsNumber' | 'valueAsDate' | 'setValueAs' ->; - -export type RuleType<T> = { [name in keyof T]: TRule }; -export type InputControllerType<T extends FieldValues> = { - name: Path<T>; - control: Control<T>; - rules?: TRule; -}; - -interface ControlledInputProps<T extends FieldValues> - extends NInputProps, - InputControllerType<T> {} - -// only used with react-hook-form -export function ControlledInput<T extends FieldValues>( - props: ControlledInputProps<T> -) { - const { name, control, rules, ...inputProps } = props; - - const { field, fieldState } = useController({ control, name, rules }); - return ( - <Input - ref={field.ref} - autoCapitalize="none" - onChangeText={field.onChange} - value={field.value as string} - {...inputProps} - error={fieldState.error?.message} - /> - ); -} diff --git a/src/ui/core/input/index.tsx b/src/ui/core/input/index.tsx deleted file mode 100644 index 41a49e1e..00000000 --- a/src/ui/core/input/index.tsx +++ /dev/null @@ -1,2 +0,0 @@ -export * from './controlled-input'; -export * from './input'; From 19ed497bc5ffae12eaa2a2612cc3184bd7acc65a Mon Sep 17 00:00:00 2001 From: Elena Bitire <elena@obytes.com> Date: Fri, 16 Feb 2024 11:24:46 +0200 Subject: [PATCH 10/14] feat: update select implementation --- src/ui/core/index.tsx | 1 - src/ui/core/select.tsx | 236 +++++++++++++++++++++++ src/ui/core/select/controlled-select.tsx | 35 ---- src/ui/core/select/icons.tsx | 24 --- src/ui/core/select/index.tsx | 2 - src/ui/core/select/options.tsx | 81 -------- src/ui/core/select/select.tsx | 120 ------------ 7 files changed, 236 insertions(+), 263 deletions(-) create mode 100644 src/ui/core/select.tsx delete mode 100644 src/ui/core/select/controlled-select.tsx delete mode 100644 src/ui/core/select/icons.tsx delete mode 100644 src/ui/core/select/index.tsx delete mode 100644 src/ui/core/select/options.tsx delete mode 100644 src/ui/core/select/select.tsx diff --git a/src/ui/core/index.tsx b/src/ui/core/index.tsx index ded36a8e..c9f78d5a 100644 --- a/src/ui/core/index.tsx +++ b/src/ui/core/index.tsx @@ -5,7 +5,6 @@ export * from './list'; export * from './modal'; export * from './progress-bar'; export * from './select'; -export * from './select/options'; export * from './text'; // export base components from react-native diff --git a/src/ui/core/select.tsx b/src/ui/core/select.tsx new file mode 100644 index 00000000..ab9c0d35 --- /dev/null +++ b/src/ui/core/select.tsx @@ -0,0 +1,236 @@ +import type { BottomSheetModal } from '@gorhom/bottom-sheet'; +import { BottomSheetFlatList } from '@gorhom/bottom-sheet'; +import { useColorScheme } from 'nativewind'; +import * as React from 'react'; +import type { FieldValues } from 'react-hook-form'; +import { useController } from 'react-hook-form'; +import { TouchableOpacity, View } from 'react-native'; +import { Pressable, type PressableProps } from 'react-native'; +import type { SvgProps } from 'react-native-svg'; +import Svg, { Path } from 'react-native-svg'; +import { tv } from 'tailwind-variants'; + +import { CaretDown } from '@/ui/icons'; +import { colors } from '@/ui/theme'; + +import type { InputControllerType } from './input'; +import { useModal } from './modal'; +import { Modal } from './modal'; +import { Text } from './text'; + +const selectTv = tv({ + slots: { + container: 'mb-4', + label: 'text-grey-100 dark:text-charcoal-100 text-sm', + input: + 'mt-0 flex-row items-center justify-center border-[0.5px] border-grey-50 px-3 py-3 rounded-xl', + inputValue: 'dark:text-charcoal-100', + }, + + variants: { + focused: { + true: { + input: 'border-neutral-600', + }, + }, + error: { + true: { + input: 'border-danger-600', + label: 'text-danger-600 dark:text-danger-600', + inputValue: 'text-danger-600', + }, + }, + disabled: { + true: { + input: 'bg-neutral-200', + }, + }, + }, + defaultVariants: { + error: false, + disabled: false, + }, +}); + +export type Option = { label: string; value: string | number }; + +type OptionsProps = { + options: Option[]; + onSelect: (option: Option) => void; + value?: string | number; +}; + +function keyExtractor(item: Option) { + return `select-item-${item.value}`; +} + +export const Options = React.forwardRef<BottomSheetModal, OptionsProps>( + ({ options, onSelect, value }, ref) => { + const height = options.length * 70 + 100; + const snapPoints = React.useMemo(() => [height], [height]); + const { colorScheme } = useColorScheme(); + const isDark = colorScheme === 'dark'; + const renderSelectItem = React.useCallback( + ({ item }: { item: Option }) => ( + <Option + key={`select-item-${item.value}`} + label={item.label} + selected={value === item.value} + onPress={() => onSelect(item)} + /> + ), + [onSelect, value] + ); + + return ( + <Modal + ref={ref} + index={0} + snapPoints={snapPoints} + backgroundStyle={{ + backgroundColor: isDark ? colors.charcoal[800] : colors.white, + }} + > + <BottomSheetFlatList + data={options} + keyExtractor={keyExtractor} + renderItem={renderSelectItem} + /> + </Modal> + ); + } +); + +const Option = React.memo( + ({ + label, + selected = false, + ...props + }: PressableProps & { + selected?: boolean; + label: string; + }) => { + return ( + <Pressable + className="flex-row items-center border-b-[1px] border-neutral-300 bg-white px-3 py-2 dark:border-charcoal-700 dark:bg-charcoal-800" + {...props} + > + <Text className="flex-1 dark:text-charcoal-100 ">{label}</Text> + {selected && <Check fill="#000" />} + </Pressable> + ); + } +); + +export interface SelectProps { + value?: string | number; + label?: string; + disabled?: boolean; + error?: string; + options?: Option[]; + onSelect?: (value: string | number) => void; + placeholder?: string; +} +interface ControlledSelectProps<T extends FieldValues> + extends SelectProps, + InputControllerType<T> {} + +export const Select = (props: SelectProps) => { + const { + label, + value, + error, + options = [], + placeholder = 'select...', + disabled = false, + onSelect, + } = props; + const modal = useModal(); + + const { colorScheme } = useColorScheme(); + const isDark = colorScheme === 'dark'; + const onSelectOption = React.useCallback( + (option: Option) => { + onSelect?.(option.value); + modal.dismiss(); + }, + [modal, onSelect] + ); + + const styles = React.useMemo( + () => + selectTv({ + error: Boolean(error), + disabled, + }), + [error, disabled] + ); + + const textValue = React.useMemo( + () => + value !== undefined + ? options?.filter((t) => t.value === value)?.[0]?.label ?? placeholder + : placeholder, + [value, options, placeholder] + ); + + return ( + <> + <View className={styles.container()}> + {label && <Text className={styles.label()}>{label}</Text>} + <TouchableOpacity + className={styles.input()} + disabled={disabled} + onPress={modal.present} + > + <View className="flex-1"> + <Text className={styles.inputValue()}>{textValue}</Text> + </View> + <CaretDown color={isDark ? colors.white : colors.black} /> + </TouchableOpacity> + {error && ( + <Text className="text-sm text-danger-300 dark:text-danger-600"> + {error} + </Text> + )} + </View> + <Options ref={modal.ref} options={options} onSelect={onSelectOption} /> + </> + ); +}; + +// only used with react-hook-form +export function ControlledSelect<T extends FieldValues>( + props: ControlledSelectProps<T> +) { + const { name, control, rules, onSelect: onNSelect, ...selectProps } = props; + + const { field, fieldState } = useController({ control, name, rules }); + const onSelect = React.useCallback( + (value: string | number) => { + field.onChange(value); + onNSelect?.(value); + }, + [field, onNSelect] + ); + return ( + <Select + onSelect={onSelect} + value={field.value} + error={fieldState.error?.message} + {...selectProps} + /> + ); +} + +const Check = ({ fill = '#000', ...props }: SvgProps) => ( + <Svg width={25} height={24} fill="none" viewBox="0 0 25 24" {...props}> + <Path + d="m20.256 6.75-10.5 10.5L4.506 12" + stroke={fill} + strokeWidth={2.438} + strokeLinecap="round" + strokeLinejoin="round" + /> + </Svg> +); diff --git a/src/ui/core/select/controlled-select.tsx b/src/ui/core/select/controlled-select.tsx deleted file mode 100644 index 0d06d4cd..00000000 --- a/src/ui/core/select/controlled-select.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import * as React from 'react'; -import type { FieldValues } from 'react-hook-form'; -import { useController } from 'react-hook-form'; - -import type { InputControllerType } from '../input'; -import type { SelectProps } from './select'; -import { Select } from './select'; - -interface ControlledSelectProps<T extends FieldValues> - extends SelectProps, - InputControllerType<T> {} - -// only used with react-hook-form -export function ControlledSelect<T extends FieldValues>( - props: ControlledSelectProps<T> -) { - const { name, control, rules, onSelect: onNSelect, ...selectProps } = props; - - const { field, fieldState } = useController({ control, name, rules }); - const onSelect = React.useCallback( - (value: string | number) => { - field.onChange(value); - onNSelect?.(value); - }, - [field, onNSelect] - ); - return ( - <Select - onSelect={onSelect} - value={field.value} - error={fieldState.error?.message} - {...selectProps} - /> - ); -} diff --git a/src/ui/core/select/icons.tsx b/src/ui/core/select/icons.tsx deleted file mode 100644 index 3059b2da..00000000 --- a/src/ui/core/select/icons.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import * as React from 'react'; -import type { SvgProps } from 'react-native-svg'; -import Svg, { Path } from 'react-native-svg'; - -export const Arrow = ({ color = '#000', ...props }: SvgProps) => ( - <Svg width={15} height={15} fill="none" viewBox="0 0 15 15" {...props}> - <Path - d="M12.621 5.443a.469.469 0 0 0-.433-.287H2.813a.469.469 0 0 0-.434.287.492.492 0 0 0 .1.516l4.687 4.688a.48.48 0 0 0 .668 0l4.688-4.688a.492.492 0 0 0 .1-.516Z" - fill={color} - /> - </Svg> -); - -export const Check = ({ fill = '#000', ...props }: SvgProps) => ( - <Svg width={25} height={24} fill="none" viewBox="0 0 25 24" {...props}> - <Path - d="m20.256 6.75-10.5 10.5L4.506 12" - stroke={fill} - strokeWidth={2.438} - strokeLinecap="round" - strokeLinejoin="round" - /> - </Svg> -); diff --git a/src/ui/core/select/index.tsx b/src/ui/core/select/index.tsx deleted file mode 100644 index 0717a7c2..00000000 --- a/src/ui/core/select/index.tsx +++ /dev/null @@ -1,2 +0,0 @@ -export * from './controlled-select'; -export * from './select'; diff --git a/src/ui/core/select/options.tsx b/src/ui/core/select/options.tsx deleted file mode 100644 index 541544ea..00000000 --- a/src/ui/core/select/options.tsx +++ /dev/null @@ -1,81 +0,0 @@ -import type { BottomSheetModal } from '@gorhom/bottom-sheet'; -import { BottomSheetFlatList } from '@gorhom/bottom-sheet'; -import { useColorScheme } from 'nativewind'; -import * as React from 'react'; -import { Pressable, type PressableProps } from 'react-native'; - -import { colors } from '@/ui/theme'; - -import { Modal } from '../modal'; -import { Text } from '../text'; -import { Check } from './icons'; - -export type Option = { label: string; value: string | number }; - -type OptionsProps = { - options: Option[]; - onSelect: (option: Option) => void; - value?: string | number; -}; - -function keyExtractor(item: Option) { - return `select-item-${item.value}`; -} - -export const Options = React.forwardRef<BottomSheetModal, OptionsProps>( - ({ options, onSelect, value }, ref) => { - const height = options.length * 70 + 100; - const snapPoints = React.useMemo(() => [height], [height]); - const { colorScheme } = useColorScheme(); - const isDark = colorScheme === 'dark'; - const renderSelectItem = React.useCallback( - ({ item }: { item: Option }) => ( - <Option - key={`select-item-${item.value}`} - label={item.label} - selected={value === item.value} - onPress={() => onSelect(item)} - /> - ), - [onSelect, value] - ); - - return ( - <Modal - ref={ref} - index={0} - snapPoints={snapPoints} - backgroundStyle={{ - backgroundColor: isDark ? colors.charcoal[800] : colors.white, - }} - > - <BottomSheetFlatList - data={options} - keyExtractor={keyExtractor} - renderItem={renderSelectItem} - /> - </Modal> - ); - } -); - -const Option = React.memo( - ({ - label, - selected = false, - ...props - }: PressableProps & { - selected?: boolean; - label: string; - }) => { - return ( - <Pressable - className="flex-row items-center border-b-[1px] border-neutral-300 bg-white px-3 py-2 dark:border-charcoal-700 dark:bg-charcoal-800" - {...props} - > - <Text className="flex-1 dark:text-charcoal-100 ">{label}</Text> - {selected && <Check fill="#000" />} - </Pressable> - ); - } -); diff --git a/src/ui/core/select/select.tsx b/src/ui/core/select/select.tsx deleted file mode 100644 index b0a71145..00000000 --- a/src/ui/core/select/select.tsx +++ /dev/null @@ -1,120 +0,0 @@ -import { useColorScheme } from 'nativewind'; -import * as React from 'react'; -import { TouchableOpacity, View } from 'react-native'; -import { tv } from 'tailwind-variants'; - -import { CaretDown } from '@/ui/icons'; -import colors from '@/ui/theme/colors'; - -import { useModal } from '../modal'; -import { Text } from '../text'; -import type { Option } from './options'; -import { Options } from './options'; - -const selectTv = tv({ - slots: { - container: 'mb-4', - label: 'text-grey-100 dark:text-charcoal-100 text-sm', - input: - 'mt-0 flex-row items-center justify-center border-[0.5px] border-grey-50 px-3 py-3 rounded-xl', - inputValue: 'dark:text-charcoal-100', - }, - - variants: { - focused: { - true: { - input: 'border-neutral-600', - }, - }, - error: { - true: { - input: 'border-danger-600', - label: 'text-danger-600 dark:text-danger-600', - inputValue: 'text-danger-600', - }, - }, - disabled: { - true: { - input: 'bg-neutral-200', - }, - }, - }, - defaultVariants: { - error: false, - disabled: false, - }, -}); - -export interface SelectProps { - value?: string | number; - label?: string; - disabled?: boolean; - error?: string; - options?: Option[]; - onSelect?: (value: string | number) => void; - placeholder?: string; -} - -export const Select = (props: SelectProps) => { - const { - label, - value, - error, - options = [], - placeholder = 'select...', - disabled = false, - onSelect, - } = props; - const modal = useModal(); - - const { colorScheme } = useColorScheme(); - const isDark = colorScheme === 'dark'; - const onSelectOption = React.useCallback( - (option: Option) => { - onSelect?.(option.value); - modal.dismiss(); - }, - [modal, onSelect] - ); - - const styles = React.useMemo( - () => - selectTv({ - error: Boolean(error), - disabled, - }), - [error, disabled] - ); - - const textValue = React.useMemo( - () => - value !== undefined - ? options?.filter((t) => t.value === value)?.[0]?.label ?? placeholder - : placeholder, - [value, options, placeholder] - ); - - return ( - <> - <View className={styles.container()}> - {label && <Text className={styles.label()}>{label}</Text>} - <TouchableOpacity - className={styles.input()} - disabled={disabled} - onPress={modal.present} - > - <View className="flex-1"> - <Text className={styles.inputValue()}>{textValue}</Text> - </View> - <CaretDown color={isDark ? colors.white : colors.black} /> - </TouchableOpacity> - {error && ( - <Text className="text-sm text-danger-300 dark:text-danger-600"> - {error} - </Text> - )} - </View> - <Options ref={modal.ref} options={options} onSelect={onSelectOption} /> - </> - ); -}; From d71557ea057fb97a03eb80f9ae4b6e966c2fc528 Mon Sep 17 00:00:00 2001 From: Elena Bitire <elena@obytes.com> Date: Fri, 16 Feb 2024 13:41:52 +0200 Subject: [PATCH 11/14] fix: fix color variants --- src/app/(app)/style.tsx | 3 ++- src/components/{color-variants.tsx => colors.tsx} | 10 +++++----- 2 files changed, 7 insertions(+), 6 deletions(-) rename src/components/{color-variants.tsx => colors.tsx} (80%) diff --git a/src/app/(app)/style.tsx b/src/app/(app)/style.tsx index 191cd27c..f2a7eacb 100644 --- a/src/app/(app)/style.tsx +++ b/src/app/(app)/style.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import { Buttons } from '@/components/buttons'; +import { Colors } from '@/components/colors'; import { Inputs } from '@/components/inputs'; import { Typography } from '@/components/typography'; import { FocusAwareStatusBar, SafeAreaView, ScrollView } from '@/ui'; @@ -12,7 +13,7 @@ export default function Style() { <ScrollView> <SafeAreaView className="flex-1 px-4"> <Typography /> - {/* <ColorVariants /> */} + <Colors /> <Inputs /> <Buttons /> </SafeAreaView> diff --git a/src/components/color-variants.tsx b/src/components/colors.tsx similarity index 80% rename from src/components/color-variants.tsx rename to src/components/colors.tsx index 39994819..65bdec63 100644 --- a/src/components/color-variants.tsx +++ b/src/components/colors.tsx @@ -6,23 +6,23 @@ import colors from '@/ui/theme/colors'; import { Title } from './title'; type ColorName = keyof typeof colors; -export const ColorVariants = () => { +export const Colors = () => { return ( <> <Title text="Colors" /> {(Object.keys(colors) as ColorName[]).map((name) => ( - <ColorVariant name={name} key={name} /> + <Color name={name} key={name} /> ))} </> ); }; -const ColorVariant = ({ name }: { name: ColorName }) => { +const Color = ({ name }: { name: ColorName }) => { if (typeof colors[name] === 'string') return null; return ( <View className="pt-2"> <Text className="font-medium">{name.toUpperCase()}</Text> - <View className=" flex-row flex-wrap content-between justify-between "> + <View className="flex-row flex-wrap content-between justify-around "> {Object.entries(colors[name]).map(([key, value]) => { return ( <ColorCard @@ -39,7 +39,7 @@ const ColorVariant = ({ name }: { name: ColorName }) => { const ColorCard = ({ color, value }: { value: string; color: string }) => { return ( - <View className="flex-[1/5] items-center justify-center py-1"> + <View className="items-center justify-center py-1"> <View style={{ backgroundColor: color }} className={`h-[42px] w-[42px] items-center justify-center rounded-full border-[1px] border-neutral-200 dark:border-charcoal-700`} From c1936ba22f15a7a1e3ffbf372ad2f9dd3220dcee Mon Sep 17 00:00:00 2001 From: Elena Bitire <elena@obytes.com> Date: Tue, 20 Feb 2024 13:26:17 +0200 Subject: [PATCH 12/14] fix: fix import issue --- src/ui/core/progress-bar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ui/core/progress-bar.tsx b/src/ui/core/progress-bar.tsx index afdb4623..a3e49fe0 100644 --- a/src/ui/core/progress-bar.tsx +++ b/src/ui/core/progress-bar.tsx @@ -1,4 +1,5 @@ import React, { forwardRef, useImperativeHandle } from 'react'; +import { View } from 'react-native'; import Animated, { Easing, useAnimatedStyle, @@ -7,7 +8,6 @@ import Animated, { } from 'react-native-reanimated'; import { twMerge } from 'tailwind-merge'; -import { View } from '../core'; type Props = { initialProgress?: number; className?: string; From a262ac01bf4f1814a072c6f3ade658ebb93adf67 Mon Sep 17 00:00:00 2001 From: Elena Bitire <elena@obytes.com> Date: Tue, 20 Feb 2024 13:31:32 +0200 Subject: [PATCH 13/14] fix: fix expo doctor --- package.json | 4 +- pnpm-lock.yaml | 225 ++++++++++++++++--------------------------------- 2 files changed, 74 insertions(+), 155 deletions(-) diff --git a/package.json b/package.json index 1a8103a9..cbd8cdc0 100644 --- a/package.json +++ b/package.json @@ -48,11 +48,11 @@ "@tanstack/react-query": "^4.36.1", "app-icon-badge": "^0.0.15", "axios": "^1.6.5", - "expo": "~50.0.6", + "expo": "~50.0.7", "expo-build-properties": "~0.11.1", "expo-constants": "~15.4.5", "expo-dev-client": "~3.3.8", - "expo-font": "~11.10.2", + "expo-font": "~11.10.3", "expo-image": "~1.10.6", "expo-linking": "~6.2.2", "expo-localization": "~14.8.3", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 5d2dc274..b21244c0 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -36,41 +36,41 @@ dependencies: specifier: ^1.6.5 version: 1.6.5 expo: - specifier: ~50.0.6 - version: 50.0.6(@babel/core@7.23.7)(@react-native/babel-preset@0.73.21) + specifier: ~50.0.7 + version: 50.0.7(@babel/core@7.23.7)(@react-native/babel-preset@0.73.21) expo-build-properties: specifier: ~0.11.1 - version: 0.11.1(expo@50.0.6) + version: 0.11.1(expo@50.0.7) expo-constants: specifier: ~15.4.5 - version: 15.4.5(expo@50.0.6) + version: 15.4.5(expo@50.0.7) expo-dev-client: specifier: ~3.3.8 - version: 3.3.8(expo@50.0.6) + version: 3.3.8(expo@50.0.7) expo-font: - specifier: ~11.10.2 - version: 11.10.2(expo@50.0.6) + specifier: ~11.10.3 + version: 11.10.3(expo@50.0.7) expo-image: specifier: ~1.10.6 - version: 1.10.6(expo@50.0.6) + version: 1.10.6(expo@50.0.7) expo-linking: specifier: ~6.2.2 - version: 6.2.2(expo@50.0.6) + version: 6.2.2(expo@50.0.7) expo-localization: specifier: ~14.8.3 - version: 14.8.3(expo@50.0.6) + version: 14.8.3(expo@50.0.7) expo-router: specifier: ~3.4.7 - version: 3.4.7(@testing-library/jest-native@5.4.3)(expo-constants@15.4.5)(expo-linking@6.2.2)(expo-modules-autolinking@1.10.3)(expo-status-bar@1.11.1)(expo@50.0.6)(react-dom@18.2.0)(react-native-reanimated@3.6.2)(react-native-safe-area-context@4.8.2)(react-native-screens@3.29.0)(react-native@0.73.4)(react@18.2.0) + version: 3.4.7(@testing-library/jest-native@5.4.3)(expo-constants@15.4.5)(expo-linking@6.2.2)(expo-modules-autolinking@1.10.3)(expo-status-bar@1.11.1)(expo@50.0.7)(react-dom@18.2.0)(react-native-reanimated@3.6.2)(react-native-safe-area-context@4.8.2)(react-native-screens@3.29.0)(react-native@0.73.4)(react@18.2.0) expo-splash-screen: specifier: 0.26.4 - version: 0.26.4(expo-modules-autolinking@1.10.3)(expo@50.0.6) + version: 0.26.4(expo-modules-autolinking@1.10.3)(expo@50.0.7) expo-status-bar: specifier: ~1.11.1 version: 1.11.1 expo-system-ui: specifier: ~2.9.3 - version: 2.9.3(expo@50.0.6) + version: 2.9.3(expo@50.0.7) i18next: specifier: ^22.5.1 version: 22.5.1 @@ -3285,16 +3285,6 @@ packages: resolution: {integrity: sha512-2FgAbU7uKM5SbbW9QptPPZx8N9Ke2L7bsHb+EhAanZjFZunA9PaYtyjUQ1s7HD+zDVqOQIvjkpXSv7Kejd2tqg==} engines: {node: '>=18'} - /@react-native/babel-plugin-codegen@0.73.2(@babel/preset-env@7.23.8): - resolution: {integrity: sha512-PadyFZWVaWXIBP7Q5dgEL7eAd7tnsgsLjoHJB1hIRZZuVUg1Zqe3nULwC7RFAqOtr5Qx7KXChkFFcKQ3WnZzGw==} - engines: {node: '>=18'} - dependencies: - '@react-native/codegen': 0.73.2(@babel/preset-env@7.23.8) - transitivePeerDependencies: - - '@babel/preset-env' - - supports-color - dev: false - /@react-native/babel-plugin-codegen@0.73.4(@babel/preset-env@7.23.8): resolution: {integrity: sha512-XzRd8MJGo4Zc5KsphDHBYJzS1ryOHg8I2gOZDAUCGcwLFhdyGu1zBNDJYH2GFyDrInn9TzAbRIf3d4O+eltXQQ==} engines: {node: '>=18'} @@ -3304,59 +3294,6 @@ packages: - '@babel/preset-env' - supports-color - /@react-native/babel-preset@0.73.19(@babel/core@7.23.7)(@babel/preset-env@7.23.8): - resolution: {integrity: sha512-ujon01uMOREZecIltQxPDmJ6xlVqAUFGI/JCSpeVYdxyXBoBH5dBb0ihj7h6LKH1q1jsnO9z4MxfddtypKkIbg==} - engines: {node: '>=18'} - peerDependencies: - '@babel/core': '*' - dependencies: - '@babel/core': 7.23.7 - '@babel/plugin-proposal-async-generator-functions': 7.20.7(@babel/core@7.23.7) - '@babel/plugin-proposal-class-properties': 7.18.6(@babel/core@7.23.7) - '@babel/plugin-proposal-export-default-from': 7.23.3(@babel/core@7.23.7) - '@babel/plugin-proposal-nullish-coalescing-operator': 7.18.6(@babel/core@7.23.7) - '@babel/plugin-proposal-numeric-separator': 7.18.6(@babel/core@7.23.7) - '@babel/plugin-proposal-object-rest-spread': 7.20.7(@babel/core@7.23.7) - '@babel/plugin-proposal-optional-catch-binding': 7.18.6(@babel/core@7.23.7) - '@babel/plugin-proposal-optional-chaining': 7.21.0(@babel/core@7.23.7) - '@babel/plugin-syntax-dynamic-import': 7.8.3(@babel/core@7.23.7) - '@babel/plugin-syntax-export-default-from': 7.23.3(@babel/core@7.23.7) - '@babel/plugin-syntax-flow': 7.23.3(@babel/core@7.23.7) - '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.23.7) - '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.23.7) - '@babel/plugin-transform-arrow-functions': 7.23.3(@babel/core@7.23.7) - '@babel/plugin-transform-async-to-generator': 7.23.3(@babel/core@7.23.7) - '@babel/plugin-transform-block-scoping': 7.23.4(@babel/core@7.23.7) - '@babel/plugin-transform-classes': 7.23.8(@babel/core@7.23.7) - '@babel/plugin-transform-computed-properties': 7.23.3(@babel/core@7.23.7) - '@babel/plugin-transform-destructuring': 7.23.3(@babel/core@7.23.7) - '@babel/plugin-transform-flow-strip-types': 7.23.3(@babel/core@7.23.7) - '@babel/plugin-transform-function-name': 7.23.3(@babel/core@7.23.7) - '@babel/plugin-transform-literals': 7.23.3(@babel/core@7.23.7) - '@babel/plugin-transform-modules-commonjs': 7.23.3(@babel/core@7.23.7) - '@babel/plugin-transform-named-capturing-groups-regex': 7.22.5(@babel/core@7.23.7) - '@babel/plugin-transform-parameters': 7.23.3(@babel/core@7.23.7) - '@babel/plugin-transform-private-methods': 7.23.3(@babel/core@7.23.7) - '@babel/plugin-transform-private-property-in-object': 7.23.4(@babel/core@7.23.7) - '@babel/plugin-transform-react-display-name': 7.23.3(@babel/core@7.23.7) - '@babel/plugin-transform-react-jsx': 7.23.4(@babel/core@7.23.7) - '@babel/plugin-transform-react-jsx-self': 7.23.3(@babel/core@7.23.7) - '@babel/plugin-transform-react-jsx-source': 7.23.3(@babel/core@7.23.7) - '@babel/plugin-transform-runtime': 7.23.7(@babel/core@7.23.7) - '@babel/plugin-transform-shorthand-properties': 7.23.3(@babel/core@7.23.7) - '@babel/plugin-transform-spread': 7.23.3(@babel/core@7.23.7) - '@babel/plugin-transform-sticky-regex': 7.23.3(@babel/core@7.23.7) - '@babel/plugin-transform-typescript': 7.23.6(@babel/core@7.23.7) - '@babel/plugin-transform-unicode-regex': 7.23.3(@babel/core@7.23.7) - '@babel/template': 7.22.15 - '@react-native/babel-plugin-codegen': 0.73.2(@babel/preset-env@7.23.8) - babel-plugin-transform-flow-enums: 0.0.2(@babel/core@7.23.7) - react-refresh: 0.14.0 - transitivePeerDependencies: - - '@babel/preset-env' - - supports-color - dev: false - /@react-native/babel-preset@0.73.21(@babel/core@7.23.7)(@babel/preset-env@7.23.8): resolution: {integrity: sha512-WlFttNnySKQMeujN09fRmrdWqh46QyJluM5jdtDNrkl/2Hx6N4XeDUGhABvConeK95OidVO7sFFf7sNebVXogA==} engines: {node: '>=18'} @@ -3409,24 +3346,6 @@ packages: - '@babel/preset-env' - supports-color - /@react-native/codegen@0.73.2(@babel/preset-env@7.23.8): - resolution: {integrity: sha512-lfy8S7umhE3QLQG5ViC4wg5N1Z+E6RnaeIw8w1voroQsXXGPB72IBozh8dAHR3+ceTxIU0KX3A8OpJI8e1+HpQ==} - engines: {node: '>=18'} - peerDependencies: - '@babel/preset-env': ^7.1.6 - dependencies: - '@babel/parser': 7.23.6 - '@babel/preset-env': 7.23.8(@babel/core@7.23.7) - flow-parser: 0.206.0 - glob: 7.2.3 - invariant: 2.2.4 - jscodeshift: 0.14.0(@babel/preset-env@7.23.8) - mkdirp: 0.5.6 - nullthrows: 1.1.1 - transitivePeerDependencies: - - supports-color - dev: false - /@react-native/codegen@0.73.3(@babel/preset-env@7.23.8): resolution: {integrity: sha512-sxslCAAb8kM06vGy9Jyh4TtvjhcP36k/rvj2QE2Jdhdm61KvfafCATSIsOfc0QvnduWFcpXUPvAVyYwuv7PYDg==} engines: {node: '>=18'} @@ -4787,7 +4706,7 @@ packages: '@babel/plugin-transform-parameters': 7.23.3(@babel/core@7.23.7) '@babel/preset-env': 7.23.8(@babel/core@7.23.7) '@babel/preset-react': 7.23.3(@babel/core@7.23.7) - '@react-native/babel-preset': 0.73.19(@babel/core@7.23.7)(@babel/preset-env@7.23.8) + '@react-native/babel-preset': 0.73.21(@babel/core@7.23.7)(@babel/preset-env@7.23.8) babel-plugin-react-native-web: 0.18.12 react-refresh: 0.14.0 transitivePeerDependencies: @@ -6622,13 +6541,13 @@ packages: jest-util: 29.7.0 dev: true - /expo-asset@9.0.2(expo@50.0.6): + /expo-asset@9.0.2(expo@50.0.7): resolution: {integrity: sha512-PzYKME1MgUOoUvwtdzhAyXkjXOXGiSYqGKG/MsXwWr0Ef5wlBaBm2DCO9V6KYbng5tBPFu6hTjoRNil1tBOSow==} dependencies: '@react-native/assets-registry': 0.73.1 blueimp-md5: 2.19.0 - expo-constants: 15.4.5(expo@50.0.6) - expo-file-system: 16.0.6(expo@50.0.6) + expo-constants: 15.4.5(expo@50.0.7) + expo-file-system: 16.0.6(expo@50.0.7) invariant: 2.2.4 md5-file: 3.2.3 transitivePeerDependencies: @@ -6636,139 +6555,139 @@ packages: - supports-color dev: false - /expo-build-properties@0.11.1(expo@50.0.6): + /expo-build-properties@0.11.1(expo@50.0.7): resolution: {integrity: sha512-m4j4aEjFaDuBE6KWYMxDhWgLzzSmpE7uHKAwtvXyNmRK+6JKF0gjiXi0sXgI5ngNppDQpsyPFMvqG7uQpRuCuw==} peerDependencies: expo: '*' dependencies: ajv: 8.12.0 - expo: 50.0.6(@babel/core@7.23.7)(@react-native/babel-preset@0.73.21) + expo: 50.0.7(@babel/core@7.23.7)(@react-native/babel-preset@0.73.21) semver: 7.5.4 dev: false - /expo-constants@15.4.5(expo@50.0.6): + /expo-constants@15.4.5(expo@50.0.7): resolution: {integrity: sha512-1pVVjwk733hbbIjtQcvUFCme540v4gFemdNlaxM2UXKbfRCOh2hzgKN5joHMOysoXQe736TTUrRj7UaZI5Yyhg==} peerDependencies: expo: '*' dependencies: '@expo/config': 8.5.4 - expo: 50.0.6(@babel/core@7.23.7)(@react-native/babel-preset@0.73.21) + expo: 50.0.7(@babel/core@7.23.7)(@react-native/babel-preset@0.73.21) transitivePeerDependencies: - supports-color dev: false - /expo-dev-client@3.3.8(expo@50.0.6): + /expo-dev-client@3.3.8(expo@50.0.7): resolution: {integrity: sha512-6JpcxncWiWwq1w6SPrePpTa20z3D1qmAMMHd8f05lSCUPVBn4jTwpzrKEpGaA3EubLE5SEdxPVmvmyWw/oFFMQ==} peerDependencies: expo: '*' dependencies: - expo: 50.0.6(@babel/core@7.23.7)(@react-native/babel-preset@0.73.21) - expo-dev-launcher: 3.6.6(expo@50.0.6) - expo-dev-menu: 4.5.5(expo@50.0.6) - expo-dev-menu-interface: 1.7.2(expo@50.0.6) - expo-manifests: 0.13.2(expo@50.0.6) - expo-updates-interface: 0.15.3(expo@50.0.6) + expo: 50.0.7(@babel/core@7.23.7)(@react-native/babel-preset@0.73.21) + expo-dev-launcher: 3.6.6(expo@50.0.7) + expo-dev-menu: 4.5.5(expo@50.0.7) + expo-dev-menu-interface: 1.7.2(expo@50.0.7) + expo-manifests: 0.13.2(expo@50.0.7) + expo-updates-interface: 0.15.3(expo@50.0.7) transitivePeerDependencies: - supports-color dev: false - /expo-dev-launcher@3.6.6(expo@50.0.6): + /expo-dev-launcher@3.6.6(expo@50.0.7): resolution: {integrity: sha512-jVI1YZS1YJTrniIL53BOxSZUMyJCeDLuS9SlRx1vC3tnTTN3srg5pU/zCK/DifwbF7i6NtA1iLPSBVu2K4040A==} peerDependencies: expo: '*' dependencies: ajv: 8.11.0 - expo: 50.0.6(@babel/core@7.23.7)(@react-native/babel-preset@0.73.21) - expo-dev-menu: 4.5.5(expo@50.0.6) - expo-manifests: 0.13.2(expo@50.0.6) + expo: 50.0.7(@babel/core@7.23.7)(@react-native/babel-preset@0.73.21) + expo-dev-menu: 4.5.5(expo@50.0.7) + expo-manifests: 0.13.2(expo@50.0.7) resolve-from: 5.0.0 semver: 7.5.4 transitivePeerDependencies: - supports-color dev: false - /expo-dev-menu-interface@1.7.2(expo@50.0.6): + /expo-dev-menu-interface@1.7.2(expo@50.0.7): resolution: {integrity: sha512-V/geSB9rW0IPTR+d7E5CcvkV0uVUCE7SMHZqE/J0/dH06Wo8AahB16fimXeh5/hTL2Qztq8CQ41xpFUBoA9TEw==} peerDependencies: expo: '*' dependencies: - expo: 50.0.6(@babel/core@7.23.7)(@react-native/babel-preset@0.73.21) + expo: 50.0.7(@babel/core@7.23.7)(@react-native/babel-preset@0.73.21) dev: false - /expo-dev-menu@4.5.5(expo@50.0.6): + /expo-dev-menu@4.5.5(expo@50.0.7): resolution: {integrity: sha512-PcbI/SqAvueOIEtR1O0s+WvVD7yizQSqXisDSkBrTym3u8XZSN+K730kz2Z64ukY9YIPG4qWR4sd+9rcjsbMWw==} peerDependencies: expo: '*' dependencies: - expo: 50.0.6(@babel/core@7.23.7)(@react-native/babel-preset@0.73.21) - expo-dev-menu-interface: 1.7.2(expo@50.0.6) + expo: 50.0.7(@babel/core@7.23.7)(@react-native/babel-preset@0.73.21) + expo-dev-menu-interface: 1.7.2(expo@50.0.7) semver: 7.5.4 dev: false - /expo-file-system@16.0.6(expo@50.0.6): + /expo-file-system@16.0.6(expo@50.0.7): resolution: {integrity: sha512-ATCHL7nEg2WwKeamW/SDTR9jBEqM5wncFq594ftKS5QFmhKIrX48d9jyPFGnNq+6h8AGPg4QKh2KCA4OY49L4g==} peerDependencies: expo: '*' dependencies: - expo: 50.0.6(@babel/core@7.23.7)(@react-native/babel-preset@0.73.21) + expo: 50.0.7(@babel/core@7.23.7)(@react-native/babel-preset@0.73.21) dev: false - /expo-font@11.10.2(expo@50.0.6): - resolution: {integrity: sha512-AE0Q0LiWiVosQ/jlKUPoWoob7p3GwYM2xmLoUkuopO9RYh9NL1hZKHiMKcWBZyDG8Gww1GtBQwh7ZREST8+jjQ==} + /expo-font@11.10.3(expo@50.0.7): + resolution: {integrity: sha512-q1Td2zUvmLbCA9GV4OG4nLPw5gJuNY1VrPycsnemN1m8XWTzzs8nyECQQqrcBhgulCgcKZZJJ6U0kC2iuSoQHQ==} peerDependencies: expo: '*' dependencies: - expo: 50.0.6(@babel/core@7.23.7)(@react-native/babel-preset@0.73.21) + expo: 50.0.7(@babel/core@7.23.7)(@react-native/babel-preset@0.73.21) fontfaceobserver: 2.3.0 dev: false - /expo-image@1.10.6(expo@50.0.6): + /expo-image@1.10.6(expo@50.0.7): resolution: {integrity: sha512-vcnAIym1eU8vQgV1re1E7rVQZStJimBa4aPDhjFfzMzbddAF7heJuagyewiUkTzbZUwYzPaZAie6VJPyWx9Ueg==} peerDependencies: expo: '*' dependencies: '@react-native/assets-registry': 0.73.1 - expo: 50.0.6(@babel/core@7.23.7)(@react-native/babel-preset@0.73.21) + expo: 50.0.7(@babel/core@7.23.7)(@react-native/babel-preset@0.73.21) dev: false /expo-json-utils@0.12.3: resolution: {integrity: sha512-4pypQdinpNc6XY9wsZk56njvzDh+B/9mISr7FPP3CVk1QGB1nSLh883/BCDSgnsephATZkC5HG+cdE60kCAR6A==} dev: false - /expo-keep-awake@12.8.2(expo@50.0.6): + /expo-keep-awake@12.8.2(expo@50.0.7): resolution: {integrity: sha512-uiQdGbSX24Pt8nGbnmBtrKq6xL/Tm3+DuDRGBk/3ZE/HlizzNosGRIufIMJ/4B4FRw4dw8KU81h2RLuTjbay6g==} peerDependencies: expo: '*' dependencies: - expo: 50.0.6(@babel/core@7.23.7)(@react-native/babel-preset@0.73.21) + expo: 50.0.7(@babel/core@7.23.7)(@react-native/babel-preset@0.73.21) dev: false - /expo-linking@6.2.2(expo@50.0.6): + /expo-linking@6.2.2(expo@50.0.7): resolution: {integrity: sha512-FEe6lP4f7xFT/vjoHRG+tt6EPVtkEGaWNK1smpaUevmNdyCJKqW0PDB8o8sfG6y7fly8ULe8qg3HhKh5J7aqUQ==} dependencies: - expo-constants: 15.4.5(expo@50.0.6) + expo-constants: 15.4.5(expo@50.0.7) invariant: 2.2.4 transitivePeerDependencies: - expo - supports-color dev: false - /expo-localization@14.8.3(expo@50.0.6): + /expo-localization@14.8.3(expo@50.0.7): resolution: {integrity: sha512-leg1e+7ocUgfNWa7Men/g16waXtdSpBMR9tCdv3CG4wztmFU8C+87VAnnVkvHi4CCUkTLzhP3y0FcE6KIWTwdw==} peerDependencies: expo: '*' dependencies: - expo: 50.0.6(@babel/core@7.23.7)(@react-native/babel-preset@0.73.21) + expo: 50.0.7(@babel/core@7.23.7)(@react-native/babel-preset@0.73.21) rtl-detect: 1.1.2 dev: false - /expo-manifests@0.13.2(expo@50.0.6): + /expo-manifests@0.13.2(expo@50.0.7): resolution: {integrity: sha512-l0Sia1WmLULx8V41K8RzGLsFoTe4qqthPRGpHjItsYn8ZB6lRrdTBM9OYp2McIflgqN1HAimUCQMFIwJyH+UmA==} peerDependencies: expo: '*' dependencies: '@expo/config': 8.5.4 - expo: 50.0.6(@babel/core@7.23.7)(@react-native/babel-preset@0.73.21) + expo: 50.0.7(@babel/core@7.23.7)(@react-native/babel-preset@0.73.21) expo-json-utils: 0.12.3 transitivePeerDependencies: - supports-color @@ -6788,13 +6707,13 @@ packages: - supports-color dev: false - /expo-modules-core@1.11.8: - resolution: {integrity: sha512-rlctE3nCNLCGv3LosGQNaTuwGrr2SyQA+hOgci/0l+VRc0gFNtvl0gskph9C0tnN1jzBeb8rRZQYVj5ih1yxcA==} + /expo-modules-core@1.11.9: + resolution: {integrity: sha512-GTUb81vcPaF+5MtlBI1u9IjrZbGdF1ZUwz3u8Gc+rOLBblkZ7pYsj2mU/tu+k0khTckI9vcH4ZBksXWvE1ncjQ==} dependencies: invariant: 2.2.4 dev: false - /expo-router@3.4.7(@testing-library/jest-native@5.4.3)(expo-constants@15.4.5)(expo-linking@6.2.2)(expo-modules-autolinking@1.10.3)(expo-status-bar@1.11.1)(expo@50.0.6)(react-dom@18.2.0)(react-native-reanimated@3.6.2)(react-native-safe-area-context@4.8.2)(react-native-screens@3.29.0)(react-native@0.73.4)(react@18.2.0): + /expo-router@3.4.7(@testing-library/jest-native@5.4.3)(expo-constants@15.4.5)(expo-linking@6.2.2)(expo-modules-autolinking@1.10.3)(expo-status-bar@1.11.1)(expo@50.0.7)(react-dom@18.2.0)(react-native-reanimated@3.6.2)(react-native-safe-area-context@4.8.2)(react-native-screens@3.29.0)(react-native@0.73.4)(react@18.2.0): resolution: {integrity: sha512-B1VLols+ErUqWtRHi9j/sQhxxwlsM7AJN+jEkvrPIfvhG7qpb1Usq13893ORcHvz/UhSHeEc9nKh7qx9hS6urw==} peerDependencies: '@react-navigation/drawer': ^6.5.8 @@ -6821,10 +6740,10 @@ packages: '@react-navigation/native': 6.1.9(react-native@0.73.4)(react@18.2.0) '@react-navigation/native-stack': 6.9.17(@react-navigation/native@6.1.9)(react-native-safe-area-context@4.8.2)(react-native-screens@3.29.0)(react-native@0.73.4)(react@18.2.0) '@testing-library/jest-native': 5.4.3(react-native@0.73.4)(react-test-renderer@18.2.0)(react@18.2.0) - expo: 50.0.6(@babel/core@7.23.7)(@react-native/babel-preset@0.73.21) - expo-constants: 15.4.5(expo@50.0.6) - expo-linking: 6.2.2(expo@50.0.6) - expo-splash-screen: 0.26.4(expo-modules-autolinking@1.10.3)(expo@50.0.6) + expo: 50.0.7(@babel/core@7.23.7)(@react-native/babel-preset@0.73.21) + expo-constants: 15.4.5(expo@50.0.7) + expo-linking: 6.2.2(expo@50.0.7) + expo-splash-screen: 0.26.4(expo-modules-autolinking@1.10.3)(expo@50.0.7) expo-status-bar: 1.11.1 react-helmet-async: 1.3.0(react-dom@18.2.0)(react@18.2.0) react-native-reanimated: 3.6.2(@babel/core@7.23.7)(@babel/plugin-proposal-nullish-coalescing-operator@7.18.6)(@babel/plugin-proposal-optional-chaining@7.21.0)(@babel/plugin-transform-arrow-functions@7.23.3)(@babel/plugin-transform-shorthand-properties@7.23.3)(@babel/plugin-transform-template-literals@7.23.3)(react-native@0.73.4)(react@18.2.0) @@ -6840,13 +6759,13 @@ packages: - supports-color dev: false - /expo-splash-screen@0.26.4(expo-modules-autolinking@1.10.3)(expo@50.0.6): + /expo-splash-screen@0.26.4(expo-modules-autolinking@1.10.3)(expo@50.0.7): resolution: {integrity: sha512-2DwofTQ0FFQCsvDysm/msENsbyNsJiAJwK3qK/oXeizECAPqD7bK19J4z9kuEbr7ORPX9MLnTQYKl6kmX3keUg==} peerDependencies: expo: '*' dependencies: '@expo/prebuild-config': 6.7.4(expo-modules-autolinking@1.10.3) - expo: 50.0.6(@babel/core@7.23.7)(@react-native/babel-preset@0.73.21) + expo: 50.0.7(@babel/core@7.23.7)(@react-native/babel-preset@0.73.21) transitivePeerDependencies: - encoding - expo-modules-autolinking @@ -6857,28 +6776,28 @@ packages: resolution: {integrity: sha512-ddQEtCOgYHTLlFUe/yH67dDBIoct5VIULthyT3LRJbEwdpzAgueKsX2FYK02ldh440V87PWKCamh7R9evk1rrg==} dev: false - /expo-system-ui@2.9.3(expo@50.0.6): + /expo-system-ui@2.9.3(expo@50.0.7): resolution: {integrity: sha512-RNFNBLJ9lhnjOGrHhtfDc15Ry/lF+SA4kwulmHzYGqaTeYvsL9q0K0+m9qmxuDdrbKJkuurvzvjVylDNnKNFVg==} peerDependencies: expo: '*' dependencies: '@react-native/normalize-color': 2.1.0 debug: 4.3.4 - expo: 50.0.6(@babel/core@7.23.7)(@react-native/babel-preset@0.73.21) + expo: 50.0.7(@babel/core@7.23.7)(@react-native/babel-preset@0.73.21) transitivePeerDependencies: - supports-color dev: false - /expo-updates-interface@0.15.3(expo@50.0.6): + /expo-updates-interface@0.15.3(expo@50.0.7): resolution: {integrity: sha512-uLvsbaCmUsXgJqeen8rYH/jPr874ZUCXEvWpKHxrCv5/XATPlYEaDuecbNSGQ+cu78i6MdtB4BHOwZmoH2d47A==} peerDependencies: expo: '*' dependencies: - expo: 50.0.6(@babel/core@7.23.7)(@react-native/babel-preset@0.73.21) + expo: 50.0.7(@babel/core@7.23.7)(@react-native/babel-preset@0.73.21) dev: false - /expo@50.0.6(@babel/core@7.23.7)(@react-native/babel-preset@0.73.21): - resolution: {integrity: sha512-CVg0h9bmYeTWtw4EOL0HKNL+zu84YZl5nLWRPKrcpt8jox1VQQAYmvJGMdM5gSRxq5CFNLlWGxq9O8Zvfi1SOQ==} + /expo@50.0.7(@babel/core@7.23.7)(@react-native/babel-preset@0.73.21): + resolution: {integrity: sha512-lTqIrKOUTKHLdTuAaJzZihi1v7F8Ix1dOXVWMpToDy9zPC/s+fet0fbyXdFUxYsCUyuEDIB9tvejrTYZk8Hm0Q==} hasBin: true dependencies: '@babel/runtime': 7.23.8 @@ -6888,12 +6807,12 @@ packages: '@expo/metro-config': 0.17.4(@react-native/babel-preset@0.73.21) '@expo/vector-icons': 14.0.0 babel-preset-expo: 10.0.1(@babel/core@7.23.7) - expo-asset: 9.0.2(expo@50.0.6) - expo-file-system: 16.0.6(expo@50.0.6) - expo-font: 11.10.2(expo@50.0.6) - expo-keep-awake: 12.8.2(expo@50.0.6) + expo-asset: 9.0.2(expo@50.0.7) + expo-file-system: 16.0.6(expo@50.0.7) + expo-font: 11.10.3(expo@50.0.7) + expo-keep-awake: 12.8.2(expo@50.0.7) expo-modules-autolinking: 1.10.3 - expo-modules-core: 1.11.8 + expo-modules-core: 1.11.9 fbemitter: 3.0.0 whatwg-url-without-unicode: 8.0.0-3 transitivePeerDependencies: From c39302e5efb7f475856cbe781e637023d35d459d Mon Sep 17 00:00:00 2001 From: Elena Bitire <elena@obytes.com> Date: Tue, 20 Feb 2024 17:47:28 +0200 Subject: [PATCH 14/14] feat: update modal component implementation --- src/ui/core/bottom-sheet/backdrop.tsx | 26 ---------------------- src/ui/core/bottom-sheet/index.tsx | 1 - src/ui/core/modal.tsx | 32 ++++++++++++++++++++++++--- 3 files changed, 29 insertions(+), 30 deletions(-) delete mode 100644 src/ui/core/bottom-sheet/backdrop.tsx delete mode 100644 src/ui/core/bottom-sheet/index.tsx diff --git a/src/ui/core/bottom-sheet/backdrop.tsx b/src/ui/core/bottom-sheet/backdrop.tsx deleted file mode 100644 index 6eed12f5..00000000 --- a/src/ui/core/bottom-sheet/backdrop.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import type { BottomSheetBackdropProps } from '@gorhom/bottom-sheet'; -import { useBottomSheet } from '@gorhom/bottom-sheet'; -import React from 'react'; -import { Pressable } from 'react-native'; -import Animated, { FadeIn, FadeOut } from 'react-native-reanimated'; - -const AnimatedPressable = Animated.createAnimatedComponent(Pressable); - -const CustomBackdrop = ({ style }: BottomSheetBackdropProps) => { - const { close } = useBottomSheet(); - return ( - <AnimatedPressable - onPress={() => close()} - entering={FadeIn.duration(50)} - exiting={FadeOut.duration(20)} - // eslint-disable-next-line react-native/no-inline-styles - style={[style, { backgroundColor: 'rgba(0, 0, 0, 0.4)' }]} - /> - ); -}; - -export const renderBackdrop = (props: BottomSheetBackdropProps) => ( - <CustomBackdrop {...props} /> -); - -export default CustomBackdrop; diff --git a/src/ui/core/bottom-sheet/index.tsx b/src/ui/core/bottom-sheet/index.tsx deleted file mode 100644 index 34964723..00000000 --- a/src/ui/core/bottom-sheet/index.tsx +++ /dev/null @@ -1 +0,0 @@ -export * from './backdrop'; diff --git a/src/ui/core/modal.tsx b/src/ui/core/modal.tsx index 2590a060..b10d1a8b 100644 --- a/src/ui/core/modal.tsx +++ b/src/ui/core/modal.tsx @@ -28,13 +28,16 @@ * */ -import type { BottomSheetModalProps } from '@gorhom/bottom-sheet'; -import { BottomSheetModal } from '@gorhom/bottom-sheet'; +import type { + BottomSheetBackdropProps, + BottomSheetModalProps, +} from '@gorhom/bottom-sheet'; +import { BottomSheetModal, useBottomSheet } from '@gorhom/bottom-sheet'; import * as React from 'react'; import { Pressable, View } from 'react-native'; +import Animated, { FadeIn, FadeOut } from 'react-native-reanimated'; import { Path, Svg } from 'react-native-svg'; -import { renderBackdrop } from './bottom-sheet'; import { Text } from './text'; type ModalProps = BottomSheetModalProps & { @@ -105,6 +108,29 @@ export const Modal = React.forwardRef( } ); +/** + * Custom Backdrop + */ + +const AnimatedPressable = Animated.createAnimatedComponent(Pressable); + +const CustomBackdrop = ({ style }: BottomSheetBackdropProps) => { + const { close } = useBottomSheet(); + return ( + <AnimatedPressable + onPress={() => close()} + entering={FadeIn.duration(50)} + exiting={FadeOut.duration(20)} + // eslint-disable-next-line react-native/no-inline-styles + style={[style, { backgroundColor: 'rgba(0, 0, 0, 0.4)' }]} + /> + ); +}; + +export const renderBackdrop = (props: BottomSheetBackdropProps) => ( + <CustomBackdrop {...props} /> +); + /** * * @param detached