akveo / react-native-ui-kitten

:boom: React Native UI Library based on Eva Design System :new_moon_with_face::sparkles:Dark Mode
https://akveo.github.io/react-native-ui-kitten/
MIT License
10.19k stars 952 forks source link

View Pager selectedIndex fails to change the page shown after manually swiping a page #1800

Open MattiL opened 5 months ago

MattiL commented 5 months ago

πŸ› Bug Report

View Pager selectedIndex fails to change the page shown after manually swiping a page.

To Reproduce

Steps to reproduce the behavior:

Expected behavior

View Pager selectedIndex continues to change the page shown after manually swiping a page.

UI Kitten and Eva version

Package Version
@eva-design/eva 2.2.0
@ui-kitten/components 5.3.1

Environment information

System: OS: macOS 14.2.1 CPU: (8) x64 Intel(R) Core(TM) i5-8259U CPU @ 2.30GHz Binaries: Node: 20.6.1 - /usr/local/bin/node Yarn: 1.22.19 - /usr/local/bin/yarn npm: 9.8.1 - /usr/local/bin/npm SDKs: iOS SDK: Platforms: DriverKit 23.2, iOS 17.2, macOS 14.2, tvOS 17.2, visionOS 1.0, watchOS 10.2 Android SDK: API Levels: 30, 31, 33, 34 Build Tools: 30.0.2, 30.0.3, 33.0.0 System Images: android-29 | Google APIs Intel x86 Atom, android-30 | Google APIs Intel x86 Atom, android-31 | Google APIs ARM 64 v8a, android-31 | Google APIs Intel x86_64 Atom, android-33 | Google APIs Intel x86_64 Atom, android-34 | Google TV Intel x86 Atom, android-34 | Google APIs Intel x86_64 Atom IDEs: Android Studio: 2023.1 AI-231.9392.1.2311.11255304 Xcode: 15.2/15C500b - /usr/bin/xcodebuild npmPackages: react: 18.2.0 => 18.2.0 react-native: 0.72.5 => 0.72.5 npmGlobalPackages: react-native-cli: 2.0.1

greenfrvr commented 2 weeks ago

could you please share some code to add more context?

MattiL commented 2 weeks ago

Used code below. `export const MainPager = () => { const pagerObject = useSelector((state) => state.pager); const selectedIndex = pagerObject.selectedIndex;

const handleStatus = (number) => {
    console.log("(main-pager) handleStatus " + number);
}

return <ViewPager
    swipeEnabled={true}
    selectedIndex={selectedIndex}
    children={[
        <PermissionsNotice key={0}/>,
        <FormLogin key={1}/>,
        <TrackingControl key={2}/>,
        <MainPage key={3}/>,
        <Emergency key={4}/>
    ]}
    onSelect={handleStatus}
/>;

} `

greenfrvr commented 2 weeks ago

It seems you forgot to update the selectedIndex variable with a new index in handleStatus callback. Please try it. You can check documentation with an example of how to use ViewPager component.