From f9cf9b5d89d5e25b227814f0fc759257564cea89 Mon Sep 17 00:00:00 2001 From: meganhong <34787696+meganhong@users.noreply.github.com> Date: Thu, 30 Jul 2020 13:28:56 -0700 Subject: TMA-168: Add Gradient to Navigation Bar (#26) * Renamed Profile in Onboarding and added dummy main screens * Comments for new screens created * change navigation in verification to profileonboarding * added icons and tab navigation * added icons to navigation bar * add clicked icons * added 2x and 3x icon sizes * rename for resizing to work * remove upload clicked as informed by design * changed initialRouteName back to Login * created NavigationIcon component to hold all the nav icons * added default case * changed intialRouteName back to Login * fixed icon names * fixed icon names * add navigation to home page after login * added gradient and changed screens to transparent * renamed Routes to OnboardingStack * rerouting navigation * pulling from master * merge conflicts * added entryway to home on profileonboarding * changed gradient into custom component * removed a method that i had commented out Co-authored-by: Megan Hong --- src/screens/main/Home.tsx | 25 +++++++------------------ src/screens/main/Notifications.tsx | 31 +++++++------------------------ src/screens/main/Profile.tsx | 28 +++++++--------------------- src/screens/main/Search.tsx | 28 +++++++--------------------- src/screens/main/Upload.tsx | 29 ++++++++--------------------- 5 files changed, 36 insertions(+), 105 deletions(-) (limited to 'src/screens/main') diff --git a/src/screens/main/Home.tsx b/src/screens/main/Home.tsx index cd2c418a..86f9b2ba 100644 --- a/src/screens/main/Home.tsx +++ b/src/screens/main/Home.tsx @@ -1,35 +1,24 @@ import React from 'react'; -import {RootStackParamList} from '../../routes'; -import {RouteProp} from '@react-navigation/native'; -import {StackNavigationProp} from '@react-navigation/stack'; -import {Background} from '../../components'; import {Text} from 'react-native-animatable'; import {StyleSheet} from 'react-native'; - -type HomeScreenRouteProp = RouteProp; -type HomeScreenNavigationProp = StackNavigationProp; -interface HomeProps { - route: HomeScreenRouteProp; - navigation: HomeScreenNavigationProp; -} +import {GradientBackground} from '../../components'; /** * Home Screen for displaying Tagg post suggestions * for users to discover and browse */ -const Home: React.FC = () => { +const Home: React.FC = () => { return ( - - Tagg Home Screen 🏠 - + + Tagg Home Screen 🏠 + ); }; const styles = StyleSheet.create({ - container: { - flex: 1, + text: { justifyContent: 'center', - alignItems: 'center', + backgroundColor: 'transparent', }, }); export default Home; diff --git a/src/screens/main/Notifications.tsx b/src/screens/main/Notifications.tsx index ec881c8e..db89d7f9 100644 --- a/src/screens/main/Notifications.tsx +++ b/src/screens/main/Notifications.tsx @@ -1,41 +1,24 @@ import React from 'react'; -import {RootStackParamList} from '../../routes'; -import {RouteProp} from '@react-navigation/native'; -import {StackNavigationProp} from '@react-navigation/stack'; -import {Background} from '../../components'; import {Text} from 'react-native-animatable'; import {StyleSheet} from 'react-native'; - -type NotificationsScreenRouteProp = RouteProp< - RootStackParamList, - 'Notifications' ->; -type NotificationsScreenNavigationProp = StackNavigationProp< - RootStackParamList, - 'Notifications' ->; -interface NotificationsProps { - route: NotificationsScreenRouteProp; - navigation: NotificationsScreenNavigationProp; -} +import {GradientBackground} from '../../components'; /** * Navigation Screen for displaying other users' * actions on the logged in user's posts */ -const Notifications: React.FC = () => { +const Notifications: React.FC = () => { return ( - - Notifications will go here 🔔 - + + Notifications will go here 🔔 + ); }; const styles = StyleSheet.create({ - container: { - flex: 1, + text: { justifyContent: 'center', - alignItems: 'center', + backgroundColor: 'transparent', }, }); export default Notifications; diff --git a/src/screens/main/Profile.tsx b/src/screens/main/Profile.tsx index a40a9cef..3a6536e4 100644 --- a/src/screens/main/Profile.tsx +++ b/src/screens/main/Profile.tsx @@ -1,38 +1,24 @@ import React from 'react'; -import {RootStackParamList} from '../../routes'; -import {RouteProp} from '@react-navigation/native'; -import {StackNavigationProp} from '@react-navigation/stack'; -import {Background} from '../../components'; import {Text} from 'react-native-animatable'; import {StyleSheet} from 'react-native'; - -type ProfileScreenRouteProp = RouteProp; -type ProfileScreenNavigationProp = StackNavigationProp< - RootStackParamList, - 'Profile' ->; -interface ProfileProps { - route: ProfileScreenRouteProp; - navigation: ProfileScreenNavigationProp; -} +import {GradientBackground} from '../../components'; /** * Profile Screen for a user's logged in profile * including posts, messaging, and settings */ -const Profile: React.FC = () => { +const Profile: React.FC = () => { return ( - - Profile Screen 🤩 - + + Profile Screen 🤩 + ); }; const styles = StyleSheet.create({ - container: { - flex: 1, + text: { justifyContent: 'center', - alignItems: 'center', + backgroundColor: 'transparent', }, }); export default Profile; diff --git a/src/screens/main/Search.tsx b/src/screens/main/Search.tsx index caa5d205..19e35d04 100644 --- a/src/screens/main/Search.tsx +++ b/src/screens/main/Search.tsx @@ -1,38 +1,24 @@ import React from 'react'; -import {RootStackParamList} from '../../routes'; -import {RouteProp} from '@react-navigation/native'; -import {StackNavigationProp} from '@react-navigation/stack'; -import {Background} from '../../components'; import {Text} from 'react-native-animatable'; import {StyleSheet} from 'react-native'; - -type SearchScreenRouteProp = RouteProp; -type SearchScreenNavigationProp = StackNavigationProp< - RootStackParamList, - 'Search' ->; -interface SearchProps { - route: SearchScreenRouteProp; - navigation: SearchScreenNavigationProp; -} +import {GradientBackground} from '../../components'; /** * Search Screen for user recommendations and a search * tool to allow user to find other users */ -const Search: React.FC = () => { +const Search: React.FC = () => { return ( - - Search for people here 👀 - + + Search for people here 👀 + ); }; const styles = StyleSheet.create({ - container: { - flex: 1, + text: { justifyContent: 'center', - alignItems: 'center', + backgroundColor: 'transparent', }, }); export default Search; diff --git a/src/screens/main/Upload.tsx b/src/screens/main/Upload.tsx index 4bbe2d0a..d91af1f5 100644 --- a/src/screens/main/Upload.tsx +++ b/src/screens/main/Upload.tsx @@ -1,37 +1,24 @@ import React from 'react'; -import {RootStackParamList} from '../../routes'; -import {RouteProp} from '@react-navigation/native'; -import {StackNavigationProp} from '@react-navigation/stack'; -import {Background} from '../../components'; import {Text} from 'react-native-animatable'; import {StyleSheet} from 'react-native'; - -type UploadScreenRouteProp = RouteProp; -type UploadScreenNavigationProp = StackNavigationProp< - RootStackParamList, - 'Upload' ->; -interface UploadProps { - route: UploadScreenRouteProp; - navigation: UploadScreenNavigationProp; -} +import {GradientBackground} from '../../components'; /** * Upload Screen to allow users to upload posts to Tagg */ -const Upload: React.FC = () => { +const Upload: React.FC = () => { return ( - - Upload pics ⬆ - + + Upload pics ⬆ + ); }; const styles = StyleSheet.create({ - container: { - flex: 1, + text: { justifyContent: 'center', - alignItems: 'center', + backgroundColor: 'transparent', }, }); + export default Upload; -- cgit v1.2.3-70-g09d2