diff options
26 files changed, 462 insertions, 64 deletions
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 <Image> of the icon for a specific social media platform. + */ +const AvatarTitle: React.FC = () => { + const {avatar} = React.useContext(AuthContext); + return ( + <LinearGradient + colors={[TAGGS_GRADIENT.start, TAGGS_GRADIENT.end]} + useAngle={true} + angle={154.72} + angleCenter={{x: 0.5, y: 0.5}} + style={[styles.gradient]}> + <Image + style={styles.avatar} + source={ + avatar + ? {uri: avatar} + : require('../../assets/images/avatar-placeholder.png') + } + /> + </LinearGradient> + ); +}; + +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<PostProps> = ({post: {owner, instagram, social}}) => { +const Post: React.FC<PostProps> = ({post: {owner, social, data}}) => { return ( <> - <PostHeader post={instagram} owner={owner} social={social} /> + <PostHeader post={data} owner={owner} social={social} /> <View style={styles.image}> - {instagram && ( - <Image style={styles.image} source={{uri: instagram.media_url}} /> - )} + {data && <Image style={styles.image} source={{uri: data.media_url}} />} </View> </> ); 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<ContentProps> = ({y, user}) => { <ProfileHeader /> </ProfileCutout> <ProfileBody {...{onLayout}} /> - <MomentsBar {...{y, profileBodyHeight}} /> + <TaggsBar {...{y, profileBodyHeight}} /> <Feed {...{user}} /> </Animated.ScrollView> ); 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<FeedProps> = ({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<MomentProps> = ({style}) => { - return ( - <LinearGradient - colors={['#9F00FF', '#27EAE9']} - useAngle={true} - angle={154.72} - angleCenter={{x: 0.5, y: 0.5}} - style={[styles.gradient, style]}> - <View style={styles.image} /> - </LinearGradient> - ); -}; - -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/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<SocialMediaInfoProps> = ({ + fullname, + type, + handle, +}) => { + return ( + <View style={styles.container}> + <Text style={styles.handle}> @{handle} </Text> + <View style={styles.row}> + <View /> + <SocialIcon style={styles.icon} social={type} /> + <Text style={styles.name}>{fullname}</Text> + </View> + </View> + ); +}; + +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<TaggProps> = ({style}) => { + const navigation = useNavigation(); + + return ( + <TouchableOpacity + onPress={() => + navigation.navigate('SocialMediaTaggs', { + socialMediaType: 'Instagram', + }) + }> + <LinearGradient + colors={[TAGGS_GRADIENT.start, TAGGS_GRADIENT.end]} + useAngle={true} + angle={154.72} + angleCenter={{x: 0.5, y: 0.5}} + style={[styles.gradient, style]}> + <View style={styles.image} /> + </LinearGradient> + </TouchableOpacity> + ); +}; + +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<TaggPostProps> = ({post: {socialHandle, data}}) => { + const parsedDate = moment(data?.timestamp || ''); + const date = parsedDate.isValid() ? parsedDate.format('MMM d') : ''; + + return ( + <> + <View style={styles.image}> + {data && <Image style={styles.image} source={{uri: data.media_url}} />} + </View> + <TaggPostFooter + // we currently don't have a way to retreive num of likes information + likes={109} + handle={socialHandle} + caption={data?.caption || ''} + date={date} + /> + </> + ); +}; + +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<TaggPostFooterProps> = ({ + likes, + handle, + caption, + date, +}) => { + return ( + <View> + <View style={styles.container}> + <Text style={styles.likeText}>{likes} likes</Text> + <View style={styles.captionContainer}> + <Text style={styles.handleText}> + {handle} + <Text style={styles.captionText}> {caption}</Text> + </Text> + </View> + <Text style={styles.dateText}>{date}</Text> + </View> + </View> + ); +}; + +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/profile/MomentsBar.tsx b/src/components/taggs/TaggsBar.tsx index dcc88d89..1022c4fc 100644 --- a/src/components/profile/MomentsBar.tsx +++ b/src/components/taggs/TaggsBar.tsx @@ -2,19 +2,19 @@ import React from 'react'; import {StyleSheet} from 'react-native'; import Animated from 'react-native-reanimated'; -import Moment from './Moment'; +import Tagg from './Tagg'; import {PROFILE_CUTOUT_BOTTOM_Y} from '../../constants'; import {StatusBarHeight} from '../../utils'; const {View, ScrollView, interpolate, Extrapolate} = Animated; -interface MomentsBarProps { +interface TaggsBarProps { y: Animated.Value<number>; profileBodyHeight: number; } -const MomentsBar: React.FC<MomentsBarProps> = ({y, profileBodyHeight}) => { - const moments: Array<JSX.Element> = []; +const TaggsBar: React.FC<TaggsBarProps> = ({y, profileBodyHeight}) => { + const taggs: Array<JSX.Element> = []; for (let i = 0; i < 10; i++) { - moments.push(<Moment key={i} style={styles.moment} />); + taggs.push(<Tagg key={i} style={styles.tagg} />); } const shadowOpacity: Animated.Node<number> = interpolate(y, { inputRange: [ @@ -49,7 +49,7 @@ const MomentsBar: React.FC<MomentsBarProps> = ({y, profileBodyHeight}) => { showsHorizontalScrollIndicator={false} style={{paddingTop, paddingBottom}} contentContainerStyle={styles.contentContainer}> - {moments} + {taggs} </ScrollView> </View> ); @@ -67,9 +67,9 @@ const styles = StyleSheet.create({ alignItems: 'center', paddingHorizontal: 15, }, - moment: { + tagg: { marginHorizontal: 14, }, }); -export default MomentsBar; +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<InstagramPostType>; +} + +const TaggsFeed: React.FC<TaggsFeedProps> = ({user, socialHandle, posts}) => { + return ( + <> + {posts?.map((post, index) => ( + <TaggPost + key={index} + post={{ + owner: user, + social: 'Instagram', + socialHandle: socialHandle, + data: post, + }} + /> + ))} + </> + ); +}; + +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<string> = [ '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 ( + <ProfileStack.Navigator + initialRouteName="Profile" + screenOptions={{headerShown: false}}> + <ProfileStack.Screen name="Profile" component={ProfileScreen} /> + <ProfileStack.Screen + name="SocialMediaTaggs" + component={SocialMediaTaggs} + options={{ + headerShown: true, + headerTransparent: true, + headerBackTitleVisible: false, + headerTintColor: 'white', + headerTitle: () => <AvatarTitle />, + }} + /> + </ProfileStack.Navigator> + ); +}; + +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<ProfileStackParams>(); 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 = () => { <Tabs.Screen name="Search" component={SearchScreen} /> <Tabs.Screen name="Upload" component={Upload} /> <Tabs.Screen name="Notifications" component={Notifications} /> - <Tabs.Screen name="Profile" component={ProfileScreen} /> + <Tabs.Screen name="Profile" component={Profile} /> </Tabs.Navigator> ); }; 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<SocialMediaTaggsProps> = () => { + 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 ( + <LinearGradient + useAngle={true} + angle={148} + style={styles.flex} + colors={[AVATAR_GRADIENT.start, AVATAR_GRADIENT.end]}> + <StatusBar barStyle={'light-content'} /> + {/* Cropping the scroll view to mimic the presence of a header while preserving the gradient background */} + <View + // we want a slightly bigger header here for the avatar image + style={[styles.flex, {paddingTop: headerHeight}]}> + <ScrollView + showsVerticalScrollIndicator={false} + contentContainerStyle={styles.contentContainer}> + <SocialMediaInfo + fullname={name} + type={socialMediaType} + handle={socialMediaHandle} + /> + <TaggsFeed + user={user} + socialHandle={socialMediaHandle} + posts={instaPosts} + /> + </ScrollView> + <TabsGradient /> + </View> + </LinearGradient> + ); +}; + +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); +}; |