From d02c9ab66736deea64b304f08605c6f4ac478261 Mon Sep 17 00:00:00 2001
From: MxKevinBeqo <kevin.beqo@mendix.com>
Date: Fri, 19 Dec 2025 16:36:13 +0100
Subject: [PATCH 1/3] fix(intro-screen-native): fix conditional visibility
 rendering issue

---
 .../intro-screen-native/src/IntroScreen.tsx                 | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/pluggableWidgets/intro-screen-native/src/IntroScreen.tsx b/packages/pluggableWidgets/intro-screen-native/src/IntroScreen.tsx
index e19fd086d..37ca8c1c0 100644
--- a/packages/pluggableWidgets/intro-screen-native/src/IntroScreen.tsx
+++ b/packages/pluggableWidgets/intro-screen-native/src/IntroScreen.tsx
@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useState, JSX } from "react";
 import { defaultWelcomeScreenStyle, IntroScreenStyle } from "./ui/Styles";
 import { IntroScreenProps } from "../typings/IntroScreenProps";
-import { Modal, View } from "react-native";
+import { InteractionManager, Modal, View } from "react-native";
 import { DynamicValue, ValueStatus } from "mendix";
 import { SwipeableContainer } from "./SwipeableContainer";
 import AsyncStorage from "@react-native-async-storage/async-storage";
@@ -22,7 +22,7 @@ export function IntroScreen(props: IntroScreenProps<IntroScreenStyle>): JSX.Elem
                 setVisible(value === "" || value === null);
             });
         } else {
-            setVisible(true);
+            InteractionManager.runAfterInteractions(() => setVisible(true));
         }
     }, [props.identifier]);
 
@@ -30,7 +30,7 @@ export function IntroScreen(props: IntroScreenProps<IntroScreenStyle>): JSX.Elem
         if (props.identifier) {
             AsyncStorage.setItem(props.identifier, "gone").then(() => setVisible(false));
         } else {
-            setVisible(false);
+            InteractionManager.runAfterInteractions(() => setVisible(false));
         }
     }, [props.identifier]);
 

From 4c4c7cbd325ee85cff5e0de0b3cd336955dbcd00 Mon Sep 17 00:00:00 2001
From: MxKevinBeqo <kevin.beqo@mendix.com>
Date: Mon, 22 Dec 2025 11:05:31 +0100
Subject: [PATCH 2/3] chore(intro-screen-native): update snapshots

---
 .../IntroScreen.notch.spec.tsx.snap           | 812 +-----------------
 .../__snapshots__/IntroScreen.spec.tsx.snap   | 812 +-----------------
 2 files changed, 8 insertions(+), 1616 deletions(-)

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 db280323f..4c7d1018a 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,815 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-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": {
-                "$$typeof": Symbol(react.transitional.element),
-                "_owner": null,
-                "_store": {},
-                "key": null,
-                "props": {},
-                "type": [Function],
-              },
-              "name": "Page 1",
-            },
-          ]
-        }
-        extraData={0}
-        getItem={[Function]}
-        getItemCount={[Function]}
-        getItemLayout={[Function]}
-        horizontal={true}
-        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
-              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 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": {
-                "$$typeof": Symbol(react.transitional.element),
-                "_owner": null,
-                "_store": {},
-                "key": null,
-                "props": {},
-                "type": [Function],
-              },
-              "name": "Page 1",
-            },
-          ]
-        }
-        extraData={0}
-        getItem={[Function]}
-        getItemCount={[Function]}
-        getItemLayout={[Function]}
-        horizontal={true}
-        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
-              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 1 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": {
-                "$$typeof": Symbol(react.transitional.element),
-                "_owner": null,
-                "_store": {},
-                "key": null,
-                "props": {},
-                "type": [Function],
-              },
-              "name": "Page 1",
-            },
-          ]
-        }
-        extraData={0}
-        getItem={[Function]}
-        getItemCount={[Function]}
-        getItemLayout={[Function]}
-        horizontal={true}
-        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
-              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 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": {
-                "$$typeof": Symbol(react.transitional.element),
-                "_owner": null,
-                "_store": {},
-                "key": null,
-                "props": {},
-                "type": [Function],
-              },
-              "name": "Page 1",
-            },
-          ]
-        }
-        extraData={0}
-        getItem={[Function]}
-        getItemCount={[Function]}
-        getItemLayout={[Function]}
-        horizontal={true}
-        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
-              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 active slide attribute 1`] = `null`;
 
 exports[`Intro Screen renders with async storage identifier 1`] = `null`;
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 21123c33d..4c7d1018a 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,815 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-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": {
-                "$$typeof": Symbol(react.transitional.element),
-                "_owner": null,
-                "_store": {},
-                "key": null,
-                "props": {},
-                "type": [Function],
-              },
-              "name": "Page 1",
-            },
-          ]
-        }
-        extraData={0}
-        getItem={[Function]}
-        getItemCount={[Function]}
-        getItemLayout={[Function]}
-        horizontal={true}
-        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
-              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 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": {
-                "$$typeof": Symbol(react.transitional.element),
-                "_owner": null,
-                "_store": {},
-                "key": null,
-                "props": {},
-                "type": [Function],
-              },
-              "name": "Page 1",
-            },
-          ]
-        }
-        extraData={0}
-        getItem={[Function]}
-        getItemCount={[Function]}
-        getItemLayout={[Function]}
-        horizontal={true}
-        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
-              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 1 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": {
-                "$$typeof": Symbol(react.transitional.element),
-                "_owner": null,
-                "_store": {},
-                "key": null,
-                "props": {},
-                "type": [Function],
-              },
-              "name": "Page 1",
-            },
-          ]
-        }
-        extraData={0}
-        getItem={[Function]}
-        getItemCount={[Function]}
-        getItemLayout={[Function]}
-        horizontal={true}
-        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
-              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 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": {
-                "$$typeof": Symbol(react.transitional.element),
-                "_owner": null,
-                "_store": {},
-                "key": null,
-                "props": {},
-                "type": [Function],
-              },
-              "name": "Page 1",
-            },
-          ]
-        }
-        extraData={0}
-        getItem={[Function]}
-        getItemCount={[Function]}
-        getItemLayout={[Function]}
-        horizontal={true}
-        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
-              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 active slide attribute 1`] = `null`;
 
 exports[`Intro Screen renders with async storage identifier 1`] = `null`;

From d9b4359d01fff4863b51bfb3466146ef8dc78572 Mon Sep 17 00:00:00 2001
From: MxKevinBeqo <kevin.beqo@mendix.com>
Date: Fri, 19 Dec 2025 16:36:53 +0100
Subject: [PATCH 3/3] chore(intro-screen-native): update version and release
 notes

---
 packages/pluggableWidgets/intro-screen-native/CHANGELOG.md    | 4 ++++
 packages/pluggableWidgets/intro-screen-native/package.json    | 2 +-
 packages/pluggableWidgets/intro-screen-native/src/package.xml | 2 +-
 3 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/pluggableWidgets/intro-screen-native/CHANGELOG.md b/packages/pluggableWidgets/intro-screen-native/CHANGELOG.md
index adc726637..daa04a665 100644
--- a/packages/pluggableWidgets/intro-screen-native/CHANGELOG.md
+++ b/packages/pluggableWidgets/intro-screen-native/CHANGELOG.md
@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Fixed
+
+-   We fixed an issue where using the conditional visibility on the IntroScreen would cause the widget not to render.
+
 ## [4.1.0] - 2025-7-7
 
 -   Initial slide now correctly positioned on mount.
diff --git a/packages/pluggableWidgets/intro-screen-native/package.json b/packages/pluggableWidgets/intro-screen-native/package.json
index cd616bdfc..a30737ad3 100644
--- a/packages/pluggableWidgets/intro-screen-native/package.json
+++ b/packages/pluggableWidgets/intro-screen-native/package.json
@@ -1,7 +1,7 @@
 {
   "name": "intro-screen-native",
   "widgetName": "IntroScreen",
-  "version": "4.2.0",
+  "version": "4.2.1",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
diff --git a/packages/pluggableWidgets/intro-screen-native/src/package.xml b/packages/pluggableWidgets/intro-screen-native/src/package.xml
index 2b935564d..21fc94fce 100644
--- a/packages/pluggableWidgets/intro-screen-native/src/package.xml
+++ b/packages/pluggableWidgets/intro-screen-native/src/package.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <package xmlns="http://www.mendix.com/package/1.0/">
-    <clientModule name="IntroScreen" version="4.2.0" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="IntroScreen" version="4.2.1" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="IntroScreen.xml" />
         </widgetFiles>