Its not working in RTL

[Ashu9997]

Thanks for the package. I need to support RTL layout as well. but the Page indicator is not working properly in RTL.
I have used advanced sample from ReadMe. Below is the image of indicator screen in RTL.

[kolking]

Hello! Could you provide the code of your slider + page indicator (including all the styles) so I can try to reproduce it myself? It's just hard to understand what's wrong based on the image.

[Ashu9997]

Adding the code below . When i set app language to arabic i get the above output.

  const HomeCarousel = () => {
  const imageUrl =
    'https://images.pexels.com/photos/414171/pexels-photo-414171.jpeg?w=1200&h=600&auto=compress&cs=tinysrgb';
  const { styles } = useStyles(styleSheet);
  const pagerRef = useRef<PagerView>(null);
  const pageOffset = useRef(new Animated.Value(0)).current;
  const position = useRef(new Animated.Value(0)).current;
  const combinedScroll = Animated.add(position, pageOffset);

  const renderCarouselItem = (item: any, index: number) => (
    <View key={item.id} style={styles.carouselItem}>
      <View style={styles.carouselContent}>
        <TurboImage resizeMode="cover" source={{ uri: imageUrl }} style={styles.carouselImage} />
      </View>
    </View>
  );
  return (
    <View>
      <View style={styles.carouselContainer}>
        <PagerView
          ref={pagerRef}
          style={styles.pagerView}
          onPageScroll={Animated.event(
            [
              {
                nativeEvent: {
                  position: position,
                  offset: pageOffset,
                },
              },
            ],
            { useNativeDriver: false },
          )}>
          {carouselData.map((item, index) => renderCarouselItem(item, index))}
        </PagerView>
      </View>
      
      <View style={styles.pageIndicatorContainer}>
        <PageIndicator scrollX={combinedScroll} pageCount={carouselData.length} />
      </View>
    </View>
  );
};

const styleSheet = createStyleSheet(theme => ({
  carouselContainer: {
    width: '100%',
    height: heightScale(180),
  },
  pagerView: {
    flex: 1,
  },
  carouselItem: {
    flex: 1,
    flexDirection: 'row',
    borderRadius: widthScale(16),
    marginHorizontal: widthScale(20),
  },
  carouselContent: {
    flex: 1,
    justifyContent: 'center',
  },
  pageIndicatorContainer: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    paddingHorizontal: widthScale(20),
  },
  carouselImage: {
    width: '100%',
    height: '100%',
    borderRadius: widthScale(16),
  },
}));

export default HomeCarousel;

[kolking]

@Ashu9997 please make sure you copied / formatted the code properly.

[kolking]

@Ashu9997 could you try the very simple thing:

<PageIndicator scrollX={combinedScroll} pageCount={carouselData.length} style={{ direction: 'ltr' }} />

Will this fix the issue?

[kolking]

Here's an example:

import React, { useRef } from 'react';
import { Animated, StyleSheet, Text, View, useWindowDimensions } from 'react-native';
import { PageIndicator } from 'react-native-page-indicator';

const pages = [
  {
    title: 'Page 1',
    color: '#574ae2',
  },
  {
    title: 'Page 2',
    color: '#aa4586',
  },
  {
    title: 'Page 3',
    color: '#654597',
  },
  {
    title: 'Page 4',
    color: '#88ab75',
  },
  {
    title: 'Page 5',
    color: '#00a1e4',
  },
];

const App = () => {
  const { width: screenWidth } = useWindowDimensions();
  const width = screenWidth - 40;
  const height = 200;

  const scrollX = useRef(new Animated.Value(width * (pages.length - 1))).current;
  const animatedCurrent = useRef(Animated.divide(scrollX, width)).current;

  return (
    <View style={styles.root}>
      <Animated.ScrollView
        horizontal={true}
        pagingEnabled={true}
        showsHorizontalScrollIndicator={false}
        style={[styles.pages, { width, height }]}
        onScroll={Animated.event([{ nativeEvent: { contentOffset: { x: scrollX } } }], {
          useNativeDriver: true,
        })}
      >
        {pages.map(({ title, color: backgroundColor }, index) => (
          <View key={index} style={[styles.page, { width, backgroundColor }]}>
            <Text style={styles.text}>{title}</Text>
          </View>
        ))}
      </Animated.ScrollView>
      <View style={styles.pageIndicator}>
        <PageIndicator count={pages.length} current={animatedCurrent} />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  root: {
    flex: 1,
    gap: 20,
    direction: 'rtl',
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#fff',
  },
  pages: {
    flexGrow: 0,
  },
  page: {
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    fontSize: 24,
    color: '#fff',
    fontWeight: 'bold',
  },
  pageIndicator: {
    direction: 'ltr',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

export default App;

Key points are:

1. Add direction: 'ltr' in the pageIndicator styles
2. The initial scrollX value should be calculated as width * (pages.length - 1)