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
@@ -296,14 +296,14 @@
   headerTitle: 'Pinned Messages',
   headerBackTitleVisible: false,
 };
-const changeRolesScreenOptions = {
+const changeRolesScreenOptions = ({ route }) => ({
   // eslint-disable-next-line react/display-name
   headerLeft: headerLeftProps => (
-    <ChangeRolesHeaderLeftButton {...headerLeftProps} />
+    <ChangeRolesHeaderLeftButton {...headerLeftProps} route={route} />
   ),
   headerTitle: 'Change Role',
   presentation: 'modal',
-};
+});
 
 export type ChatNavigationProp<
   RouteName: $Keys<ChatParamList> = $Keys<ChatParamList>,
diff --git a/native/roles/change-roles-header-left-button.react.js b/native/roles/change-roles-header-left-button.react.js
--- a/native/roles/change-roles-header-left-button.react.js
+++ b/native/roles/change-roles-header-left-button.react.js
@@ -1,14 +1,45 @@
 // @flow
 
 import { HeaderBackButton as BaseHeaderBackButton } from '@react-navigation/elements';
+import invariant from 'invariant';
 import * as React from 'react';
-import { Text } from 'react-native';
+import { Alert, Text } from 'react-native';
 import { TouchableOpacity } from 'react-native-gesture-handler';
 
+import type { NavigationRoute } from '../navigation/route-names';
 import { useColors } from '../themes/colors.js';
 
-type Props = React.ElementConfig<typeof BaseHeaderBackButton>;
-function ChangeRolesHeaderLeftButton(props: Props): React.Node {
+type ChangeRolesHeaderLeftButtonProps = {
+  +route: NavigationRoute<'ChangeRolesScreen'>,
+  ...React.ElementConfig<typeof BaseHeaderBackButton>,
+};
+
+function ChangeRolesHeaderLeftButton(
+  props: ChangeRolesHeaderLeftButtonProps,
+): React.Node {
+  const { memberInfo, role: selectedRole } = props.route.params;
+  const { role: memberRole } = memberInfo;
+
+  const onCancel = React.useCallback(() => {
+    const { onPress } = props;
+    invariant(onPress, 'onPress must be defined');
+
+    if (selectedRole === memberRole) {
+      onPress();
+      return;
+    }
+
+    Alert.alert(
+      'Unsaved Changes',
+      'You have unsaved changes, are you sure you want to cancel? You will lose all your progress',
+      [
+        { text: 'Cancel', onPress },
+        { text: 'Stay', style: 'cancel' },
+      ],
+      { cancelable: true },
+    );
+  }, [memberRole, props, selectedRole]);
+
   const { panelForegroundSecondaryLabel } = useColors();
   const labelStyle = React.useMemo(
     () => ({
@@ -19,7 +50,7 @@
   );
 
   return (
-    <TouchableOpacity onPress={props.onPress}>
+    <TouchableOpacity onPress={onCancel}>
       <Text style={labelStyle}>Cancel</Text>
     </TouchableOpacity>
   );