diff --git a/src/styles/styles.js b/src/styles/styles.js
index 8df481ddb70e..e7f2cac8dfd2 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -638,14 +638,14 @@ const styles = {
     },
 
     visuallyHidden: {
-        ...visibility('hidden'),
+        ...visibility.hidden,
         overflow: 'hidden',
         width: 0,
         height: 0,
     },
 
     visibilityHidden: {
-        ...visibility('hidden'),
+        ...visibility.hidden,
     },
 
     loadingVBAAnimation: {
@@ -3047,7 +3047,7 @@ const styles = {
         left: '50%',
         top: 0,
         zIndex: 100,
-        ...visibility('hidden'),
+        ...visibility.hidden,
     },
 
     floatingMessageCounterWrapperAndroid: {
@@ -3057,7 +3057,7 @@ const styles = {
         position: 'absolute',
         top: 0,
         zIndex: 100,
-        ...visibility('hidden'),
+        ...visibility.hidden,
     },
 
     floatingMessageCounterSubWrapperAndroid: {
@@ -3067,7 +3067,7 @@ const styles = {
 
     floatingMessageCounter: {
         left: '-50%',
-        ...visibility('visible'),
+        ...visibility.visible,
     },
 
     floatingMessageCounterTransformation: (translateY) => ({
diff --git a/src/styles/utilities/visibility/index.js b/src/styles/utilities/visibility/index.js
deleted file mode 100644
index daa7b01103c8..000000000000
--- a/src/styles/utilities/visibility/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export default (visibility) => ({visibility});
diff --git a/src/styles/utilities/visibility/index.native.js b/src/styles/utilities/visibility/index.native.js
deleted file mode 100644
index 56bf55ff188d..000000000000
--- a/src/styles/utilities/visibility/index.native.js
+++ /dev/null
@@ -1 +0,0 @@
-export default () => ({});
diff --git a/src/styles/utilities/visibility/index.native.ts b/src/styles/utilities/visibility/index.native.ts
new file mode 100644
index 000000000000..c74719d02184
--- /dev/null
+++ b/src/styles/utilities/visibility/index.native.ts
@@ -0,0 +1,8 @@
+import VisibilityStyles from './types';
+
+const visibility: VisibilityStyles = {
+    visible: {},
+    hidden: {},
+};
+
+export default visibility;
diff --git a/src/styles/utilities/visibility/index.ts b/src/styles/utilities/visibility/index.ts
new file mode 100644
index 000000000000..8e2d3451be43
--- /dev/null
+++ b/src/styles/utilities/visibility/index.ts
@@ -0,0 +1,12 @@
+import VisibilityStyles from './types';
+
+const visibility: VisibilityStyles = {
+    visible: {
+        visibility: 'visible',
+    },
+    hidden: {
+        visibility: 'hidden',
+    },
+};
+
+export default visibility;
diff --git a/src/styles/utilities/visibility/types.ts b/src/styles/utilities/visibility/types.ts
new file mode 100644
index 000000000000..9dab3d7c752e
--- /dev/null
+++ b/src/styles/utilities/visibility/types.ts
@@ -0,0 +1,5 @@
+import {CSSProperties} from 'react';
+
+type VisibilityStyles = Record<'visible' | 'hidden', Partial<Pick<CSSProperties, 'visibility'>>>;
+
+export default VisibilityStyles;