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'>,
@@ -584,14 +578,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 * 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 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
@@ -101,7 +101,6 @@
"react-native-progress": "^4.1.2",
"react-native-reanimated": "^2.10.0",
"react-native-safe-area-context": "^3.1.9",
- "react-native-safe-area-view": "^2.0.0",
"react-native-screens": "~3.8.0",
"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
@@ -11182,11 +11182,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"
@@ -17312,13 +17307,6 @@
resolved "https://registry.yarnpkg.com/react-native-safe-area-context/-/react-native-safe-area-context-3.1.9.tgz#48864ea976b0fa57142a2cc523e1fd3314e7247e"
integrity sha512-wmcGbdyE/vBSL5IjDPReoJUEqxkZsywZw5gPwsVUV1NBpw5eTIdnL6Y0uNKHE25Z661moxPHQz6kwAkYQyorxA==
-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"