Card item with a set width will not be not centered on IOS
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:
- Create a carousel (should be any animation)
- Render an item and set a width that is not window width
- Open the app on IOS
- 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]
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.