Swiper not working on Android but perfectly in iOS

[pablo4lvarez]

Environment

react@18.2.0 react-native@0.72.4 react-native-pager-view@6.2.1

Description

My component works perfectly on iOS, the swiper and all. But in android i can't perform a swipe... Maybe is because of how android manages the View components? but not sure at all. It will be very helpful if someone understands the issue, or the essentials differences between android and iOS in the use of this component 🙏

Reproducible Demo

This is the code of the component:

import React, { useState } from 'react';
import { View, StyleSheet, Text, Dimensions, Image } from 'react-native';
import PagerView from 'react-native-pager-view';

import { useAppDispatch, useAppSelector } from '~/store';

const SCREEN_WIDTH = Dimensions.get('window').width;
const SCREEN_HEIGHT = Dimensions.get('window').height;

const MedalsiOS = () => {
  const dispatch = useAppDispatch();
  const medalsData = useAppSelector((state) => state.patients.current.rewards.medals);
  const [currentPage, setCurrentPage] = useState(0);

  const handlePageChange = (event: any) => {
    const pageIndex = event.nativeEvent.position;
    setCurrentPage(pageIndex);
  };

  return (
    <View>
      <Text style={styles.title}>Medallas</Text>
      <View style={styles.container}>
        <View style={styles.pagerContainer}>
          <PagerView style={styles.pager} initialPage={0} onPageSelected={handlePageChange}>
            {medalsData.map((medal: any, index: number) => (
              <View key={index} style={styles.page}>
                <View style={styles.iconContainer}>
                  <Image
                    style={styles.img}
                    source={require('../../../assets/img/gold-medal.png')}
                  />
                  {/* Mauybe change the image? */}
                </View>
                <View style={styles.medalContainer}>
                  <Text style={styles.medalTitle}>Medalla</Text>
                  <Text style={styles.medalInfo}>Premio por haber cumplido con:</Text>
                  <View style={styles.medalNameContainer}>
                    <Text style={styles.medalName}>{medal.name}</Text>
                  </View>
                </View>
              </View>
            ))}
          </PagerView>
          {/* Page indicator circles */}
          <View style={styles.pageIndicator}>
            {medalsData.map((_, index) => (
              <View
                key={index}
                style={[
                  styles.pageIndicatorCircle,
                  // eslint-disable-next-line react-native/no-inline-styles
                  { backgroundColor: index === currentPage ? '#2089dc' : 'gray' },
                ]}
              />
            ))}
          </View>
        </View>
      </View>
    </View>
  );
};

And the styles are:

const styles = StyleSheet.create({
  title: {
    alignSelf: 'center',
    fontSize: 22,
    fontWeight: 'bold',
    marginTop: 10,
    marginBottom: 10,
  },
  container: {
    alignSelf: 'center',
    flex: 1,
    width: SCREEN_WIDTH * 0.8,
    backgroundColor: 'rgba(236,236,236,1)',
  },
  pagerContainer: {
    height: SCREEN_HEIGHT * 0.23,
    flexDirection: 'column',
    backgroundColor: 'rgba(236,236,236,1)',
  },
  pager: {
    flex: 1,
    flexDirection: 'row',
  },
  page: {
    flexDirection: 'row',
  },
  iconContainer: {
    width: '30%',
    justifyContent: 'center',
    alignItems: 'center',
  },
  medalContainer: {
    flex: 1,
    flexDirection: 'column',
    width: '70%',
    alignItems: 'center',
    backgroundColor: 'rgba(236,236,236,1)',
  },
  medalTitle: {
    fontSize: 16,
    color: '#2089dc',
    fontWeight: 'bold',
    paddingTop: SCREEN_HEIGHT * 0.04,
  },
  medalInfo: {
    fontSize: 13,
    fontWeight: 'bold',
    marginTop: SCREEN_HEIGHT * 0.02,
    paddingBottom: SCREEN_HEIGHT * 0.01,
  },
  medalNameContainer: {
    backgroundColor: '#2089dc',
    borderRadius: 10,
    height: SCREEN_HEIGHT * 0.06,
    alignItems: 'center',
    justifyContent: 'center',
  },
  medalName: {
    fontSize: 12,
    fontWeight: 'bold',
    paddingLeft: 5,
    paddingRight: 5,
  },
  pageIndicator: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    marginTop: 2,
  },
  pageIndicatorCircle: {
    width: 10,
    height: 10,
    borderRadius: 5,
    margin: 5,
  },
  img: {
    width: SCREEN_HEIGHT * 0.1,
    height: SCREEN_WIDTH * 0.3,
  },
});

Thanks in advance!

[grillorafael]

I'm having the same issue

[pablo4lvarez]

Hi @grillorafael, did you find out why is happening or found a solution? it would be really helpful 🙏

[andreas-bergstrom]

Also having issues on Android, working fine on iOS but not responding to swiping gestures at all on Android.

[grillorafael]

Hi @grillorafael, did you find out why is happening or found a solution? it would be really helpful 🙏

Not yet

[pablo4lvarez]

@grillorafael @andreas-bergstrom It's been a while. I have been working in other features because this one was not really a priority. But any of you guys found a solution to this issue?

[andreas-bergstrom]

@grillorafael @andreas-bergstrom

It's been a while. I have been working in other features because this one was not really a priority. But any of you guys found a solution to this issue?

Nope, I ended up using buttons on Android.