diff --git a/src/components/IconButton/IconButton.tsx b/src/components/IconButton/IconButton.tsx
index 62b86d3754..30ca2ad3dc 100644
--- a/src/components/IconButton/IconButton.tsx
+++ b/src/components/IconButton/IconButton.tsx
@@ -217,7 +217,7 @@ const styles = StyleSheet.create({
     overflow: 'hidden',
   },
   touchable: {
-    flexGrow: 1,
+    flex: 1,
     justifyContent: 'center',
     alignItems: 'center',
   },
diff --git a/src/components/__tests__/Appbar/__snapshots__/Appbar.test.tsx.snap b/src/components/__tests__/Appbar/__snapshots__/Appbar.test.tsx.snap
index 882652f92d..f77d7e79e4 100644
--- a/src/components/__tests__/Appbar/__snapshots__/Appbar.test.tsx.snap
+++ b/src/components/__tests__/Appbar/__snapshots__/Appbar.test.tsx.snap
@@ -261,7 +261,7 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
             [
               {
                 "alignItems": "center",
-                "flexGrow": 1,
+                "flex": 1,
                 "justifyContent": "center",
               },
               undefined,
@@ -431,7 +431,7 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
               [
                 {
                   "alignItems": "center",
-                  "flexGrow": 1,
+                  "flex": 1,
                   "justifyContent": "center",
                 },
                 undefined,
@@ -655,7 +655,7 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
           [
             {
               "alignItems": "center",
-              "flexGrow": 1,
+              "flex": 1,
               "justifyContent": "center",
             },
             undefined,
@@ -882,7 +882,7 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
           [
             {
               "alignItems": "center",
-              "flexGrow": 1,
+              "flex": 1,
               "justifyContent": "center",
             },
             undefined,
diff --git a/src/components/__tests__/IconButton.test.tsx b/src/components/__tests__/IconButton.test.tsx
index a8bc540aa9..92ee48a3b3 100644
--- a/src/components/__tests__/IconButton.test.tsx
+++ b/src/components/__tests__/IconButton.test.tsx
@@ -18,6 +18,9 @@ const styles = StyleSheet.create({
   slightlyRounded: {
     borderRadius: 4,
   },
+  customBackground: {
+    backgroundColor: pink500,
+  },
 });
 
 it('renders icon button by default', async () => {
@@ -84,6 +87,21 @@ it('renders icon button with small border radius', async () => {
   });
 });
 
+it('keeps touchable content centered with custom container style', async () => {
+  await render(
+    <IconButton
+      icon="delete"
+      testID="icon-button"
+      style={styles.customBackground}
+    />
+  );
+  expect(screen.getByTestId('icon-button')).toHaveStyle({
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  });
+});
+
 describe('getIconButtonColor - icon color', () => {
   it('should return custom icon color', () => {
     expect(
diff --git a/src/components/__tests__/__snapshots__/DataTable.test.tsx.snap b/src/components/__tests__/__snapshots__/DataTable.test.tsx.snap
index b1b80b7341..7e068441ed 100644
--- a/src/components/__tests__/__snapshots__/DataTable.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/DataTable.test.tsx.snap
@@ -451,7 +451,7 @@ exports[`DataTable.Pagination renders data table pagination 1`] = `
             [
               {
                 "alignItems": "center",
-                "flexGrow": 1,
+                "flex": 1,
                 "justifyContent": "center",
               },
               undefined,
@@ -571,7 +571,7 @@ exports[`DataTable.Pagination renders data table pagination 1`] = `
             [
               {
                 "alignItems": "center",
-                "flexGrow": 1,
+                "flex": 1,
                 "justifyContent": "center",
               },
               undefined,
@@ -749,7 +749,7 @@ exports[`DataTable.Pagination renders data table pagination with fast-forward bu
             [
               {
                 "alignItems": "center",
-                "flexGrow": 1,
+                "flex": 1,
                 "justifyContent": "center",
               },
               undefined,
@@ -869,7 +869,7 @@ exports[`DataTable.Pagination renders data table pagination with fast-forward bu
             [
               {
                 "alignItems": "center",
-                "flexGrow": 1,
+                "flex": 1,
                 "justifyContent": "center",
               },
               undefined,
@@ -989,7 +989,7 @@ exports[`DataTable.Pagination renders data table pagination with fast-forward bu
             [
               {
                 "alignItems": "center",
-                "flexGrow": 1,
+                "flex": 1,
                 "justifyContent": "center",
               },
               undefined,
@@ -1109,7 +1109,7 @@ exports[`DataTable.Pagination renders data table pagination with fast-forward bu
             [
               {
                 "alignItems": "center",
-                "flexGrow": 1,
+                "flex": 1,
                 "justifyContent": "center",
               },
               undefined,
@@ -1287,7 +1287,7 @@ exports[`DataTable.Pagination renders data table pagination with label 1`] = `
             [
               {
                 "alignItems": "center",
-                "flexGrow": 1,
+                "flex": 1,
                 "justifyContent": "center",
               },
               undefined,
@@ -1407,7 +1407,7 @@ exports[`DataTable.Pagination renders data table pagination with label 1`] = `
             [
               {
                 "alignItems": "center",
-                "flexGrow": 1,
+                "flex": 1,
                 "justifyContent": "center",
               },
               undefined,
@@ -1889,7 +1889,7 @@ exports[`DataTable.Pagination renders data table pagination with options select
             [
               {
                 "alignItems": "center",
-                "flexGrow": 1,
+                "flex": 1,
                 "justifyContent": "center",
               },
               undefined,
@@ -2009,7 +2009,7 @@ exports[`DataTable.Pagination renders data table pagination with options select
             [
               {
                 "alignItems": "center",
-                "flexGrow": 1,
+                "flex": 1,
                 "justifyContent": "center",
               },
               undefined,
@@ -2129,7 +2129,7 @@ exports[`DataTable.Pagination renders data table pagination with options select
             [
               {
                 "alignItems": "center",
-                "flexGrow": 1,
+                "flex": 1,
                 "justifyContent": "center",
               },
               undefined,
@@ -2249,7 +2249,7 @@ exports[`DataTable.Pagination renders data table pagination with options select
             [
               {
                 "alignItems": "center",
-                "flexGrow": 1,
+                "flex": 1,
                 "justifyContent": "center",
               },
               undefined,
diff --git a/src/components/__tests__/__snapshots__/IconButton.test.tsx.snap b/src/components/__tests__/__snapshots__/IconButton.test.tsx.snap
index a5564668f6..3b17ad80ae 100644
--- a/src/components/__tests__/__snapshots__/IconButton.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/IconButton.test.tsx.snap
@@ -72,7 +72,7 @@ exports[`renders disabled icon button 1`] = `
         [
           {
             "alignItems": "center",
-            "flexGrow": 1,
+            "flex": 1,
             "justifyContent": "center",
           },
           undefined,
@@ -194,7 +194,7 @@ exports[`renders icon button by default 1`] = `
         [
           {
             "alignItems": "center",
-            "flexGrow": 1,
+            "flex": 1,
             "justifyContent": "center",
           },
           undefined,
@@ -316,7 +316,7 @@ exports[`renders icon button with color 1`] = `
         [
           {
             "alignItems": "center",
-            "flexGrow": 1,
+            "flex": 1,
             "justifyContent": "center",
           },
           undefined,
@@ -438,7 +438,7 @@ exports[`renders icon button with size 1`] = `
         [
           {
             "alignItems": "center",
-            "flexGrow": 1,
+            "flex": 1,
             "justifyContent": "center",
           },
           undefined,
@@ -560,7 +560,7 @@ exports[`renders icon change animated 1`] = `
         [
           {
             "alignItems": "center",
-            "flexGrow": 1,
+            "flex": 1,
             "justifyContent": "center",
           },
           undefined,
diff --git a/src/components/__tests__/__snapshots__/Searchbar.test.tsx.snap b/src/components/__tests__/__snapshots__/Searchbar.test.tsx.snap
index c324b1874c..25a253ae0d 100644
--- a/src/components/__tests__/__snapshots__/Searchbar.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/Searchbar.test.tsx.snap
@@ -163,7 +163,7 @@ exports[`activity indicator snapshot test 1`] = `
           [
             {
               "alignItems": "center",
-              "flexGrow": 1,
+              "flex": 1,
               "justifyContent": "center",
             },
             undefined,
@@ -607,7 +607,7 @@ exports[`renders with placeholder 1`] = `
           [
             {
               "alignItems": "center",
-              "flexGrow": 1,
+              "flex": 1,
               "justifyContent": "center",
             },
             undefined,
@@ -777,7 +777,7 @@ exports[`renders with placeholder 1`] = `
             [
               {
                 "alignItems": "center",
-                "flexGrow": 1,
+                "flex": 1,
                 "justifyContent": "center",
               },
               undefined,
@@ -992,7 +992,7 @@ exports[`renders with text 1`] = `
           [
             {
               "alignItems": "center",
-              "flexGrow": 1,
+              "flex": 1,
               "justifyContent": "center",
             },
             undefined,
@@ -1158,7 +1158,7 @@ exports[`renders with text 1`] = `
             [
               {
                 "alignItems": "center",
-                "flexGrow": 1,
+                "flex": 1,
                 "justifyContent": "center",
               },
               undefined,
diff --git a/src/components/__tests__/__snapshots__/TextInput.test.tsx.snap b/src/components/__tests__/__snapshots__/TextInput.test.tsx.snap
index 9a4edcd5c1..7571a45fa6 100644
--- a/src/components/__tests__/__snapshots__/TextInput.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/TextInput.test.tsx.snap
@@ -227,7 +227,7 @@ exports[`renders filled TextInput with TextInput.Icon accessories 1`] = `
               [
                 {
                   "alignItems": "center",
-                  "flexGrow": 1,
+                  "flex": 1,
                   "justifyContent": "center",
                 },
                 undefined,
@@ -418,7 +418,7 @@ exports[`renders filled TextInput with TextInput.Icon accessories 1`] = `
               [
                 {
                   "alignItems": "center",
-                  "flexGrow": 1,
+                  "flex": 1,
                   "justifyContent": "center",
                 },
                 undefined,
@@ -705,7 +705,7 @@ exports[`renders filled TextInput with TextInput.Icon accessories when error is
               [
                 {
                   "alignItems": "center",
-                  "flexGrow": 1,
+                  "flex": 1,
                   "justifyContent": "center",
                 },
                 undefined,
@@ -896,7 +896,7 @@ exports[`renders filled TextInput with TextInput.Icon accessories when error is
               [
                 {
                   "alignItems": "center",
-                  "flexGrow": 1,
+                  "flex": 1,
                   "justifyContent": "center",
                 },
                 undefined,
@@ -1361,7 +1361,7 @@ exports[`renders outlined TextInput with TextInput.Icon accessories 1`] = `
               [
                 {
                   "alignItems": "center",
-                  "flexGrow": 1,
+                  "flex": 1,
                   "justifyContent": "center",
                 },
                 undefined,
@@ -1552,7 +1552,7 @@ exports[`renders outlined TextInput with TextInput.Icon accessories 1`] = `
               [
                 {
                   "alignItems": "center",
-                  "flexGrow": 1,
+                  "flex": 1,
                   "justifyContent": "center",
                 },
                 undefined,
@@ -1819,7 +1819,7 @@ exports[`renders outlined TextInput with TextInput.Icon accessories when error i
               [
                 {
                   "alignItems": "center",
-                  "flexGrow": 1,
+                  "flex": 1,
                   "justifyContent": "center",
                 },
                 undefined,
@@ -2010,7 +2010,7 @@ exports[`renders outlined TextInput with TextInput.Icon accessories when error i
               [
                 {
                   "alignItems": "center",
-                  "flexGrow": 1,
+                  "flex": 1,
                   "justifyContent": "center",
                 },
                 undefined,
diff --git a/src/components/__tests__/__snapshots__/ToggleButton.test.tsx.snap b/src/components/__tests__/__snapshots__/ToggleButton.test.tsx.snap
index 07f5de55eb..bced0dbe97 100644
--- a/src/components/__tests__/__snapshots__/ToggleButton.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/ToggleButton.test.tsx.snap
@@ -80,7 +80,7 @@ exports[`renders disabled toggle button 1`] = `
         [
           {
             "alignItems": "center",
-            "flexGrow": 1,
+            "flex": 1,
             "justifyContent": "center",
           },
           undefined,
@@ -210,7 +210,7 @@ exports[`renders toggle button 1`] = `
         [
           {
             "alignItems": "center",
-            "flexGrow": 1,
+            "flex": 1,
             "justifyContent": "center",
           },
           undefined,
@@ -340,7 +340,7 @@ exports[`renders unchecked toggle button 1`] = `
         [
           {
             "alignItems": "center",
-            "flexGrow": 1,
+            "flex": 1,
             "justifyContent": "center",
           },
           undefined,