From 0f332655d2b64700623f25912d2610517fb954b6 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Wed, 7 Oct 2020 20:17:13 -0400 Subject: [TMA-186] Instagram Taggs - Frontend (#45) * Renamed Moments(Bar) to Taggs(Bar) * created initial navigation and empty social media taggs screen * made more progress for the header styling * Finished social media taggs screen, organized code structure * linted stuff D: * moved bar height utility function to utils * moved color constants to constants * moved avatar title * updated comments for social media taggs * NOW the file is there --- src/components/common/AvatarTitle.tsx | 46 +++++++++++++++++ src/components/common/index.ts | 3 +- src/components/common/post/Post.tsx | 8 ++- src/components/common/post/index.ts | 2 +- src/components/index.ts | 1 + src/components/profile/Content.tsx | 4 +- src/components/profile/Feed.tsx | 3 +- src/components/profile/Moment.tsx | 35 ------------- src/components/profile/MomentsBar.tsx | 75 --------------------------- src/components/profile/index.ts | 1 - src/components/taggs/SocialMediaInfo.tsx | 55 ++++++++++++++++++++ src/components/taggs/Tagg.tsx | 47 +++++++++++++++++ src/components/taggs/TaggPost.tsx | 39 ++++++++++++++ src/components/taggs/TaggPostFooter.tsx | 65 ++++++++++++++++++++++++ src/components/taggs/TaggsBar.tsx | 75 +++++++++++++++++++++++++++ src/components/taggs/TaggsFeed.tsx | 29 +++++++++++ src/components/taggs/index.ts | 4 ++ src/constants/constants.ts | 13 +++++ src/routes/index.ts | 1 + src/routes/profile/Profile.tsx | 31 ++++++++++++ src/routes/profile/ProfileStack.tsx | 11 ++++ src/routes/profile/index.ts | 2 + src/routes/tabs/NavigationBar.tsx | 13 ++--- src/screens/profile/SocialMediaTaggs.tsx | 87 ++++++++++++++++++++++++++++++++ src/screens/profile/index.ts | 1 + src/types/types.ts | 3 +- src/utils/statusBarHeight.ts | 6 +++ 27 files changed, 529 insertions(+), 131 deletions(-) create mode 100644 src/components/common/AvatarTitle.tsx delete mode 100644 src/components/profile/Moment.tsx delete mode 100644 src/components/profile/MomentsBar.tsx create mode 100644 src/components/taggs/SocialMediaInfo.tsx create mode 100644 src/components/taggs/Tagg.tsx create mode 100644 src/components/taggs/TaggPost.tsx create mode 100644 src/components/taggs/TaggPostFooter.tsx create mode 100644 src/components/taggs/TaggsBar.tsx create mode 100644 src/components/taggs/TaggsFeed.tsx create mode 100644 src/components/taggs/index.ts create mode 100644 src/routes/profile/Profile.tsx create mode 100644 src/routes/profile/ProfileStack.tsx create mode 100644 src/routes/profile/index.ts create mode 100644 src/screens/profile/SocialMediaTaggs.tsx (limited to 'src') diff --git a/src/components/common/AvatarTitle.tsx b/src/components/common/AvatarTitle.tsx new file mode 100644 index 00000000..b6d95bd8 --- /dev/null +++ b/src/components/common/AvatarTitle.tsx @@ -0,0 +1,46 @@ +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 {AuthContext} from '../../routes/authentication'; + +/** + * An image component that returns the of the icon for a specific social media platform. + */ +const AvatarTitle: React.FC = () => { + const {avatar} = React.useContext(AuthContext); + return ( + + + + ); +}; + +const styles = StyleSheet.create({ + gradient: { + width: AVATAR_GRADIENT_DIM, + height: AVATAR_GRADIENT_DIM, + borderRadius: AVATAR_GRADIENT_DIM / 2, + justifyContent: 'center', + alignItems: 'center', + }, + avatar: { + width: AVATAR_DIM, + height: AVATAR_DIM, + borderRadius: AVATAR_DIM / 2, + }, +}); + +export default AvatarTitle; diff --git a/src/components/common/index.ts b/src/components/common/index.ts index c9c4f27a..4a226c8f 100644 --- a/src/components/common/index.ts +++ b/src/components/common/index.ts @@ -1,9 +1,10 @@ +export {default as AvatarTitle} from './AvatarTitle'; export {default as CenteredView} from './CenteredView'; export {default as OverlayView} from './OverlayView'; export {default as RadioCheckbox} from './RadioCheckbox'; export {default as NavigationIcon} from './NavigationIcon'; export {default as GradientBackground} from './GradientBackground'; -export {default as Post} from './post'; export {default as SocialIcon} from './SocialIcon'; export {default as TabsGradient} from './TabsGradient'; export {default as RecentSearches} from '../search/RecentSearches'; +export * from './post'; diff --git a/src/components/common/post/Post.tsx b/src/components/common/post/Post.tsx index e5f68917..9fa167f2 100644 --- a/src/components/common/post/Post.tsx +++ b/src/components/common/post/Post.tsx @@ -7,14 +7,12 @@ import {SCREEN_WIDTH} from '../../../utils'; interface PostProps { post: PostType; } -const Post: React.FC = ({post: {owner, instagram, social}}) => { +const Post: React.FC = ({post: {owner, social, data}}) => { return ( <> - + - {instagram && ( - - )} + {data && } ); diff --git a/src/components/common/post/index.ts b/src/components/common/post/index.ts index 033f8a8d..358a59d5 100644 --- a/src/components/common/post/index.ts +++ b/src/components/common/post/index.ts @@ -1 +1 @@ -export {default} from './Post'; +export {default as Post} from './Post'; diff --git a/src/components/index.ts b/src/components/index.ts index 77ba0f67..1b726051 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -2,3 +2,4 @@ export * from './common'; export * from './onboarding'; export * from './profile'; export * from './search'; +export * from './taggs'; diff --git a/src/components/profile/Content.tsx b/src/components/profile/Content.tsx index 49cc2c35..206fd9e4 100644 --- a/src/components/profile/Content.tsx +++ b/src/components/profile/Content.tsx @@ -6,7 +6,7 @@ import {UserType} from '../../types'; import ProfileCutout from './ProfileCutout'; import ProfileHeader from './ProfileHeader'; import ProfileBody from './ProfileBody'; -import MomentsBar from './MomentsBar'; +import TaggsBar from '../taggs/TaggsBar'; import Feed from './Feed'; interface ContentProps { @@ -30,7 +30,7 @@ const Content: React.FC = ({y, user}) => { - + ); diff --git a/src/components/profile/Feed.tsx b/src/components/profile/Feed.tsx index a10d8d6d..3353d25b 100644 --- a/src/components/profile/Feed.tsx +++ b/src/components/profile/Feed.tsx @@ -12,8 +12,9 @@ const Feed: React.FC = ({user}) => { for (let i = 0; i < 10; i++) { const testPost: PostType = { owner: user, - instagram: instaPosts[i], social: 'Instagram', + socialHandle: 'igHandle', + data: instaPosts[i], }; posts.push(testPost); } diff --git a/src/components/profile/Moment.tsx b/src/components/profile/Moment.tsx deleted file mode 100644 index eaf43fea..00000000 --- a/src/components/profile/Moment.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import React from 'react'; -import {View, StyleSheet, ViewProps} from 'react-native'; -import LinearGradient from 'react-native-linear-gradient'; - -interface MomentProps extends ViewProps {} -const Moment: React.FC = ({style}) => { - return ( - - - - ); -}; - -const styles = StyleSheet.create({ - gradient: { - width: 80, - height: 80, - borderRadius: 40, - justifyContent: 'center', - alignItems: 'center', - }, - image: { - width: 72, - height: 72, - borderRadius: 37.5, - backgroundColor: 'pink', - }, -}); - -export default Moment; diff --git a/src/components/profile/MomentsBar.tsx b/src/components/profile/MomentsBar.tsx deleted file mode 100644 index dcc88d89..00000000 --- a/src/components/profile/MomentsBar.tsx +++ /dev/null @@ -1,75 +0,0 @@ -// @refresh react -import React from 'react'; -import {StyleSheet} from 'react-native'; -import Animated from 'react-native-reanimated'; -import Moment from './Moment'; -import {PROFILE_CUTOUT_BOTTOM_Y} from '../../constants'; -import {StatusBarHeight} from '../../utils'; - -const {View, ScrollView, interpolate, Extrapolate} = Animated; -interface MomentsBarProps { - y: Animated.Value; - profileBodyHeight: number; -} -const MomentsBar: React.FC = ({y, profileBodyHeight}) => { - const moments: Array = []; - for (let i = 0; i < 10; i++) { - moments.push(); - } - const shadowOpacity: Animated.Node = interpolate(y, { - inputRange: [ - PROFILE_CUTOUT_BOTTOM_Y + profileBodyHeight, - PROFILE_CUTOUT_BOTTOM_Y + profileBodyHeight + 20, - ], - outputRange: [0, 0.2], - extrapolate: Extrapolate.CLAMP, - }); - const paddingTop: Animated.Node = interpolate(y, { - inputRange: [ - 0, - PROFILE_CUTOUT_BOTTOM_Y + profileBodyHeight - 30, - PROFILE_CUTOUT_BOTTOM_Y + profileBodyHeight, - ], - outputRange: [20, 20, StatusBarHeight], - extrapolate: Extrapolate.CLAMP, - }); - const paddingBottom: Animated.Node = interpolate(y, { - inputRange: [ - 0, - PROFILE_CUTOUT_BOTTOM_Y + profileBodyHeight - 30, - PROFILE_CUTOUT_BOTTOM_Y + profileBodyHeight, - ], - outputRange: [30, 30, 15], - extrapolate: Extrapolate.CLAMP, - }); - return ( - - - {moments} - - - ); -}; - -const styles = StyleSheet.create({ - container: { - backgroundColor: 'white', - shadowColor: '#000', - shadowRadius: 10, - shadowOffset: {width: 0, height: 2}, - zIndex: 1, - }, - contentContainer: { - alignItems: 'center', - paddingHorizontal: 15, - }, - moment: { - marginHorizontal: 14, - }, -}); - -export default MomentsBar; diff --git a/src/components/profile/index.ts b/src/components/profile/index.ts index 2052ee5b..e0ca5742 100644 --- a/src/components/profile/index.ts +++ b/src/components/profile/index.ts @@ -1,7 +1,6 @@ export {default as Cover} from './Cover'; export {default as Content} from './Content'; export {default as ProfileCutout} from './ProfileCutout'; -export {default as MomentsBar} from './MomentsBar'; export {default as ProfileBody} from './ProfileBody'; export {default as ProfileHeader} from './ProfileHeader'; export {default as Feed} from './Feed'; diff --git a/src/components/taggs/SocialMediaInfo.tsx b/src/components/taggs/SocialMediaInfo.tsx new file mode 100644 index 00000000..0e93660d --- /dev/null +++ b/src/components/taggs/SocialMediaInfo.tsx @@ -0,0 +1,55 @@ +import React from 'react'; +import {StyleSheet, Text, View} from 'react-native'; +import {SocialIcon} from '..'; + +interface SocialMediaInfoProps { + fullname: string; + type: string; + handle: string; +} + +const SocialMediaInfo: React.FC = ({ + fullname, + type, + handle, +}) => { + return ( + + @{handle} + + + + {fullname} + + + ); +}; + +const styles = StyleSheet.create({ + container: { + alignItems: 'center', + paddingBottom: 40, + }, + handle: { + color: 'white', + fontSize: 12, + }, + name: { + color: 'white', + fontWeight: 'bold', + fontSize: 20, + paddingLeft: 5, + }, + icon: { + width: 20, + height: 20, + }, + row: { + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-between', + padding: 10, + }, +}); + +export default SocialMediaInfo; diff --git a/src/components/taggs/Tagg.tsx b/src/components/taggs/Tagg.tsx new file mode 100644 index 00000000..9a5ec1e2 --- /dev/null +++ b/src/components/taggs/Tagg.tsx @@ -0,0 +1,47 @@ +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'; + +interface TaggProps extends ViewProps {} + +const Tagg: React.FC = ({style}) => { + const navigation = useNavigation(); + + return ( + + navigation.navigate('SocialMediaTaggs', { + socialMediaType: 'Instagram', + }) + }> + + + + + ); +}; + +const styles = StyleSheet.create({ + gradient: { + width: 80, + height: 80, + borderRadius: 40, + justifyContent: 'center', + alignItems: 'center', + }, + image: { + width: 72, + height: 72, + borderRadius: 37.5, + backgroundColor: 'pink', + }, +}); + +export default Tagg; diff --git a/src/components/taggs/TaggPost.tsx b/src/components/taggs/TaggPost.tsx new file mode 100644 index 00000000..73f15268 --- /dev/null +++ b/src/components/taggs/TaggPost.tsx @@ -0,0 +1,39 @@ +import moment from 'moment'; +import React from 'react'; +import {Image, StyleSheet, View} from 'react-native'; +import {PostType} from '../../types'; +import {SCREEN_WIDTH} from '../../utils'; +import TaggPostFooter from './TaggPostFooter'; + +interface TaggPostProps { + post: PostType; +} +const TaggPost: React.FC = ({post: {socialHandle, data}}) => { + const parsedDate = moment(data?.timestamp || ''); + const date = parsedDate.isValid() ? parsedDate.format('MMM d') : ''; + + return ( + <> + + {data && } + + + + ); +}; + +const styles = StyleSheet.create({ + image: { + width: SCREEN_WIDTH, + height: SCREEN_WIDTH, + backgroundColor: '#eee', + }, +}); + +export default TaggPost; diff --git a/src/components/taggs/TaggPostFooter.tsx b/src/components/taggs/TaggPostFooter.tsx new file mode 100644 index 00000000..024670a8 --- /dev/null +++ b/src/components/taggs/TaggPostFooter.tsx @@ -0,0 +1,65 @@ +import React from 'react'; +import {StyleSheet, View} from 'react-native'; +import {Text} from 'react-native-animatable'; + +interface TaggPostFooterProps { + likes: number; + handle: string; + caption: string; + date: string; +} +const TaggPostFooter: React.FC = ({ + likes, + handle, + caption, + date, +}) => { + return ( + + + {likes} likes + + + {handle} + {caption} + + + {date} + + + ); +}; + +const styles = StyleSheet.create({ + container: { + flexDirection: 'column', + padding: 10, + paddingBottom: '10%', + }, + captionContainer: { + paddingVertical: 10, + }, + likeText: { + fontSize: 14, + fontWeight: 'bold', + color: 'white', + }, + handleText: { + fontSize: 14, + fontWeight: 'bold', + color: '#8FA9C2', + }, + captionText: { + fontSize: 14, + fontWeight: 'bold', + color: 'white', + flexWrap: 'wrap', + }, + dateText: { + fontSize: 14, + fontWeight: 'bold', + color: '#8FA9C2', + }, +}); + +export default TaggPostFooter; diff --git a/src/components/taggs/TaggsBar.tsx b/src/components/taggs/TaggsBar.tsx new file mode 100644 index 00000000..1022c4fc --- /dev/null +++ b/src/components/taggs/TaggsBar.tsx @@ -0,0 +1,75 @@ +// @refresh react +import React from 'react'; +import {StyleSheet} from 'react-native'; +import Animated from 'react-native-reanimated'; +import Tagg from './Tagg'; +import {PROFILE_CUTOUT_BOTTOM_Y} from '../../constants'; +import {StatusBarHeight} from '../../utils'; + +const {View, ScrollView, interpolate, Extrapolate} = Animated; +interface TaggsBarProps { + y: Animated.Value; + profileBodyHeight: number; +} +const TaggsBar: React.FC = ({y, profileBodyHeight}) => { + const taggs: Array = []; + for (let i = 0; i < 10; i++) { + taggs.push(); + } + const shadowOpacity: Animated.Node = interpolate(y, { + inputRange: [ + PROFILE_CUTOUT_BOTTOM_Y + profileBodyHeight, + PROFILE_CUTOUT_BOTTOM_Y + profileBodyHeight + 20, + ], + outputRange: [0, 0.2], + extrapolate: Extrapolate.CLAMP, + }); + const paddingTop: Animated.Node = interpolate(y, { + inputRange: [ + 0, + PROFILE_CUTOUT_BOTTOM_Y + profileBodyHeight - 30, + PROFILE_CUTOUT_BOTTOM_Y + profileBodyHeight, + ], + outputRange: [20, 20, StatusBarHeight], + extrapolate: Extrapolate.CLAMP, + }); + const paddingBottom: Animated.Node = interpolate(y, { + inputRange: [ + 0, + PROFILE_CUTOUT_BOTTOM_Y + profileBodyHeight - 30, + PROFILE_CUTOUT_BOTTOM_Y + profileBodyHeight, + ], + outputRange: [30, 30, 15], + extrapolate: Extrapolate.CLAMP, + }); + return ( + + + {taggs} + + + ); +}; + +const styles = StyleSheet.create({ + container: { + backgroundColor: 'white', + shadowColor: '#000', + shadowRadius: 10, + shadowOffset: {width: 0, height: 2}, + zIndex: 1, + }, + contentContainer: { + alignItems: 'center', + paddingHorizontal: 15, + }, + tagg: { + marginHorizontal: 14, + }, +}); + +export default TaggsBar; diff --git a/src/components/taggs/TaggsFeed.tsx b/src/components/taggs/TaggsFeed.tsx new file mode 100644 index 00000000..3f27e248 --- /dev/null +++ b/src/components/taggs/TaggsFeed.tsx @@ -0,0 +1,29 @@ +import React from 'react'; +import {InstagramPostType, UserType} from '../../types'; +import {TaggPost} from './'; + +interface TaggsFeedProps { + user: UserType; + socialHandle: string; + posts: Array; +} + +const TaggsFeed: React.FC = ({user, socialHandle, posts}) => { + return ( + <> + {posts?.map((post, index) => ( + + ))} + + ); +}; + +export default TaggsFeed; diff --git a/src/components/taggs/index.ts b/src/components/taggs/index.ts new file mode 100644 index 00000000..1cb0c412 --- /dev/null +++ b/src/components/taggs/index.ts @@ -0,0 +1,4 @@ +export {default as TaggsBar} from './TaggsBar'; +export {default as SocialMediaInfo} from './SocialMediaInfo'; +export {default as TaggsFeed} from './TaggsFeed'; +export {default as TaggPost} from './TaggPost'; diff --git a/src/constants/constants.ts b/src/constants/constants.ts index ee178b68..b60b506f 100644 --- a/src/constants/constants.ts +++ b/src/constants/constants.ts @@ -9,6 +9,9 @@ export const IMAGE_WIDTH = SCREEN_WIDTH; export const IMAGE_HEIGHT = SCREEN_WIDTH; export const COVER_HEIGHT = SCREEN_WIDTH * (7 / 5); +export const AVATAR_DIM = 44; +export const AVATAR_GRADIENT_DIM = 50; + export const SOCIAL_LIST: Array = [ 'Instagram', 'Facebook', @@ -31,6 +34,16 @@ export const LINKEDIN_FONT_COLOR: string = '#78B5FD'; export const SNAPCHAT_FONT_COLOR: string = '#FFFC00'; export const YOUTUBE_FONT_COLOR: string = '#FCA4A4'; +export const TAGGS_GRADIENT = { + 'start': '#9F00FF', + 'end': '#27EAE9' +} + +export const AVATAR_GRADIENT = { + 'start': '#240041', + 'end': '#215151' +} + export const SOCIAL_FONT_COLORS = { INSTAGRAM: INSTAGRAM_FONT_COLOR, FACEBOOK: FACEBOOK_FONT_COLOR, diff --git a/src/routes/index.ts b/src/routes/index.ts index 69697b20..c06845aa 100644 --- a/src/routes/index.ts +++ b/src/routes/index.ts @@ -1,4 +1,5 @@ export {default as AuthProvider} from './authentication'; export * from './authentication'; export * from './onboarding'; +export * from './profile'; export {default} from './Routes'; diff --git a/src/routes/profile/Profile.tsx b/src/routes/profile/Profile.tsx new file mode 100644 index 00000000..faab0bde --- /dev/null +++ b/src/routes/profile/Profile.tsx @@ -0,0 +1,31 @@ +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 = () => { + return ( + + + , + }} + /> + + ); +}; + +export default Profile; diff --git a/src/routes/profile/ProfileStack.tsx b/src/routes/profile/ProfileStack.tsx new file mode 100644 index 00000000..9a39aa97 --- /dev/null +++ b/src/routes/profile/ProfileStack.tsx @@ -0,0 +1,11 @@ +import {createStackNavigator} from '@react-navigation/stack'; + +export type ProfileStackParams = { + Profile: undefined; + SocialMediaTaggs: { + socialMediaType: string; + socialMediaHandle: string; + }; +}; + +export const ProfileStack = createStackNavigator(); diff --git a/src/routes/profile/index.ts b/src/routes/profile/index.ts new file mode 100644 index 00000000..367f4cc6 --- /dev/null +++ b/src/routes/profile/index.ts @@ -0,0 +1,2 @@ +export * from './ProfileStack'; +export {default} from './Profile'; diff --git a/src/routes/tabs/NavigationBar.tsx b/src/routes/tabs/NavigationBar.tsx index d36b02ae..456e923f 100644 --- a/src/routes/tabs/NavigationBar.tsx +++ b/src/routes/tabs/NavigationBar.tsx @@ -1,13 +1,8 @@ -import React from 'react'; import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'; +import React from 'react'; import {NavigationIcon} from '../../components'; -import { - ProfileScreen, - SearchScreen, - Home, - Notifications, - Upload, -} from '../../screens'; +import {Home, Notifications, SearchScreen, Upload} from '../../screens'; +import Profile from '../profile'; const Tabs = createBottomTabNavigator(); @@ -65,7 +60,7 @@ const NavigationBar: React.FC = () => { - + ); }; diff --git a/src/screens/profile/SocialMediaTaggs.tsx b/src/screens/profile/SocialMediaTaggs.tsx new file mode 100644 index 00000000..8bc5e4d8 --- /dev/null +++ b/src/screens/profile/SocialMediaTaggs.tsx @@ -0,0 +1,87 @@ +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 {SocialMediaInfo, TabsGradient, TaggsFeed} from '../../components'; +import {AuthContext, ProfileStackParams} from '../../routes'; +import {headerBarHeightWithImage, SCREEN_HEIGHT} from '../../utils'; + +type SocialMediaTaggsRouteProp = RouteProp< + ProfileStackParams, + 'SocialMediaTaggs' +>; + +interface SocialMediaTaggsProps { + route: SocialMediaTaggsRouteProp; +} + +/** + * Social media taggs screen for a user's social media + * includes: + * + tagg profile pic + * + username from social media + * + post + * + caption + * + sharebutton + number of shares + * + date posted + * + dark background + */ +const SocialMediaTaggs: React.FC = () => { + const { + user, + profile: {name}, + } = React.useContext(AuthContext); + + // TODO: We should use the passed-in socialmedia type/handle instead. + // Currently don't have an intuitive way of doing so, for now, + // just grabbing from user's AuthContext. + // const {socialMediaType, socialMediaHandle} = route.params; + const {instaPosts} = React.useContext(AuthContext); + const socialMediaType = 'Instagram'; + const socialMediaHandle = instaPosts[0].username; + + const headerHeight = headerBarHeightWithImage(); + console.log(headerHeight); + + return ( + + + {/* Cropping the scroll view to mimic the presence of a header while preserving the gradient background */} + + + + + + + + + ); +}; + +const styles = StyleSheet.create({ + contentContainer: { + paddingBottom: SCREEN_HEIGHT / 15, + }, + flex: { + flex: 1, + }, +}); + +export default SocialMediaTaggs; diff --git a/src/screens/profile/index.ts b/src/screens/profile/index.ts index 0ade259d..bc86031f 100644 --- a/src/screens/profile/index.ts +++ b/src/screens/profile/index.ts @@ -1 +1,2 @@ export {default as ProfileScreen} from './ProfileScreen'; +export {default as SocialMediaTaggs} from './SocialMediaTaggs'; diff --git a/src/types/types.ts b/src/types/types.ts index c01ee045..d8dc95fe 100644 --- a/src/types/types.ts +++ b/src/types/types.ts @@ -32,7 +32,8 @@ export interface InstagramPostType { export interface PostType { owner: UserType; social: string; - instagram: InstagramPostType | undefined; + socialHandle: string; + data: InstagramPostType | undefined; } export interface LinkerType { diff --git a/src/utils/statusBarHeight.ts b/src/utils/statusBarHeight.ts index 4c68f9ee..dd4a67ac 100644 --- a/src/utils/statusBarHeight.ts +++ b/src/utils/statusBarHeight.ts @@ -1,4 +1,6 @@ +import {useHeaderHeight} from '@react-navigation/stack'; import {Platform, StatusBar} from 'react-native'; +import {AVATAR_DIM} from '../constants'; import {SCREEN_WIDTH, SCREEN_HEIGHT} from './screenDimensions'; const X_WIDTH = 375; @@ -17,3 +19,7 @@ export const StatusBarHeight = Platform.select({ android: StatusBar.currentHeight, default: 0, }); + +export const headerBarHeightWithImage = () => { + return Math.max(useHeaderHeight() + 14, AVATAR_DIM + StatusBarHeight + 14); +}; -- cgit v1.2.3-70-g09d2