gusgard / react-native-swiper-flatlist

👆 Swiper component implemented with FlatList using Hooks & Typescript + strict automation tests with Detox

👆 Swiper FlatList component

Installation

yarn add react-native-swiper-flatlist

or

npm install react-native-swiper-flatlist --save

Notice

Version 2.x was re-implemented using React Hooks so it only works with version 0.59 or above

Version 3.x was re-implemented using Typescript and it works with react-native-web

react-native-swiper-flatlist	react-native	Detox tests
1.x	<= 0.58	X
2.x	>= 0.59	X
3.x	>= 0.59

Note: we are using the feature export type available in babel v7.9.0 babel/babel#11171, you might have this issue with React Native between 0.60 and 0.63, please update babel to at least to v7.9.0

Examples

Expo example with renderItems, children and more

Expo example with children

React Native example with renderItems and custom pagination

React Native example with children

Code

Using renderItems and data

import React from 'react';
import { Text, Dimensions, StyleSheet, View } from 'react-native';
import { SwiperFlatList } from 'react-native-swiper-flatlist';

const colors = ['tomato', 'thistle', 'skyblue', 'teal'];

const App = () => (
  <View style={styles.container}>
    <SwiperFlatList
      autoplay
      autoplayDelay={2}
      autoplayLoop
      index={2}
      showPagination
      data={colors}
      renderItem={({ item }) => (
        <View style={[styles.child, { backgroundColor: item }]}>
          <Text style={styles.text}>{item}</Text>
        </View>
      )}
    />
  </View>
);

const { width } = Dimensions.get('window');
const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: 'white' },
  child: { width, justifyContent: 'center' },
  text: { fontSize: width * 0.5, textAlign: 'center' },
});

export default App;

Using children

import React from 'react';
import { Text, Dimensions, StyleSheet, View } from 'react-native';
import { SwiperFlatList } from 'react-native-swiper-flatlist';

const App = () => (
  <View style={styles.container}>
    <SwiperFlatList autoplay autoplayDelay={2} autoplayLoop index={2} showPagination>
      <View style={[styles.child, { backgroundColor: 'tomato' }]}>
        <Text style={styles.text}>1</Text>
      </View>
      <View style={[styles.child, { backgroundColor: 'thistle' }]}>
        <Text style={styles.text}>2</Text>
      </View>
      <View style={[styles.child, { backgroundColor: 'skyblue' }]}>
        <Text style={styles.text}>3</Text>
      </View>
      <View style={[styles.child, { backgroundColor: 'teal' }]}>
        <Text style={styles.text}>4</Text>
      </View>
    </SwiperFlatList>
  </View>
);

const { width } = Dimensions.get('window');

const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: 'white' },
  child: { width, justifyContent: 'center' },
  text: { fontSize: width * 0.5, textAlign: 'center' },
});

export default App;

Example project with Detox tests

Code example

To use react-native-gesture-handler instead of FlatList import the library like:

import { SwiperFlatListWithGestureHandler } from 'react-native-swiper-flatlist/WithGestureHandler';

Props

Prop	Default	Type	Description
data	not required if children is used	array	Data to use in renderItem
children	-	node	Children elements
renderItem	not required if children is used	FlatListProps<T>['renderItem']	Takes an item from data and renders it into the list
onMomentumScrollEnd	-	(item: { index: number }, event: any)	Called after scroll end and the first parameter is the current index
vertical	false	boolean	Show vertical swiper
index	0	number	Index to start
renderAll	false	boolean	Render all the items before display it
Pagination
showPagination	false	boolean	Show pagination
paginationDefaultColor	gray	string	Pagination color
paginationActiveColor	white	string	Pagination color
paginationStyle	{}	ViewStyle	Style object for the container
paginationStyleItem	{}	ViewStyle	Style object for the item (dot)
paginationStyleItemActive	{}	ViewStyle	Style object for the active item (dot)
paginationStyleItemInactive	{}	ViewStyle	Style object for the inactive item (dot)
onPaginationSelectedIndex	-	() => void	Executed when the user presses the pagination index, similar properties onChangeIndex
PaginationComponent	Component	node	Overwrite Pagination component
Autoplay
autoplay	false	boolean	Change index automatically
autoplayDelay	3	number	Delay between every page in seconds
autoplayLoop	false	boolean	Continue playing after reach end
autoplayLoopKeepAnimation	false	boolean	Show animation when reach the end of the list
autoplayInvertDirection	false	boolean	Invert auto play direction
disableGesture	false	boolean	Disable swipe gesture

More props

This is a wrapper around Flatlist, all their props works well and the inherited props too (from ScrollView and VirtualizedList)

Functions

Name	Type	Use
scrollToIndex	({ index: number, animated?: boolean}) => void	Scroll to the index
getCurrentIndex	() => number	Returns the current index
getPrevIndex	() => number	Returns the previous index
onChangeIndex	({ index: number, prevIndex: number}) => void	Executed every time the index change, the index change when the user reaches 60% of the next screen
goToFirstIndex	() => void	Go to the first index
goToLastIndex	() => void	Go to the last index

Right To Left

This library support RTL languages, when I18nManager.isRTL is true.

Limitations

• Vertical pagination is not supported on Android. Doc, that is way we have useReactNativeGestureHandler which is a workaround for this issue.

Author

Gustavo Gard

react-native-swiper-flatlist's Issues

How to add scroll in pagination

Let's say I have 20+ children for the swiper flatlist. How should I achieve scroll in pagination?

Cannot disable pagination taps

Unlike swiping interactions, pagination taps cannot be prevented from changing the index.

How to get previous and next index on scroll

onMomentumScrollEnd() provides only current index.

How to get previous and next index. It helps to complete some actions to previous index once swipe is initiated.

I have tried onMomentumScrollBegin(). The problem I face here is it gives the previous index wrongly if I scroll backward.
Example - ( Screen0 > Screen 1 > Screen 2)
If I scroll from Screen 0 -> 1 (I get index =0 )
If I scroll from Screen 1 -> 0 (I get index =0 )

Please let me know if it work

I ruled out all the problems and suspected that this component has performance issues.

When I was silent, I found that js and fps dropped once every time.

Pagination is not correct sometimes on devices

Pagination is not correct sometimes on devices the content offset /layout measurement gives a number slightly off a whole number, the easy solution to this is to use Math.round instead of Math.floor

Varying height on different children

It seems when you have children with differing heights the Swiper takes the height of the largest child, regardless of which index you are currently on. Any chance this can be changed so it takes the height of the current index instead?

[Question/Improvement] How to disable swipe gesture?

I will use this component to scroll a view programatically, but i want to prevent the user going to the next step with the swipe gesture, exists any way to disable?

If not, i can open a PR with this improvement?

Thanks.

After upgrading to RN 0.60 get error undefined is not an object(evaluating'_data.length')

After upgrade to RN 0.60 get this error

undefined is not an object(evaluating'_data.length')

How can I fix this?

Getting memory leak warning

Warning: Can't call setState (or forceUpdate) on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.%s,
in SwiperFlatList (at EventScreen.js:94)

This happens when switching screen away from where the swiperFlatList is used. Happens randomly.

I load data={} with a MobX observable array.

What are the tasks to cancel during unmount?

Doc question: how to use getCurrentIndex?

Hi,
I cannot find any notes on how to use getCurrentIndex function, any suggestions perhaps?

Tried:

<SwiperFlatList
            index={this.state.currentSlide}
            showPagination
            ref={(component) => {this._swiper = component}}
          >
            {this.state.slides}
</SwiperFlatList>

in order to access getCurrentIndex function in class method like

_getIndex = () => {
  let index = this._swiper.getCurrentIndex()
}

but after adding ref string my app stops to render at all.

My goal is to monitor current index to conditionally render Next/Previous arrows (like one asked in feature request)

react-native-camera not working in vertical swiper

Here is the code:-

<SwiperFlatList
  autoplayLoop={false}
  initialScrollIndex={this.state.startIndex}
  showPagination={false}
  vertical={true}
  onViewableItemsChanged={this.handleViewableItemsChanged}
  viewabilityConfig={this.viewabilityConfig}
  initialNumToRender={3}
>
  <View style={[styles.child, { backgroundColor: 'tomato' }]}>
    <Text style={styles.text}>Search</Text>
  </View>
  <View style={{flex: 1}}>
    {this.state.CameraFocus || <CameraComponent></CameraComponent>}
  </View>
  <View style={[styles.child, { backgroundColor: 'skyblue' }]}>
    <Text style={styles.text}>Memories</Text>
  </View>
</SwiperFlatList>

On load, the camera is working fine, able to catch stream from the camera, however, once I swipe somewhere either up or down, after that on coming back to the camera screen, the screen goes black i.e. camera not running

This is working fine with horizontal scroll. Let me know If I'm doing something wrong.

Wrong index warning

React Native version:

info 
  React Native Environment Info:
    System:
      OS: macOS 10.14.5
      CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
      Memory: 1.33 GB / 16.00 GB
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 11.7.0 - /usr/local/bin/node
      Yarn: 1.17.3 - /usr/local/bin/yarn
      npm: 6.9.0 - /usr/local/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 12.2, macOS 10.14, tvOS 12.2, watchOS 5.2
      Android SDK:
        API Levels: 22, 23, 25, 26, 27, 28
        Build Tools: 23.0.1, 25.0.0, 25.0.2, 25.0.3, 26.0.1, 26.0.2, 27.0.3, 28.0.3, 29.0.0, 29.0.0
        System Images: android-19 | Intel x86 Atom, android-19 | Google APIs ARM EABI v7a, android-19 | Google APIs Intel x86 Atom, android-22 | Google APIs Intel x86 Atom, android-22 | Google APIs Intel x86 Atom_64, android-26 | Google APIs Intel x86 Atom, android-28 | Google Play Intel x86 Atom
    IDEs:
      Android Studio: 3.3 AI-182.5107.16.33.5264788
      Xcode: 10.2.1/10E1001 - /usr/bin/xcodebuild
    npmPackages:
      react: ^16.8.3 => 16.8.6 
      react-native: ^0.59.10 => 0.59.10 
    npmGlobalPackages:
      create-react-native-app: 1.0.0
      react-native-cli: 2.0.1
      react-native-git-upgrade: 0.2.7

Steps To Reproduce

1. Swiping between Flatlist children quickly

Describe what you expected to happen:
The onChangeIndex function to be called with the correct index and prevIndex

Snack, code example, screenshot, or link to a repository:

    <SwiperFlatList
      index={swiperIndex}
      onChangeIndex={onSwipe}
      showPagination
      paginationDefaultColor="rgba(0,0,0,.2)"
      paginationActiveColor="#0057BA"
      paginationStyle={CSS.wallet.swiperPagination}
      paginationStyleItem={CSS.wallet.swiperDot}
      ref={c => {
        if (c) setSwiper(c)
      }}
    >
      {balances.map(bal => renderSwiperItem(bal))}
    </SwiperFlatList>

  onSwipe = ({ index, prevIndex }) => {
    const { balances, setCurrentCurrency, updateBalanceSwiperInfo } = this.props

    // if the current index and previous index are the same then it's first mount
    if (index === prevIndex) return

    if (balances[index] && balances[index].currency) {
      updateBalanceSwiperInfo({
        index,
        currency: balances[index].currency,
      })

      if (!_.has(balances[index], "for_currency")) {
        setCurrentCurrency(balances[index].currency)
      }
    }
  }

scrollToIndex freezes app state

this.refs.swiper._scrollToIndex(1) does work on (iOS) emulators but does not work on the devices (iPhone6 & Nexus5) themselves.

It seems to freeze the state of the whole app - allowing scrolling on the swiper, but react-navigation tab browser for example doesn't work anymore.

"react": "^16.3.2",
"react-native": "0.53.0",

Perhaps it could be my implementation as well

onchange feature

Hi there,
is there any way to detect when the index changes

Support for web

I really appreciate your work. Can you guys make this project support for web too

renderItem is rendering many times and bumping up

The renderItem function is rendering many times if you add SwiperFlatList inside a modal.

Replicate:

1. Create a modal
2. Add SwiperFlatList that uses renderItem function inside modal
3. Close and open the modal many times
4. Log the data being returned inside renderItem function

This will show you the issue, something is bumping up. When you open and close the modal 10 times, the renderItem function also returns 10 times.

Children Views, Percentage width not working.

I have to assign children elements in SwiperFlatlist width using Dimensions module. When I using percentages '100%', it doesn't works at all. Height with percentage works though.

Feature request: insert previous and next arrows

A good feature to add is the previous and next arrows like this:

Prop to change pagination size/style instead of replacing whole component

Exposing the style prop for the pagination component would also make the swiper-flatlist more modular overall.

SwiperFlatList with RefreshControl

Hi, can you confirm SwiperFlatList control not (yet) supports the refreshControl prop? Adding the following code does not give the ability to pull to refresh.

refreshControl={
    <RefreshControl
        colors={['#9Bd35A', '#689F38']}
        refreshing={fetching}
        onRefresh={this.refreshData}
        title="Pull to refresh"
        tintColor="#fff"
        titleColor="#fff"
    />
}

Broken on Android with React Native 0.57

Snap stopped working on RN 0.57 on Android devices

Android) video disappear when it is out of screen.

Video disappear when it is out of screen.
I want video not to disappear even though it is invisible

Invalid child context `virtualizedCell.cellKey` of type `number` supplied to `CellRenderer`, expected `string`.

It looks like in a recent ReactNative update, the virtualizedCell.cellKey should be string instead of number.

wonday/react-native-pdf#125
status-im/status-mobile#3387

More of the error:

Warning: Failed child context type: Invalid child context virtualizedCell.cellKey of type number supplied to CellRenderer, expected string.
in CellRenderer (at VirtualizedList.js:668)
in RCTScrollContentView (at ScrollView.js:793)
in RCTScrollView (at ScrollView.js:889)
in ScrollView (at VirtualizedList.js:998)
in VirtualizedList (at FlatList.js:640)
in FlatList (at index.js:200)
...

SwiperFlatList index>0,don't touch to next page

Hello! I found a bug

this code is work good.

  renderPage() {
    return (
      <View style={styles.container}>
        <SwiperFlatList  index={1} >
          <View style={[styles.child, { backgroundColor: 'tomato' }]}>
            <Text style={styles.text}>1</Text>
          </View>
          <View style={[styles.child, { backgroundColor: 'thistle' }]}>
            <Text style={styles.text}>2</Text>
          </View>
          <View style={[styles.child, { backgroundColor: 'skyblue' }]}>
            <Text style={styles.text}>3</Text>
          </View>
          <View style={[styles.child, { backgroundColor: 'teal' }]}>
            <Text style={styles.text}>4</Text>
          </View>
        </SwiperFlatList>
      </View>
    )
  }

but this code ,if index=0,work good,if index>0, don't touch to next page

  constructor(props) {
        super(props);

        const pages = [];
      for (let i = 0; i < 50; i++) {
        pages.push(i);
      }

      this.state = {
            data: pages
        };

    }



  renderPage() {
    return (
      <View style={styles.container}>
        <SwiperFlatList  index={1} >
          {this.state.data.map((p) => {
            return(
              <View key={"SwipeRender-slide#" +p} style={[styles.child, { backgroundColor: 'tomato' }]}>
            <Text style={styles.text}>{p}</Text>
          </View>
            )
          })}
        </SwiperFlatList>
      </View>
    )
  }

const styles = StyleSheet.create({
  viewPager: {
    flex: 1,
  },
  container: {
    flex: 1,
    backgroundColor: 'white',
  },
  child: {
    height: height * 0.5,
    width,
    justifyContent: 'center',
  },
  text: {
    fontSize: 28,
    textAlign: 'center',
  },
});

info Fetching system and libraries information...
System:
OS: Windows 10 10.0.18363
CPU: (8) x64 Intel(R) Core(TM) i5-8300H CPU @ 2.30GHz
Memory: 4.67 GB / 15.88 GB
Binaries:
Node: 12.16.1 - C:\Program Files\nodejs\node.EXE
Yarn: 1.13.0 - C:\Users\luoyahu\AppData\Roaming\npm\yarn.CMD
npm: 6.7.0 - C:\Program Files\nodejs\npm.CMD
Watchman: 4.9.4 - F:\tools\watchman\watchman.EXE
SDKs:
Android SDK:
API Levels: 21, 22, 23, 24, 25, 26, 27, 28, 29
Build Tools: 23.0.1, 23.0.2, 23.0.3, 24.0.0, 24.0.1, 24.0.2, 24.0.3, 25.0.0, 25.0.1, 25.0.2, 25.0.3, 26.0.0, 26.0.1, 26.0.2, 26.0.3, 27.0.0, 27.0.1, 27.0.2, 27.0.3, 28.0.0, 28.0.1, 28.0.2, 28.0.3, 29.0.0, 29.0.1, 29.0.2, 29.0.3
npmPackages:
react: 16.9.0 => 16.9.0
react-native: 0.61.5 => 0.61.5

The scroll speed on Android is too slow

Thanks for this awesome swiper flatlist,
I have tried the scroll of this plugin on both iOs and Android,
but I got a issue with scroll on Android, it is scroll slowly and also scroll to other items
Ex: we have 4 slides, we are in slide 1, tap the screen then swipe left, it's scroll slowly and take us to slide 4
Im using Android 8.1
Device: Xiaomi redmi 5 plus

Invariant Violation: scrollToIndex out of range: 1 vs 0

当banner图为一张时, 会出现异常报错

ExceptionsManager.js:65 Invariant Violation: scrollToIndex out of range: 1 vs 0

This error is located at:
    in SwiperFlatList (at Banner.js:72)
    in Banner (at Home.js:180)
    in RCTView (at View.js:113)
    in View (at Home.js:162)
    in RCTView (at View.js:113)
    in View (at VirtualizedList.js:630)
    in RCTView (at View.js:113)
    in View (at ScrollView.js:748)
    in RCTScrollView (at ScrollView.js:856)
    in ScrollView (at VirtualizedList.js:871)
    in VirtualizedList (at FlatList.js:622)
    in FlatList (at createAnimatedComponent.js:134)
    in AnimatedComponent (at ListPage.js:48)
    in Page (created by Connect(Page))
    in Connect(Page) (at SceneView.js:31)
    in SceneView (at TabView.js:82)
    in RCTView (at View.js:113)
    in View (at TabView.js:81)
    in RCTView (at View.js:113)
    in View (created by ViewPagerAndroid)
    in AndroidViewPager (at ViewPagerAndroid.android.js:238)
    in ViewPagerAndroid (at TabViewPagerAndroid.js:153)
    in TabViewPagerAndroid (at TabViewAnimated.js:77)
    in RCTView (at View.js:113)
    in View (at TabViewAnimated.js:252)
    in TabViewAnimated (at TabView.js:225)
    in TabView (at withCachedChildNavigation.js:66)
    in withCachedChildNavigation(TabView) (at TabNavigator.js:65)
    in Unknown (at createNavigator.js:52)
    in Navigator (at createNavigationContainer.js:216)
    in NavigationContainer (at SceneView.js:31)
    in SceneView (at CardStack.js:394)
    in RCTView (at View.js:113)
    in View (at CardStack.js:393)
    in RCTView (at View.js:113)
    in View (at CardStack.js:392)
    in RCTView (at View.js:113)
    in View (at createAnimatedComponent.js:134)
    in AnimatedComponent (at Card.js:26)
    in Card (at PointerEventsContainer.js:55)
    in Container (at CardStack.js:436)
    in RCTView (at View.js:113)
    in View (at CardStack.js:365)
    in RCTView (at View.js:113)
    in View (at CardStack.js:364)
    in CardStack (at CardStackTransitioner.js:97)
    in RCTView (at View.js:113)
    in View (at Transitioner.js:187)
    in Transitioner (at CardStackTransitioner.js:49)
    in CardStackTransitioner (at StackNavigator.js:60)
    in Unknown (at createNavigator.js:52)
    in Navigator (at createNavigationContainer.js:216)
    in NavigationContainer (at App.js:196)
    in RCTView (at View.js:113)
    in View (at App.js:195)
    in App (at CodePush.js:503)
    in CodePushComponent (created by Connect(CodePushComponent))
    in Connect(CodePushComponent) (at Root.js:16)
    in Provider (at Root.js:15)
    in Root (at AppRegistryInjection.js:68)
    in _class (at AppRegistryInjection.js:67)
    in RCTView (at View.js:113)
    in View (at AppRegistryInjection.js:66)
    in Root(PayApp) (at renderApplication.js:35)
    in RCTView (at View.js:113)
    in View (at AppContainer.js:102)
    in RCTView (at View.js:113)
    in View (at AppContainer.js:122)
    in AppContainer (at renderApplication.js:34)

I can not run example code folder.

Log
`➜ example git:(master) yarn
yarn install v1.22.10
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
warning "@react-native-community/eslint-config > [email protected]" has incorrect peer dependency "eslint@^3.0.0 || ^4.0.0 || ^5.0.0".
warning "@react-native-community/eslint-config > [email protected]" has incorrect peer dependency "eslint@^3.17.0 || ^4 || ^5".
[4/4] 🔨 Building fresh packages...
[-/5] ⠈ waiting...
[-/5] ⠈ waiting...
[-/5] ⠈ waiting...
[5/5] ⠈ detox
error /Users/truongnguyen/Desktop/react-native-swiper-flatlist/example/node_modules/detox: Command failed.
Exit code: 1
Command: node scripts/postinstall.js
Arguments:
Directory: /Users/truongnguyen/Desktop/react-native-swiper-flatlist/example/node_modules/detox
Output:

• xcodebuild -version
  +++ dirname /Users/truongnguyen/Desktop/react-native-swiper-flatlist/example/node_modules/detox/scripts/build_framework.ios.sh
  ++ dirname /Users/truongnguyen/Desktop/react-native-swiper-flatlist/example/node_modules/detox/scripts
• detoxRootPath=/Users/truongnguyen/Desktop/react-native-swiper-flatlist/example/node_modules/detox
  ++ node -p 'require('''/Users/truongnguyen/Desktop/react-native-swiper-flatlist/example/node_modules/detox/package.json''').version'
• detoxVersion=14.0.1
  ++ echo 14.0.1
  ++ xcodebuild -version
  ++ shasum
  ++ awk '{print $1}'
• sha1=098ecae8afed136365baf4240ed3994873fecc52
• detoxFrameworkDirPath=/Users/truongnguyen/Library/Detox/ios/098ecae8afed136365baf4240ed3994873fecc52
• detoxFrameworkPath=/Users/truongnguyen/Library/Detox/ios/098ecae8afed136365baf4240ed3994873fecc52/Detox.framework
• main
• '[' -d /Users/truongnguyen/Library/Detox/ios/098ecae8afed136365baf4240ed3994873fecc52 ']'
• '[' '!' -d /Users/truongnguyen/Library/Detox/ios/098ecae8afed136365baf4240ed3994873fecc52/Detox.framework ']'
• echo '/Users/truongnguyen/Library/Detox/ios/098ecae8afed136365baf4240ed3994873fecc52 was found, but could not find Detox.framework inside it. This means that the Detox framework build process was interrupted.
  deleting /Users/truongnguyen/Library/Detox/ios/098ecae8afed136365baf4240ed3994873fecc52 and trying to rebuild.'
• rm -rf /Users/truongnguyen/Library/Detox/ios/098ecae8afed136365baf4240ed3994873fecc52
  /Users/truongnguyen/Library/Detox/ios/098ecae8afed136365baf4240ed3994873fecc52 was found, but could not find Detox.framework inside it. This means that the Detox framework build process was interrupted.
  deleting /Users/truongnguyen/Library/Detox/ios/098ecae8afed136365baf4240ed3994873fecc52 and trying to rebuild.
• prepareAndBuildFramework
• '[' -d /Users/truongnguyen/Desktop/react-native-swiper-flatlist/example/node_modules/detox/ios ']'
• detoxSourcePath=/Users/truongnguyen/Desktop/react-native-swiper-flatlist/example/node_modules/detox/ios_src
• extractSources /Users/truongnguyen/Desktop/react-native-swiper-flatlist/example/node_modules/detox/ios_src
• detoxSourcePath=/Users/truongnguyen/Desktop/react-native-swiper-flatlist/example/node_modules/detox/ios_src
• echo 'Extracting Detox sources...'
  Extracting Detox sources...
• mkdir -p /Users/truongnguyen/Desktop/react-native-swiper-flatlist/example/node_modules/detox/ios_src
• tar -xjf /Users/truongnguyen/Desktop/react-native-swiper-flatlist/example/node_modules/detox/Detox-ios-src.tbz -C /Users/truongnguyen/Desktop/react-native-swiper-flatlist/example/node_modules/detox/ios_src
• buildFramework /Users/truongnguyen/Desktop/react-native-swiper-flatlist/example/node_modules/detox/ios_src
• detoxSourcePath=/Users/truongnguyen/Desktop/react-native-swiper-flatlist/example/node_modules/detox/ios_src
• echo 'Building Detox.framework from /Users/truongnguyen/Desktop/react-native-swiper-flatlist/example/node_modules/detox/ios_src...'
• mkdir -p /Users/truongnguyen/Library/Detox/ios/098ecae8afed136365baf4240ed3994873fecc52
  Building Detox.framework from /Users/truongnguyen/Desktop/react-native-swiper-flatlist/example/node_modules/detox/ios_src...
• /Users/truongnguyen/Desktop/react-native-swiper-flatlist/example/node_modules/detox/scripts/build_universal_framework.sh /Users/truongnguyen/Desktop/react-native-swiper-flatlist/example/node_modules/detox/ios_src/Detox.xcodeproj /Users/truongnguyen/Library/Detox/ios/098ecae8afed136365baf4240ed3994873fecc52
  child_process.js:637
  throw err;
  ^

Error: Command failed: /Users/truongnguyen/Desktop/react-native-swiper-flatlist/example/node_modules/detox/scripts/build_framework.ios.sh
at checkExecSyncError (child_process.js:616:11)
at Object.execFileSync (child_process.js:634:15)
at Object. (/Users/truongnguyen/Desktop/react-native-swiper-flatlist/example/node_modules/detox/scripts/postinstall.js:2:27)
at Module._compile (internal/modules/cjs/loader.js:1063:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
at Module.load (internal/modules/cjs/loader.js:928:32)
at Function.Module._load (internal/modules/cjs/loader.js:769:14)
at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12)
at internal/main/run_main_module.js:17:47 {
status: 65,
signal: null,
output: [ null, null, null ],
pid: 18905,`

React Native version:

Steps To Reproduce

1. clone this project
2. cd example, yarn, -> yarn fail

Describe what you expected to happen:
I do not know what happens. Why yarn fail??

Swiping only works with teh first index

React Native version:

Steps To Reproduce

`import React, { useState ,useEffect} from "react";
import { View, StyleSheet, Dimensions, Image } from "react-native";
import { useSelector } from "react-redux";
import { Text } from "galio-framework";
import { GlobalStyles } from "../styles/global";
import Icon from "react-native-vector-icons/FontAwesome";
import { NavBar, Card } from "galio-framework";
import { DrawerActions } from "react-navigation-drawer";
import { format } from "date-fns";
import SwiperFlatList from "react-native-swiper-flatlist";
import NewsDetailsItems from "../components/newsDetailsItem/index";
const NewsDetailsScreen = props => {
const news = useSelector(state => state.News);

const newsId = props.navigation.getParam("id");
const selectedIndex = news.findIndex(elm => elm._id == newsId);

return (

<NavBar
title="Latest News"
transparent={true}
titleStyle={styles.titleStyle}
left={
<Icon
name="bars"
style={{
fontSize: 20,
color: "white"
}}
onPress={() => {
props.navigation.dispatch(DrawerActions.toggleDrawer());
}}
/>
}
right={
<Icon
name="heart"
style={{
fontSize: 20,
color: "white"
}}
onPress={() => {
props.navigation.dispatch(DrawerActions.toggleDrawer());
}}
/>
}
/>
<SwiperFlatList

    index={selectedIndex}
    data={news}
    renderItem={({ item }) => {
      return (

        <NewsDetailsItems item={item} />
     
      );
    }}
  />
</View>

);
};`

Describe what you expected to happen:

Snack, code example, screenshot, or link to a repository:

index prop doesn't go further than 10

I have a react-native-swiper-flatlist with a lot of children,
If I set the prop index to anything larger than 10 it just stays at the first slide...
Same with scrollToIndex method

Changing orientation is not supporting.

if i load some image swiper in vertical mode and i rotate my screen its not auto adjusting for landscape mode. its still taking portrait height and width.

Question: how to change the dots size on the pagination bar

The pagination dots are too big on some device.
Is there anyone who can provide an example of how to use the paginationStyle and the paginationStyleItem attributes to resize the dots ?
Thank you in advance.

Swipe sensitive

i have some swiping items in page, is it possible to make a slider bite little less sensitive? or change the region of swiping?

Getting Invariant Violations: scrollToIndex out of range: requested index NaN but maximum is 2

I'm getting the error at the title only on android.

React Native version: 0.59.8
react-native-swiper-flatlist version: ^2.0.3

Steps To Reproduce

Here is my wrapper component for FlatlistSwipper:

import React, {PureComponent} from 'react';
import {StyleSheet, Dimensions, TouchableOpacity} from 'react-native';
import SwiperFlatList from 'react-native-swiper-flatlist';
import PropTypes from 'prop-types';
import ProgressiveImage from '../ProgressiveImage';

const {width} = Dimensions.get('window');

export default class ImageSlider extends PureComponent {
  static propTypes = {
    images: PropTypes.arrayOf(PropTypes.string.isRequired).isRequired,
    imageStyle: PropTypes.oneOfType([
      PropTypes.object,
      PropTypes.arrayOf([PropTypes.object]),
    ]),
    onPresses: PropTypes.arrayOf(PropTypes.func).isRequired,
    ...SwiperFlatList.propTypes,
  };

  renderImage = uri => {
    const {imageStyle} = this.props;

    return (
      <ProgressiveImage
        resizeMode="cover"
        style={imageStyle || styles.image}
        uri={uri}
      />
    );
  };

  renderImageContainer = (uri, index) => {
    const {onPresses} = this.props;

    return (
      <TouchableOpacity key={uri} onPress={onPresses[index]}>
        {this.renderImage(uri)}
      </TouchableOpacity>
    );
  };

  render() {
    const {images, imageStyle, onPresses, ...props} = this.props;

    return (
      <SwiperFlatList
        autoplay
        autoplayDelay={2}
        autoplayLoop
        showPagination
        index={0}
        {...props}>
        {images.map((image, index) => this.renderImageContainer(image, index))}
      </SwiperFlatList>
    );
  }
}

const styles = StyleSheet.create({
  image: {
    width: width - 10,
    height: ((width - 10) * 200) / 700,
    borderRadius: 15,
    resizeMode: 'stretch',
  },
  slider: {
    backgroundColor: 'rgba(0,0,0,0)',
    width: width - 10,
    marginVertical: 3,
  },
});

and here is how I use my wrapper component:

renderFirstSliders = () => {
    const {firstSliders, isFetchingSliders} = this.props;

    const imagesSliders = firstSliders.map(item => {
      return `${IMAGES_BASE_URL}slider/resized/${item.image}`;
    });

    const onPresses = firstSliders.map(item => () =>
      this.clickingBannerOrSliderHandler(item),
    );

    return isFetchingSliders ? (
      <Spinner />
    ) : (
      <ImageSlider
        images={imagesSliders}
        onPresses={onPresses}
        autoplayDelay={3}
      />
    );
  };

renderSecondSliders = () => {
    const {secondSliders, isFetchingSliders} = this.props;

    const imagesSliders = secondSliders.map(item => {
      return `${IMAGES_BASE_URL}slider/resized/${item.image}`;
    });

    const onPresses = secondSliders.map(item => () =>
      this.clickingBannerOrSliderHandler(item),
    );

    return isFetchingSliders ? (
      <Spinner />
    ) : (
      <ImageSlider
        images={imagesSliders}
        onPresses={onPresses}
        autoplayDelay={5}
      />
    );
  };

I render 2 instances of my wrapper component. I do not know whether this is a source of a problem or not.

How can I scroll to particular index using ref

I have list objects in data. I want to jump to particular index item.

Unable to modify Pagination size and style

The component is very good, thank you open source

How do functions work?

Hello,
Thanks for this awesome project! However, I can't figure out how the functions work because there's no documentation on it.

Suppose I have this simple swiper component:

<View style={styles.content}>
        <SwiperFlatList
          removeClippedSubviews={true}
          initialNumToRender={1}
          data={data}
          autoplay={false}
          autoplayDelay={2}
          autoplayLoop={false}
          // index={2}
          showPagination={false}
          renderItem={({ item, index }) => {
            return (
              <View style={{ width: Dimensions.get("screen").width }}>
                <Text>hello</Text>
                <Button
                  title="next"
                  onPress={() => {
                    //go to next item
                  }}
                ></Button>
              </View>
            );
          }}
        />
      </View>

How do I use a function like scrollToIndex (or getCurrentIndex) on the button to work? If I missed some documentation please point me in the right direction. Thanks!

onChangeIndex

onChangeText always same value for index and prevIndex and this value not change when user swipe

it's my code below

const HomeController = () => {

    const listRef = useRef(null);
 

    const _onChangeIndex=(item)=>{
        let current = listRef.current.getCurrentIndex();
        let prev = listRef.current.getPrevIndex();
        if(__DEV__){
            console.log('item is : ',item);
            console.log('current page is : ',current);
            console.log('prev page is : ',prev);
        }
    };

    const _renderItem = ({item}) => {
        return (
            <Scroll>
                <CenterView style={[{height: pageHeight, width: pageWidth}, item % 2 === 0 ? s.bg_info : s.bg_warning]}>
                    <Text>
                        {item}
                    </Text>
                </CenterView>
                {/*<Text style={[s.h1]}>*/}
                {/*    footer {item}*/}
                {/*</Text>*/}
            </Scroll>
        );
    };
    return (
        <Container>
            <SwiperFlatList
                ref={listRef}
                data={[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34]}
                renderItem={_renderItem}
                renderAll={true}
                onChangeIndex={_onChangeIndex}
            />
        </Container>
    );
};

Contrary to documentation, onPaginationSelectedIndex() does not have any parameters

react-native-swiper-flatlist/src/components/Pagination/Pagination.tsx

Line 33 in c83ee31

onPaginationSelectedIndex?: () => void;

Horizontal flat list is not working properly.

When I try to click change photo by on click on pagination dot of my horizontal flat list, It does not work properly and keep some offset.

<SwiperFlatList
          horizontal
          removeClippedSubviews
          pagingEnabled
          showPagination
          keyExtractor={this._keyExtractor}
          index={this.state.items.id}
          renderItem={({item}) => <Component onPressItem={() => this.onPressItem(item)} data={item} />}
          data={this.state.items}
          getItemLayout={this.getItemLayout}
          onViewableItemsChanged={this.onViewableItemsChanged.bind(this)}
        /> 

Typescript support

Hi,
Any plans to add typescript definitions for the library.

How to loop the swiper

For example, i have 3 items within the swiper, at reaching the third item, the swiper stops as default. I want to keep swiping back to the first item when it reaches the end (Right swipe will loop the swiper again rather than swiping left to return to previous items).

May i know is there any props supporting this feature?

feature request: set swipe treshold

there is a needed property like swipeTreshold=[NUM] to control the swipe gesture range.
at the moment, I am using horizontal swiper and in Samsung Galaxy S8 with Android 9.0 and a few swipes in diameter or with any little angles from the vertical line, it swipes to next item but it should scroll to down.

styles for paginationActive

React Native version:

Steps To Reproduce

Describe what you expected to happen:

Snack, code example, screenshot, or link to a repository:

SwiperFlatList autoplay is not working properly in Android.

Here is my code
<SwiperFlatList autoplayDelay={2.5} index={1} autoplay autoplayLoop removeClippedSubviews > </SwiperFlatList>
thanks in advance.

Feature Request: priorotize loading current index

Would it be possible to make the swiper priorotize first loading the item that is on current starting index provided in props, followed by loading adjacent ones?

I think this would greatly enhance user experience for most people.

My items in the swiper are pretty hefty components with many subparts so they take some time to load..

I'm not sure how easy this would be to do, but it would most definitely be helpful I think.

Proposal: Add an extra option to modify style of the active pagination item

What problem are we trying to solve?

Upon integrating react-native-swiper-flatlist into an existing React Native project we needed a way to differentiate between an active option (dot) and inactive ones and apply different styling to each of them.

Why should we solve it?

While we appreciate that other apps might not need or even require this particular option, its addition would allow for more control over the styling of pagination options, both active and inactive.

How do we propose to solve it?

We already have a patch file that adds this option to the js layer.
A further change would be to update documentation to detail this change.

What could go wrong?

This option would default to the main paginationStyleItem which would closely match current expected behaviour.

One child only crashes

If the number of children are two or more, everything works as expected.
If you define just on child though, then it causes the following error:

Invariant violation: Tried to get frame from out of range index NaN

Autoplay is very fast in android

Autoplay in android is very fast on Android even if there is 5 second delay added. Here is my code:

<SwiperFlatList
    autoplay
    autoplayLoop
    autoplayDelay={5}
    showPagination
    paginationActiveColor="black"
    paginationStyleItem={{ width: 10, height: 10, marginHorizontal: 5 }}>
    <View style={styles.child}>
        <Image source={{ uri: 'https://app.tutiixx.com/wp-content/uploads/2018/12/tshirt-banner.jpg' }} style={{ width: null, height: null, flex: 1 }} />
    </View>
    <View style={styles.child}>
        <Image source={{ uri: 'https://s3.envato.com/files/216320406/BEE-1797-Fashion%20Sale%20Banners_01_Preview3.jpg' }} style={{ width: null, height: null, flex: 1 }} />
    </View>
    <View style={styles.child}>
        <Image source={{ uri: 'https://s3.envato.com/files/168119903/BEE-1096-Fashion%20Banners_01_preview4.jpg' }} style={{ width: null, height: null, flex: 1 }} />
    </View>
</SwiperFlatList>

Style

const { width, height } = Dimensions.get('window');
const styles = StyleSheet.create({
    child: {
        height: width * 0.60,
        width,
        justifyContent: 'center'
    }
});

Doesn't work in ScrollView

I have a extremely long page and would like to use this swipper at the top of the page. Since it's a long page it requires ScrollView. If I use scrollview as the wrapper for the screen, images doesn't render, not even the background color (e.g. white). If i use View component instead of scrollview, images will render.

Is there any expert with work around to using this in ScrollView?

Invariant Violation: scrollToIndex out of range: requested index Nan but maximum is 2

Hello,

When I want to distribute my data from my firebase database to my React Native mobile application in the form of a carousel with SwiperFlatList, an error is displayed each time my class is updated, showing me as follows: "Invariant violation: scrolltoindex out of range: requested Nan but maximum is 2." By hiding the error the carousel works well but it can be very annoying and cause problems during its build.

Here are my codes:

My Render function :

renderPost=post=>{
   
        return(
        <View style={styles.card}>
            <HorizontalCard title={post.title_new} desc={post.text} img={post.image} />
        </View>
        )
      
      } 

HorizontalCard Component :

export default class HorizontalCard extends Component {
  constructor(props) {
    super(props);
  }

  static propTypes = {
    screen: PropTypes.string,
    title: PropTypes.string,
    desc: PropTypes.string,
    img: PropTypes.string,
  };

  state = {
    modalVisible: false,
  };

  setModalVisible(visible) {
    this.setState({modalVisible: visible});
  }
  render() {
     return (
       <View style={{flex: 1}}>
       <TouchableOpacity
      onPress={() => {
        this.setModalVisible(true);
      }}
      style={styles.container}>
      <Modal
      animationType="slide"
      transparent={false}
      visible={this.state.modalVisible}
      onRequestClose={() => {
        alert('Modal has been closed.');
      }}>
      <View style={{marginTop: 22}}>
        <View>
          <Text>{this.props.desc}</Text>

          <Button
          title="Fermer la fenêtre"
            onPress={() => {
              this.setModalVisible(!this.state.modalVisible);
            }} />

        </View>
      </View>
    </Modal>
      <View style={styles.card_discord}>
        <Image style={styles.card_discord_img} source={{ uri: this.props.img }} />
        <LinearGradient
          start={[1.0, 0.5]}
          end={[0.0, 0.5]}
          colors={['rgba(51, 51, 51, 0.2)', '#333333', '#333333']}
          style={styles.FadeAway}>
          <View style={styles.FadeAway}>
            <Text h4 style={styles.FadeAway_h2}>
              {this.props.title}
            </Text>
            <Text style={styles.FadeAway_p}>{this.props.desc}</Text>
          </View>
        </LinearGradient>
      </View>
    </TouchableOpacity>
       </View>
        
  );
  }
 
}

My HomeScreen component (page where the error appears) :

export default class HomeScreen extends Component {
    constructor(props) {
        super(props);
        this.ref =  Fire.shared.firestore.collection('posts')
        this.useref=
        this.state={
            dataSource : [],
        }
    }

      feedPosts = (postSnapShot) =>{
        const post = [];
        postSnapShot.forEach((doc) => {
        const {uid,text,timestamp,title_new,image} = doc.data();
        const data=Fire.shared.firestore
        .collection('users')
        .doc(uid)
        .get()
        .then(doc=>{
          post.push({ 
            text,
            timestamp,
            title_new,
            image,
            uid,
          })
          this.setState({
            dataSource : post,
          });
        }) 
        });
      }

      renderPost=post=>{
   
        return(
        <View style={styles.card}>
            <HorizontalCard title={post.title_new} desc={post.text} img={post.image} />
        </View>
        )
      
      } 
    render() {
        return (
            <ThemeProvider>
                <ScrollView>
                             <SwiperFlatList
                                autoplay
                                autoplayDelay={5}
                                index={0}
                                autoplayLoop
                                autoplayInvertDirection
                                data={this.state.dataSource}
                                renderItem={({item})=>this.renderPost(item)}         
                            />
                          ...
                <ScrollView>
            </ThemeProvider>
        )
    }
}