From 6e3fe33e5e1d3818ef8bb942c1544581ab8c0688 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Thu, 8 Oct 2020 16:26:16 -0400 Subject: [TMA-229] Moments Barebones (#50) * added react native svg transformation to support svg icons * finished moments barebones view * resolved a warning from the svg file --- src/assets/icons/plus_icon-01.svg | 1 + src/assets/icons/plus_icon-02.svg | 1 + src/components/common/AvatarTitle.tsx | 2 +- src/components/profile/Content.tsx | 25 ++++++--- src/components/profile/Moment.tsx | 95 ++++++++++++++++++++++++++++++++ src/components/profile/index.ts | 1 + src/components/taggs/Tagg.tsx | 2 +- src/constants/constants.ts | 22 ++++++-- src/declarations.d.ts | 6 ++ src/routes/profile/Profile.tsx | 4 -- src/screens/profile/ProfileScreen.tsx | 4 +- src/screens/profile/SocialMediaTaggs.tsx | 2 +- 12 files changed, 141 insertions(+), 24 deletions(-) create mode 100644 src/assets/icons/plus_icon-01.svg create mode 100644 src/assets/icons/plus_icon-02.svg create mode 100644 src/components/profile/Moment.tsx create mode 100644 src/declarations.d.ts (limited to 'src') diff --git a/src/assets/icons/plus_icon-01.svg b/src/assets/icons/plus_icon-01.svg new file mode 100644 index 00000000..32632897 --- /dev/null +++ b/src/assets/icons/plus_icon-01.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/plus_icon-02.svg b/src/assets/icons/plus_icon-02.svg new file mode 100644 index 00000000..25527911 --- /dev/null +++ b/src/assets/icons/plus_icon-02.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/common/AvatarTitle.tsx b/src/components/common/AvatarTitle.tsx index b6d95bd8..8c82dca9 100644 --- a/src/components/common/AvatarTitle.tsx +++ b/src/components/common/AvatarTitle.tsx @@ -1,7 +1,7 @@ import React from 'react'; import {Image, StyleSheet} from 'react-native'; import LinearGradient from 'react-native-linear-gradient'; -import { AVATAR_DIM, AVATAR_GRADIENT_DIM, TAGGS_GRADIENT } from '../../constants'; +import {AVATAR_DIM, AVATAR_GRADIENT_DIM, TAGGS_GRADIENT} from '../../constants'; import {AuthContext} from '../../routes/authentication'; /** diff --git a/src/components/profile/Content.tsx b/src/components/profile/Content.tsx index 206fd9e4..a3b9e74a 100644 --- a/src/components/profile/Content.tsx +++ b/src/components/profile/Content.tsx @@ -1,19 +1,18 @@ import React, {useState} from 'react'; -import {StyleSheet, LayoutChangeEvent} from 'react-native'; +import {LayoutChangeEvent, StyleSheet, View} from 'react-native'; import Animated from 'react-native-reanimated'; - -import {UserType} from '../../types'; +import {defaultMoments} from '../../constants'; +import {SCREEN_HEIGHT} from '../../utils'; +import TaggsBar from '../taggs/TaggsBar'; +import Moment from './Moment'; +import ProfileBody from './ProfileBody'; import ProfileCutout from './ProfileCutout'; import ProfileHeader from './ProfileHeader'; -import ProfileBody from './ProfileBody'; -import TaggsBar from '../taggs/TaggsBar'; -import Feed from './Feed'; interface ContentProps { y: Animated.Value; - user: UserType; } -const Content: React.FC = ({y, user}) => { +const Content: React.FC = ({y}) => { const [profileBodyHeight, setProfileBodyHeight] = useState(0); const onLayout = (e: LayoutChangeEvent) => { const {height} = e.nativeEvent.layout; @@ -31,7 +30,11 @@ const Content: React.FC = ({y, user}) => { - + + {defaultMoments.map((title, index) => ( + + ))} + ); }; @@ -40,6 +43,10 @@ const styles = StyleSheet.create({ container: { flex: 1, }, + momentsContainer: { + backgroundColor: '#f2f2f2', + paddingBottom: SCREEN_HEIGHT / 10, + }, }); export default Content; diff --git a/src/components/profile/Moment.tsx b/src/components/profile/Moment.tsx new file mode 100644 index 00000000..0fbabe8f --- /dev/null +++ b/src/components/profile/Moment.tsx @@ -0,0 +1,95 @@ +import {useNavigation} from '@react-navigation/native'; +import React from 'react'; +import {Alert, StyleSheet, View} from 'react-native'; +import {Text} from 'react-native-animatable'; +import {ScrollView, TouchableOpacity} from 'react-native-gesture-handler'; +import LinearGradient from 'react-native-linear-gradient'; +import PlusIcon from '../../assets/icons/plus_icon-01.svg'; +import BigPlusIcon from '../../assets/icons/plus_icon-02.svg'; +import {MOMENTS_TITLE_COLOR} from '../../constants'; +import {SCREEN_WIDTH} from '../../utils'; + +interface MomentProps { + title: string; + images: Array; +} + +const Moment: React.FC = ({title, images}) => { + const navigation = useNavigation(); + const navigateToImagePicker = () => { + Alert.alert('Perform navigation to Image Picker with Caption screen'); + // navigation.navigate('') + }; + return ( + + + {title} + navigateToImagePicker()} + /> + + + navigateToImagePicker()}> + + + + + Add a moment of your {title.toLowerCase()}! + + + + + + + ); +}; + +const styles = StyleSheet.create({ + container: { + flex: 1, + flexDirection: 'column', + backgroundColor: '#eee', + }, + header: { + flex: 1, + paddingHorizontal: 10, + padding: 5, + paddingTop: 20, + backgroundColor: 'white', + flexDirection: 'row', + justifyContent: 'space-between', + alignItems: 'center', + }, + titleText: { + fontSize: 16, + fontWeight: 'bold', + color: MOMENTS_TITLE_COLOR, + }, + scrollContainer: { + height: SCREEN_WIDTH / 2, + backgroundColor: '#eee', + }, + defaultImage: { + aspectRatio: 1, + height: '100%', + alignItems: 'center', + justifyContent: 'center', + flexDirection: 'column', + }, + defaultImageText: { + fontSize: 20, + paddingTop: 20, + color: 'white', + fontWeight: 'bold', + width: '75%', + textAlign: 'center', + }, +}); + +export default Moment; diff --git a/src/components/profile/index.ts b/src/components/profile/index.ts index e0ca5742..2d16c830 100644 --- a/src/components/profile/index.ts +++ b/src/components/profile/index.ts @@ -1,5 +1,6 @@ export {default as Cover} from './Cover'; export {default as Content} from './Content'; +export {default as Moment} from './Moment'; export {default as ProfileCutout} from './ProfileCutout'; export {default as ProfileBody} from './ProfileBody'; export {default as ProfileHeader} from './ProfileHeader'; diff --git a/src/components/taggs/Tagg.tsx b/src/components/taggs/Tagg.tsx index 9a5ec1e2..341a713a 100644 --- a/src/components/taggs/Tagg.tsx +++ b/src/components/taggs/Tagg.tsx @@ -2,7 +2,7 @@ import {useNavigation} from '@react-navigation/native'; import React from 'react'; import {StyleSheet, TouchableOpacity, View, ViewProps} from 'react-native'; import LinearGradient from 'react-native-linear-gradient'; -import { TAGGS_GRADIENT } from '../../constants'; +import {TAGGS_GRADIENT} from '../../constants'; interface TaggProps extends ViewProps {} diff --git a/src/constants/constants.ts b/src/constants/constants.ts index b60b506f..76a0df03 100644 --- a/src/constants/constants.ts +++ b/src/constants/constants.ts @@ -35,14 +35,14 @@ export const SNAPCHAT_FONT_COLOR: string = '#FFFC00'; export const YOUTUBE_FONT_COLOR: string = '#FCA4A4'; export const TAGGS_GRADIENT = { - 'start': '#9F00FF', - 'end': '#27EAE9' -} + start: '#9F00FF', + end: '#27EAE9', +}; export const AVATAR_GRADIENT = { - 'start': '#240041', - 'end': '#215151' -} + start: '#240041', + end: '#215151', +}; export const SOCIAL_FONT_COLORS = { INSTAGRAM: INSTAGRAM_FONT_COLOR, @@ -55,3 +55,13 @@ export const SOCIAL_FONT_COLORS = { SNAPCHAT: SNAPCHAT_FONT_COLOR, YOUTUBE: YOUTUBE_FONT_COLOR, }; + +// Profile Moments +export const defaultMoments: Array = [ + 'Early Life', + 'Best Friends', + 'Dance', + 'Education', +]; + +export const MOMENTS_TITLE_COLOR: string = '#698DD3'; diff --git a/src/declarations.d.ts b/src/declarations.d.ts new file mode 100644 index 00000000..e5bbc768 --- /dev/null +++ b/src/declarations.d.ts @@ -0,0 +1,6 @@ +declare module '*.svg' { + import React from 'react'; + import {SvgProps} from 'react-native-svg'; + const content: React.FC; + export default content; +} diff --git a/src/routes/profile/Profile.tsx b/src/routes/profile/Profile.tsx index faab0bde..caa75f3b 100644 --- a/src/routes/profile/Profile.tsx +++ b/src/routes/profile/Profile.tsx @@ -1,10 +1,6 @@ import React from 'react'; -import {Image, StyleSheet} from 'react-native'; -import LinearGradient from 'react-native-linear-gradient'; import {AvatarTitle} from '../../components'; -import {AVATAR_DIM, TAGGS_GRADIENT} from '../../constants'; import {ProfileScreen, SocialMediaTaggs} from '../../screens'; -import {AuthContext} from '../authentication'; import {ProfileStack} from './ProfileStack'; const Profile: React.FC = () => { diff --git a/src/screens/profile/ProfileScreen.tsx b/src/screens/profile/ProfileScreen.tsx index ea557063..cc388ffd 100644 --- a/src/screens/profile/ProfileScreen.tsx +++ b/src/screens/profile/ProfileScreen.tsx @@ -1,8 +1,8 @@ import React from 'react'; -import {Cover, Content, TabsGradient} from '../../components'; +import {StatusBar} from 'react-native'; import Animated from 'react-native-reanimated'; +import {Content, Cover, TabsGradient} from '../../components'; import {AuthContext} from '../../routes/authentication'; -import {StatusBar} from 'react-native'; /** * Profile Screen for a user's logged in profile diff --git a/src/screens/profile/SocialMediaTaggs.tsx b/src/screens/profile/SocialMediaTaggs.tsx index 8bc5e4d8..9e4f2aea 100644 --- a/src/screens/profile/SocialMediaTaggs.tsx +++ b/src/screens/profile/SocialMediaTaggs.tsx @@ -2,7 +2,7 @@ import {RouteProp} from '@react-navigation/native'; import React from 'react'; import {ScrollView, StatusBar, StyleSheet, View} from 'react-native'; import LinearGradient from 'react-native-linear-gradient'; -import { AVATAR_GRADIENT } from '../../constants'; +import {AVATAR_GRADIENT} from '../../constants'; import {SocialMediaInfo, TabsGradient, TaggsFeed} from '../../components'; import {AuthContext, ProfileStackParams} from '../../routes'; import {headerBarHeightWithImage, SCREEN_HEIGHT} from '../../utils'; -- cgit v1.2.3-70-g09d2