From a954d6b6b88485dddc0ccfda634ffd102cb34ccd Mon Sep 17 00:00:00 2001 From: Ashm Walia <40498934+ashmgarv@users.noreply.github.com> Date: Tue, 22 Dec 2020 08:50:27 -0800 Subject: [TMA 446] Create category (#144) * Added welcome page * Working code * Small fix * Some more cleanup * Fixes * Cleanup * Fix again * Use gradient for white bg as well * Fixed type --- src/components/onboarding/Background.tsx | 12 +- src/components/onboarding/MomentCategory.tsx | 175 +++++++++++++++++++++++++++ src/components/onboarding/index.ts | 1 + 3 files changed, 184 insertions(+), 4 deletions(-) create mode 100644 src/components/onboarding/MomentCategory.tsx (limited to 'src/components/onboarding') 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 = (props) => { + const {centered, gradientType, children} = props; return ( - {props.centered ? ( - {props.children} + {centered ? ( + {children} ) : ( - {props.children} + {children} )} 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 = ({ + 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 ( + + onSelect(categoryType, !isSelected, isAdded)} + style={[ + styles.container, + styles.touchable, + {backgroundColor: bgColor}, + ]}> + + {categoryType} + {isAdded && ( + + )} + + + ); +}; + +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'; -- cgit v1.2.3-70-g09d2