ScrollToIndex out of range:

[augini]

Invariant Violation: scrollToIndex out of range: requested index 4 but maximum is 3

I am having this issue just by installing the package and navigating to another screen with react navigation 5.

This issue does not happen if autoscroll is set to FALSE and this issue is only happening on ANDROID. IOS is working fine

STEPS TO REPRODUCE:

Install the library and use it as shown in the sample

MY HOME Component

import React from 'react';
import {StyleSheet, View} from 'react-native';
import {colors, height, images, width} from '../config/globalStyles';
import Screen from '../components/Screen';
import useAuth from '../hooks/useAuth';

import {FlatListSlider} from 'react-native-flatlist-slider';

const imagesTOP = [
{
image:
'https://images.unsplash.com/photo-1567226475328-9d6baaf565cf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=60',
desc: 'Silent Waters in the mountains in midst of Himilayas',
},
{
image:
'https://images.unsplash.com/photo-1455620611406-966ca6889d80?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1130&q=80',
desc:
'Red fort in India New Delhi is a magnificient masterpeiece of humans',
},
];
const HomeScreen = ({navigation}) => {
const {user} = useAuth();

return (

  <View style={styles.carousel}>

    <FlatListSlider data={imagesTOP} autoscroll />

  </View>

</Screen>

);
};

const styles = StyleSheet.create({
container: {
marginLeft: width * 20,
},
carousel: {
marginTop: height * 35,
marginBottom: height * 30,
marginRight: 12,
},
});

export default HomeScreen;

[KPS250]

@augini can you refresh this if you are in debug mode and then retry?

[augini]

@augini can you refresh this if you are in debug mode and then retry?

I think it was not on a debug mode. Anyways, what I have decided is to loop = {false}. When I use that, it does not return the error but after like 5 or 6 minutes, it gives an errors about the excessive number of returns that is quite bearable and ignorable.
For those who are facing the same issue, you can turn off loop for a while until the issue gets resolved.

Thanks.

[pclacs]

Using very similar configuration, I have found that if I swipe left on the image, when I get to the last image in the data and then swipe left I get index set to one beyond the last index of the data as reported in
currentIndexCallback = { index => console.log("index is ", index) }
My guess is that the index is not being ranged checked and so it going beyond the data length

[augini]

Using very similar configuration, I have found that if I swipe left on the image, when I get to the last image in the data and then swipe left I get index set to one beyond the last index of the data as reported in
currentIndexCallback = { index => console.log("index is ", index) }
My guess is that the index is not being ranged checked and so it going beyond the data length

What kind of error are you facing?

Yes, the index misconfiguration also causing the mis behavior when the loop prop is true. If I slide the images when the loop prop is set to true, the image slides back in a second.

[pclacs]

What kind of error are you facing?

I am avoiding an error by checking if the index value returned is to large (i.e. greater than the (length of the data - 1) but I should not have to do this as it should o out of bounds. I discovered it because I was displaying some information from the data[index] and this crashed the app.

[learner0811]

Seem like onViewableItemsChanged function is not working as expected. It's getting called multiple time in one swipe.

[augini]

What kind of error are you facing?

I am avoiding an error by checking if the index value returned is to large (i.e. greater than the (length of the data - 1) but I should not have to do this as it should o out of bounds. I discovered it because I was displaying some information from the data[index] and this crashed the app.

I tried to fix that and facing similar issues as you.Probably, the owner needs to fix his logic in those places.

[madhanfz]

Invariant Violation: scrollToIndex out of range: requested index 4 but maximum is 3

I am having this issue just by installing the package and navigating to another screen with react navigation 5.

This issue does not happen if autoscroll is set to FALSE and this issue is only happening on ANDROID. IOS is working fine

STEPS TO REPRODUCE:

Install the library and use it as shown in the sample

MY HOME Component

import React from 'react';
import {StyleSheet, View} from 'react-native';
import {colors, height, images, width} from '../config/globalStyles';
import Screen from '../components/Screen';
import useAuth from '../hooks/useAuth';

import {FlatListSlider} from 'react-native-flatlist-slider';

const imagesTOP = [
{
image:
'https://images.unsplash.com/photo-1567226475328-9d6baaf565cf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=60',
desc: 'Silent Waters in the mountains in midst of Himilayas',
},
{
image:
'https://images.unsplash.com/photo-1455620611406-966ca6889d80?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1130&q=80',
desc:
'Red fort in India New Delhi is a magnificient masterpeiece of humans',
},
];
const HomeScreen = ({navigation}) => {
const {user} = useAuth();

return (

  <View style={styles.carousel}>

    <FlatListSlider data={imagesTOP} autoscroll />

  </View>

</Screen>

);
};

const styles = StyleSheet.create({
container: {
marginLeft: width * 20,
},
carousel: {
marginTop: height * 35,
marginBottom: height * 30,
marginRight: 12,
},
});

export default HomeScreen;

i resolved this issue by changing the function changeSliderListIndex . we have to reset the index. please refer below it will work

changeSliderListIndex = () => {
if (this.props.animation) {
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeIn);
}
if (this.state.index < this.state.data.length-1) {
this.setState({ index: this.state.index + 1 });
}else{
this.setState({index:0})
}

this.slider.current.scrollToIndex({
  index: this.state.index,
  animated: true,
});

};

[adilijaz]

Hy! I'm facing the same error can you guide me how to solve it. I'm using functional components. The given solution I try in my code but I think I'm doing something wrong where I get the animation? where to create and call this changeSliderListIndex function and where to slider.ref.... .

`

import { FlatListSlider } from "react-native-flatlist-slider";

const Preview = ({
item,
onPress,
index,
}) => {

return(
    <TouchableOpacity
  style={[styles.videoContainer,{
      marginLeft:index == 0 ? wp('2'): 0,
  }]}

 >
  <View style={[styles.imageContainer, styles.shadow]}>
    <Image
      style={{height:hp('22'), width:wp('90'), borderRadius:10,}}
      source={{uri:media+item.banner}}
          resizeMode="contain"
    />
  </View>
 
</TouchableOpacity>
)

}

const SliderCarouselFlat = () => {
const [banners, setBanners] = useState([])
const [index, setIndex] = useState(0)
const slider = useRef()

useEffect(()=>{
getBanners()
changeSliderListIndex()
},[])

const changeSliderListIndex = () => {
if ({animation}) { //can't find variable animation
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeIn);
}
if (index < banners.length-1) {
setIndex( index + 1)
}else{
setIndex(0)
}
}
// API CALL
const getBanners =async () =>{
try{
const {data} =await getBannersApi()
setBanners(data)
}catch(e){
console.log(e)
}
}

return (

{/* SLider */}

 <View>
  <FlatListSlider
    ref={slider}
    data={banners}
    height={200}
    timer={5000}
    keyExtractor={item => item.key.toString()}
    onPress={item => alert(JSON.stringify(item))}
    component={<Preview/>}
    indicatorContainerStyle={{position:'absolute', bottom: 20}}
    indicatorActiveColor={'#ffffff'}
    indicatorInActiveColor={'#ffffff80'}
    loop={false}
    animation
  />
  </View> 
</View>

);
};
const styles = StyleSheet.create({
container: {
flexGrow: 1,
},
videoContainer:{
marginHorizontal:hp('1'),
}

});

export default SliderCarouselFlat;

`