From 30b40e5e65dec4136bb6457b0611a1c354f92963 Mon Sep 17 00:00:00 2001 From: Emily Sunaryo Date: Sun, 1 Oct 2023 21:38:13 -0700 Subject: [PATCH] basic bottom nav implementation --- 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",