[MOO-1887]: Fix initial slide positioning in IntroScreen widget [MX 11]

packages/pluggableWidgets/intro-screen-native/CHANGELOG.md

@@ -6,6 +6,12 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Fixes
+
+-   Initial slide now correctly positioned on mount.
+
+### Changed
+
 -   Updated react-native-device-info to latest version.
 
 ### Fixed

packages/pluggableWidgets/intro-screen-native/package.json

@@ -1,7 +1,7 @@
 {
   "name": "intro-screen-native",
   "widgetName": "IntroScreen",
-  "version": "4.1.0",
+  "version": "4.2.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",

packages/pluggableWidgets/intro-screen-native/src/IntroScreen.tsx

@@ -24,19 +24,27 @@ export function IntroScreen(props: IntroScreenProps<IntroScreenStyle>): JSX.Elem
         } else {
             setVisible(true);
         }
-    }, []);
+    }, [props.identifier]);
+
+    const hideModal = useCallback((): void => {
+        if (props.identifier) {
+            AsyncStorage.setItem(props.identifier, "gone").then(() => setVisible(false));
+        } else {
+            setVisible(false);
+        }
+    }, [props.identifier]);
 
     const onDone = useCallback(() => {
         hideModal();
         executeAction(props.onDone);
-    }, [props.onDone]);
+    }, [hideModal, props.onDone]);
 
     const onSlideChange = useCallback(() => executeAction(props.onSlideChange), [props.onSlideChange]);
 
     const onSkip = useCallback(() => {
         hideModal();
         executeAction(props.onSkip);
-    }, [props.onSkip]);
+    }, [hideModal, props.onSkip]);
 
     const checkLabel = (label?: DynamicValue<string>): string | undefined => {
         if (label && label.value && label.status === ValueStatus.Available) {
@@ -45,14 +53,6 @@ export function IntroScreen(props: IntroScreenProps<IntroScreenStyle>): JSX.Elem
         return undefined;
     };
 
-    const hideModal = (): void => {
-        if (props.identifier) {
-            AsyncStorage.setItem(props.identifier, "gone").then(() => setVisible(false));
-        } else {
-            setVisible(false);
-        }
-    };
-
     const showSkipPrevious = props.buttonPattern === "all";
     const showNextDone = props.buttonPattern !== "none";
 

packages/pluggableWidgets/intro-screen-native/src/SwipeableContainer.tsx

@@ -8,7 +8,9 @@ import {
     StyleSheet,
     Text,
     TouchableNativeFeedback,
+    TouchableNativeFeedbackProps,
     TouchableOpacity,
+    TouchableOpacityProps,
     View
 } from "react-native";
 import { ButtonStyle, IntroScreenStyle } from "./ui/Styles";
@@ -43,10 +45,13 @@ interface SwipeableContainerProps {
     activeSlide?: EditableValue<Big>;
 }
 
+type TouchableProps = TouchableNativeFeedbackProps | TouchableOpacityProps;
+
 declare type Option<T> = T | undefined;
 
 const isAndroidRTL = I18nManager.isRTL && Platform.OS === "android";
-const Touchable = Platform.OS === "android" ? TouchableNativeFeedback : TouchableOpacity;
+const Touchable: React.ComponentType<TouchableProps> =
+    Platform.OS === "android" ? TouchableNativeFeedback : TouchableOpacity;
 
 const refreshActiveSlideAttribute = (slides: SlidesType[], activeSlide?: EditableValue<Big>): number => {
     if (activeSlide && activeSlide.status === ValueStatus.Available && slides && slides.length > 0) {
@@ -66,12 +71,10 @@ export const SwipeableContainer = (props: SwipeableContainerProps): ReactElement
     const [activeIndex, setActiveIndex] = useState(0);
     const flatList = useRef<FlatList<any>>(null);
 
-    useEffect(() => {
-        const slide = refreshActiveSlideAttribute(props.slides, props.activeSlide);
-        if (width && props.activeSlide && props.activeSlide.status === ValueStatus.Available && slide !== activeIndex) {
-            goToSlide(slide);
-        }
-    }, [props.activeSlide, activeIndex, width]);
+    const rtlSafeIndex = useCallback(
+        (i: number): number => (isAndroidRTL ? props.slides.length - 1 - i : i),
+        [props.slides.length]
+    );
 
     const goToSlide = useCallback(
         (pageNum: number) => {
@@ -82,9 +85,16 @@ export const SwipeableContainer = (props: SwipeableContainerProps): ReactElement
                 });
             }
         },
-        [width, flatList]
+        [rtlSafeIndex, width]
     );
 
+    useEffect(() => {
+        const slide = refreshActiveSlideAttribute(props.slides, props.activeSlide);
+        if (width && props.activeSlide && props.activeSlide.status === ValueStatus.Available && slide !== activeIndex) {
+            goToSlide(slide);
+        }
+    }, [props.activeSlide, activeIndex, width, props.slides, goToSlide]);
+
     const onNextPress = (): void => {
         goToSlide(activeIndex + 1);
         onSlideChange(activeIndex + 1, activeIndex);
@@ -278,11 +288,6 @@ export const SwipeableContainer = (props: SwipeableContainerProps): ReactElement
         );
     };
 
-    const rtlSafeIndex = useCallback(
-        (i: number): number => (isAndroidRTL ? props.slides.length - 1 - i : i),
-        [props.slides.length]
-    );
-
     const onMomentumScrollEnd = useCallback(
         (event: NativeSyntheticEvent<any>) => {
             const offset = event.nativeEvent.contentOffset.x;
@@ -314,6 +319,8 @@ export const SwipeableContainer = (props: SwipeableContainerProps): ReactElement
         <View style={styles.flexOne}>
             <FlatList
                 testID={props.testID}
+                initialScrollIndex={refreshActiveSlideAttribute(props.slides, props.activeSlide)}
+                getItemLayout={(_, i) => ({ length: width, offset: width * i, index: i })}
                 ref={flatList}
                 data={props.slides}
                 horizontal

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.1.0" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="IntroScreen" version="4.2.0" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="IntroScreen.xml" />
         </widgetFiles>