3 files changed, 184 insertions, 4 deletions
diff --git a/src/components/onboarding/Background.tsx b/src/components/onboarding/Background.tsx
index 054eeff6..fb08e945 100644
--- a/src/components/onboarding/Background.tsx
+++ b/src/components/onboarding/Background.tsx
@@ -8,23 +8,27 @@ import {
   SafeAreaView,
 } from 'react-native';
 import {CenteredView} from '../common';
+import {BackgroundGradientType} from '../../types';
+import {BACKGROUND_GRADIENT_MAP} from '../../constants';
 
 interface BackgroundProps extends ViewProps {
   centered?: boolean;
+  gradientType: BackgroundGradientType;
 }
 const Background: React.FC<BackgroundProps> = (props) => {
+  const {centered, gradientType, children} = props;
   return (
     <LinearGradient
-      colors={['#9F00FF', '#27EAE9']}
+      colors={BACKGROUND_GRADIENT_MAP[gradientType]}
       useAngle={true}
       angle={154.72}
       angleCenter={{x: 0.5, y: 0.5}}
       style={styles.container}>
       <TouchableWithoutFeedback accessible={false} onPress={Keyboard.dismiss}>
-        {props.centered ? (
-          <CenteredView {...props}>{props.children}</CenteredView>
+        {centered ? (
+          <CenteredView {...props}>{children}</CenteredView>
         ) : (
-          <SafeAreaView {...props}>{props.children}</SafeAreaView>
+          <SafeAreaView {...props}>{children}</SafeAreaView>
         )}
       </TouchableWithoutFeedback>
     </LinearGradient>
diff --git a/src/components/onboarding/MomentCategory.tsx b/src/components/onboarding/MomentCategory.tsx
new file mode 100644
index 00000000..25e8995a
--- /dev/null
+++ b/src/components/onboarding/MomentCategory.tsx
@@ -0,0 +1,175 @@
+import * as React from 'react';
+import {StyleSheet} from 'react-native';
+import {Image, Text} from 'react-native-animatable';
+import {TouchableOpacity} from 'react-native-gesture-handler';
+import LinearGradient from 'react-native-linear-gradient';
+import {BACKGROUND_GRADIENT_MAP} from '../../constants';
+import {MomentCategoryType} from '../../types';
+import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
+
+type MomentCategoryProps = {
+  categoryType: MomentCategoryType;
+  onSelect: (
+    category: MomentCategoryType,
+    isSelected: boolean,
+    isAdded: boolean,
+  ) => void;
+  isSelected: boolean;
+  isAdded: boolean;
+};
+
+const MomentCategory: React.FC<MomentCategoryProps> = ({
+  categoryType,
+  isSelected,
+  isAdded,
+  onSelect,
+}) => {
+  var icon, bgColor;
+
+  /**
+   * Choose icon and color based on category type
+   */
+  switch (categoryType) {
+    case 'Friends':
+      icon = require('../../assets/moment-categories/friends-icon.png');
+      bgColor = '#5E4AE4';
+      break;
+    case 'Adventure':
+      icon = require('../../assets/moment-categories/adventure-icon.png');
+      bgColor = '#5044A6';
+      break;
+    case 'Photo Dump':
+      icon = require('../../assets/moment-categories/photo-dump-icon.png');
+      bgColor = '#4755A1';
+      break;
+    case 'Food':
+      icon = require('../../assets/moment-categories/food-icon.png');
+      bgColor = '#444BA8';
+      break;
+    case 'Music':
+      icon = require('../../assets/moment-categories/music-icon.png');
+      bgColor = '#374898';
+      break;
+    case 'Art':
+      icon = require('../../assets/moment-categories/art-icon.png');
+      bgColor = '#3F5C97';
+      break;
+    case 'Sports':
+      icon = require('../../assets/moment-categories/sports-icon.png');
+      bgColor = '#3A649F';
+      break;
+    case 'Fashion':
+      icon = require('../../assets/moment-categories/fashion-icon.png');
+      bgColor = '#386A95';
+      break;
+    case 'Travel':
+      icon = require('../../assets/moment-categories/travel-icon.png');
+      bgColor = '#366D84';
+      break;
+    case 'Pets':
+      icon = require('../../assets/moment-categories/pets-icon.png');
+      bgColor = '#335E76';
+      break;
+    case 'Nightlife':
+      icon = require('../../assets/moment-categories/nightlife-icon.png');
+      bgColor = '#2E5471';
+      break;
+    case 'DIY':
+      icon = require('../../assets/moment-categories/diy-icon.png');
+      bgColor = '#274765';
+      break;
+    case 'Nature':
+      icon = require('../../assets/moment-categories/nature-icon.png');
+      bgColor = '#225363';
+      break;
+    case 'Early Life':
+      icon = require('../../assets/moment-categories/early-life-icon.png');
+      bgColor = '#365F6A';
+      break;
+    case 'Beauty':
+      icon = require('../../assets/moment-categories/beauty-icon.png');
+      bgColor = '#4E7175';
+      break;
+  }
+
+  /**
+   * The Linear Gradient helps us add a gradient border when the category is already added /selected by user
+   * if(isAdded)
+   *    gradient background
+   * if(isSelected)
+   *    white background
+   * else
+   *    transparent background
+   */
+  return (
+    <LinearGradient
+      colors={
+        isAdded
+          ? BACKGROUND_GRADIENT_MAP[0]
+          : isSelected
+          ? ['white', 'white']
+          : ['transparent', 'transparent']
+      }
+      start={{x: 0, y: 0}}
+      end={{x: 1, y: 0}}
+      style={[styles.container, styles.gradient]}>
+      <TouchableOpacity
+        activeOpacity={0.5}
+        onPress={() => onSelect(categoryType, !isSelected, isAdded)}
+        style={[
+          styles.container,
+          styles.touchable,
+          {backgroundColor: bgColor},
+        ]}>
+        <Image source={icon} style={styles.icon} />
+        <Text style={styles.label}>{categoryType}</Text>
+        {isAdded && (
+          <Image
+            source={require('../../assets/images/link-tick.png')}
+            style={styles.tick}
+          />
+        )}
+      </TouchableOpacity>
+    </LinearGradient>
+  );
+};
+
+const styles = StyleSheet.create({
+  gradient: {
+    width: SCREEN_WIDTH / 3.7,
+    height: SCREEN_HEIGHT / 5.8,
+    marginHorizontal: '2%',
+    marginVertical: '2%',
+  },
+  touchable: {
+    width: SCREEN_WIDTH / 4,
+    height: SCREEN_HEIGHT / 6.2,
+    marginHorizontal: '2%',
+    marginVertical: '4%',
+  },
+  container: {
+    borderRadius: 8,
+    shadowRadius: 2,
+    shadowOffset: {width: 0, height: 2},
+    shadowOpacity: 0.4,
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  icon: {
+    width: 40,
+    height: 40,
+    marginVertical: '8%',
+  },
+  label: {
+    fontWeight: '500',
+    color: 'white',
+  },
+  tick: {
+    marginTop: '3%',
+    width: 15,
+    height: 15,
+  },
+});
+
+export default MomentCategory;
diff --git a/src/components/onboarding/index.ts b/src/components/onboarding/index.ts
index fde4e0af..b790933f 100644
--- a/src/components/onboarding/index.ts
+++ b/src/components/onboarding/index.ts
@@ -9,3 +9,4 @@ export {default as BirthDatePicker} from './BirthDatePicker';
 export {default as TaggDropDown} from './TaggDropDown';
 export {default as SocialMediaLinker} from './SocialMediaLinker';
 export {default as LinkSocialMedia} from './LinkSocialMedia';
+export {default as MomentCategory} from './MomentCategory';