Dev/remove extra scroll render (#167)

gusgard · web-flow · commit c1e01aca312a · 2023-04-23T05:50:00.000-03:00
* remove useOnChangeIndex

* Add suport for RTL

* bump version

* remove warnings
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -10,4 +10,7 @@ module.exports = {
     describe: false,
     expect: false,
   },
+  rules: {
+    'react-native/no-inline-styles': OFF,
+  },
 };
diff --git a/example/.detoxrc.js b/example/.detoxrc.js
@@ -50,7 +50,7 @@ module.exports = {
     emulator: {
       type: 'android.emulator',
       device: {
-        avdName: 'Pixel_3a_API_30_x86',
+        avdName: 'Pixel_4_API_33_arm64',
       },
     },
   },
diff --git a/example/.yarn/cache/react-native-swiper-flatlist-npm-3.2.1-05ffab775e-db9ecb78c1.zip b/example/.yarn/cache/react-native-swiper-flatlist-npm-3.2.1-05ffab775e-db9ecb78c1.zip
diff --git a/example/.yarn/install-state.gz b/example/.yarn/install-state.gz
diff --git a/example/package.json b/example/package.json
@@ -25,7 +25,7 @@
     "expo-status-bar": "~1.4.4",
     "react": "18.2.0",
     "react-native": "0.71.6",
-    "react-native-swiper-flatlist": "3.2.0"
+    "react-native-swiper-flatlist": "3.2.1"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -4,6 +4,10 @@ import { StyleSheet, View, SafeAreaView } from 'react-native';
 import SwiperWithRenderItems from './SwiperWithRenderItems';
 import SwiperWithChildren from './SwiperWithChildren';
 
+// TODO: we should add RTL tests
+// I18nManager.forceRTL(true);
+// I18nManager.allowRTL(true);
+
 export default () => {
   return (
     <SafeAreaView style={styles.container}>
diff --git a/example/src/SwiperWithChildren.tsx b/example/src/SwiperWithChildren.tsx
@@ -28,7 +28,7 @@ export default () => {
       showPagination
       ref={scrollRef}
       onChangeIndex={({ index, prevIndex }) => {
-        console.log({ index, prevIndex });
+        console.log('example', { index, prevIndex });
       }}
       // TODO: rename it to children eg: "container_swiper_children"
       e2eID="container_swiper"
diff --git a/example/src/SwiperWithRenderItems.tsx b/example/src/SwiperWithRenderItems.tsx
@@ -14,6 +14,7 @@ const items = Array.from(Array(5)).map((_, index) => image(index));
 export default () => {
   return (
     <SwiperFlatList
+      // inverted
       autoplay
       autoplayDelay={2}
       // index={3}
@@ -29,6 +30,9 @@ export default () => {
           <Text style={styles.text}>Item at index {index}</Text>
         </ImageBackground>
       )}
+      // onChangeIndex={({ index, prevIndex }) => {
+      //   console.log('renderItem', { index, prevIndex });
+      // }}
       showPagination
       PaginationComponent={CustomPagination}
       e2eID="container_swiper_renderItem"
diff --git a/example/yarn.lock b/example/yarn.lock
@@ -2819,7 +2819,7 @@ __metadata:
     node-watch: 0.6.2
     react: 18.2.0
     react-native: 0.71.6
-    react-native-swiper-flatlist: 3.2.0
+    react-native-swiper-flatlist: 3.2.1
     rimraf: ^2.5.4
   languageName: unknown
   linkType: soft
@@ -9108,12 +9108,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-native-swiper-flatlist@npm:3.2.0":
-  version: 3.2.0
-  resolution: "react-native-swiper-flatlist@npm:3.2.0"
+"react-native-swiper-flatlist@npm:3.2.1":
+  version: 3.2.1
+  resolution: "react-native-swiper-flatlist@npm:3.2.1"
   peerDependencies:
     react-native: ">=0.59.0"
-  checksum: e0ed40e123547a214c0c1a67caa6d566dc9e940811f0a9dc445fd13f6cee427a20845e3604b373723cf9f906898885abcde6a53ec8560567a661cc0fc114589f
+  checksum: db9ecb78c19d75b8fda110d65329ada4d82e6c2a0a035d47ee612ca5afbd14a9ecd8cce6b6ee7abb71d27e2331db1633bc0a1d08cb90a7377ab684fff0441fa5
   languageName: node
   linkType: hard
 
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-native-swiper-flatlist",
-  "version": "3.2.1",
+  "version": "3.2.2",
   "main": "index.ts",
   "license": "Apache-2.0",
   "description": "React native swiper flatlist component",
diff --git a/src/components/Pagination/Pagination.tsx b/src/components/Pagination/Pagination.tsx
@@ -1,13 +1,13 @@
 import React from 'react';
-import { StyleSheet, TouchableOpacity, View } from 'react-native';
+import { I18nManager, StyleSheet, TouchableOpacity, View } from 'react-native';
 
 import { colors, vertical, horizontal } from '../../themes';
 import { PaginationProps } from './PaginationProps';
 
 const styles = StyleSheet.create({
   container: {
     position: 'absolute',
-    flexDirection: 'row',
+    flexDirection: I18nManager.isRTL ? 'row-reverse' : 'row',
     marginVertical: vertical.xxSmall,
     justifyContent: 'center',
     alignSelf: 'center',
diff --git a/src/components/SwiperFlatList/SwiperFlatList.tsx b/src/components/SwiperFlatList/SwiperFlatList.tsx
@@ -1,5 +1,11 @@
 import React from 'react';
-import { FlatList as RNFlatList, FlatListProps, Platform, useWindowDimensions } from 'react-native';
+import {
+  FlatList as RNFlatList,
+  FlatListProps,
+  I18nManager,
+  Platform,
+  useWindowDimensions,
+} from 'react-native';
 
 let FlatList = RNFlatList;
 
@@ -13,7 +19,6 @@ const ITEM_VISIBLE_PERCENT_THRESHOLD = 60;
 // TODO: figure out how to use forwardRef with generics
 type T1 = any;
 type ScrollToIndex = { index: number; animated?: boolean };
-type ScrollToIndexInternal = { useOnChangeIndex: boolean };
 
 // const SwiperFlatList = React.forwardRef<RefProps, SwiperFlatListProps<SwiperType>>(
 export const SwiperFlatList = React.forwardRef(
@@ -25,7 +30,7 @@ export const SwiperFlatList = React.forwardRef(
       data = [],
       renderItem,
       renderAll = false,
-      index = FIRST_INDEX,
+      index = I18nManager.isRTL ? data.length - 1 : FIRST_INDEX,
       useReactNativeGestureHandler = false,
       // Pagination
       showPagination = false,
@@ -43,7 +48,7 @@ export const SwiperFlatList = React.forwardRef(
       autoplay = false,
       autoplayLoop = false,
       autoplayLoopKeepAnimation = false,
-      autoplayInvertDirection = false,
+      autoplayInvertDirection = I18nManager.isRTL,
       // Functions
       onChangeIndex,
       onMomentumScrollEnd,
@@ -90,7 +95,7 @@ export const SwiperFlatList = React.forwardRef(
     );
 
     const _scrollToIndex = React.useCallback(
-      (params: ScrollToIndex, extra: ScrollToIndexInternal) => {
+      (params: ScrollToIndex) => {
         const { index: indexToScroll, animated = true } = params;
         const newParams = { animated, index: indexToScroll };
 
@@ -108,16 +113,12 @@ export const SwiperFlatList = React.forwardRef(
           setCurrentIndexes((prevState) => ({ ...prevState, prevIndex: next.prevIndex }));
         }
 
-        if (extra.useOnChangeIndex) {
-          _onChangeIndex({ index: next.index, prevIndex: next.prevIndex });
-        }
-
         // When execute "scrollToIndex", we ignore the method "onMomentumScrollEnd"
         // because it not working on Android
         // https://github.com/facebook/react-native/issues/21718
         flatListElement?.current?.scrollToIndex(newParams);
       },
-      [_onChangeIndex, currentIndexes.index, currentIndexes.prevIndex],
+      [currentIndexes.index, currentIndexes.prevIndex],
     );
 
     // change the index when the user swipe the items
@@ -128,19 +129,19 @@ export const SwiperFlatList = React.forwardRef(
     React.useImperativeHandle(ref, () => ({
       scrollToIndex: (item: ScrollToIndex) => {
         setScrollEnabled(true);
-        _scrollToIndex(item, { useOnChangeIndex: true });
+        _scrollToIndex(item);
         setScrollEnabled(!disableGesture);
       },
       getCurrentIndex: () => currentIndexes.index,
       getPrevIndex: () => currentIndexes.prevIndex,
       goToLastIndex: () => {
         setScrollEnabled(true);
-        _scrollToIndex({ index: size - 1 }, { useOnChangeIndex: false });
+        _scrollToIndex({ index: I18nManager.isRTL ? FIRST_INDEX : size - 1 });
         setScrollEnabled(!disableGesture);
       },
       goToFirstIndex: () => {
         setScrollEnabled(true);
-        _scrollToIndex({ index: FIRST_INDEX }, { useOnChangeIndex: false });
+        _scrollToIndex({ index: I18nManager.isRTL ? size - 1 : FIRST_INDEX });
         setScrollEnabled(!disableGesture);
       },
     }));
@@ -173,7 +174,7 @@ export const SwiperFlatList = React.forwardRef(
           // Disable end loop animation unless `autoplayLoopKeepAnimation` prop configured
           const animate = !isLastIndexEnd || autoplayLoopKeepAnimation;
 
-          _scrollToIndex({ index: nextIndex, animated: animate }, { useOnChangeIndex: true });
+          _scrollToIndex({ index: nextIndex, animated: animate });
         }, autoplayDelay * MILLISECONDS);
       }
       // https://upmostly.com/tutorials/settimeout-in-react-components-using-hooks
@@ -231,9 +232,7 @@ export const SwiperFlatList = React.forwardRef(
       ...props,
       onMomentumScrollEnd: _onMomentumScrollEnd,
       onScrollToIndexFailed: (info) =>
-        setTimeout(() =>
-          _scrollToIndex({ index: info.index, animated: false }, { useOnChangeIndex: true }),
-        ),
+        setTimeout(() => _scrollToIndex({ index: info.index, animated: false })),
       data: _data,
       renderItem: _renderItem,
       initialNumToRender: _initialNumToRender,
@@ -281,7 +280,7 @@ export const SwiperFlatList = React.forwardRef(
             size={size}
             paginationIndex={currentIndexes.index}
             scrollToIndex={(params: ScrollToIndex) => {
-              _scrollToIndex(params, { useOnChangeIndex: false });
+              _scrollToIndex(params);
             }}
             paginationActiveColor={paginationActiveColor}
             paginationDefaultColor={paginationDefaultColor}

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "react-native-swiper-flatlist",`
`3`		`- "version": "3.2.1",`
	`3`	`+ "version": "3.2.2",`
`4`	`4`	`"main": "index.ts",`
`5`	`5`	`"license": "Apache-2.0",`
`6`	`6`	`"description": "React native swiper flatlist component",`