react-native-reanimated-carousel icon indicating copy to clipboard operation
react-native-reanimated-carousel copied to clipboard

Card item with a set width will not be not centered on IOS

Open puddinator opened this issue 2 years ago • 1 comments

Describe the bug If the renderItem item has a set width that is not the full window width, all the items will not be centered in the carousel. Strangely this only affects IOS not android.

To Reproduce Steps to reproduce the behavior:

  1. Create a carousel (should be any animation)
  2. Render an item and set a width that is not window width
  3. Open the app on IOS
  4. All the items are not centered

Expected behavior Items should be centered. Removing the set width, or setting width to window dimension solves the issue.

Versions (please complete the following information):

  • react: v18.2.0
  • react-native: v0.70.5
  • react-native-reanimated: v2.12.0
  • react-native-reanimated-carousel: v3.3.0
  • react-native-gesture-handler: v2.8.0

Smartphone (please complete the following information):

  • Device: [e.g. iPhone14]
  • OS: [e.g. iOS16.2]

puddinator avatar Mar 17 '23 08:03 puddinator

I had a similar issue where my rendered items had a set width and weren't being centered. This occurred on both iOS and Android for me.

Setting the rendered item's style to include alignSelf: 'center' fixed the issue for me.

Zaccheuss avatar May 15 '23 17:05 Zaccheuss