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
@@ -8,7 +8,7 @@
import { useStyles } from '../themes/colors';
import AppListing from './app-listing.react';
-const safeAreaEdges = ['top', 'bottom'];
+const safeAreaEdges = ['bottom'];
const APP_DIRECTORY_DATA = [
{
id: 'chat',
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
@@ -117,7 +117,7 @@
};
const safeAreaViewForceInset = {
- top: 'always',
+ top: 'never',
bottom: 'never',
};
diff --git a/native/chat/chat.react.js b/native/chat/chat.react.js
--- a/native/chat/chat.react.js
+++ b/native/chat/chat.react.js
@@ -34,6 +34,8 @@
import KeyboardAvoidingView from '../components/keyboard-avoiding-view.react';
import SWMansionIcon from '../components/swmansion-icon.react';
import { InputStateContext } from '../input/input-state';
+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 { defaultStackScreenOptions } from '../navigation/options';
import {
@@ -198,7 +200,6 @@
const castProps: StackHeaderProps = (props: any);
return ;
};
-const headerBackButton = props => ;
const messageListOptions = ({ navigation, route }) => {
const isSearchEmpty =
@@ -259,8 +260,13 @@
ChatParamList,
ChatNavigationHelpers,
>();
+
+type Props = {
+ +navigation: CommunityDrawerNavigationProp<'TabNavigator'>,
+ ...
+};
// eslint-disable-next-line no-unused-vars
-export default function ChatComponent(props: { ... }): React.Node {
+export default function ChatComponent(props: Props): React.Node {
const styles = useStyles(unboundStyles);
const colors = useColors();
const loggedIn = useSelector(isLoggedIn);
@@ -269,17 +275,27 @@
draftUpdater = ;
}
+ const headerLeftButton = React.useCallback(
+ headerProps =>
+ headerProps.canGoBack ? (
+
+ ) : (
+
+ ),
+ [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,34 @@
+// @flow
+
+import * as React from 'react';
+import { TouchableOpacity } from 'react-native';
+import Icon from 'react-native-vector-icons/Feather';
+
+import { useStyles } from '../themes/colors';
+import type { CommunityDrawerNavigationProp } from './community-drawer-navigator.react';
+
+type Props = {
+ +navigation: CommunityDrawerNavigationProp<'TabNavigator'>,
+};
+function CommunnityDrawerButton(props: Props): React.Node {
+ const styles = useStyles(unboundStyles);
+ const { navigation } = props;
+ const onPress = React.useCallback(() => {
+ navigation.openDrawer();
+ }, [navigation]);
+
+ return (
+
+
+
+ );
+}
+
+const unboundStyles = {
+ drawerButton: {
+ color: 'listForegroundSecondaryLabel',
+ marginLeft: 16,
+ },
+};
+
+export default CommunnityDrawerButton;
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 CommunnityDrawerButton from './community-drawer-button.react';
import type { CommunityDrawerNavigationProp } from './community-drawer-navigator.react';
import {
CalendarRouteName,
@@ -77,17 +78,44 @@
const chatBadge = useSelector(unreadCount);
const isCalendarEnabled = useSelector(state => state.enabledApps.calendar);
+ const headerLeft = React.useCallback(
+ () => ,
+ [props.navigation],
+ );
+
+ const headerCommonOptions = React.useMemo(
+ () => ({
+ headerShown: true,
+ headerLeft: 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 +151,7 @@
);
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,35 @@
ProfileParamList,
StackNavigationHelpers,
>();
+type Props = {
+ +navigation: CommunityDrawerNavigationProp<'TabNavigator'>,
+ ...
+};
// eslint-disable-next-line no-unused-vars
-function ProfileComponent(props: { ... }): React.Node {
+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 (