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}
       />
+      <Root.Screen name={RolesNavigatorRouteName} component={RolesNavigator} />
     </Root.Navigator>
   );
 }
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<RouteName: string = $Keys<ScreenParamList>> =
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<RouteName: $Keys<RolesParamList>> =
+  StackNavigationProp<ScreenParamList, RouteName>;
+
+const RolesStack = createStackNavigator<
+  ScreenParamList,
+  RolesParamList,
+  StackNavigationHelpers<ScreenParamList>,
+>();
+
+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 (
+    <SafeAreaView style={styles.container} edges={safeAreaEdges}>
+      <RolesStack.Navigator
+        screenOptions={rolesScreenOptions}
+      ></RolesStack.Navigator>
+    </SafeAreaView>
+  );
+}
+
+const unboundStyles = {
+  container: {
+    flex: 1,
+    backgroundColor: 'modalBackground',
+  },
+};
+
+export default RolesNavigator;