[ANDROID] Carousel loop doesn't behave correctly

[Basel Shlewett]

Description

Auto play(loop) carousel on android jumps through indexes randomly and at most shows only 2-3 items, for example in an array of 18 items, it will only show indexes 0,1 and then jump to 17.

Expected behavior

Carousel should loop through all items as defined by items rendered

Actual behavior

Carousel jumps through items at random and at most shows only 2-3 items

Code snippet

<Carousel
    loop={true}
    autoplay={true}
    autoplayInterval={5000}
    showCounter={true}>
        {article?.multi_images?.map((item: string, index: number) => {
             return (
                 <Card.Image
                      key={index}
                      source={{uri: `${Config.ASSETS_URL}${item}`}}
                      cover={true} 
                      aspectRatio={1.34}
                      style={{
                          borderTopLeftRadius: 15,
                          borderTopRightRadius: 15,
                          borderBottomLeftRadius: article?.has_tickers ? 0 : 15,
                          borderBottomRightRadius: article?.has_tickers ? 0 : 15,
                      }}
                  />
              );
          })}
</Carousel>

Environment

• React Native version: 0.72.6
• React Native UI Lib version: 7.9.1

Affected platforms

• Android
• iOS
• Web

[Basel Shlewett]

Hello all, Any updates regarding this? or any work-around? As we're preparing to go to production

[Nitzan Yizhar]

Hi, this was a bug when using android in rtl. It will be fixed in the next release.

[Basel Shlewett]

Hi, this was a bug when using android in rtl. It will be fixed in the next release.

Thank you @nitzanwix, let me know if I can help with anything

[Basel Shlewett]

@nitzanwix I just managed to update to the latest version, and while the original issue is solved on android, I'm now observing the same issue on iOS.

And as a side-effect to the fix, now text inside RTL carousel is mirrored:

[Nitzan Yizhar]

Hi, Thanks you're response. I see the inverted text bug. Can you elaborate on what you're now experiencing on ios? I don't see any jumps on my end.

[Basel Shlewett]

I observed the same behavior as in the original ticket, only this time was on react-native-ui-lib@7.12.0.

For the time being I reverted to version react-native-ui-lib@7.11.0 as I need to release to production.. I will do further tests after the release, and probably during the weekend and post the results here.

[Basel Shlewett]

Hey @nitzanwix, I can confirm I'm experiencing the same behaviour as the original ticket on iOS

Environment

• React Native version: 0.73.0
• React Native UI Lib version: 7.12.2

On android, in addition to text being mirrored, I can see the the carousel direction is also reversed on RTL..

Let me know if I can provide any more details
Have a nice weekend

[Nitzan Yizhar]

Thanks for the reply. Could you show me how you use the carousel? (Code). Do you use autoplayInterval by any chance?

[Basel Shlewett]

Thanks for the reply. Could you show me how you use the carousel? (Code). Do you use autoplayInterval by any chance?

Yes, I am.

I'm also forcing RTL through native code if that helps.

here is my implementation:
inside component/Card.tsx:

<Carousel
    key={article.multi_images.length ?? 0}
    autoplay={true}
    autoplayInterval={5000}
    itemSpacings={Spacings.s3}
    initialPage={0}
    showCounter={true}
    >
    {article?.multi_images?.map((item: string, index: number) => {
        return (
            <Card.Image
                key={index}
                source={{uri: `${IMAGE_URL}`}}
                cover={true}
                aspectRatio={1.34}
                style={{
                    borderTopLeftRadius: 15,
                    borderTopRightRadius: 15,
                    borderBottomLeftRadius: article?.has_tickers
                        ? 0
                        : 15,
                    borderBottomRightRadius: article?.has_tickers
                        ? 0
                        : 15,
                }}
            />
        );
    })}
</Carousel>

MainApplication.kt (previously MainApplication.java):

val sharedI18nUtilInstance: I18nUtil  = I18nUtil.getInstance()
sharedI18nUtilInstance.forceRTL(this,true)
sharedI18nUtilInstance.allowRTL(this, true);

AppDelegate.mm:

[[RCTI18nUtil sharedInstance] allowRTL:YES];
[[RCTI18nUtil sharedInstance] forceRTL:YES];

[Nitzan Yizhar]

Does this still occur with the new release? If so, could you attach a recording of it by any chance?

[Basel Shlewett]

Hey @nitzanwix, thanks for your efforts,

On android, autoplay and loop are working as expected.

However, the initial starting position is set to the last index of the carousel. (I tried settings the initialPage prop to 0, but it doesn't work unless it's through a hot-reload)

On iOS the only issue is that initial issue of this bug report, which is the jumping between indexes.

See attached: (left is iOS, right is Android)
Video screen recording of jumping carousel:
https://github.com/wix/react-native-ui-lib/assets/20260587/b2a2a5e5-ebea-46b8-9260-bb6b77642495

Screenshot of initial page wrong index on android:

[Basel Shlewett]

@nitzanwix any updates?