diff --git a/native/roles/create-roles-header-right-button.react.js b/native/roles/create-roles-header-right-button.react.js
--- a/native/roles/create-roles-header-right-button.react.js
+++ b/native/roles/create-roles-header-right-button.react.js
@@ -50,14 +50,35 @@
navigation,
]);
- return (
-
- Create
-
- );
+ const shouldHeaderRightBeDisabled = roleName.length === 0;
+ const createButton = React.useMemo(() => {
+ const textStyle = shouldHeaderRightBeDisabled
+ ? styles.onCreateButtonDisabled
+ : styles.onCreateButton;
+
+ return (
+
+ Create
+
+ );
+ }, [
+ shouldHeaderRightBeDisabled,
+ styles.onCreateButtonDisabled,
+ styles.onCreateButton,
+ onCreate,
+ ]);
+
+ return createButton;
}
const unboundStyles = {
+ onCreateButtonDisabled: {
+ color: 'disabledButton',
+ marginRight: 10,
+ },
onCreateButton: {
color: 'purpleLink',
marginRight: 10,