diff --git a/native/components/community-actions-button.react.js b/native/components/community-actions-button.react.js
--- a/native/components/community-actions-button.react.js
+++ b/native/components/community-actions-button.react.js
@@ -16,6 +16,8 @@
   InviteLinkNavigatorRouteName,
   ManagePublicLinkRouteName,
   ViewInviteLinksRouteName,
+  RolesNavigatorRouteName,
+  CommunityRolesScreenRouteName,
 } from '../navigation/route-names.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { useStyles } from '../themes/colors.js';
@@ -48,6 +50,14 @@
       },
     });
   }, [community, navigate]);
+  const navigateToCommunityRolesScreen = React.useCallback(() => {
+    navigate<'RolesNavigator'>(RolesNavigatorRouteName, {
+      screen: CommunityRolesScreenRouteName,
+      params: {
+        threadInfo: community,
+      },
+    });
+  }, [community, navigate]);
 
   const insets = useSafeAreaInsets();
   const activeTheme = useSelector(state => state.globalThemeInfo.activeTheme);
@@ -85,7 +95,7 @@
     if (canChangeRoles) {
       result.push({
         label: 'Manage roles',
-        action: () => {},
+        action: navigateToCommunityRolesScreen,
       });
     }
 
@@ -98,6 +108,7 @@
     inviteLink,
     navigateToInviteLinksView,
     navigateToManagePublicLinkView,
+    navigateToCommunityRolesScreen,
   ]);
 
   const openActionSheet = React.useCallback(() => {
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
@@ -43,6 +43,7 @@
 import type { CustomServerModalParams } from '../profile/custom-server-modal.react.js';
 import type { RelationshipListItemTooltipModalParams } from '../profile/relationship-list-item-tooltip-modal.react.js';
 import type { ChangeRolesScreenParams } from '../roles/change-roles-screen.react.js';
+import type { CommunityRolesScreenParams } from '../roles/community-roles-screen.react.js';
 import type { MessageSearchParams } from '../search/message-search.react.js';
 
 export const ActionResultModalRouteName = 'ActionResultModal';
@@ -123,6 +124,7 @@
   'RegistrationUserAvatarCameraModal';
 export const RegistrationTermsRouteName = 'RegistrationTerms';
 export const RolesNavigatorRouteName = 'RolesNavigator';
+export const CommunityRolesScreenRouteName = 'CommunityRolesScreen';
 
 export type RootParamList = {
   +LoggedOutModal: void,
@@ -238,7 +240,9 @@
   +CommunityCreationMembers: CommunityCreationMembersScreenParams,
 };
 
-export type RolesParamList = {};
+export type RolesParamList = {
+  +CommunityRolesScreen: CommunityRolesScreenParams,
+};
 
 export type ScreenParamList = {
   ...RootParamList,
diff --git a/native/roles/community-roles-header-left-button.react.js b/native/roles/community-roles-header-left-button.react.js
new file mode 100644
--- /dev/null
+++ b/native/roles/community-roles-header-left-button.react.js
@@ -0,0 +1,33 @@
+// @flow
+
+import { HeaderBackButton as BaseHeaderBackButton } from '@react-navigation/elements';
+import * as React from 'react';
+import { Text, TouchableOpacity } from 'react-native';
+
+import { useStyles } from '../themes/colors.js';
+
+type CommunityRolesHeaderLeftButtonProps = React.ElementConfig<
+  typeof BaseHeaderBackButton,
+>;
+
+function CommunityRolesHeaderLeftButton(
+  props: CommunityRolesHeaderLeftButtonProps,
+): React.Node {
+  const styles = useStyles(unboundStyles);
+
+  return (
+    <TouchableOpacity onPress={props.onPress}>
+      <Text style={styles.labelStyle}>Close</Text>
+    </TouchableOpacity>
+  );
+}
+
+const unboundStyles = {
+  labelStyle: {
+    color: 'panelForegroundLabel',
+    fontSize: 16,
+    marginLeft: 10,
+  },
+};
+
+export default CommunityRolesHeaderLeftButton;
diff --git a/native/roles/community-roles-screen.react.js b/native/roles/community-roles-screen.react.js
new file mode 100644
--- /dev/null
+++ b/native/roles/community-roles-screen.react.js
@@ -0,0 +1,24 @@
+// @flow
+
+import * as React from 'react';
+
+import type { ThreadInfo } from 'lib/types/thread-types.js';
+
+import type { RolesNavigationProp } from './roles-navigator.react.js';
+import type { NavigationRoute } from '../navigation/route-names.js';
+
+export type CommunityRolesScreenParams = {
+  +threadInfo: ThreadInfo,
+};
+
+type CommunityRolesScreenProps = {
+  +navigation: RolesNavigationProp<'CommunityRolesScreen'>,
+  +route: NavigationRoute<'CommunityRolesScreen'>,
+};
+
+// eslint-disable-next-line no-unused-vars
+function CommunityRolesScreen(props: CommunityRolesScreenProps): React.Node {
+  return null;
+}
+
+export default CommunityRolesScreen;
diff --git a/native/roles/roles-navigator.react.js b/native/roles/roles-navigator.react.js
--- a/native/roles/roles-navigator.react.js
+++ b/native/roles/roles-navigator.react.js
@@ -8,10 +8,13 @@
 import * as React from 'react';
 import { SafeAreaView } from 'react-native-safe-area-context';
 
+import CommunityRolesHeaderLeftButton from './community-roles-header-left-button.react.js';
+import CommunityRolesScreen from './community-roles-screen.react.js';
 import type { RootNavigationProp } from '../navigation/root-navigator.react.js';
 import {
   type ScreenParamList,
   type RolesParamList,
+  CommunityRolesScreenRouteName,
 } from '../navigation/route-names.js';
 import { useStyles, useColors } from '../themes/colors.js';
 
@@ -26,6 +29,14 @@
   StackNavigationHelpers<ScreenParamList>,
 >();
 
+const communityRolesScreenOptions = {
+  headerTitle: 'Create role',
+  // eslint-disable-next-line react/display-name
+  headerLeft: headerLeftProps => (
+    <CommunityRolesHeaderLeftButton {...headerLeftProps} />
+  ),
+};
+
 type RolesNavigatorProps = {
   +navigation: RootNavigationProp<'RolesNavigator'>,
   ...
@@ -52,9 +63,13 @@
 
   return (
     <SafeAreaView style={styles.container} edges={safeAreaEdges}>
-      <RolesStack.Navigator
-        screenOptions={rolesScreenOptions}
-      ></RolesStack.Navigator>
+      <RolesStack.Navigator screenOptions={rolesScreenOptions}>
+        <RolesStack.Screen
+          name={CommunityRolesScreenRouteName}
+          component={CommunityRolesScreen}
+          options={communityRolesScreenOptions}
+        />
+      </RolesStack.Navigator>
     </SafeAreaView>
   );
 }