diff --git a/native/navigation/root-navigator.react.js b/native/navigation/root-navigator.react.js
--- a/native/navigation/root-navigator.react.js
+++ b/native/navigation/root-navigator.react.js
@@ -43,6 +43,7 @@
InviteLinkModalRouteName,
InviteLinkNavigatorRouteName,
CommunityCreationRouteName,
+ RolesNavigatorRouteName,
} from './route-names.js';
import LoggedOutModal from '../account/logged-out-modal.react.js';
import RegistrationNavigator from '../account/registration/registration-navigator.react.js';
@@ -58,6 +59,7 @@
import CommunityCreationNavigator from '../community-creation/community-creation-navigator.react.js';
import InviteLinksNavigator from '../invite-links/invite-links-navigator.react.js';
import CustomServerModal from '../profile/custom-server-modal.react.js';
+import RolesNavigator from '../roles/roles-navigator.react.js';
enableScreens();
@@ -268,6 +270,7 @@
component={MessageReactionsModal}
options={modalOverlayScreenOptions}
/>
+
);
}
diff --git a/native/navigation/route-names.js b/native/navigation/route-names.js
--- a/native/navigation/route-names.js
+++ b/native/navigation/route-names.js
@@ -122,6 +122,7 @@
export const RegistrationUserAvatarCameraModalRouteName =
'RegistrationUserAvatarCameraModal';
export const RegistrationTermsRouteName = 'RegistrationTerms';
+export const RolesNavigatorRouteName = 'RolesNavigator';
export type RootParamList = {
+LoggedOutModal: void,
@@ -140,6 +141,7 @@
+CommunityCreation: void,
+InviteLinkModal: InviteLinkModalParams,
+InviteLinkNavigator: void,
+ +RolesNavigator: void,
};
export type MessageTooltipRouteNames =
@@ -236,6 +238,8 @@
+CommunityCreationMembers: CommunityCreationMembersScreenParams,
};
+export type RolesParamList = {};
+
export type ScreenParamList = {
...RootParamList,
...OverlayParamList,
@@ -247,6 +251,7 @@
...RegistrationParamList,
...InviteLinkParamList,
...CommunityCreationParamList,
+ ...RolesParamList,
};
export type NavigationRoute> =
diff --git a/native/roles/roles-navigator.react.js b/native/roles/roles-navigator.react.js
new file mode 100644
--- /dev/null
+++ b/native/roles/roles-navigator.react.js
@@ -0,0 +1,69 @@
+// @flow
+
+import {
+ createStackNavigator,
+ type StackNavigationProp,
+ type StackNavigationHelpers,
+} from '@react-navigation/stack';
+import * as React from 'react';
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+import type { RootNavigationProp } from '../navigation/root-navigator.react.js';
+import {
+ type ScreenParamList,
+ type RolesParamList,
+} from '../navigation/route-names.js';
+import { useStyles, useColors } from '../themes/colors.js';
+
+const safeAreaEdges = ['bottom'];
+
+export type RolesNavigationProp> =
+ StackNavigationProp;
+
+const RolesStack = createStackNavigator<
+ ScreenParamList,
+ RolesParamList,
+ StackNavigationHelpers,
+>();
+
+type RolesNavigatorProps = {
+ +navigation: RootNavigationProp<'RolesNavigator'>,
+ ...
+};
+
+// eslint-disable-next-line no-unused-vars
+function RolesNavigator(props: RolesNavigatorProps): React.Node {
+ const styles = useStyles(unboundStyles);
+ const colors = useColors();
+
+ const rolesScreenOptions = React.useMemo(
+ () => ({
+ headerBackTitleVisible: false,
+ headerStyle: {
+ backgroundColor: colors.tabBarBackground,
+ },
+ headerTintColor: colors.panelForegroundLabel,
+ headerLeftContainerStyle: {
+ paddingLeft: 12,
+ },
+ }),
+ [colors.tabBarBackground, colors.panelForegroundLabel],
+ );
+
+ return (
+
+
+
+ );
+}
+
+const unboundStyles = {
+ container: {
+ flex: 1,
+ backgroundColor: 'modalBackground',
+ },
+};
+
+export default RolesNavigator;