Undefined is not an object when trying to import Pagination

[captainalbert]

Describe the bug This shows when I am trying to import Pagination component from

To Reproduce Steps to reproduce the behavior:

1. Import Pagination.Basic to show pagination elements below the Carousel component.

My implementation:

Expected behavior A clear and concise description of what you expected to happen.

Screenshots If applicable, add screenshots to help explain your problem.

Versions (please complete the following information):

• react: v18.0.0
• react-native: v0.69.2
• react-native-reanimated: v2.2.0
• react-native-reanimated-carousel: v4.0.0-alpha.12
• react-native-gesture-handler: v1.9.0

Smartphone (please complete the following information):

• Device: Emulator
• OS: Android 10
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context Add any other context about the problem here.

[dosubot[bot]]

Hey there, @captainalbert! I'm here to assist you with any bugs, questions, or contributions. Let me know how I can help you!

I found some similar issues and discussions that might help you resolve the problem:

1. Similar Issues:

   • Pagination Is not Importable from the library as Shown in the Documentation Example (Open) - The solution is to upgrade to version 4.0.0-alpha.12 or later.
   • Pagination not exported? (Closed) - The solution is to upgrade to version 4.x alpha of react-native-reanimated-carousel.

2. Possible Solution:

   • Ensure you have the correct versions of dependencies and peer dependencies. For react-native-reanimated-carousel version 4.0.0-alpha.12, you need:
     • react-native-gesture-handler: >=2.9.0
     • react-native-reanimated: >=3.0.0
   • Your current react-native-gesture-handler version 1.9.0 is outdated. Upgrade it to >=2.9.0:

     npm install react-native-gesture-handler@latest

     or

     yarn add react-native-gesture-handler@latest

3. Configuration Steps:

   • When using the carousel inside a ScrollView or FlatList, configure the gesture handler to ensure the unused axis does not impede the scroll of the list:

     <Carousel
     {...}
     onConfigurePanGesture={gestureChain => (
      gestureChain.activeOffsetX([-10, 10])
     )}
     />

4. Additional Fix:

   • If you encounter issues with react-native-reanimated, add the following line in your index.js:

     global.__reanimatedWorkletInit = () => {};

By following these steps, you should be able to resolve the "undefined is not an object" error when importing the Pagination component ^{[1][2][3][4][5]}.

To continue talking to Dosu, mention @dosu.