Page MenuHomePhorge
Files F32883830

D5844.1768160105.diff
No OneTemporary
Actions

Size
9 KB
Referenced Files
None
Subscribers
None

D5844.1768160105.diff
View Options

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
@@ -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}
/>
- <SafeAreaView
- style={this.props.styles.container}
- forceInset={safeAreaViewForceInset}
- >
+ <View style={this.props.styles.container}>
<DisconnectedBar visible={this.props.calendarActive} />
{loadingIndicator}
{flatList}
- </SafeAreaView>
+ </View>
<KeyboardAvoidingView
behavior="position"
style={this.props.styles.keyboardAvoidingViewContainer}
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 <ChatHeader {...castProps} />;
};
-const headerBackButton = props => <HeaderBackButton {...props} />;
const messageListOptions = ({ navigation, route }) => {
const isSearchEmpty =
@@ -259,8 +260,12 @@
ChatParamList,
ChatNavigationHelpers<ScreenParamList>,
>();
-// 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 = <ThreadDraftUpdater />;
}
+ const headerLeftButton = React.useCallback(
+ headerProps => {
+ if (headerProps.canGoBack) {
+ return <HeaderBackButton {...headerProps} />;
+ }
+ return <CommunityDrawerButton navigation={props.navigation} />;
+ },
+ [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 (
+ <TouchableOpacity onPress={navigation.openDrawer}>
+ <Icon name="menu" size={26} style={styles.drawerButton} />
+ </TouchableOpacity>
+ );
+}
+
+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(
+ () => <CommunityDrawerButton navigation={props.navigation} />,
+ [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 = (
<Tab.Screen
name={CalendarRouteName}
component={Calendar}
- options={calendarTabOptions}
+ options={calendarOptions}
/>
);
}
+ const appsOptions = React.useMemo(
+ () => ({ ...appsTabOptions, ...headerCommonOptions }),
+ [headerCommonOptions],
+ );
+
const tabBarScreenOptions = React.useMemo(
() => ({
headerShown: false,
@@ -123,7 +150,7 @@
<Tab.Screen
name={AppsRouteName}
component={AppsDirectory}
- options={appsTabOptions}
+ options={appsOptions}
/>
</Tab.Navigator>
);
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) => <ProfileHeader {...props} />;
-const headerBackButton = props => <HeaderBackButton {...props} />;
const profileScreenOptions = { headerTitle: 'Profile' };
const editPasswordOptions = { headerTitle: 'Change password' };
const deleteAccountOptions = { headerTitle: 'Delete account' };
@@ -59,21 +60,34 @@
ProfileParamList,
StackNavigationHelpers<ScreenParamList>,
>();
-// 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 ? (
+ <HeaderBackButton {...headerProps} />
+ ) : (
+ <CommunityDrawerButton navigation={props.navigation} />
+ ),
+ [props.navigation],
+ );
+
const screenOptions = React.useMemo(
() => ({
header,
- headerLeft: headerBackButton,
+ headerLeft: headerLeftButton,
headerStyle: {
backgroundColor: colors.tabBarBackground,
shadowOpacity: 0,
},
}),
- [colors.tabBarBackground],
+ [colors.tabBarBackground, headerLeftButton],
);
return (

File Metadata

Mime Type
text/plain
Expires
Sun, Jan 11, 7:35 PM (12 h, 15 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
5920049
Default Alt Text
D5844.1768160105.diff (9 KB)

Event Timeline