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/App.tsx | 10 +- src/components/common/GradientBackground.tsx | 34 ++++++ src/components/common/index.ts | 1 + src/routes/NavigationBar.tsx | 75 ++++++++++++++ src/routes/OnboardingStack.tsx | 57 ++++++++++ src/routes/Routes.tsx | 149 ++++++--------------------- src/routes/index.ts | 6 +- 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 ++- 14 files changed, 256 insertions(+), 236 deletions(-) create mode 100644 src/components/common/GradientBackground.tsx create mode 100644 src/routes/NavigationBar.tsx create mode 100644 src/routes/OnboardingStack.tsx (limited to 'src') diff --git a/src/App.tsx b/src/App.tsx index f4dea5bf..5abf1ff4 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,12 +1,14 @@ import React from 'react'; -import Routes from './routes'; import {NavigationContainer} from '@react-navigation/native'; +import {Routes, AuthContextProvider} from './routes'; const App = () => { return ( - - - + + + + + ); }; diff --git a/src/components/common/GradientBackground.tsx b/src/components/common/GradientBackground.tsx new file mode 100644 index 00000000..f363bd61 --- /dev/null +++ b/src/components/common/GradientBackground.tsx @@ -0,0 +1,34 @@ +import React from 'react'; +import LinearGradient from 'react-native-linear-gradient'; +import { + StyleSheet, + TouchableWithoutFeedback, + Keyboard, + ViewProps, + SafeAreaView, +} from 'react-native'; + +interface GradientBackgroundProps extends ViewProps {} +const GradientBackground: React.FC = (props) => { + return ( + + + {props.children} + + + ); +}; + +const styles = StyleSheet.create({ + container: { + justifyContent: 'center', + alignItems: 'center', + backgroundColor: 'transparent', + flex: 1, + }, +}); + +export default GradientBackground; diff --git a/src/components/common/index.ts b/src/components/common/index.ts index d7778f95..a1bcc558 100644 --- a/src/components/common/index.ts +++ b/src/components/common/index.ts @@ -3,3 +3,4 @@ export {default as OverlayView} from './OverlayView'; export {default as RadioCheckbox} from './RadioCheckbox'; export {default as TaggInput} from './TaggInput'; export {default as NavigationIcon} from './NavigationIcon'; +export {default as GradientBackground} from './GradientBackground'; diff --git a/src/routes/NavigationBar.tsx b/src/routes/NavigationBar.tsx new file mode 100644 index 00000000..84c18e00 --- /dev/null +++ b/src/routes/NavigationBar.tsx @@ -0,0 +1,75 @@ +import React from 'react'; +import {ViewProps} from 'react-native'; +import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'; +import {Fragment} from 'react'; +import {NavigationIcon} from '../components'; +import {Home, Notifications, Profile, Search, Upload} from '../screens/main'; + +interface NavigationBarProps extends ViewProps { + centered?: boolean; +} + +const Tab = createBottomTabNavigator(); + +const NavigationBar: React.FC = () => { + return ( + + ({ + tabBarIcon: ({focused}) => { + if (route.name === 'Home') { + return focused ? ( + + ) : ( + + ); + } else if (route.name === 'Search') { + return focused ? ( + + ) : ( + + ); + } else if (route.name === 'Upload') { + return focused ? ( + + ) : ( + + ); + } else if (route.name === 'Notifications') { + return focused ? ( + + ) : ( + + ); + } else if (route.name === 'Profile') { + return focused ? ( + + ) : ( + + ); + } + }, + })} + initialRouteName="Home" + tabBarOptions={{ + showLabel: false, + style: { + backgroundColor: 'transparent', + position: 'absolute', + borderTopWidth: 0, + left: 0, + right: 0, + bottom: 0, + }, + }}> + + + + + + + + ); +}; + +export default NavigationBar; diff --git a/src/routes/OnboardingStack.tsx b/src/routes/OnboardingStack.tsx new file mode 100644 index 00000000..5e91fe9f --- /dev/null +++ b/src/routes/OnboardingStack.tsx @@ -0,0 +1,57 @@ +import React from 'react'; +import {createStackNavigator} from '@react-navigation/stack'; +import { + Login, + RegistrationOne, + RegistrationTwo, + Verification, + ProfileOnboarding, +} from '../screens/onboarding'; + +export type RootStackParamList = { + Login: undefined; + RegistrationOne: undefined; + RegistrationTwo: + | {firstName: string; lastName: string; email: string} + | undefined; + Verification: {username: string; email: string; userId: string}; + ProfileOnboarding: {username: string; userId: string}; +}; + +const RootStack = createStackNavigator(); + +interface OnboardingStackProps {} + +const OnboardingStack: React.FC = ({}) => { + return ( + + + + + + + + ); +}; + +export default OnboardingStack; diff --git a/src/routes/Routes.tsx b/src/routes/Routes.tsx index 5d69b38b..43a51b90 100644 --- a/src/routes/Routes.tsx +++ b/src/routes/Routes.tsx @@ -1,131 +1,42 @@ import React from 'react'; -import {createStackNavigator} from '@react-navigation/stack'; -import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'; +import {OnboardingStack, NavigationBar} from './'; -import { - Login, - RegistrationOne, - RegistrationTwo, - Verification, - ProfileOnboarding, -} from '../screens/onboarding'; -import {Home, Notifications, Profile, Search, Upload} from '../screens/main'; -import {NavigationIcon} from '../components'; - -export type RootStackParamList = { - // Onboarding Screens - Login: undefined; - RegistrationOne: undefined; - RegistrationTwo: - | {firstName: string; lastName: string; email: string} - | undefined; - Verification: {username: string; email: string; userId: string}; - ProfileOnboarding: {username: string; userId: string}; - - // Main Screens - Home: undefined; - Notifications: undefined; - Profile: undefined; - Search: undefined; - Upload: undefined; -}; - -const RootStack = createStackNavigator(); - -const Tab = createBottomTabNavigator(); - -function MainTabNavigator() { +interface RoutesProps {} +interface AuthProviderProps {} + +export const AuthContext = React.createContext<{ + user: boolean; + login: () => void; + logout: () => void; +}>({ + user: false, + login: () => {}, + logout: () => {}, +}); + +export const AuthContextProvider: React.FC = ({ + children, +}) => { + const [loggedIn, setLoggedIn] = React.useState(false); // renders onboarding stack return ( - ({ - tabBarIcon: ({focused}) => { - if (route.name === 'Home') { - return focused ? ( - - ) : ( - - ); - } else if (route.name === 'Search') { - return focused ? ( - - ) : ( - - ); - } else if (route.name === 'Upload') { - return focused ? ( - - ) : ( - - ); - } else if (route.name === 'Notifications') { - return focused ? ( - - ) : ( - - ); - } else if (route.name === 'Profile') { - return focused ? ( - - ) : ( - - ); - } + { + setLoggedIn(true); }, - })} - tabBarOptions={{ - showLabel: false, - style: { - backgroundColor: 'transparent', - position: 'absolute', - borderTopWidth: 0, + logout: () => { + setLoggedIn(false); }, }}> - - - - - - + {children} + ); -} - -interface RoutesProps {} +}; const Routes: React.FC = ({}) => { - return ( - - - - - - - - - ); + const {user} = React.useContext(AuthContext); + return user ? : ; }; export default Routes; diff --git a/src/routes/index.ts b/src/routes/index.ts index cfa05fcb..054a25c3 100644 --- a/src/routes/index.ts +++ b/src/routes/index.ts @@ -1,2 +1,6 @@ -export {default} from './Routes'; +export {default as OnboardingStack} from './OnboardingStack'; +export * from './OnboardingStack'; +export {default as NavigationBar} from './NavigationBar'; +export * from './NavigationBar'; +export {default as Routes} from './Routes'; export * from './Routes'; 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