From cf4866b0acf1f44106a557c5def2e55c5e457a62 Mon Sep 17 00:00:00 2001 From: Uraz Akgultan Date: Thu, 3 Jul 2025 09:04:56 +0200 Subject: [PATCH 1/2] fix(intro-screen-native): scroll to correct initial slide on mount --- .../intro-screen-native/src/IntroScreen.tsx | 22 ++++++------- .../src/SwipeableContainer.tsx | 33 +++++++++++-------- 2 files changed, 31 insertions(+), 24 deletions(-) diff --git a/packages/pluggableWidgets/intro-screen-native/src/IntroScreen.tsx b/packages/pluggableWidgets/intro-screen-native/src/IntroScreen.tsx index 997fedaa5..f9dfd7de1 100644 --- a/packages/pluggableWidgets/intro-screen-native/src/IntroScreen.tsx +++ b/packages/pluggableWidgets/intro-screen-native/src/IntroScreen.tsx @@ -24,19 +24,27 @@ export function IntroScreen(props: IntroScreenProps): 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 | undefined => { if (label && label.value && label.status === ValueStatus.Available) { @@ -45,14 +53,6 @@ export function IntroScreen(props: IntroScreenProps): 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"; diff --git a/packages/pluggableWidgets/intro-screen-native/src/SwipeableContainer.tsx b/packages/pluggableWidgets/intro-screen-native/src/SwipeableContainer.tsx index 78950e20c..3b7d479e2 100644 --- a/packages/pluggableWidgets/intro-screen-native/src/SwipeableContainer.tsx +++ b/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; } +type TouchableProps = TouchableNativeFeedbackProps | TouchableOpacityProps; + declare type Option = T | undefined; const isAndroidRTL = I18nManager.isRTL && Platform.OS === "android"; -const Touchable = Platform.OS === "android" ? TouchableNativeFeedback : TouchableOpacity; +const Touchable: React.ComponentType = + Platform.OS === "android" ? TouchableNativeFeedback : TouchableOpacity; const refreshActiveSlideAttribute = (slides: SlidesType[], activeSlide?: EditableValue): 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>(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) => { const offset = event.nativeEvent.contentOffset.x; @@ -314,6 +319,8 @@ export const SwipeableContainer = (props: SwipeableContainerProps): ReactElement ({ length: width, offset: width * i, index: i })} ref={flatList} data={props.slides} horizontal From 8614e57e5ac947fb9a5796527bedaed4df2c4847 Mon Sep 17 00:00:00 2001 From: Uraz Akgultan Date: Thu, 3 Jul 2025 09:11:51 +0200 Subject: [PATCH 2/2] chore(intro-screen-native): bump version and update chagelog --- packages/pluggableWidgets/intro-screen-native/CHANGELOG.md | 6 ++++++ packages/pluggableWidgets/intro-screen-native/package.json | 2 +- .../pluggableWidgets/intro-screen-native/src/package.xml | 2 +- 3 files changed, 8 insertions(+), 2 deletions(-) diff --git a/packages/pluggableWidgets/intro-screen-native/CHANGELOG.md b/packages/pluggableWidgets/intro-screen-native/CHANGELOG.md index 7dacc5273..ff4a6db94 100644 --- a/packages/pluggableWidgets/intro-screen-native/CHANGELOG.md +++ b/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 diff --git a/packages/pluggableWidgets/intro-screen-native/package.json b/packages/pluggableWidgets/intro-screen-native/package.json index 5e0f2882a..cd6e725f2 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.1.0", + "version": "4.2.0", "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 34d0ef2ea..2b935564d 100644 --- a/packages/pluggableWidgets/intro-screen-native/src/package.xml +++ b/packages/pluggableWidgets/intro-screen-native/src/package.xml @@ -1,6 +1,6 @@ - +