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 <meganhong31@g.ucla.edu>

5 files changed, 36 insertions, 105 deletions

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<RootStackParamList, 'Home'>;
-type HomeScreenNavigationProp = StackNavigationProp<RootStackParamList, 'Home'>;
-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<HomeProps> = () => {
+const Home: React.FC = () => {
   return (
-    <Background centered style={styles.container}>
-      <Text> Tagg Home Screen 🏠 </Text>
-    </Background>
+    <GradientBackground>
+      <Text style={styles.text}> Tagg Home Screen 🏠 </Text>
+    </GradientBackground>
   );
 };
 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<NotificationsProps> = () => {
+const Notifications: React.FC = () => {
   return (
-    <Background centered style={styles.container}>
-      <Text> Notifications will go here 🔔 </Text>
-    </Background>
+    <GradientBackground>
+      <Text style={styles.text}> Notifications will go here 🔔 </Text>
+    </GradientBackground>
   );
 };
 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<RootStackParamList, 'Home'>;
-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<ProfileProps> = () => {
+const Profile: React.FC = () => {
   return (
-    <Background centered style={styles.container}>
-      <Text> Profile Screen 🤩 </Text>
-    </Background>
+    <GradientBackground>
+      <Text style={styles.text}> Profile Screen 🤩 </Text>
+    </GradientBackground>
   );
 };
 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<RootStackParamList, 'Search'>;
-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<SearchProps> = () => {
+const Search: React.FC = () => {
   return (
-    <Background centered style={styles.container}>
-      <Text> Search for people here 👀 </Text>
-    </Background>
+    <GradientBackground>
+      <Text style={styles.text}> Search for people here 👀 </Text>
+    </GradientBackground>
   );
 };
 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<RootStackParamList, 'Upload'>;
-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<UploadProps> = () => {
+const Upload: React.FC = () => {
   return (
-    <Background centered style={styles.container}>
-      <Text> Upload pics ⬆ </Text>
-    </Background>
+    <GradientBackground>
+      <Text style={styles.text}> Upload pics ⬆ </Text>
+    </GradientBackground>
   );
 };
 const styles = StyleSheet.create({
-  container: {
-    flex: 1,
+  text: {
     justifyContent: 'center',
-    alignItems: 'center',
+    backgroundColor: 'transparent',
   },
 });
+
 export default Upload;