diff --git a/native/apps/apps-directory.react.js b/native/apps/apps-directory.react.js --- a/native/apps/apps-directory.react.js +++ b/native/apps/apps-directory.react.js @@ -1,14 +1,12 @@ // @flow import * as React from 'react'; -import { Text, FlatList } from 'react-native'; -import { SafeAreaView } from 'react-native-safe-area-context'; +import { Text, FlatList, View } from 'react-native'; import { useSelector } from 'react-redux'; import { useStyles } from '../themes/colors'; import AppListing from './app-listing.react'; -const safeAreaEdges = ['top', 'bottom']; const APP_DIRECTORY_DATA = [ { id: 'chat', @@ -47,14 +45,14 @@ const getItemID = React.useCallback(item => item.id, []); return ( - + Choose Apps - + ); } diff --git a/native/calendar/calendar.react.js b/native/calendar/calendar.react.js --- a/native/calendar/calendar.react.js +++ b/native/calendar/calendar.react.js @@ -19,7 +19,6 @@ LayoutAnimation, TouchableWithoutFeedback, } from 'react-native'; -import SafeAreaView from 'react-native-safe-area-view'; import { updateCalendarQueryActionTypes, @@ -116,11 +115,6 @@ +visibleEntries: { +[key: string]: boolean }, }; -const safeAreaViewForceInset = { - top: 'always', - bottom: 'never', -}; - type BaseProps = { +navigation: TabNavigationProp<'Calendar'>, +route: NavigationRoute<'Calendar'>, @@ -591,14 +585,11 @@ mergeItemWithHeight={this.heightMeasurerMergeItem} allHeightsMeasured={this.allHeightsMeasured} /> - + {loadingIndicator} {flatList} - + ; }; -const headerBackButton = props => ; const messageListOptions = ({ navigation, route }) => { const isSearchEmpty = @@ -259,8 +260,12 @@ ChatParamList, ChatNavigationHelpers, >(); -// eslint-disable-next-line no-unused-vars -export default function ChatComponent(props: { ... }): React.Node { + +type Props = { + +navigation: CommunityDrawerNavigationProp<'TabNavigator'>, + ... +}; +export default function ChatComponent(props: Props): React.Node { const styles = useStyles(unboundStyles); const colors = useColors(); const loggedIn = useSelector(isLoggedIn); @@ -269,17 +274,27 @@ draftUpdater = ; } + const headerLeftButton = React.useCallback( + headerProps => { + if (headerProps.canGoBack) { + return ; + } + return ; + }, + [props.navigation], + ); + const screenOptions = React.useMemo( () => ({ ...defaultStackScreenOptions, header, - headerLeft: headerBackButton, + headerLeft: headerLeftButton, headerStyle: { backgroundColor: colors.tabBarBackground, borderBottomWidth: 1, }, }), - [colors.tabBarBackground], + [colors.tabBarBackground, headerLeftButton], ); const chatThreadListOptions = React.useCallback( diff --git a/native/navigation/community-drawer-button.react.js b/native/navigation/community-drawer-button.react.js new file mode 100644 --- /dev/null +++ b/native/navigation/community-drawer-button.react.js @@ -0,0 +1,31 @@ +// @flow + +import Icon from '@expo/vector-icons/Feather'; +import * as React from 'react'; +import { TouchableOpacity } from 'react-native'; + +import { useStyles } from '../themes/colors'; +import type { CommunityDrawerNavigationProp } from './community-drawer-navigator.react'; + +type Props = { + +navigation: CommunityDrawerNavigationProp<'TabNavigator'>, +}; +function CommunityDrawerButton(props: Props): React.Node { + const styles = useStyles(unboundStyles); + const { navigation } = props; + + return ( + + + + ); +} + +const unboundStyles = { + drawerButton: { + color: 'listForegroundSecondaryLabel', + marginLeft: 16, + }, +}; + +export default CommunityDrawerButton; diff --git a/native/navigation/community-drawer-navigator.react.js b/native/navigation/community-drawer-navigator.react.js --- a/native/navigation/community-drawer-navigator.react.js +++ b/native/navigation/community-drawer-navigator.react.js @@ -43,6 +43,7 @@ const screenOptions = React.useMemo( () => ({ drawerStyle: styles.drawerStyle, + headerShown: false, }), [styles.drawerStyle], ); diff --git a/native/navigation/tab-navigator.react.js b/native/navigation/tab-navigator.react.js --- a/native/navigation/tab-navigator.react.js +++ b/native/navigation/tab-navigator.react.js @@ -16,6 +16,7 @@ import Profile from '../profile/profile.react'; import { useSelector } from '../redux/redux-utils'; import { useColors } from '../themes/colors'; +import CommunityDrawerButton from './community-drawer-button.react'; import type { CommunityDrawerNavigationProp } from './community-drawer-navigator.react'; import { CalendarRouteName, @@ -71,23 +72,49 @@ +navigation: CommunityDrawerNavigationProp<'TabNavigator'>, +route: NavigationRoute<'TabNavigator'>, }; -// eslint-disable-next-line no-unused-vars function TabNavigator(props: Props): React.Node { const colors = useColors(); const chatBadge = useSelector(unreadCount); const isCalendarEnabled = useSelector(state => state.enabledApps.calendar); + const headerLeft = React.useCallback( + () => , + [props.navigation], + ); + + const headerCommonOptions = React.useMemo( + () => ({ + headerShown: true, + headerLeft, + headerStyle: { + backgroundColor: colors.tabBarBackground, + }, + headerShadowVisible: false, + }), + [colors.tabBarBackground, headerLeft], + ); + + const calendarOptions = React.useMemo( + () => ({ ...calendarTabOptions, ...headerCommonOptions }), + [headerCommonOptions], + ); + let calendarTab; if (isCalendarEnabled) { calendarTab = ( ); } + const appsOptions = React.useMemo( + () => ({ ...appsTabOptions, ...headerCommonOptions }), + [headerCommonOptions], + ); + const tabBarScreenOptions = React.useMemo( () => ({ headerShown: false, @@ -123,7 +150,7 @@ ); diff --git a/native/package.json b/native/package.json --- a/native/package.json +++ b/native/package.json @@ -103,7 +103,6 @@ "react-native-progress": "^4.1.2", "react-native-reanimated": "^2.12.0", "react-native-safe-area-context": "^4.4.1", - "react-native-safe-area-view": "^2.0.0", "react-native-screens": "^3.18.2", "react-native-svg": "^12.3.0", "react-native-tab-view": "^3.3.0", diff --git a/native/profile/profile.react.js b/native/profile/profile.react.js --- a/native/profile/profile.react.js +++ b/native/profile/profile.react.js @@ -10,6 +10,8 @@ import { View } from 'react-native'; import KeyboardAvoidingView from '../components/keyboard-avoiding-view.react'; +import CommunityDrawerButton from '../navigation/community-drawer-button.react'; +import type { CommunityDrawerNavigationProp } from '../navigation/community-drawer-navigator.react'; import HeaderBackButton from '../navigation/header-back-button.react'; import { ProfileScreenRouteName, @@ -38,7 +40,6 @@ import RelationshipList from './relationship-list.react'; const header = (props: StackHeaderProps) => ; -const headerBackButton = props => ; const profileScreenOptions = { headerTitle: 'Profile' }; const editPasswordOptions = { headerTitle: 'Change password' }; const deleteAccountOptions = { headerTitle: 'Delete account' }; @@ -59,21 +60,34 @@ ProfileParamList, StackNavigationHelpers, >(); -// eslint-disable-next-line no-unused-vars -function ProfileComponent(props: { ... }): React.Node { +type Props = { + +navigation: CommunityDrawerNavigationProp<'TabNavigator'>, + ... +}; +function ProfileComponent(props: Props): React.Node { const styles = useStyles(unboundStyles); const colors = useColors(); + const headerLeftButton = React.useCallback( + headerProps => + headerProps.canGoBack ? ( + + ) : ( + + ), + [props.navigation], + ); + const screenOptions = React.useMemo( () => ({ header, - headerLeft: headerBackButton, + headerLeft: headerLeftButton, headerStyle: { backgroundColor: colors.tabBarBackground, shadowOpacity: 0, }, }), - [colors.tabBarBackground], + [colors.tabBarBackground, headerLeftButton], ); return ( diff --git a/yarn.lock b/yarn.lock --- a/yarn.lock +++ b/yarn.lock @@ -12551,11 +12551,6 @@ minimalistic-assert "^1.0.0" minimalistic-crypto-utils "^1.0.1" -hoist-non-react-statics@^2.3.1: - version "2.5.5" - resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz#c5903cf409c0dfd908f388e619d86b9c1174cb47" - integrity sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw== - hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.1, hoist-non-react-statics@^3.3.2: version "3.3.2" resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45" @@ -19032,13 +19027,6 @@ resolved "https://registry.yarnpkg.com/react-native-safe-area-context/-/react-native-safe-area-context-4.4.1.tgz#239c60b8a9a80eac70a38a822b04c0f1d15ffc01" integrity sha512-N9XTjiuD73ZpVlejHrUWIFZc+6Z14co1K/p1IFMkImU7+avD69F3y+lhkqA2hN/+vljdZrBSiOwXPkuo43nFQA== -react-native-safe-area-view@^2.0.0: - version "2.0.0" - resolved "https://registry.yarnpkg.com/react-native-safe-area-view/-/react-native-safe-area-view-2.0.0.tgz#98fc9bb1bf3cb8c97ba684efb7dd897765afff3b" - integrity sha512-tGlGZwRoZpTQ0gEdSSRgbkeyyKC50ZsEv2H/LQKjXhc00IHffbU0BA5chSzTqNwDrs5MFXfTG1ooRQK+0FVTjw== - dependencies: - hoist-non-react-statics "^2.3.1" - react-native-safe-modules@^1.0.3: version "1.0.3" resolved "https://registry.yarnpkg.com/react-native-safe-modules/-/react-native-safe-modules-1.0.3.tgz#f5f29bb9d09d17581193843d4173ad3054f74890"