Changing orientation is not supporting. about react-native-swiper-flatlist

[luisfuertes]

My solution changing key and with same index

  const [swiperIndex, setSwiperIndex] = useState(initialIndex)
  const [swiperLayout, setSwiperLayout] = useState({ height: 0, width: 0 })

  const onLayout = useCallback(e => {
    setSwiperLayout(e.nativeEvent.layout)
  }, [])

  return (
    <View style={styles.swiperContainer} onLayout={onLayout}>
        <SwiperFlatList
          key={`swipper-${swiperLayout.width}`}
          index={swiperIndex}
          onChangeIndex={({ index }) => setSwiperIndex(index)}
        >
          <View style={{ width: swiperLayout.width }}>
         </View>

[expouic]

same issue!

Look my solution. Add listener on device changes and update this values on render.

//Example class
export default class myComponent extends React.Component {
// scroll view reference
swipeRef: SwiperFlatList | null = null;

constructor(props) {
   super(props);
   this.state = {
      currentIndex: 0,
      dim: Dimensions.get('window'),
   }

    // bind component events
    this.onOrientationScreenChange = this.onOrientationScreenChange.bind(this);
  }

  componentDidMount() {
    // listening device dimensions change
    Dimensions.addEventListener('change', this.onOrientationScreenChange);

    //load initial state value
    this.onOrientationScreenChange();
  }
  
  componentWillUnmount() {
    // remove listening device dimensions changes
    Dimensions.removeEventListener('change', this.onOrientationScreenChange);
  }

 /**
   * Set changes on screen orientation changes
   */
  onOrientationScreenChange(): void {
    //Update number of columns for library render
    this.setState({
      dim: Dimensions.get('window'),
    });

    //Move swiper to initial position
    this.swipeRef.scrollToIndex({index: 0, animated: true});
  }

 render() {
    const {dim} = this.state;
    return (
          <SwiperFlatList 
            ref={instance => (this.swipeRef = instance)}
            index={0} 
            showPagination 
            onMomentumScrollEnd={elem => {this.setState({currentIndex: elem.index})}}
            >
                <View style={{width: dim.width , height: dim.height}}>
             <View style={{ backgroundColor: 'tomato', width: dim.width , height: dim.height}}>
            <Text style={styles.text}>1</Text>
          </View>
          <View style={ { backgroundColor: 'thistle', width: dim.width , height: dim.height}}>
            <Text style={styles.text}>2</Text>
          </View>
          <View style={ { backgroundColor: 'skyblue', width: dim.width , height: dim.height}}>
            <Text style={styles.text}>3</Text>
          </View>
          <View style={ { backgroundColor: 'teal', width: dim.width , height: dim.height }}>
            <Text style={styles.text}>4</Text>
          </View>
            </SwiperFlatList>
    );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white'
  },
  text: {
    fontSize: 20,
    textAlign: 'center'
  }
});

[freudibili]

same issue!

Look my solution. Add listener on device changes and update this values on render.

//Example class
export default class myComponent extends React.Component {
// scroll view reference
swipeRef: SwiperFlatList | null = null;

constructor(props) {
   super(props);
   this.state = {
      currentIndex: 0,
      dim: Dimensions.get('window'),
   }

    // bind component events
    this.onOrientationScreenChange = this.onOrientationScreenChange.bind(this);
  }

  componentDidMount() {
    // listening device dimensions change
    Dimensions.addEventListener('change', this.onOrientationScreenChange);

    //load initial state value
    this.onOrientationScreenChange();
  }
  
  componentWillUnmount() {
    // remove listening device dimensions changes
    Dimensions.removeEventListener('change', this.onOrientationScreenChange);
  }

 /**
   * Set changes on screen orientation changes
   */
  onOrientationScreenChange(): void {
    //Update number of columns for library render
    this.setState({
      dim: Dimensions.get('window'),
    });

    //Move swiper to initial position
    this.swipeRef.scrollToIndex({index: 0, animated: true});
  }

 render() {
    const {dim} = this.state;
    return (
          <SwiperFlatList 
            ref={instance => (this.swipeRef = instance)}
            index={0} 
            showPagination 
            onMomentumScrollEnd={elem => {this.setState({currentIndex: elem.index})}}
            >
                <View style={{width: dim.width , height: dim.height}}>
             <View style={{ backgroundColor: 'tomato', width: dim.width , height: dim.height}}>
            <Text style={styles.text}>1</Text>
          </View>
          <View style={ { backgroundColor: 'thistle', width: dim.width , height: dim.height}}>
            <Text style={styles.text}>2</Text>
          </View>
          <View style={ { backgroundColor: 'skyblue', width: dim.width , height: dim.height}}>
            <Text style={styles.text}>3</Text>
          </View>
          <View style={ { backgroundColor: 'teal', width: dim.width , height: dim.height }}>
            <Text style={styles.text}>4</Text>
          </View>
            </SwiperFlatList>
    );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white'
  },
  text: {
    fontSize: 20,
    textAlign: 'center'
  }
});

I added the same workaround and it worked but I didnt tought of moving swiper to initial position. Thank you for the tips.

Another solution is to have a key with the new width to force rerender of your component
<SwiperFlatList key={getResponsiveWidth()} index={0} ref={(ref: any) => { swiperFlatListRef = ref }} showPagination={false} disableGesture={true}>