diff --git a/packages/pluggableWidgets/intro-screen-native/src/__tests__/IntroScreen.notch.spec.tsx b/packages/pluggableWidgets/intro-screen-native/src/__tests__/IntroScreen.notch.spec.tsx
index aa448378f..487aa4cfc 100644
--- a/packages/pluggableWidgets/intro-screen-native/src/__tests__/IntroScreen.notch.spec.tsx
+++ b/packages/pluggableWidgets/intro-screen-native/src/__tests__/IntroScreen.notch.spec.tsx
@@ -1,9 +1,9 @@
 import { createElement } from "react";
-import { render } from "@testing-library/react-native";
+import { render, act } from "@testing-library/react-native";
 import { IntroScreen } from "../IntroScreen";
 import { IntroScreenProps } from "../../typings/IntroScreenProps";
 import { IntroScreenStyle } from "../ui/Styles";
-import { View } from "react-native";
+import { InteractionManager, View } from "react-native";
 import { EditableValueBuilder } from "@mendix/piw-utils-internal";
 import { Big } from "big.js";
 
@@ -13,10 +13,13 @@ jest.mock("react-native-device-info", () => ({
 }));
 
 jest.mock("@react-native-async-storage/async-storage", () => ({
-    getItem: jest.fn().mockResolvedValue("gone"),
-    setValue: jest.fn().mockResolvedValue(null)
+    getItem: jest.fn().mockResolvedValue(null),
+    setItem: jest.fn().mockResolvedValue(null)
 }));
 
+const flushInteractions = (): Promise<void> =>
+    act(() => new Promise<void>(resolve => InteractionManager.runAfterInteractions(resolve)));
+
 describe("Intro Screen", () => {
     let defaultProps: IntroScreenProps<IntroScreenStyle>;
 
@@ -36,39 +39,42 @@ describe("Intro Screen", () => {
             hideIndicatorLastSlide: false,
             identifier: ""
         };
-
-        jest.useFakeTimers();
     });
 
-    it("renders", () => {
+    it("renders", async () => {
         const component = render(<IntroScreen {...defaultProps} />);
+        await flushInteractions();
         expect(component.toJSON()).toMatchSnapshot();
     });
 
-    it("renders with 1 bottom button", () => {
+    it("renders with 1 bottom button", async () => {
         const component = render(
             <IntroScreen {...defaultProps} slideIndicators={"above"} buttonPattern={"nextDone"} />
         );
+        await flushInteractions();
         expect(component.toJSON()).toMatchSnapshot();
     });
 
-    it("renders with 2 bottom button", () => {
+    it("renders with 2 bottom button", async () => {
         const component = render(<IntroScreen {...defaultProps} slideIndicators={"above"} buttonPattern={"all"} />);
+        await flushInteractions();
         expect(component.toJSON()).toMatchSnapshot();
     });
 
-    it("renders with active slide attribute", () => {
+    it("renders with active slide attribute", async () => {
         const component = render(
             <IntroScreen
                 {...defaultProps}
                 activeSlideAttribute={new EditableValueBuilder<Big>().withValue(new Big(1)).build()}
             />
         );
+        await flushInteractions();
         expect(component.toJSON()).toMatchSnapshot();
     });
 
-    it("renders with async storage identifier", () => {
+    it("renders with async storage identifier", async () => {
         const component = render(<IntroScreen {...defaultProps} identifier="test1" />);
+        await flushInteractions();
         expect(component.toJSON()).toMatchSnapshot();
     });
 });
diff --git a/packages/pluggableWidgets/intro-screen-native/src/__tests__/IntroScreen.spec.tsx b/packages/pluggableWidgets/intro-screen-native/src/__tests__/IntroScreen.spec.tsx
index ada286a09..8441c8817 100644
--- a/packages/pluggableWidgets/intro-screen-native/src/__tests__/IntroScreen.spec.tsx
+++ b/packages/pluggableWidgets/intro-screen-native/src/__tests__/IntroScreen.spec.tsx
@@ -1,9 +1,9 @@
 import { createElement } from "react";
-import { render } from "@testing-library/react-native";
+import { render, act } from "@testing-library/react-native";
+import { InteractionManager, View } from "react-native";
 import { IntroScreen } from "../IntroScreen";
 import { IntroScreenProps } from "../../typings/IntroScreenProps";
 import { IntroScreenStyle } from "../ui/Styles";
-import { View } from "react-native";
 import { EditableValueBuilder } from "@mendix/piw-utils-internal";
 import { Big } from "big.js";
 
@@ -13,10 +13,13 @@ jest.mock("react-native-device-info", () => ({
 }));
 
 jest.mock("@react-native-async-storage/async-storage", () => ({
-    getItem: jest.fn().mockResolvedValue("gone"),
-    setValue: jest.fn().mockResolvedValue(null)
+    getItem: jest.fn().mockResolvedValue(null),
+    setItem: jest.fn().mockResolvedValue(null)
 }));
 
+const flushInteractions = (): Promise<void> =>
+    act(() => new Promise<void>(resolve => InteractionManager.runAfterInteractions(resolve)));
+
 describe("Intro Screen", () => {
     let defaultProps: IntroScreenProps<IntroScreenStyle>;
 
@@ -41,39 +44,42 @@ describe("Intro Screen", () => {
             hasNotch: jest.fn(),
             getDeviceId: jest.fn().mockReturnValue("iPhone")
         }));
-
-        jest.useFakeTimers();
     });
 
-    it("renders", () => {
+    it("renders", async () => {
         const component = render(<IntroScreen {...defaultProps} />);
+        await flushInteractions();
         expect(component.toJSON()).toMatchSnapshot();
     });
 
-    it("renders with 1 bottom button", () => {
+    it("renders with 1 bottom button", async () => {
         const component = render(
             <IntroScreen {...defaultProps} slideIndicators={"above"} buttonPattern={"nextDone"} />
         );
+        await flushInteractions();
         expect(component.toJSON()).toMatchSnapshot();
     });
 
-    it("renders with 2 bottom button", () => {
+    it("renders with 2 bottom button", async () => {
         const component = render(<IntroScreen {...defaultProps} slideIndicators={"above"} buttonPattern={"all"} />);
+        await flushInteractions();
         expect(component.toJSON()).toMatchSnapshot();
     });
 
-    it("renders with active slide attribute", () => {
+    it("renders with active slide attribute", async () => {
         const component = render(
             <IntroScreen
                 {...defaultProps}
                 activeSlideAttribute={new EditableValueBuilder<Big>().withValue(new Big(1)).build()}
             />
         );
+        await flushInteractions();
         expect(component.toJSON()).toMatchSnapshot();
     });
 
-    it("renders with async storage identifier", () => {
+    it("renders with async storage identifier", async () => {
         const component = render(<IntroScreen {...defaultProps} identifier="test1" />);
+        await flushInteractions();
         expect(component.toJSON()).toMatchSnapshot();
     });
 });
diff --git a/packages/pluggableWidgets/intro-screen-native/src/__tests__/__snapshots__/IntroScreen.notch.spec.tsx.snap b/packages/pluggableWidgets/intro-screen-native/src/__tests__/__snapshots__/IntroScreen.notch.spec.tsx.snap
index 4c7d1018a..84d21083a 100644
--- a/packages/pluggableWidgets/intro-screen-native/src/__tests__/__snapshots__/IntroScreen.notch.spec.tsx.snap
+++ b/packages/pluggableWidgets/intro-screen-native/src/__tests__/__snapshots__/IntroScreen.notch.spec.tsx.snap
@@ -1,11 +1,1014 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Intro Screen renders 1`] = `null`;
+exports[`Intro Screen renders 1`] = `
+<Modal
+  hardwareAccelerated={false}
+  transparent={false}
+  visible={true}
+>
+  <View
+    style={
+      {
+        "bottom": 0,
+        "left": 0,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+      }
+    }
+  >
+    <View
+      style={
+        {
+          "flex": 1,
+        }
+      }
+    >
+      <RCTScrollView
+        bounces={false}
+        data={
+          [
+            {
+              "content": <View />,
+              "name": "Page 1",
+            },
+          ]
+        }
+        extraData={
+          [
+            0,
+            0,
+          ]
+        }
+        getItem={[Function]}
+        getItemCount={[Function]}
+        getItemLayout={[Function]}
+        horizontal={true}
+        importantForAccessibility="no"
+        initialScrollIndex={0}
+        keyExtractor={[Function]}
+        onContentSizeChange={[Function]}
+        onLayout={[Function]}
+        onMomentumScrollBegin={[Function]}
+        onMomentumScrollEnd={[Function]}
+        onScroll={[Function]}
+        onScrollBeginDrag={[Function]}
+        onScrollEndDrag={[Function]}
+        pagingEnabled={true}
+        removeClippedSubviews={true}
+        renderItem={[Function]}
+        scrollEventThrottle={50}
+        showsHorizontalScrollIndicator={false}
+        stickyHeaderIndices={[]}
+        style={
+          {
+            "flex": 1,
+            "flexDirection": "row",
+          }
+        }
+        testID="intro-screen-notch-test"
+        viewabilityConfigCallbackPairs={[]}
+      >
+        <View>
+          <View
+            onFocusCapture={[Function]}
+            style={
+              [
+                {
+                  "flexDirection": "row",
+                },
+                null,
+              ]
+            }
+          >
+            <View
+              accessibilityElementsHidden={false}
+              importantForAccessibility="auto"
+              style={
+                [
+                  {
+                    "flex": 1,
+                    "width": 0,
+                  },
+                ]
+              }
+            >
+              <View />
+            </View>
+          </View>
+        </View>
+      </RCTScrollView>
+      <View
+        style={
+          [
+            {
+              "alignItems": "center",
+              "bottom": 22,
+              "justifyContent": "space-between",
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+            },
+            {
+              "flexDirection": "row",
+            },
+          ]
+        }
+      >
+        <View
+          style={
+            [
+              {
+                "alignItems": "center",
+                "flexDirection": "row",
+                "justifyContent": "center",
+              },
+              {
+                "width": 0,
+              },
+            ]
+          }
+        />
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": undefined,
+              "expanded": undefined,
+              "selected": undefined,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          focusable={true}
+          nativeBackgroundAndroid={
+            {
+              "attribute": "selectableItemBackground",
+              "rippleRadius": undefined,
+              "type": "ThemeAttrAndroid",
+            }
+          }
+          onClick={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            [
+              {
+                "alignItems": "center",
+                "alignSelf": "stretch",
+                "flexDirection": "row",
+                "justifyContent": "center",
+                "paddingVertical": 12,
+              },
+              {
+                "width": 0,
+              },
+            ]
+          }
+          testID="intro-screen-notch-test$buttonDone"
+        >
+          <View
+            style={
+              {
+                "alignSelf": "center",
+              }
+            }
+          >
+            <View
+              testId="icon"
+            />
+          </View>
+        </View>
+      </View>
+    </View>
+  </View>
+</Modal>
+`;
 
-exports[`Intro Screen renders with 1 bottom button 1`] = `null`;
+exports[`Intro Screen renders with 1 bottom button 1`] = `
+<Modal
+  hardwareAccelerated={false}
+  transparent={false}
+  visible={true}
+>
+  <View
+    style={
+      {
+        "bottom": 0,
+        "left": 0,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+      }
+    }
+  >
+    <View
+      style={
+        {
+          "flex": 1,
+        }
+      }
+    >
+      <RCTScrollView
+        bounces={false}
+        data={
+          [
+            {
+              "content": <View />,
+              "name": "Page 1",
+            },
+          ]
+        }
+        extraData={
+          [
+            0,
+            0,
+          ]
+        }
+        getItem={[Function]}
+        getItemCount={[Function]}
+        getItemLayout={[Function]}
+        horizontal={true}
+        importantForAccessibility="no"
+        initialScrollIndex={0}
+        keyExtractor={[Function]}
+        onContentSizeChange={[Function]}
+        onLayout={[Function]}
+        onMomentumScrollBegin={[Function]}
+        onMomentumScrollEnd={[Function]}
+        onScroll={[Function]}
+        onScrollBeginDrag={[Function]}
+        onScrollEndDrag={[Function]}
+        pagingEnabled={true}
+        removeClippedSubviews={true}
+        renderItem={[Function]}
+        scrollEventThrottle={50}
+        showsHorizontalScrollIndicator={false}
+        stickyHeaderIndices={[]}
+        style={
+          {
+            "flex": 1,
+            "flexDirection": "row",
+          }
+        }
+        testID="intro-screen-notch-test"
+        viewabilityConfigCallbackPairs={[]}
+      >
+        <View>
+          <View
+            onFocusCapture={[Function]}
+            style={
+              [
+                {
+                  "flexDirection": "row",
+                },
+                null,
+              ]
+            }
+          >
+            <View
+              accessibilityElementsHidden={false}
+              importantForAccessibility="auto"
+              style={
+                [
+                  {
+                    "flex": 1,
+                    "width": 0,
+                  },
+                ]
+              }
+            >
+              <View />
+            </View>
+          </View>
+        </View>
+      </RCTScrollView>
+      <View
+        style={
+          [
+            {
+              "alignItems": "center",
+              "bottom": 22,
+              "justifyContent": "space-between",
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+            },
+            {},
+          ]
+        }
+      >
+        <View
+          style={
+            [
+              {
+                "alignItems": "center",
+                "flexDirection": "row",
+                "justifyContent": "center",
+              },
+              {
+                "width": "100%",
+              },
+            ]
+          }
+        />
+        <View
+          style={
+            {
+              "flex": 1,
+              "flexDirection": "row",
+              "justifyContent": "center",
+              "marginTop": 16,
+            }
+          }
+        >
+          <View
+            style={
+              {
+                "flex": 1,
+              }
+            }
+          >
+            <View
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              focusable={true}
+              nativeBackgroundAndroid={
+                {
+                  "attribute": "selectableItemBackground",
+                  "rippleRadius": undefined,
+                  "type": "ThemeAttrAndroid",
+                }
+              }
+              onClick={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
+              style={
+                [
+                  {
+                    "alignItems": "center",
+                    "flexDirection": "row",
+                    "justifyContent": "center",
+                    "paddingVertical": 12,
+                  },
+                  {},
+                ]
+              }
+              testID="intro-screen-notch-test$buttonDone"
+            >
+              <View
+                style={
+                  {
+                    "alignSelf": "center",
+                  }
+                }
+              >
+                <View
+                  testId="icon"
+                />
+              </View>
+            </View>
+          </View>
+        </View>
+      </View>
+    </View>
+  </View>
+</Modal>
+`;
 
-exports[`Intro Screen renders with 2 bottom button 1`] = `null`;
+exports[`Intro Screen renders with 2 bottom button 1`] = `
+<Modal
+  hardwareAccelerated={false}
+  transparent={false}
+  visible={true}
+>
+  <View
+    style={
+      {
+        "bottom": 0,
+        "left": 0,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+      }
+    }
+  >
+    <View
+      style={
+        {
+          "flex": 1,
+        }
+      }
+    >
+      <RCTScrollView
+        bounces={false}
+        data={
+          [
+            {
+              "content": <View />,
+              "name": "Page 1",
+            },
+          ]
+        }
+        extraData={
+          [
+            0,
+            0,
+          ]
+        }
+        getItem={[Function]}
+        getItemCount={[Function]}
+        getItemLayout={[Function]}
+        horizontal={true}
+        importantForAccessibility="no"
+        initialScrollIndex={0}
+        keyExtractor={[Function]}
+        onContentSizeChange={[Function]}
+        onLayout={[Function]}
+        onMomentumScrollBegin={[Function]}
+        onMomentumScrollEnd={[Function]}
+        onScroll={[Function]}
+        onScrollBeginDrag={[Function]}
+        onScrollEndDrag={[Function]}
+        pagingEnabled={true}
+        removeClippedSubviews={true}
+        renderItem={[Function]}
+        scrollEventThrottle={50}
+        showsHorizontalScrollIndicator={false}
+        stickyHeaderIndices={[]}
+        style={
+          {
+            "flex": 1,
+            "flexDirection": "row",
+          }
+        }
+        testID="intro-screen-notch-test"
+        viewabilityConfigCallbackPairs={[]}
+      >
+        <View>
+          <View
+            onFocusCapture={[Function]}
+            style={
+              [
+                {
+                  "flexDirection": "row",
+                },
+                null,
+              ]
+            }
+          >
+            <View
+              accessibilityElementsHidden={false}
+              importantForAccessibility="auto"
+              style={
+                [
+                  {
+                    "flex": 1,
+                    "width": 0,
+                  },
+                ]
+              }
+            >
+              <View />
+            </View>
+          </View>
+        </View>
+      </RCTScrollView>
+      <View
+        style={
+          [
+            {
+              "alignItems": "center",
+              "bottom": 22,
+              "justifyContent": "space-between",
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+            },
+            {},
+          ]
+        }
+      >
+        <View
+          style={
+            [
+              {
+                "alignItems": "center",
+                "flexDirection": "row",
+                "justifyContent": "center",
+              },
+              {
+                "width": "100%",
+              },
+            ]
+          }
+        />
+        <View
+          style={
+            {
+              "flex": 1,
+              "flexDirection": "row",
+              "justifyContent": "center",
+              "marginTop": 16,
+            }
+          }
+        >
+          <View
+            style={
+              {
+                "flex": 1,
+              }
+            }
+          >
+            <View
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              focusable={true}
+              nativeBackgroundAndroid={
+                {
+                  "attribute": "selectableItemBackground",
+                  "rippleRadius": undefined,
+                  "type": "ThemeAttrAndroid",
+                }
+              }
+              onClick={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
+              style={
+                [
+                  {
+                    "alignItems": "center",
+                    "flexDirection": "row",
+                    "justifyContent": "center",
+                    "paddingVertical": 12,
+                  },
+                  {},
+                ]
+              }
+              testID="intro-screen-notch-test$buttonDone"
+            >
+              <View
+                style={
+                  {
+                    "alignSelf": "center",
+                  }
+                }
+              >
+                <View
+                  testId="icon"
+                />
+              </View>
+            </View>
+          </View>
+        </View>
+      </View>
+    </View>
+  </View>
+</Modal>
+`;
 
-exports[`Intro Screen renders with active slide attribute 1`] = `null`;
+exports[`Intro Screen renders with active slide attribute 1`] = `
+<Modal
+  hardwareAccelerated={false}
+  transparent={false}
+  visible={true}
+>
+  <View
+    style={
+      {
+        "bottom": 0,
+        "left": 0,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+      }
+    }
+  >
+    <View
+      style={
+        {
+          "flex": 1,
+        }
+      }
+    >
+      <RCTScrollView
+        bounces={false}
+        data={
+          [
+            {
+              "content": <View />,
+              "name": "Page 1",
+            },
+          ]
+        }
+        extraData={
+          [
+            0,
+            0,
+          ]
+        }
+        getItem={[Function]}
+        getItemCount={[Function]}
+        getItemLayout={[Function]}
+        horizontal={true}
+        importantForAccessibility="no"
+        initialScrollIndex={0}
+        keyExtractor={[Function]}
+        onContentSizeChange={[Function]}
+        onLayout={[Function]}
+        onMomentumScrollBegin={[Function]}
+        onMomentumScrollEnd={[Function]}
+        onScroll={[Function]}
+        onScrollBeginDrag={[Function]}
+        onScrollEndDrag={[Function]}
+        pagingEnabled={true}
+        removeClippedSubviews={true}
+        renderItem={[Function]}
+        scrollEventThrottle={50}
+        showsHorizontalScrollIndicator={false}
+        stickyHeaderIndices={[]}
+        style={
+          {
+            "flex": 1,
+            "flexDirection": "row",
+          }
+        }
+        testID="intro-screen-notch-test"
+        viewabilityConfigCallbackPairs={[]}
+      >
+        <View>
+          <View
+            onFocusCapture={[Function]}
+            style={
+              [
+                {
+                  "flexDirection": "row",
+                },
+                null,
+              ]
+            }
+          >
+            <View
+              accessibilityElementsHidden={false}
+              importantForAccessibility="auto"
+              style={
+                [
+                  {
+                    "flex": 1,
+                    "width": 0,
+                  },
+                ]
+              }
+            >
+              <View />
+            </View>
+          </View>
+        </View>
+      </RCTScrollView>
+      <View
+        style={
+          [
+            {
+              "alignItems": "center",
+              "bottom": 22,
+              "justifyContent": "space-between",
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+            },
+            {
+              "flexDirection": "row",
+            },
+          ]
+        }
+      >
+        <View
+          style={
+            [
+              {
+                "alignItems": "center",
+                "flexDirection": "row",
+                "justifyContent": "center",
+              },
+              {
+                "width": 0,
+              },
+            ]
+          }
+        />
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": undefined,
+              "expanded": undefined,
+              "selected": undefined,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          focusable={true}
+          nativeBackgroundAndroid={
+            {
+              "attribute": "selectableItemBackground",
+              "rippleRadius": undefined,
+              "type": "ThemeAttrAndroid",
+            }
+          }
+          onClick={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            [
+              {
+                "alignItems": "center",
+                "alignSelf": "stretch",
+                "flexDirection": "row",
+                "justifyContent": "center",
+                "paddingVertical": 12,
+              },
+              {
+                "width": 0,
+              },
+            ]
+          }
+          testID="intro-screen-notch-test$buttonDone"
+        >
+          <View
+            style={
+              {
+                "alignSelf": "center",
+              }
+            }
+          >
+            <View
+              testId="icon"
+            />
+          </View>
+        </View>
+      </View>
+    </View>
+  </View>
+</Modal>
+`;
 
-exports[`Intro Screen renders with async storage identifier 1`] = `null`;
+exports[`Intro Screen renders with async storage identifier 1`] = `
+<Modal
+  hardwareAccelerated={false}
+  transparent={false}
+  visible={true}
+>
+  <View
+    style={
+      {
+        "bottom": 0,
+        "left": 0,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+      }
+    }
+  >
+    <View
+      style={
+        {
+          "flex": 1,
+        }
+      }
+    >
+      <RCTScrollView
+        bounces={false}
+        data={
+          [
+            {
+              "content": <View />,
+              "name": "Page 1",
+            },
+          ]
+        }
+        extraData={
+          [
+            0,
+            0,
+          ]
+        }
+        getItem={[Function]}
+        getItemCount={[Function]}
+        getItemLayout={[Function]}
+        horizontal={true}
+        importantForAccessibility="no"
+        initialScrollIndex={0}
+        keyExtractor={[Function]}
+        onContentSizeChange={[Function]}
+        onLayout={[Function]}
+        onMomentumScrollBegin={[Function]}
+        onMomentumScrollEnd={[Function]}
+        onScroll={[Function]}
+        onScrollBeginDrag={[Function]}
+        onScrollEndDrag={[Function]}
+        pagingEnabled={true}
+        removeClippedSubviews={true}
+        renderItem={[Function]}
+        scrollEventThrottle={50}
+        showsHorizontalScrollIndicator={false}
+        stickyHeaderIndices={[]}
+        style={
+          {
+            "flex": 1,
+            "flexDirection": "row",
+          }
+        }
+        testID="intro-screen-notch-test"
+        viewabilityConfigCallbackPairs={[]}
+      >
+        <View>
+          <View
+            onFocusCapture={[Function]}
+            style={
+              [
+                {
+                  "flexDirection": "row",
+                },
+                null,
+              ]
+            }
+          >
+            <View
+              accessibilityElementsHidden={false}
+              importantForAccessibility="auto"
+              style={
+                [
+                  {
+                    "flex": 1,
+                    "width": 0,
+                  },
+                ]
+              }
+            >
+              <View />
+            </View>
+          </View>
+        </View>
+      </RCTScrollView>
+      <View
+        style={
+          [
+            {
+              "alignItems": "center",
+              "bottom": 22,
+              "justifyContent": "space-between",
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+            },
+            {
+              "flexDirection": "row",
+            },
+          ]
+        }
+      >
+        <View
+          style={
+            [
+              {
+                "alignItems": "center",
+                "flexDirection": "row",
+                "justifyContent": "center",
+              },
+              {
+                "width": 0,
+              },
+            ]
+          }
+        />
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": undefined,
+              "expanded": undefined,
+              "selected": undefined,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          focusable={true}
+          nativeBackgroundAndroid={
+            {
+              "attribute": "selectableItemBackground",
+              "rippleRadius": undefined,
+              "type": "ThemeAttrAndroid",
+            }
+          }
+          onClick={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            [
+              {
+                "alignItems": "center",
+                "alignSelf": "stretch",
+                "flexDirection": "row",
+                "justifyContent": "center",
+                "paddingVertical": 12,
+              },
+              {
+                "width": 0,
+              },
+            ]
+          }
+          testID="intro-screen-notch-test$buttonDone"
+        >
+          <View
+            style={
+              {
+                "alignSelf": "center",
+              }
+            }
+          >
+            <View
+              testId="icon"
+            />
+          </View>
+        </View>
+      </View>
+    </View>
+  </View>
+</Modal>
+`;
diff --git a/packages/pluggableWidgets/intro-screen-native/src/__tests__/__snapshots__/IntroScreen.spec.tsx.snap b/packages/pluggableWidgets/intro-screen-native/src/__tests__/__snapshots__/IntroScreen.spec.tsx.snap
index 4c7d1018a..af56b5303 100644
--- a/packages/pluggableWidgets/intro-screen-native/src/__tests__/__snapshots__/IntroScreen.spec.tsx.snap
+++ b/packages/pluggableWidgets/intro-screen-native/src/__tests__/__snapshots__/IntroScreen.spec.tsx.snap
@@ -1,11 +1,1014 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Intro Screen renders 1`] = `null`;
+exports[`Intro Screen renders 1`] = `
+<Modal
+  hardwareAccelerated={false}
+  transparent={false}
+  visible={true}
+>
+  <View
+    style={
+      {
+        "bottom": 0,
+        "left": 0,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+      }
+    }
+  >
+    <View
+      style={
+        {
+          "flex": 1,
+        }
+      }
+    >
+      <RCTScrollView
+        bounces={false}
+        data={
+          [
+            {
+              "content": <View />,
+              "name": "Page 1",
+            },
+          ]
+        }
+        extraData={
+          [
+            0,
+            0,
+          ]
+        }
+        getItem={[Function]}
+        getItemCount={[Function]}
+        getItemLayout={[Function]}
+        horizontal={true}
+        importantForAccessibility="no"
+        initialScrollIndex={0}
+        keyExtractor={[Function]}
+        onContentSizeChange={[Function]}
+        onLayout={[Function]}
+        onMomentumScrollBegin={[Function]}
+        onMomentumScrollEnd={[Function]}
+        onScroll={[Function]}
+        onScrollBeginDrag={[Function]}
+        onScrollEndDrag={[Function]}
+        pagingEnabled={true}
+        removeClippedSubviews={true}
+        renderItem={[Function]}
+        scrollEventThrottle={50}
+        showsHorizontalScrollIndicator={false}
+        stickyHeaderIndices={[]}
+        style={
+          {
+            "flex": 1,
+            "flexDirection": "row",
+          }
+        }
+        testID="intro-screen-test"
+        viewabilityConfigCallbackPairs={[]}
+      >
+        <View>
+          <View
+            onFocusCapture={[Function]}
+            style={
+              [
+                {
+                  "flexDirection": "row",
+                },
+                null,
+              ]
+            }
+          >
+            <View
+              accessibilityElementsHidden={false}
+              importantForAccessibility="auto"
+              style={
+                [
+                  {
+                    "flex": 1,
+                    "width": 0,
+                  },
+                ]
+              }
+            >
+              <View />
+            </View>
+          </View>
+        </View>
+      </RCTScrollView>
+      <View
+        style={
+          [
+            {
+              "alignItems": "center",
+              "bottom": 0,
+              "justifyContent": "space-between",
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+            },
+            {
+              "flexDirection": "row",
+            },
+          ]
+        }
+      >
+        <View
+          style={
+            [
+              {
+                "alignItems": "center",
+                "flexDirection": "row",
+                "justifyContent": "center",
+              },
+              {
+                "width": 0,
+              },
+            ]
+          }
+        />
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": undefined,
+              "expanded": undefined,
+              "selected": undefined,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          focusable={true}
+          nativeBackgroundAndroid={
+            {
+              "attribute": "selectableItemBackground",
+              "rippleRadius": undefined,
+              "type": "ThemeAttrAndroid",
+            }
+          }
+          onClick={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            [
+              {
+                "alignItems": "center",
+                "alignSelf": "stretch",
+                "flexDirection": "row",
+                "justifyContent": "center",
+                "paddingVertical": 12,
+              },
+              {
+                "width": 0,
+              },
+            ]
+          }
+          testID="intro-screen-test$buttonDone"
+        >
+          <View
+            style={
+              {
+                "alignSelf": "center",
+              }
+            }
+          >
+            <View
+              testId="icon"
+            />
+          </View>
+        </View>
+      </View>
+    </View>
+  </View>
+</Modal>
+`;
 
-exports[`Intro Screen renders with 1 bottom button 1`] = `null`;
+exports[`Intro Screen renders with 1 bottom button 1`] = `
+<Modal
+  hardwareAccelerated={false}
+  transparent={false}
+  visible={true}
+>
+  <View
+    style={
+      {
+        "bottom": 0,
+        "left": 0,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+      }
+    }
+  >
+    <View
+      style={
+        {
+          "flex": 1,
+        }
+      }
+    >
+      <RCTScrollView
+        bounces={false}
+        data={
+          [
+            {
+              "content": <View />,
+              "name": "Page 1",
+            },
+          ]
+        }
+        extraData={
+          [
+            0,
+            0,
+          ]
+        }
+        getItem={[Function]}
+        getItemCount={[Function]}
+        getItemLayout={[Function]}
+        horizontal={true}
+        importantForAccessibility="no"
+        initialScrollIndex={0}
+        keyExtractor={[Function]}
+        onContentSizeChange={[Function]}
+        onLayout={[Function]}
+        onMomentumScrollBegin={[Function]}
+        onMomentumScrollEnd={[Function]}
+        onScroll={[Function]}
+        onScrollBeginDrag={[Function]}
+        onScrollEndDrag={[Function]}
+        pagingEnabled={true}
+        removeClippedSubviews={true}
+        renderItem={[Function]}
+        scrollEventThrottle={50}
+        showsHorizontalScrollIndicator={false}
+        stickyHeaderIndices={[]}
+        style={
+          {
+            "flex": 1,
+            "flexDirection": "row",
+          }
+        }
+        testID="intro-screen-test"
+        viewabilityConfigCallbackPairs={[]}
+      >
+        <View>
+          <View
+            onFocusCapture={[Function]}
+            style={
+              [
+                {
+                  "flexDirection": "row",
+                },
+                null,
+              ]
+            }
+          >
+            <View
+              accessibilityElementsHidden={false}
+              importantForAccessibility="auto"
+              style={
+                [
+                  {
+                    "flex": 1,
+                    "width": 0,
+                  },
+                ]
+              }
+            >
+              <View />
+            </View>
+          </View>
+        </View>
+      </RCTScrollView>
+      <View
+        style={
+          [
+            {
+              "alignItems": "center",
+              "bottom": 0,
+              "justifyContent": "space-between",
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+            },
+            {},
+          ]
+        }
+      >
+        <View
+          style={
+            [
+              {
+                "alignItems": "center",
+                "flexDirection": "row",
+                "justifyContent": "center",
+              },
+              {
+                "width": "100%",
+              },
+            ]
+          }
+        />
+        <View
+          style={
+            {
+              "flex": 1,
+              "flexDirection": "row",
+              "justifyContent": "center",
+              "marginTop": 16,
+            }
+          }
+        >
+          <View
+            style={
+              {
+                "flex": 1,
+              }
+            }
+          >
+            <View
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              focusable={true}
+              nativeBackgroundAndroid={
+                {
+                  "attribute": "selectableItemBackground",
+                  "rippleRadius": undefined,
+                  "type": "ThemeAttrAndroid",
+                }
+              }
+              onClick={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
+              style={
+                [
+                  {
+                    "alignItems": "center",
+                    "flexDirection": "row",
+                    "justifyContent": "center",
+                    "paddingVertical": 12,
+                  },
+                  {},
+                ]
+              }
+              testID="intro-screen-test$buttonDone"
+            >
+              <View
+                style={
+                  {
+                    "alignSelf": "center",
+                  }
+                }
+              >
+                <View
+                  testId="icon"
+                />
+              </View>
+            </View>
+          </View>
+        </View>
+      </View>
+    </View>
+  </View>
+</Modal>
+`;
 
-exports[`Intro Screen renders with 2 bottom button 1`] = `null`;
+exports[`Intro Screen renders with 2 bottom button 1`] = `
+<Modal
+  hardwareAccelerated={false}
+  transparent={false}
+  visible={true}
+>
+  <View
+    style={
+      {
+        "bottom": 0,
+        "left": 0,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+      }
+    }
+  >
+    <View
+      style={
+        {
+          "flex": 1,
+        }
+      }
+    >
+      <RCTScrollView
+        bounces={false}
+        data={
+          [
+            {
+              "content": <View />,
+              "name": "Page 1",
+            },
+          ]
+        }
+        extraData={
+          [
+            0,
+            0,
+          ]
+        }
+        getItem={[Function]}
+        getItemCount={[Function]}
+        getItemLayout={[Function]}
+        horizontal={true}
+        importantForAccessibility="no"
+        initialScrollIndex={0}
+        keyExtractor={[Function]}
+        onContentSizeChange={[Function]}
+        onLayout={[Function]}
+        onMomentumScrollBegin={[Function]}
+        onMomentumScrollEnd={[Function]}
+        onScroll={[Function]}
+        onScrollBeginDrag={[Function]}
+        onScrollEndDrag={[Function]}
+        pagingEnabled={true}
+        removeClippedSubviews={true}
+        renderItem={[Function]}
+        scrollEventThrottle={50}
+        showsHorizontalScrollIndicator={false}
+        stickyHeaderIndices={[]}
+        style={
+          {
+            "flex": 1,
+            "flexDirection": "row",
+          }
+        }
+        testID="intro-screen-test"
+        viewabilityConfigCallbackPairs={[]}
+      >
+        <View>
+          <View
+            onFocusCapture={[Function]}
+            style={
+              [
+                {
+                  "flexDirection": "row",
+                },
+                null,
+              ]
+            }
+          >
+            <View
+              accessibilityElementsHidden={false}
+              importantForAccessibility="auto"
+              style={
+                [
+                  {
+                    "flex": 1,
+                    "width": 0,
+                  },
+                ]
+              }
+            >
+              <View />
+            </View>
+          </View>
+        </View>
+      </RCTScrollView>
+      <View
+        style={
+          [
+            {
+              "alignItems": "center",
+              "bottom": 0,
+              "justifyContent": "space-between",
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+            },
+            {},
+          ]
+        }
+      >
+        <View
+          style={
+            [
+              {
+                "alignItems": "center",
+                "flexDirection": "row",
+                "justifyContent": "center",
+              },
+              {
+                "width": "100%",
+              },
+            ]
+          }
+        />
+        <View
+          style={
+            {
+              "flex": 1,
+              "flexDirection": "row",
+              "justifyContent": "center",
+              "marginTop": 16,
+            }
+          }
+        >
+          <View
+            style={
+              {
+                "flex": 1,
+              }
+            }
+          >
+            <View
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              focusable={true}
+              nativeBackgroundAndroid={
+                {
+                  "attribute": "selectableItemBackground",
+                  "rippleRadius": undefined,
+                  "type": "ThemeAttrAndroid",
+                }
+              }
+              onClick={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
+              style={
+                [
+                  {
+                    "alignItems": "center",
+                    "flexDirection": "row",
+                    "justifyContent": "center",
+                    "paddingVertical": 12,
+                  },
+                  {},
+                ]
+              }
+              testID="intro-screen-test$buttonDone"
+            >
+              <View
+                style={
+                  {
+                    "alignSelf": "center",
+                  }
+                }
+              >
+                <View
+                  testId="icon"
+                />
+              </View>
+            </View>
+          </View>
+        </View>
+      </View>
+    </View>
+  </View>
+</Modal>
+`;
 
-exports[`Intro Screen renders with active slide attribute 1`] = `null`;
+exports[`Intro Screen renders with active slide attribute 1`] = `
+<Modal
+  hardwareAccelerated={false}
+  transparent={false}
+  visible={true}
+>
+  <View
+    style={
+      {
+        "bottom": 0,
+        "left": 0,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+      }
+    }
+  >
+    <View
+      style={
+        {
+          "flex": 1,
+        }
+      }
+    >
+      <RCTScrollView
+        bounces={false}
+        data={
+          [
+            {
+              "content": <View />,
+              "name": "Page 1",
+            },
+          ]
+        }
+        extraData={
+          [
+            0,
+            0,
+          ]
+        }
+        getItem={[Function]}
+        getItemCount={[Function]}
+        getItemLayout={[Function]}
+        horizontal={true}
+        importantForAccessibility="no"
+        initialScrollIndex={0}
+        keyExtractor={[Function]}
+        onContentSizeChange={[Function]}
+        onLayout={[Function]}
+        onMomentumScrollBegin={[Function]}
+        onMomentumScrollEnd={[Function]}
+        onScroll={[Function]}
+        onScrollBeginDrag={[Function]}
+        onScrollEndDrag={[Function]}
+        pagingEnabled={true}
+        removeClippedSubviews={true}
+        renderItem={[Function]}
+        scrollEventThrottle={50}
+        showsHorizontalScrollIndicator={false}
+        stickyHeaderIndices={[]}
+        style={
+          {
+            "flex": 1,
+            "flexDirection": "row",
+          }
+        }
+        testID="intro-screen-test"
+        viewabilityConfigCallbackPairs={[]}
+      >
+        <View>
+          <View
+            onFocusCapture={[Function]}
+            style={
+              [
+                {
+                  "flexDirection": "row",
+                },
+                null,
+              ]
+            }
+          >
+            <View
+              accessibilityElementsHidden={false}
+              importantForAccessibility="auto"
+              style={
+                [
+                  {
+                    "flex": 1,
+                    "width": 0,
+                  },
+                ]
+              }
+            >
+              <View />
+            </View>
+          </View>
+        </View>
+      </RCTScrollView>
+      <View
+        style={
+          [
+            {
+              "alignItems": "center",
+              "bottom": 0,
+              "justifyContent": "space-between",
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+            },
+            {
+              "flexDirection": "row",
+            },
+          ]
+        }
+      >
+        <View
+          style={
+            [
+              {
+                "alignItems": "center",
+                "flexDirection": "row",
+                "justifyContent": "center",
+              },
+              {
+                "width": 0,
+              },
+            ]
+          }
+        />
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": undefined,
+              "expanded": undefined,
+              "selected": undefined,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          focusable={true}
+          nativeBackgroundAndroid={
+            {
+              "attribute": "selectableItemBackground",
+              "rippleRadius": undefined,
+              "type": "ThemeAttrAndroid",
+            }
+          }
+          onClick={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            [
+              {
+                "alignItems": "center",
+                "alignSelf": "stretch",
+                "flexDirection": "row",
+                "justifyContent": "center",
+                "paddingVertical": 12,
+              },
+              {
+                "width": 0,
+              },
+            ]
+          }
+          testID="intro-screen-test$buttonDone"
+        >
+          <View
+            style={
+              {
+                "alignSelf": "center",
+              }
+            }
+          >
+            <View
+              testId="icon"
+            />
+          </View>
+        </View>
+      </View>
+    </View>
+  </View>
+</Modal>
+`;
 
-exports[`Intro Screen renders with async storage identifier 1`] = `null`;
+exports[`Intro Screen renders with async storage identifier 1`] = `
+<Modal
+  hardwareAccelerated={false}
+  transparent={false}
+  visible={true}
+>
+  <View
+    style={
+      {
+        "bottom": 0,
+        "left": 0,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+      }
+    }
+  >
+    <View
+      style={
+        {
+          "flex": 1,
+        }
+      }
+    >
+      <RCTScrollView
+        bounces={false}
+        data={
+          [
+            {
+              "content": <View />,
+              "name": "Page 1",
+            },
+          ]
+        }
+        extraData={
+          [
+            0,
+            0,
+          ]
+        }
+        getItem={[Function]}
+        getItemCount={[Function]}
+        getItemLayout={[Function]}
+        horizontal={true}
+        importantForAccessibility="no"
+        initialScrollIndex={0}
+        keyExtractor={[Function]}
+        onContentSizeChange={[Function]}
+        onLayout={[Function]}
+        onMomentumScrollBegin={[Function]}
+        onMomentumScrollEnd={[Function]}
+        onScroll={[Function]}
+        onScrollBeginDrag={[Function]}
+        onScrollEndDrag={[Function]}
+        pagingEnabled={true}
+        removeClippedSubviews={true}
+        renderItem={[Function]}
+        scrollEventThrottle={50}
+        showsHorizontalScrollIndicator={false}
+        stickyHeaderIndices={[]}
+        style={
+          {
+            "flex": 1,
+            "flexDirection": "row",
+          }
+        }
+        testID="intro-screen-test"
+        viewabilityConfigCallbackPairs={[]}
+      >
+        <View>
+          <View
+            onFocusCapture={[Function]}
+            style={
+              [
+                {
+                  "flexDirection": "row",
+                },
+                null,
+              ]
+            }
+          >
+            <View
+              accessibilityElementsHidden={false}
+              importantForAccessibility="auto"
+              style={
+                [
+                  {
+                    "flex": 1,
+                    "width": 0,
+                  },
+                ]
+              }
+            >
+              <View />
+            </View>
+          </View>
+        </View>
+      </RCTScrollView>
+      <View
+        style={
+          [
+            {
+              "alignItems": "center",
+              "bottom": 0,
+              "justifyContent": "space-between",
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+            },
+            {
+              "flexDirection": "row",
+            },
+          ]
+        }
+      >
+        <View
+          style={
+            [
+              {
+                "alignItems": "center",
+                "flexDirection": "row",
+                "justifyContent": "center",
+              },
+              {
+                "width": 0,
+              },
+            ]
+          }
+        />
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": undefined,
+              "expanded": undefined,
+              "selected": undefined,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          focusable={true}
+          nativeBackgroundAndroid={
+            {
+              "attribute": "selectableItemBackground",
+              "rippleRadius": undefined,
+              "type": "ThemeAttrAndroid",
+            }
+          }
+          onClick={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            [
+              {
+                "alignItems": "center",
+                "alignSelf": "stretch",
+                "flexDirection": "row",
+                "justifyContent": "center",
+                "paddingVertical": 12,
+              },
+              {
+                "width": 0,
+              },
+            ]
+          }
+          testID="intro-screen-test$buttonDone"
+        >
+          <View
+            style={
+              {
+                "alignSelf": "center",
+              }
+            }
+          >
+            <View
+              testId="icon"
+            />
+          </View>
+        </View>
+      </View>
+    </View>
+  </View>
+</Modal>
+`;