diff --git a/native/chat/chat.react.js b/native/chat/chat.react.js
--- a/native/chat/chat.react.js
+++ b/native/chat/chat.react.js
@@ -71,6 +71,7 @@
   MessageSearchRouteName,
   ChangeRolesScreenRouteName,
 } from '../navigation/route-names.js';
+import ChangeRolesHeaderLeftButton from '../roles/change-roles-header-left-button.react.js';
 import ChangeRolesScreen from '../roles/change-roles-screen.react.js';
 import MessageSearch from '../search/message-search.react.js';
 import SearchHeader from '../search/search-header.react.js';
@@ -296,6 +297,10 @@
   headerBackTitleVisible: false,
 };
 const changeRolesScreenOptions = {
+  // eslint-disable-next-line react/display-name
+  headerLeft: headerLeftProps => (
+    <ChangeRolesHeaderLeftButton {...headerLeftProps} />
+  ),
   headerTitle: 'Change Role',
   presentation: 'modal',
 };
diff --git a/native/roles/change-roles-header-left-button.react.js b/native/roles/change-roles-header-left-button.react.js
new file mode 100644
--- /dev/null
+++ b/native/roles/change-roles-header-left-button.react.js
@@ -0,0 +1,28 @@
+// @flow
+
+import { HeaderBackButton as BaseHeaderBackButton } from '@react-navigation/elements';
+import * as React from 'react';
+import { Text } from 'react-native';
+import { TouchableOpacity } from 'react-native-gesture-handler';
+
+import { useColors } from '../themes/colors.js';
+
+type Props = React.ElementConfig<typeof BaseHeaderBackButton>;
+function ChangeRolesHeaderLeftButton(props: Props): React.Node {
+  const { panelForegroundSecondaryLabel } = useColors();
+  const labelStyle = React.useMemo(
+    () => ({
+      color: panelForegroundSecondaryLabel,
+      marginLeft: 10,
+    }),
+    [panelForegroundSecondaryLabel],
+  );
+
+  return (
+    <TouchableOpacity onPress={props.onPress}>
+      <Text style={labelStyle}>Cancel</Text>
+    </TouchableOpacity>
+  );
+}
+
+export default ChangeRolesHeaderLeftButton;