gusgard / react-native-swiper-flatlist Goto Github PK

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.

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.

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

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

After upgrade to RN 0.60 get this error

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

How can I fix this?

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?

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

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)
...

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

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

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

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

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.

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.

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

React Native version:

Steps To Reproduce

Describe what you expected to happen:

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

Snap stopped working on RN 0.57 on Android devices

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

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?

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??

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

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)}
        /> 

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

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.

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"
    />
}

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

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

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

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)
      }
    }
  }

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!

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.

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'
    }
});

The component is very good, thank you open source

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>
    );
};

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

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)

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

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

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.

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

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:

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.

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?

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.

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

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?

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.

当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)

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>
        )
    }
}