diff options
Diffstat (limited to 'src/routes')
| -rw-r--r-- | src/routes/main/MainStackNavigator.tsx | 3 | ||||
| -rw-r--r-- | src/routes/main/MainStackScreen.tsx | 150 | ||||
| -rw-r--r-- | src/routes/tabs/NavigationBar.tsx | 9 |
3 files changed, 103 insertions, 59 deletions
diff --git a/src/routes/main/MainStackNavigator.tsx b/src/routes/main/MainStackNavigator.tsx index 74993af9..f3aa7fc6 100644 --- a/src/routes/main/MainStackNavigator.tsx +++ b/src/routes/main/MainStackNavigator.tsx @@ -11,6 +11,9 @@ import { } from '../../types'; export type MainStackParams = { + SuggestedPeople: { + screenType: ScreenType; + }; Search: { screenType: ScreenType; }; diff --git a/src/routes/main/MainStackScreen.tsx b/src/routes/main/MainStackScreen.tsx index c0cef3ea..99446432 100644 --- a/src/routes/main/MainStackScreen.tsx +++ b/src/routes/main/MainStackScreen.tsx @@ -2,6 +2,9 @@ import AsyncStorage from '@react-native-community/async-storage'; import {RouteProp} from '@react-navigation/native'; import {StackNavigationOptions} from '@react-navigation/stack'; import React, {useState} from 'react'; +import {StyleSheet, Text} from 'react-native'; +import {normalize} from 'react-native-elements'; +import BackIcon from '../../assets/icons/back-arrow.svg'; import { CaptionScreen, CategorySelection, @@ -16,6 +19,7 @@ import { RequestContactsAccess, SearchScreen, SocialMediaTaggs, + SuggestedPeopleScreen, } from '../../screens'; import {ScreenType} from '../../types'; import {AvatarHeaderHeight, SCREEN_WIDTH} from '../../utils'; @@ -43,6 +47,7 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => { // const isProfileTab = screenType === ScreenType.Profile; const isSearchTab = screenType === ScreenType.Search; const isNotificationsTab = screenType === ScreenType.Notifications; + const isSuggestedPeopleTab = screenType === ScreenType.SuggestedPeople; AsyncStorage.getItem('respondedToAccessContacts').then((value) => setRespondedToAccessContacts(value ? value : 'false'), @@ -60,23 +65,11 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => { return 'Search'; case ScreenType.Notifications: return 'Notifications'; + case ScreenType.SuggestedPeople: + return 'SuggestedPeople'; } })(); - const modalStyle: StackNavigationOptions = { - cardStyle: {backgroundColor: 'rgba(80,80,80,0.9)'}, - gestureDirection: 'vertical', - cardOverlayEnabled: true, - cardStyleInterpolator: ({current: {progress}}) => ({ - cardStyle: { - opacity: progress.interpolate({ - inputRange: [0, 0.5, 0.9, 1], - outputRange: [0, 0.25, 0.7, 1], - }), - }, - }), - }; - return ( <MainStack.Navigator screenOptions={{ @@ -88,16 +81,9 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => { <MainStack.Screen name="Profile" component={ProfileScreen} + initialParams={{screenType}} options={{ - headerShown: true, - headerTransparent: true, - headerBackTitleVisible: false, - headerTitle: '', - headerTintColor: 'white', - headerStyle: {height: AvatarHeaderHeight}, - }} - initialParams={{ - screenType, + ...headerBarOptions('white', ''), }} /> {isSearchTab && @@ -121,97 +107,143 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => { initialParams={{screenType}} /> )} + {isSuggestedPeopleTab && ( + <MainStack.Screen + name="SuggestedPeople" + component={SuggestedPeopleScreen} + initialParams={{screenType}} + /> + )} <MainStack.Screen name="CaptionScreen" component={CaptionScreen} - options={{...modalStyle, gestureEnabled: false}} + options={{ + ...modalStyle, + gestureEnabled: false, + }} /> <MainStack.Screen name="SocialMediaTaggs" component={SocialMediaTaggs} + initialParams={{screenType}} options={{ - headerShown: true, - headerTransparent: true, - headerBackTitleVisible: false, - headerTitle: '', - headerTintColor: 'white', + ...headerBarOptions('white', ''), headerStyle: {height: AvatarHeaderHeight}, }} - initialParams={{screenType}} /> <MainStack.Screen name="CategorySelection" component={CategorySelection} options={{ - headerShown: true, - headerTransparent: true, - headerBackTitleVisible: false, - headerTintColor: 'white', - headerTitle: '', + ...headerBarOptions('white', ''), }} /> <MainStack.Screen name="CreateCustomCategory" component={CreateCustomCategory} options={{ - headerShown: true, - headerTransparent: true, - headerBackTitleVisible: false, - headerTintColor: 'white', - headerTitle: '', + ...headerBarOptions('white', ''), }} /> <MainStack.Screen name="IndividualMoment" component={IndividualMoment} + initialParams={{screenType}} options={{ + ...modalStyle, gestureEnabled: false, - cardStyle: { - backgroundColor: 'rgba(0, 0, 0, 0.6)', - }, - cardOverlayEnabled: true, - cardStyleInterpolator: ({current: {progress}}) => ({ - cardStyle: { - opacity: progress.interpolate({ - inputRange: [0, 0.5, 0.9, 1], - outputRange: [0, 0.25, 0.7, 1], - }), - }, - }), }} - initialParams={{screenType}} /> <MainStack.Screen name="MomentCommentsScreen" component={MomentCommentsScreen} initialParams={{screenType}} + options={{ + ...headerBarOptions('black', 'Comments'), + }} /> <MainStack.Screen name="MomentUploadPrompt" component={MomentUploadPromptScreen} + initialParams={{screenType}} options={{ ...modalStyle, }} - initialParams={{screenType}} /> <MainStack.Screen name="FriendsListScreen" component={FriendsListScreen} initialParams={{screenType}} + options={{ + ...headerBarOptions('black', 'Friends'), + }} /> <MainStack.Screen name="EditProfile" component={EditProfile} options={{ - headerShown: true, - headerTitle: 'Edit Profile', - headerTransparent: true, - headerBackTitleVisible: false, - headerTintColor: 'white', + ...headerBarOptions('white', 'Edit Profile'), }} /> </MainStack.Navigator> ); }; +export const headerBarOptions: ( + color: 'white' | 'black', + title: string, +) => StackNavigationOptions = (color, title) => ({ + headerShown: true, + headerTransparent: true, + headerBackTitleVisible: false, + headerBackImage: () => ( + <BackIcon + height={normalize(18)} + width={normalize(18)} + color={color} + style={styles.backButton} + /> + ), + headerTitle: () => ( + <Text style={[styles.headerTitle, {color: color}]}>{title}</Text> + ), +}); + +const modalStyle: StackNavigationOptions = { + cardStyle: {backgroundColor: 'rgba(80,80,80,0.6)'}, + gestureDirection: 'vertical', + cardOverlayEnabled: true, + cardStyleInterpolator: ({current: {progress}}) => ({ + cardStyle: { + opacity: progress.interpolate({ + inputRange: [0, 0.5, 0.9, 1], + outputRange: [0, 0.25, 0.7, 1], + }), + }, + }), +}; + +const styles = StyleSheet.create({ + backButton: { + marginLeft: 30, + }, + headerTitle: { + fontSize: normalize(16), + letterSpacing: normalize(1.3), + fontWeight: '700', + }, + whiteHeaderTitle: { + fontSize: normalize(16), + letterSpacing: normalize(1.3), + fontWeight: '700', + color: 'white', + }, + blackHeaderTitle: { + fontSize: normalize(16), + letterSpacing: normalize(1.3), + fontWeight: '700', + color: 'black', + }, +}); + export default MainStackScreen; diff --git a/src/routes/tabs/NavigationBar.tsx b/src/routes/tabs/NavigationBar.tsx index 7d29ab67..49713d66 100644 --- a/src/routes/tabs/NavigationBar.tsx +++ b/src/routes/tabs/NavigationBar.tsx @@ -55,6 +55,10 @@ const NavigationBar: React.FC = () => { ); case 'Profile': return <NavigationIcon tab="Profile" disabled={!focused} />; + case 'SuggestedPeople': + return ( + <NavigationIcon tab="SuggestedPeople" disabled={!focused} /> + ); default: return <Fragment />; } @@ -73,6 +77,11 @@ const NavigationBar: React.FC = () => { }, }}> <Tabs.Screen + name="SuggestedPeople" + component={MainStackScreen} + initialParams={{screenType: ScreenType.SuggestedPeople}} + /> + <Tabs.Screen name="Search" component={MainStackScreen} initialParams={{screenType: ScreenType.Search}} |