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>

1 files changed, 34 insertions, 0 deletions

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<GradientBackgroundProps> = (props) => {
+  return (
+    <LinearGradient
+      locations={[0.89, 1]}
+      colors={['transparent', 'rgba(0, 0, 0, 0.6)']}
+      style={styles.container}>
+      <TouchableWithoutFeedback accessible={false} onPress={Keyboard.dismiss}>
+        <SafeAreaView {...props}>{props.children}</SafeAreaView>
+      </TouchableWithoutFeedback>
+    </LinearGradient>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'transparent',
+    flex: 1,
+  },
+});
+
+export default GradientBackground;