IOS: Incorrect behavior of FlatList inside of TabView

[kobweb]

Current behaviour

Incorrect behavior of the FlatList's RefreshControl element while using the FlatList inside of the TabView.

The RefreshControl element firstly hides immediately and then appears second time.

Expected behaviour

Common behavior of the "pull to refresh" feature: the RefreshControl element shows once and hides after some loading operation was completed.

Code sample

import React, { memo, useMemo, useState } from 'react';
import { View, FlatList, useWindowDimensions, SafeAreaView, Text, StyleSheet } from 'react-native';
import { TabView, SceneMap } from 'react-native-tab-view';

const data = [
  'List item 1',
  'List item 2',
  'List item 3',
  'List item 4',
  'List item 5',
  'List item 6',
  'List item 7',
  'List item 8',
  'List item 9',
  'List item 10',
];

const Screen = memo(() => {
  const [index, setIndex] = useState(0);
  const [routes] = useState([
    { key: 'first', title: 'First' },
    { key: 'second', title: 'Second' },
  ]);
  const [isFetching, setIsFetching] = useState(false);

  const layout = useWindowDimensions();

  const firstScreen = useMemo(() => (
    <FlatList
      data={data}
      renderItem={({ item }) => <Text>{item}</Text>}
      showsVerticalScrollIndicator={false}
      keyExtractor={(item) => item}
      refreshing={isFetching}
      onRefresh={() => {
        setIsFetching(true);

        setTimeout(() => {
          setIsFetching(false);
        }, 5000);
      }}
    />
  ), [isFetching]);

  const secondScreen = useMemo(() => (
    <Text>
      Second screen
    </Text>
  ), []);

  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.container}>

        <TabView
          navigationState={{ index, routes }}
          renderScene={SceneMap({
            first: () => firstScreen,
            second: () => secondScreen,
          })}
          onIndexChange={setIndex}
          initialLayout={{ width: layout.width }}
        />
      </View>
    </SafeAreaView>
  );
});

const styles = StyleSheet.create({
  container: {
    flex: 1,
    position: 'relative',
  },
});

Screenshots (if applicable)

What have you tried

1. tried to pass swipeEnabled={false} to the <TabView> component
2. tried to use the ScrollView with RefreshControl components instead of the FlatList component
3. tried solution provided in the issue's comment

Your Environment

software	version
ios	14.3
react-native	0.64.0
react-native-tab-view	3.0.1
react-native-pager-view	5.2.1
node	v12.12.0
yarn	1.22.5

[github-actions[bot]]

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

• react-native (found: 0.64.0, latest: 0.64.2)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

[github-actions[bot]]

Hey! Thanks for opening the issue. Seems that this issue is in react-native-pager-view library which is a dependency of react-native-tab-view. Can you also post your issue in this repo so that it's notified to the maintainers of that library? This will help us fix the issue faster since it's upto the maintainers of that library to investigate it.

[Broz3r]

Hey! I have the exact same issue and I can't figure out how to solve it. Have you a workaround to fix this behavior? Thx.

[kobweb]

@Broz3r unfortunately I didn’t find any workaround