From c9a8f87a29e12bfb78939fa9a94b6f8919b04836 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Thu, 4 Feb 2021 16:58:40 -0500 Subject: refactored header styles # Conflicts: # src/components/common/FriendsButton.tsx # src/screens/profile/FriendsListScreen.tsx # src/screens/profile/MomentCommentsScreen.tsx --- src/routes/main/MainStackScreen.tsx | 59 +++++++++++++++++++++++++++++++++---- 1 file changed, 54 insertions(+), 5 deletions(-) (limited to 'src/routes') diff --git a/src/routes/main/MainStackScreen.tsx b/src/routes/main/MainStackScreen.tsx index c0cef3ea..0141a418 100644 --- a/src/routes/main/MainStackScreen.tsx +++ b/src/routes/main/MainStackScreen.tsx @@ -20,6 +20,10 @@ import { import {ScreenType} from '../../types'; import {AvatarHeaderHeight, SCREEN_WIDTH} from '../../utils'; import {MainStack, MainStackParams} from './MainStackNavigator'; +import BackIcon from '../../assets/icons/back-arrow.svg'; +import {StyleSheet, Text} from 'react-native'; +import {normalize} from 'react-native-elements'; +import {StackHeaderOptions} from '@react-navigation/stack/lib/typescript/src/types'; /** * Profile : To display the logged in user's profile when the userXId passed in to it is (undefined | null | empty string) else displays profile of the user being visited. @@ -185,6 +189,9 @@ const MainStackScreen: React.FC = ({route}) => { name="MomentCommentsScreen" component={MomentCommentsScreen} initialParams={{screenType}} + options={{ + ...headerBarOptions('black', 'Comments'), + }} /> = ({route}) => { name="FriendsListScreen" component={FriendsListScreen} initialParams={{screenType}} + options={{ + ...headerBarOptions('black', 'Friends'), + }} /> ); }; +export const headerBarOptions: ( + color: 'white' | 'black', + title: string, +) => StackNavigationOptions = (color, title) => ({ + headerShown: true, + headerTransparent: true, + headerBackTitleVisible: false, + headerBackImage: () => ( + + ), + headerTitle: () => ( + {title} + ), +}); + +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; -- cgit v1.2.3-70-g09d2 From 1fbaa98a8de84fe7c9969a980abc3050d2a4f2ca Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Tue, 9 Feb 2021 14:41:58 -0500 Subject: refactored styles in main stack --- src/routes/main/MainStackScreen.tsx | 81 +++++++++++++------------------------ 1 file changed, 27 insertions(+), 54 deletions(-) (limited to 'src/routes') diff --git a/src/routes/main/MainStackScreen.tsx b/src/routes/main/MainStackScreen.tsx index 0141a418..b8b471c2 100644 --- a/src/routes/main/MainStackScreen.tsx +++ b/src/routes/main/MainStackScreen.tsx @@ -67,20 +67,6 @@ const MainStackScreen: React.FC = ({route}) => { } })(); - 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 ( = ({route}) => { {isSearchTab && @@ -128,62 +107,42 @@ const MainStackScreen: React.FC = ({route}) => { ({ - cardStyle: { - opacity: progress.interpolate({ - inputRange: [0, 0.5, 0.9, 1], - outputRange: [0, 0.25, 0.7, 1], - }), - }, - }), }} - initialParams={{screenType}} /> = ({route}) => { ({ + 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, -- cgit v1.2.3-70-g09d2 From c5e4bfbba73090b9fa3d422ddf31aaa915d032df Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Tue, 9 Feb 2021 14:43:11 -0500 Subject: fixed header styles in several screens --- src/routes/main/MainStackScreen.tsx | 7 +++-- src/screens/profile/FriendsListScreen.tsx | 38 +++++++--------------------- src/screens/profile/MomentCommentsScreen.tsx | 4 +-- 3 files changed, 14 insertions(+), 35 deletions(-) (limited to 'src/routes') diff --git a/src/routes/main/MainStackScreen.tsx b/src/routes/main/MainStackScreen.tsx index b8b471c2..f8f93eb0 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, @@ -20,10 +23,6 @@ import { import {ScreenType} from '../../types'; import {AvatarHeaderHeight, SCREEN_WIDTH} from '../../utils'; import {MainStack, MainStackParams} from './MainStackNavigator'; -import BackIcon from '../../assets/icons/back-arrow.svg'; -import {StyleSheet, Text} from 'react-native'; -import {normalize} from 'react-native-elements'; -import {StackHeaderOptions} from '@react-navigation/stack/lib/typescript/src/types'; /** * Profile : To display the logged in user's profile when the userXId passed in to it is (undefined | null | empty string) else displays profile of the user being visited. diff --git a/src/screens/profile/FriendsListScreen.tsx b/src/screens/profile/FriendsListScreen.tsx index 7abe289f..1cfef058 100644 --- a/src/screens/profile/FriendsListScreen.tsx +++ b/src/screens/profile/FriendsListScreen.tsx @@ -1,26 +1,14 @@ -import React, {Fragment, useEffect} from 'react'; -import {RouteProp, useNavigation} from '@react-navigation/native'; -import {TabsGradient, Friends} from '../../components'; -import { - HeaderHeight, - normalize, - SCREEN_HEIGHT, - SCREEN_WIDTH, -} from '../../utils'; -import { - SafeAreaView, - StyleSheet, - Text, - TouchableOpacity, - View, -} from 'react-native'; -import {ProfileStackParams} from '../../routes'; +import {RouteProp} from '@react-navigation/native'; +import React from 'react'; +import {SafeAreaView, StyleSheet, View} from 'react-native'; import {useSelector} from 'react-redux'; +import {Friends, TabsGradient} from '../../components'; +import {MainStackParams} from '../../routes'; import {RootState} from '../../store/rootReducer'; -import BackIcon from '../../assets/icons/back-arrow.svg'; +import {HeaderHeight, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils'; type FriendsListScreenRouteProp = RouteProp< - ProfileStackParams, + MainStackParams, 'FriendsListScreen' >; interface FriendsListScreenProps { @@ -37,17 +25,9 @@ const FriendsListScreen: React.FC = ({route}) => { return ( <> - - { - navigation.pop(); - }}> - - - Friends + + - diff --git a/src/screens/profile/MomentCommentsScreen.tsx b/src/screens/profile/MomentCommentsScreen.tsx index 4a902e9e..b0208f6f 100644 --- a/src/screens/profile/MomentCommentsScreen.tsx +++ b/src/screens/profile/MomentCommentsScreen.tsx @@ -1,8 +1,7 @@ import {RouteProp, useNavigation} from '@react-navigation/native'; import React, {useEffect, useState} from 'react'; -import {StyleSheet, Text, TouchableOpacity, View} from 'react-native'; +import {StyleSheet, View} from 'react-native'; import {SafeAreaView} from 'react-native-safe-area-context'; -import BackIcon from '../../assets/icons/back-arrow.svg'; import {TabsGradient} from '../../components'; import {AddComment} from '../../components/'; import CommentsContainer from '../../components/comments/CommentsContainer'; @@ -111,6 +110,7 @@ const styles = StyleSheet.create({ fontWeight: '400', }, body: { + marginTop: HeaderHeight, width: SCREEN_WIDTH * 0.9, height: SCREEN_HEIGHT * 0.8, paddingTop: '3%', -- cgit v1.2.3-70-g09d2