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 +++++++------------------- src/screens/onboarding/Login.tsx | 6 ++++-- src/screens/onboarding/ProfileOnboarding.tsx | 13 +++++++----- 7 files changed, 48 insertions(+), 112 deletions(-) (limited to 'src/screens') 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; diff --git a/src/screens/onboarding/Login.tsx b/src/screens/onboarding/Login.tsx index 537ce868..7b76e97c 100644 --- a/src/screens/onboarding/Login.tsx +++ b/src/screens/onboarding/Login.tsx @@ -13,7 +13,7 @@ import { Platform, } from 'react-native'; -import {RootStackParamList} from '../../routes'; +import {RootStackParamList, AuthContext} from '../../routes'; import {Background, TaggInput, SubmitButton} from '../../components'; import {usernameRegex, LOGIN_ENDPOINT} from '../../constants'; @@ -41,6 +41,8 @@ const Login: React.FC = ({navigation}: LoginProps) => { isValidPassword: false, attemptedSubmit: false, }); + // determines if user is logged in + const {login} = React.useContext(AuthContext); /** * Updates the state of username. Also verifies the input of the username field by ensuring proper length and appropriate characters. @@ -118,7 +120,7 @@ const Login: React.FC = ({navigation}: LoginProps) => { let statusCode = response.status; if (statusCode === 200) { - navigation.navigate('Home'); + login(); } else if (statusCode === 401) { Alert.alert( 'Login failed 😔', diff --git a/src/screens/onboarding/ProfileOnboarding.tsx b/src/screens/onboarding/ProfileOnboarding.tsx index 191d62b2..6ce1ff80 100644 --- a/src/screens/onboarding/ProfileOnboarding.tsx +++ b/src/screens/onboarding/ProfileOnboarding.tsx @@ -10,7 +10,7 @@ import { Alert, View, } from 'react-native'; -import {RootStackParamList} from '../../routes'; +import {RootStackParamList, AuthContext} from '../../routes'; import {Background} from '../../components'; import ImagePicker from 'react-native-image-crop-picker'; import {REGISTER_ENDPOINT} from '../../constants'; @@ -38,6 +38,12 @@ const ProfileOnboarding: React.FC = ({route}) => { const [largePic, setLargePic] = React.useState(''); const [smallPic, setSmallPic] = React.useState(''); + /** + * login: determines if user successully created an account to + * navigate to home and display main tab navigation bar + */ + const {login} = React.useContext(AuthContext); + /** * Profile screen "Add Large Profile Pic Here" button */ @@ -147,10 +153,7 @@ const ProfileOnboarding: React.FC = ({route}) => { let data = await response.json(); let statusCode = response.status; if (statusCode === 200) { - Alert.alert( - 'Profile successfully created! 🥳', - `Welcome to Tagg, ${username}!`, - ); + login(); } else if (statusCode === 400) { Alert.alert('Profile update failed. 😔', `${data}`); } else { -- cgit v1.2.3-70-g09d2