From 41ea77a651ad7052f9132c22a1ad2b356e99fef3 Mon Sep 17 00:00:00 2001 From: emilysunaryo <99292788+emilysunaryo@users.noreply.github.com> Date: Mon, 2 Oct 2023 14:15:55 -0700 Subject: [PATCH 1/6] [nav] Basic bottom nav implementation (#12) --- App.tsx | 53 ++++++++-- assets/icons.tsx | 24 +++++ package-lock.json | 255 +++++++++++++++++++++++++++++++++++++++++++++- package.json | 9 +- 4 files changed, 330 insertions(+), 11 deletions(-) create mode 100644 assets/icons.tsx diff --git a/App.tsx b/App.tsx index 2c823962..cfd8941a 100644 --- a/App.tsx +++ b/App.tsx @@ -1,22 +1,57 @@ +import { Ionicons } from '@expo/vector-icons'; +import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs'; import { NavigationContainer } from '@react-navigation/native'; -import { createNativeStackNavigator } from '@react-navigation/native-stack'; import HomeScreen from './src/screens/HomeScreen'; -import LoginScreen from './src/screens/LoginScreen'; import StoryScreen from './src/screens/StoryScreen'; import ToastScreen from './src/screens/ToastScreen'; import { RootStackParamsList } from './src/types/types'; -const Stack = createNativeStackNavigator(); +const Tab = createMaterialBottomTabNavigator(); + +function HomeIcon({ color }: { color: string }) { + return ; +} + +function StoryIcon({ color }: { color: string }) { + return ; +} + +function ToastIcon({ color }: { color: string }) { + return ; +} export default function App() { return ( - - - - - - + + + + + ); } diff --git a/assets/icons.tsx b/assets/icons.tsx new file mode 100644 index 00000000..bc0d2686 --- /dev/null +++ b/assets/icons.tsx @@ -0,0 +1,24 @@ +import { Ionicons } from '@expo/vector-icons'; +import React from 'react'; + +export type IconType = + | 'home_outline' + | 'document_outline' + | 'notifications_outline'; + +const IconSvgs: Record = { + home_outline: , + document_outline: , + notifications_outline: , +}; +type Props = { + className?: string; + type: IconType; +}; + +const Icon: React.FC = ({ className, type }: Props) => + React.cloneElement(IconSvgs[type], { + className, + }); + +export default Icon; diff --git a/package-lock.json b/package-lock.json index f8ccb568..1567fb15 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,9 @@ "name": "girls-write-now", "version": "1.0.0", "dependencies": { + "@expo/vector-icons": "^13.0.0", + "@react-navigation/bottom-tabs": "^6.5.9", + "@react-navigation/material-bottom-tabs": "^6.2.17", "@react-navigation/native": "^6.1.8", "@react-navigation/native-stack": "^6.9.14", "axios": "^1.5.0", @@ -15,14 +18,18 @@ "expo-status-bar": "~1.6.0", "react": "18.2.0", "react-native": "0.72.4", + "react-native-ionicons": "^4.6.5", "react-native-safe-area-context": "4.6.3", - "react-native-screens": "~3.22.0" + "react-native-screens": "~3.22.0", + "react-native-vector-icons": "^10.0.0" }, "devDependencies": { "@babel/core": "^7.20.0", "@calblueprint/eslint-config-react": "^0.0.3", "@calblueprint/prettier-config": "^0.0.1", "@types/react": "~18.2.14", + "@types/react-native": "^0.72.3", + "@types/react-native-vector-icons": "^6.4.15", "@typescript-eslint/eslint-plugin": "^5.62.0", "@typescript-eslint/parser": "^5.62.0", "eslint": "^8.50.0", @@ -2018,6 +2025,28 @@ "prettier": "^2.8.4" } }, + "node_modules/@callstack/react-theme-provider": { + "version": "3.0.9", + "resolved": "https://registry.npmjs.org/@callstack/react-theme-provider/-/react-theme-provider-3.0.9.tgz", + "integrity": "sha512-tTQ0uDSCL0ypeMa8T/E9wAZRGKWj8kXP7+6RYgPTfOPs9N07C9xM8P02GJ3feETap4Ux5S69D9nteq9mEj86NA==", + "peer": true, + "dependencies": { + "deepmerge": "^3.2.0", + "hoist-non-react-statics": "^3.3.0" + }, + "peerDependencies": { + "react": ">=16.3.0" + } + }, + "node_modules/@callstack/react-theme-provider/node_modules/deepmerge": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-3.3.0.tgz", + "integrity": "sha512-GRQOafGHwMHpjPx9iCvTgpu9NojZ49q794EEL94JVEw6VaeA8XTUyBKvAkOOjBX9oJNiV6G3P+T+tihFjo2TqA==", + "peer": true, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/@eslint-community/eslint-utils": { "version": "4.4.0", "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz", @@ -6032,6 +6061,23 @@ "react-native": "*" } }, + "node_modules/@react-navigation/bottom-tabs": { + "version": "6.5.9", + "resolved": "https://registry.npmjs.org/@react-navigation/bottom-tabs/-/bottom-tabs-6.5.9.tgz", + "integrity": "sha512-366D4pwq41qKqzsrEk3OPW9atTQJrfrLHPJhX3NLOinRIuDrxal1jJwN3vzNZoEg7gIEKaPYckuqUKg0zRFdog==", + "dependencies": { + "@react-navigation/elements": "^1.3.19", + "color": "^4.2.3", + "warn-once": "^0.1.0" + }, + "peerDependencies": { + "@react-navigation/native": "^6.0.0", + "react": "*", + "react-native": "*", + "react-native-safe-area-context": ">= 3.0.0", + "react-native-screens": ">= 3.0.0" + } + }, "node_modules/@react-navigation/core": { "version": "6.4.9", "resolved": "https://registry.npmjs.org/@react-navigation/core/-/core-6.4.9.tgz", @@ -6075,6 +6121,22 @@ "react-native-safe-area-context": ">= 3.0.0" } }, + "node_modules/@react-navigation/material-bottom-tabs": { + "version": "6.2.17", + "resolved": "https://registry.npmjs.org/@react-navigation/material-bottom-tabs/-/material-bottom-tabs-6.2.17.tgz", + "integrity": "sha512-Y3ULwLlViArC+XQeqU3jzUQp965Qrv0caQlJ8MeEw/6NLENazJ5f1mTFjWFpvVWthQL56rXv3Vo7DU+kRN/DzQ==", + "dependencies": { + "@react-navigation/elements": "^1.3.19" + }, + "peerDependencies": { + "@react-navigation/native": "^6.0.0", + "react": "*", + "react-native": "*", + "react-native-paper": ">= 3.0.0", + "react-native-safe-area-context": ">= 3.0.0", + "react-native-vector-icons": ">= 6.0.0" + } + }, "node_modules/@react-navigation/native": { "version": "6.1.8", "resolved": "https://registry.npmjs.org/@react-navigation/native/-/native-6.1.8.tgz", @@ -6228,6 +6290,35 @@ "csstype": "^3.0.2" } }, + "node_modules/@types/react-native": { + "version": "0.72.3", + "resolved": "https://registry.npmjs.org/@types/react-native/-/react-native-0.72.3.tgz", + "integrity": "sha512-9+g+DBJIY3bG7+ZlYzKPr9kxTQxUuZQgLWZhYK4RlIcrsm3qaJhL2PU2e/K4CjnzznWCo2Islgec94x2z1pG4Q==", + "dev": true, + "dependencies": { + "@react-native/virtualized-lists": "^0.72.4", + "@types/react": "*" + } + }, + "node_modules/@types/react-native-vector-icons": { + "version": "6.4.15", + "resolved": "https://registry.npmjs.org/@types/react-native-vector-icons/-/react-native-vector-icons-6.4.15.tgz", + "integrity": "sha512-gmyVIANMFQXzpzejg4uMpYZ6KffrItkeb2F9LgcLnZz8RVrtbF8I3wbkRafHJoDJ2U0p8QiRui+BghD11ae8Gg==", + "dev": true, + "dependencies": { + "@types/react": "*", + "@types/react-native": "^0.70" + } + }, + "node_modules/@types/react-native-vector-icons/node_modules/@types/react-native": { + "version": "0.70.15", + "resolved": "https://registry.npmjs.org/@types/react-native/-/react-native-0.70.15.tgz", + "integrity": "sha512-wHrMQd65odOFbejFSDF7riocwLGEjkoJCF3GhH2a1vKqWbCExH361AZa/1GMG8gijAP86hkjF9gHZFHepEXaZA==", + "dev": true, + "dependencies": { + "@types/react": "*" + } + }, "node_modules/@types/scheduler": { "version": "0.16.3", "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz", @@ -7670,6 +7761,18 @@ "node": ">=6" } }, + "node_modules/color": { + "version": "4.2.3", + "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz", + "integrity": "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==", + "dependencies": { + "color-convert": "^2.0.1", + "color-string": "^1.9.0" + }, + "engines": { + "node": ">=12.5.0" + } + }, "node_modules/color-convert": { "version": "1.9.3", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", @@ -7683,6 +7786,31 @@ "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==" }, + "node_modules/color-string": { + "version": "1.9.1", + "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz", + "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==", + "dependencies": { + "color-name": "^1.0.0", + "simple-swizzle": "^0.2.2" + } + }, + "node_modules/color/node_modules/color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dependencies": { + "color-name": "~1.1.4" + }, + "engines": { + "node": ">=7.0.0" + } + }, + "node_modules/color/node_modules/color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==" + }, "node_modules/colorette": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.4.0.tgz", @@ -10000,6 +10128,21 @@ "node": ">=8" } }, + "node_modules/hoist-non-react-statics": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", + "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==", + "peer": true, + "dependencies": { + "react-is": "^16.7.0" + } + }, + "node_modules/hoist-non-react-statics/node_modules/react-is": { + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", + "peer": true + }, "node_modules/hosted-git-info": { "version": "3.0.8", "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-3.0.8.tgz", @@ -14505,6 +14648,42 @@ "react": "18.2.0" } }, + "node_modules/react-native-ionicons": { + "version": "4.6.5", + "resolved": "https://registry.npmjs.org/react-native-ionicons/-/react-native-ionicons-4.6.5.tgz", + "integrity": "sha512-s2Ia7M5t609LE9LWygMj3ALVPUlKhK7R9XcMb67fP4EYJv0oLcwg5pc+8ftv9XXaUuTW/WgL3zJlBYxAvtvMJg==", + "peerDependencies": { + "react": "*", + "react-native": "*" + } + }, + "node_modules/react-native-paper": { + "version": "5.10.6", + "resolved": "https://registry.npmjs.org/react-native-paper/-/react-native-paper-5.10.6.tgz", + "integrity": "sha512-n5r2S53/pGpHRyQV/n75W8ibU+VyamMGSqKWGSti9ZmChcgEWC0s4o/TnpUvmAKNZCQwcYwKSLrmMq5wR5nUNA==", + "peer": true, + "dependencies": { + "@callstack/react-theme-provider": "^3.0.9", + "color": "^3.1.2", + "use-latest-callback": "^0.1.5" + }, + "peerDependencies": { + "react": "*", + "react-native": "*", + "react-native-safe-area-context": "*", + "react-native-vector-icons": "*" + } + }, + "node_modules/react-native-paper/node_modules/color": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/color/-/color-3.2.1.tgz", + "integrity": "sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==", + "peer": true, + "dependencies": { + "color-convert": "^1.9.3", + "color-string": "^1.6.0" + } + }, "node_modules/react-native-safe-area-context": { "version": "4.6.3", "resolved": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-4.6.3.tgz", @@ -14527,6 +14706,67 @@ "react-native": "*" } }, + "node_modules/react-native-vector-icons": { + "version": "10.0.0", + "resolved": "https://registry.npmjs.org/react-native-vector-icons/-/react-native-vector-icons-10.0.0.tgz", + "integrity": "sha512-efMOVbZIebY8RszZPzPBoXi9pvD/NFYmjIDYxRoc9LYSzV8rMJtT8FfcO2hPu85Rn2x9xktha0+qn0B7EqMAcQ==", + "dependencies": { + "prop-types": "^15.7.2", + "yargs": "^16.1.1" + }, + "bin": { + "fa-upgrade.sh": "bin/fa-upgrade.sh", + "fa5-upgrade": "bin/fa5-upgrade.sh", + "fa6-upgrade": "bin/fa6-upgrade.sh", + "generate-icon": "bin/generate-icon.js" + } + }, + "node_modules/react-native-vector-icons/node_modules/cliui": { + "version": "7.0.4", + "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz", + "integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==", + "dependencies": { + "string-width": "^4.2.0", + "strip-ansi": "^6.0.0", + "wrap-ansi": "^7.0.0" + } + }, + "node_modules/react-native-vector-icons/node_modules/strip-ansi": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", + "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", + "dependencies": { + "ansi-regex": "^5.0.1" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/react-native-vector-icons/node_modules/yargs": { + "version": "16.2.0", + "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz", + "integrity": "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==", + "dependencies": { + "cliui": "^7.0.2", + "escalade": "^3.1.1", + "get-caller-file": "^2.0.5", + "require-directory": "^2.1.1", + "string-width": "^4.2.0", + "y18n": "^5.0.5", + "yargs-parser": "^20.2.2" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/react-native-vector-icons/node_modules/yargs-parser": { + "version": "20.2.9", + "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz", + "integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==", + "engines": { + "node": ">=10" + } + }, "node_modules/react-native/node_modules/promise": { "version": "8.3.0", "resolved": "https://registry.npmjs.org/promise/-/promise-8.3.0.tgz", @@ -15125,6 +15365,19 @@ "node": ">= 5.10.0" } }, + "node_modules/simple-swizzle": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz", + "integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==", + "dependencies": { + "is-arrayish": "^0.3.1" + } + }, + "node_modules/simple-swizzle/node_modules/is-arrayish": { + "version": "0.3.2", + "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz", + "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==" + }, "node_modules/sisteransi": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz", diff --git a/package.json b/package.json index 75347d86..84cf2be5 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,9 @@ "prettier": "prettier --check ." }, "dependencies": { + "@expo/vector-icons": "^13.0.0", + "@react-navigation/bottom-tabs": "^6.5.9", + "@react-navigation/material-bottom-tabs": "^6.2.17", "@react-navigation/native": "^6.1.8", "@react-navigation/native-stack": "^6.9.14", "axios": "^1.5.0", @@ -19,14 +22,18 @@ "expo-status-bar": "~1.6.0", "react": "18.2.0", "react-native": "0.72.4", + "react-native-ionicons": "^4.6.5", + "react-native-safe-area-context": "4.6.3", "react-native-screens": "~3.22.0", - "react-native-safe-area-context": "4.6.3" + "react-native-vector-icons": "^10.0.0" }, "devDependencies": { "@babel/core": "^7.20.0", "@calblueprint/eslint-config-react": "^0.0.3", "@calblueprint/prettier-config": "^0.0.1", "@types/react": "~18.2.14", + "@types/react-native": "^0.72.3", + "@types/react-native-vector-icons": "^6.4.15", "@typescript-eslint/eslint-plugin": "^5.62.0", "@typescript-eslint/parser": "^5.62.0", "eslint": "^8.50.0", From 44a50ac8760a406ea269c18a41006226cc02cef3 Mon Sep 17 00:00:00 2001 From: Akshay Thakur <78326649+akshaynthakur@users.noreply.github.com> Date: Mon, 2 Oct 2023 16:56:25 -0700 Subject: [PATCH 2/6] [nav] Add MyContentStackNavigator and remove basic nav on HomeScreen #13 --- App.tsx | 51 +---------------- assets/icons.tsx | 2 + package-lock.json | 54 ++++++++++++++++++ package.json | 1 + src/navigation/TabNavigator.tsx | 57 +++++++++++++++++++ .../stacks/MyContentStackNavigator.tsx | 20 +++++++ src/screens/HomeScreen.tsx | 18 +----- src/screens/MyContent.tsx | 24 ++++++++ src/screens/SearchScreen.tsx | 10 ++++ src/types/navigation.tsx | 10 ++++ src/types/types.tsx | 6 -- 11 files changed, 182 insertions(+), 71 deletions(-) create mode 100644 src/navigation/TabNavigator.tsx create mode 100644 src/navigation/stacks/MyContentStackNavigator.tsx create mode 100644 src/screens/MyContent.tsx create mode 100644 src/screens/SearchScreen.tsx create mode 100644 src/types/navigation.tsx diff --git a/App.tsx b/App.tsx index cfd8941a..3cc577e7 100644 --- a/App.tsx +++ b/App.tsx @@ -1,57 +1,10 @@ -import { Ionicons } from '@expo/vector-icons'; -import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs'; import { NavigationContainer } from '@react-navigation/native'; -import HomeScreen from './src/screens/HomeScreen'; -import StoryScreen from './src/screens/StoryScreen'; -import ToastScreen from './src/screens/ToastScreen'; -import { RootStackParamsList } from './src/types/types'; - -const Tab = createMaterialBottomTabNavigator(); - -function HomeIcon({ color }: { color: string }) { - return ; -} - -function StoryIcon({ color }: { color: string }) { - return ; -} - -function ToastIcon({ color }: { color: string }) { - return ; -} +import TabNavigator from './src/navigation/TabNavigator'; export default function App() { return ( - - - - - + ); } diff --git a/assets/icons.tsx b/assets/icons.tsx index bc0d2686..4c72dac0 100644 --- a/assets/icons.tsx +++ b/assets/icons.tsx @@ -3,11 +3,13 @@ import React from 'react'; export type IconType = | 'home_outline' + | 'search_outline' | 'document_outline' | 'notifications_outline'; const IconSvgs: Record = { home_outline: , + search_outline: , document_outline: , notifications_outline: , }; diff --git a/package-lock.json b/package-lock.json index 1567fb15..2e875b78 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,6 +13,7 @@ "@react-navigation/material-bottom-tabs": "^6.2.17", "@react-navigation/native": "^6.1.8", "@react-navigation/native-stack": "^6.9.14", + "@react-navigation/stack": "^6.3.18", "axios": "^1.5.0", "expo": "~49.0.11", "expo-status-bar": "~1.6.0", @@ -2047,6 +2048,18 @@ "node": ">=0.10.0" } }, + "node_modules/@egjs/hammerjs": { + "version": "2.0.17", + "resolved": "https://registry.npmjs.org/@egjs/hammerjs/-/hammerjs-2.0.17.tgz", + "integrity": "sha512-XQsZgjm2EcVUiZQf11UBJQfmZeEmOW8DpI1gsFeln6w0ae0ii4dMQEQ0kjl6DspdWX1aGY1/loyXnP0JS06e/A==", + "peer": true, + "dependencies": { + "@types/hammerjs": "^2.0.36" + }, + "engines": { + "node": ">=0.8.0" + } + }, "node_modules/@eslint-community/eslint-utils": { "version": "4.4.0", "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz", @@ -6187,6 +6200,24 @@ "nanoid": "^3.1.23" } }, + "node_modules/@react-navigation/stack": { + "version": "6.3.18", + "resolved": "https://registry.npmjs.org/@react-navigation/stack/-/stack-6.3.18.tgz", + "integrity": "sha512-jAXneaLAs57xvyMFkebEyGCZDyz90KnaN7fM9f5Bu+Gx3KnoppdNfT4drpmN/f5f32L0eXS4aRAvuDrFT1mFfw==", + "dependencies": { + "@react-navigation/elements": "^1.3.19", + "color": "^4.2.3", + "warn-once": "^0.1.0" + }, + "peerDependencies": { + "@react-navigation/native": "^6.0.0", + "react": "*", + "react-native": "*", + "react-native-gesture-handler": ">= 1.0.0", + "react-native-safe-area-context": ">= 3.0.0", + "react-native-screens": ">= 3.0.0" + } + }, "node_modules/@segment/loosely-validate-event": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/@segment/loosely-validate-event/-/loosely-validate-event-2.0.0.tgz", @@ -6235,6 +6266,12 @@ "@sinonjs/commons": "^3.0.0" } }, + "node_modules/@types/hammerjs": { + "version": "2.0.42", + "resolved": "https://registry.npmjs.org/@types/hammerjs/-/hammerjs-2.0.42.tgz", + "integrity": "sha512-Xxk14BrwHnGi0xlURPRb+Y0UNn2w3cTkeFm7pKMsYOaNgH/kabbJLhcBoNIodwsbTz7Z8KcWjtDvlGH0nc0U9w==", + "peer": true + }, "node_modules/@types/istanbul-lib-coverage": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.4.tgz", @@ -14648,6 +14685,23 @@ "react": "18.2.0" } }, + "node_modules/react-native-gesture-handler": { + "version": "2.13.1", + "resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-2.13.1.tgz", + "integrity": "sha512-hW454X7sjuiBN+lobqw63pmT3boAmTl5OP6zQLq83iEe4T6PcHZ9lxzgCrebtgmutY8cJfq9rM2dOUVh9WBcww==", + "peer": true, + "dependencies": { + "@egjs/hammerjs": "^2.0.17", + "hoist-non-react-statics": "^3.3.0", + "invariant": "^2.2.4", + "lodash": "^4.17.21", + "prop-types": "^15.7.2" + }, + "peerDependencies": { + "react": "*", + "react-native": "*" + } + }, "node_modules/react-native-ionicons": { "version": "4.6.5", "resolved": "https://registry.npmjs.org/react-native-ionicons/-/react-native-ionicons-4.6.5.tgz", diff --git a/package.json b/package.json index 84cf2be5..6adc4f7c 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "@react-navigation/material-bottom-tabs": "^6.2.17", "@react-navigation/native": "^6.1.8", "@react-navigation/native-stack": "^6.9.14", + "@react-navigation/stack": "^6.3.18", "axios": "^1.5.0", "expo": "~49.0.11", "expo-status-bar": "~1.6.0", diff --git a/src/navigation/TabNavigator.tsx b/src/navigation/TabNavigator.tsx new file mode 100644 index 00000000..aa225797 --- /dev/null +++ b/src/navigation/TabNavigator.tsx @@ -0,0 +1,57 @@ +import { Ionicons } from '@expo/vector-icons'; +import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs'; +import { ReactElement } from 'react'; +import HomeScreen from '../screens/HomeScreen'; +import SearchScreen from '../screens/SearchScreen'; +import { RootStackParamsList } from '../types/navigation'; +import MyContentStackNavigator from './stacks/MyContentStackNavigator'; + +function HomeIcon({ color }: { color: string }) { + return ; +} + +function SearchIcon({ color }: { color: string }) { + return ; +} + +function MyContentIcon({ color }: { color: string }) { + return ; +} + +const Tab = createMaterialBottomTabNavigator(); + +function TabNavigator(): ReactElement { + return ( + + + + + + ); +} + +export default TabNavigator; diff --git a/src/navigation/stacks/MyContentStackNavigator.tsx b/src/navigation/stacks/MyContentStackNavigator.tsx new file mode 100644 index 00000000..808eb254 --- /dev/null +++ b/src/navigation/stacks/MyContentStackNavigator.tsx @@ -0,0 +1,20 @@ +import { createStackNavigator } from '@react-navigation/stack'; +import React from 'react'; +import MyContentScreen from '../../screens/MyContent'; +import StoryScreen from '../../screens/StoryScreen'; +import { MyContentStackParamList } from '../../types/navigation'; + +const MyContentStack = createStackNavigator(); + +export default function MyContentStackNavigator() { + return ( + + + + + ); +} diff --git a/src/screens/HomeScreen.tsx b/src/screens/HomeScreen.tsx index e7181236..00c2db13 100644 --- a/src/screens/HomeScreen.tsx +++ b/src/screens/HomeScreen.tsx @@ -1,24 +1,10 @@ -import { NativeStackScreenProps } from '@react-navigation/native-stack'; import React from 'react'; -import { Button, Text, View } from 'react-native'; -import { RootStackParamsList } from '../types/types'; +import { Text, View } from 'react-native'; -type HomeScreenProps = NativeStackScreenProps; - -export default function HomeScreen(props: HomeScreenProps) { - const { navigation } = props; +export default function HomeScreen() { return ( GIRLS WRITE NOW! - -