From f1bfd9a9b379bc59de371b345c89dbc500686998 Mon Sep 17 00:00:00 2001 From: Akshay Thakur Date: Mon, 2 Oct 2023 16:45:51 -0700 Subject: [PATCH] update nav --- 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! - -