diff --git a/native/roles/community-roles-screen.react.js b/native/roles/community-roles-screen.react.js
--- a/native/roles/community-roles-screen.react.js
+++ b/native/roles/community-roles-screen.react.js
@@ -53,6 +53,8 @@
       props.navigation.navigate(CreateRolesScreenRouteName, {
         threadInfo,
         action: 'create_role',
+        roleName: 'New role',
+        rolePermissions: [],
       }),
     [threadInfo, props.navigation],
   );
diff --git a/native/roles/create-roles-header-right-button.react.js b/native/roles/create-roles-header-right-button.react.js
new file mode 100644
--- /dev/null
+++ b/native/roles/create-roles-header-right-button.react.js
@@ -0,0 +1,56 @@
+// @flow
+
+import { useNavigation } from '@react-navigation/native';
+import * as React from 'react';
+import { TouchableOpacity, Text } from 'react-native';
+
+import { modifyCommunityRole } from 'lib/actions/thread-actions.js';
+import { useServerCall } from 'lib/utils/action-utils.js';
+
+import type { NavigationRoute } from '../navigation/route-names';
+import { useStyles } from '../themes/colors.js';
+
+type Props = {
+  +route: NavigationRoute<'CreateRolesScreen'>,
+};
+
+function CreateRolesHeaderRightButton(props: Props): React.Node {
+  const { threadInfo, action, roleName, rolePermissions } = props.route.params;
+  const navigation = useNavigation();
+  const styles = useStyles(unboundStyles);
+
+  const callModifyCommunityRole = useServerCall(modifyCommunityRole);
+
+  const onCreate = React.useCallback(() => {
+    callModifyCommunityRole({
+      community: threadInfo.id,
+      action,
+      name: roleName,
+      permissions: rolePermissions,
+    });
+
+    navigation.goBack();
+  }, [
+    callModifyCommunityRole,
+    threadInfo,
+    action,
+    roleName,
+    rolePermissions,
+    navigation,
+  ]);
+
+  return (
+    <TouchableOpacity onPress={onCreate}>
+      <Text style={styles.onCreateButton}>Create</Text>
+    </TouchableOpacity>
+  );
+}
+
+const unboundStyles = {
+  onCreateButton: {
+    color: 'purpleLink',
+    marginRight: 10,
+  },
+};
+
+export default CreateRolesHeaderRightButton;
diff --git a/native/roles/create-roles-screen.react.js b/native/roles/create-roles-screen.react.js
--- a/native/roles/create-roles-screen.react.js
+++ b/native/roles/create-roles-screen.react.js
@@ -13,6 +13,7 @@
 import { threadTypes } from 'lib/types/thread-types-enum.js';
 import type { ThreadInfo } from 'lib/types/thread-types.js';
 
+import CreateRolesHeaderRightButton from './create-roles-header-right-button.react.js';
 import type { RolesNavigationProp } from './roles-navigator.react.js';
 import EnumSettingsOption from '../components/enum-settings-option.react.js';
 import SWMansionIcon from '../components/swmansion-icon.react.js';
@@ -23,6 +24,8 @@
 export type CreateRolesScreenParams = {
   +threadInfo: ThreadInfo,
   +action: 'create_role' | 'edit_role',
+  +roleName: string,
+  +rolePermissions: $ReadOnlyArray<UserSurfacedPermission>,
 };
 
 type CreateRolesScreenProps = {
@@ -31,14 +34,18 @@
 };
 
 function CreateRolesScreen(props: CreateRolesScreenProps): React.Node {
-  // eslint-disable-next-line no-unused-vars
-  const { threadInfo, action } = props.route.params;
+  const {
+    threadInfo,
+    action,
+    roleName: defaultRoleName,
+    rolePermissions: defaultRolePermissions,
+  } = props.route.params;
 
   const [customRoleName, setCustomRoleName] =
-    React.useState<string>('New role');
+    React.useState<string>(defaultRoleName);
   const [selectedPermissions, setSelectedPermissions] = React.useState<
     $ReadOnlyArray<UserSurfacedPermission>,
-  >([]);
+  >(defaultRolePermissions);
 
   const styles = useStyles(unboundStyles);
 
@@ -87,6 +94,17 @@
     [],
   );
 
+  React.useEffect(
+    () =>
+      props.navigation.setParams({
+        threadInfo,
+        action,
+        roleName: customRoleName,
+        rolePermissions: selectedPermissions,
+      }),
+    [props.navigation, threadInfo, action, customRoleName, selectedPermissions],
+  );
+
   const modifiedUserSurfacedPermissionOptions = React.useMemo(
     () =>
       // If the thread is a community announcement root, we want to allow
@@ -125,6 +143,15 @@
     setCustomRoleName(roleName);
   }, []);
 
+  React.useEffect(
+    () =>
+      props.navigation.setOptions({
+        // eslint-disable-next-line react/display-name
+        headerRight: () => <CreateRolesHeaderRightButton route={props.route} />,
+      }),
+    [props.navigation, props.route],
+  );
+
   return (
     <View>
       <View style={styles.roleNameContainer}>