diff --git a/native/profile/linked-devices-header-right-button.react.js b/native/profile/linked-devices-header-right-button.react.js
new file mode 100644
index 000000000..ceddc677e
--- /dev/null
+++ b/native/profile/linked-devices-header-right-button.react.js
@@ -0,0 +1,26 @@
+// @flow
+
+import * as React from 'react';
+import { Text, TouchableOpacity } from 'react-native';
+
+import { useStyles } from '../themes/colors.js';
+
+function LinkedDevicesHeaderRightButton(): React.Node {
+ const styles = useStyles(unboundStyles);
+
+ return (
+
+ Add
+
+ );
+}
+
+const unboundStyles = {
+ textStyle: {
+ color: 'headerChevron',
+ fontSize: 16,
+ marginRight: 10,
+ },
+};
+
+export default LinkedDevicesHeaderRightButton;
diff --git a/native/profile/profile.react.js b/native/profile/profile.react.js
index feae96aa8..6fb33a25b 100644
--- a/native/profile/profile.react.js
+++ b/native/profile/profile.react.js
@@ -1,191 +1,196 @@
// @flow
import {
createStackNavigator,
type StackNavigationProp,
type StackNavigationHelpers,
type StackHeaderProps,
} from '@react-navigation/stack';
import * as React from 'react';
import { View, useWindowDimensions } from 'react-native';
import AppearancePreferences from './appearance-preferences.react.js';
import BuildInfo from './build-info.react.js';
import DefaultNotificationsPreferences from './default-notifications-preferences.react.js';
import DeleteAccount from './delete-account.react.js';
import DevTools from './dev-tools.react.js';
import EditPassword from './edit-password.react.js';
import EmojiUserAvatarCreation from './emoji-user-avatar-creation.react.js';
+import LinkedDevicesHeaderRightButton from './linked-devices-header-right-button.react.js';
import LinkedDevices from './linked-devices.react.js';
import PrivacyPreferences from './privacy-preferences.react.js';
import ProfileHeader from './profile-header.react.js';
import ProfileScreen from './profile-screen.react.js';
import RelationshipList from './relationship-list.react.js';
import KeyboardAvoidingView from '../components/keyboard-avoiding-view.react.js';
import CommunityDrawerButton from '../navigation/community-drawer-button.react.js';
import type { CommunityDrawerNavigationProp } from '../navigation/community-drawer-navigator.react.js';
import HeaderBackButton from '../navigation/header-back-button.react.js';
import {
ProfileScreenRouteName,
EditPasswordRouteName,
DeleteAccountRouteName,
EmojiUserAvatarCreationRouteName,
BuildInfoRouteName,
DevToolsRouteName,
AppearancePreferencesRouteName,
PrivacyPreferencesRouteName,
FriendListRouteName,
DefaultNotificationsPreferencesRouteName,
BlockListRouteName,
LinkedDevicesRouteName,
type ScreenParamList,
type ProfileParamList,
} from '../navigation/route-names.js';
import { useStyles, useColors } from '../themes/colors.js';
const header = (props: StackHeaderProps) => ;
const profileScreenOptions = { headerTitle: 'Profile' };
const emojiAvatarCreationOptions = {
headerTitle: 'Emoji avatar selection',
headerBackTitleVisible: false,
};
const editPasswordOptions = { headerTitle: 'Change password' };
const deleteAccountOptions = { headerTitle: 'Delete account' };
-const linkedDevicesOptions = { headerTitle: 'Linked devices' };
+const linkedDevicesOptions = {
+ headerTitle: 'Linked devices',
+ // eslint-disable-next-line react/display-name
+ headerRight: () => ,
+};
const buildInfoOptions = { headerTitle: 'Build info' };
const devToolsOptions = { headerTitle: 'Developer tools' };
const appearanceOptions = { headerTitle: 'Appearance' };
const privacyOptions = { headerTitle: 'Privacy' };
const friendListOptions = { headerTitle: 'Friend list' };
const blockListOptions = { headerTitle: 'Block list' };
const defaultNotificationsOptions = { headerTitle: 'Default Notifications' };
export type ProfileNavigationProp<
RouteName: $Keys = $Keys,
> = StackNavigationProp;
const Profile = createStackNavigator<
ScreenParamList,
ProfileParamList,
StackNavigationHelpers,
>();
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 { width: screenWidth } = useWindowDimensions();
const screenOptions = React.useMemo(
() => ({
header,
headerLeft: headerLeftButton,
headerStyle: {
backgroundColor: colors.tabBarBackground,
shadowOpacity: 0,
},
gestureEnabled: true,
gestureResponseDistance: screenWidth,
}),
[colors.tabBarBackground, headerLeftButton, screenWidth],
);
return (
);
}
const unboundStyles = {
keyboardAvoidingView: {
flex: 1,
},
view: {
flex: 1,
backgroundColor: 'panelBackground',
},
};
export default ProfileComponent;