Бесконечная лента и обновление жестом

const { FlatList, View, Text } = ReactNative;
type Workout = { id: string; n: number; title: string };
declare function recentWorkouts(count: number): Workout[];
type Scroll = import("react-native").NativeSyntheticEvent<import("react-native").NativeScrollEvent>;

const counts = { own: 0, list: 0 };

mount(
  <View style={{ height: 120 }}>
    <FlatList
      testID="feed"
      data={recentWorkouts(20)}
      keyExtractor={(workout) => workout.id}
      renderItem={({ item }: { item: Workout }) => <Text style={{ height: 30 }}>{item.title}</Text>}
      onEndReachedThreshold={0.5}
      onEndReached={() => { counts.list += 1; }}
      onScroll={(e: Scroll) => {
        const { contentOffset, layoutMeasurement, contentSize } = e.nativeEvent;
        // проверка конца из статьи про ScrollView, слово в слово
        if (contentOffset.y + layoutMeasurement.height >= contentSize.height - 1) counts.own += 1;
      }}
    />
  </View>,
);
setTimeout(() => fireEvent.scroll("feed", 480), 800);
setTimeout(() => console.log("свой расчёт:", counts.own, "| onEndReached:", counts.list), 1400);

const { FlatList, View, Text } = ReactNative;
type Workout = { id: string; n: number; title: string };
type Page = { items: Workout[]; hasMore: boolean };
declare function loadPage(page: number, size: number): Promise<Page>;
declare function requestsMade(): number;

const list = React.createRef<import("react-native").FlatList<Workout>>();
let shown = 0;

function Feed() {
  const [items, setItems] = React.useState<Workout[]>([]);
  const next = React.useRef(0);
  const load = () => {
    loadPage(next.current, 20).then((page) => {
      next.current += 1;
      setItems((prev) => [...prev, ...page.items]);
    });
  };
  React.useEffect(load, []);
  shown = items.length;
  return (
    <View style={{ height: 120 }}>
      <FlatList
        ref={list}
        data={items}
        keyExtractor={(workout) => workout.id}
        renderItem={({ item }: { item: Workout }) => <Text style={{ height: 30 }}>{item.title}</Text>}
        onEndReachedThreshold={0.5}
        onEndReached={load}
      />
    </View>
  );
}

mount(<Feed />);
[1000, 1600].forEach((t) => setTimeout(() => list.current?.scrollToEnd({ animated: false }), t));
setTimeout(() => console.log("тренировок в ленте:", shown, "| запросов:", requestsMade()), 2200);

const { FlatList, View, Text } = ReactNative;
type Workout = { id: string; n: number; title: string };
declare function recentWorkouts(count: number): Workout[];

const workouts = recentWorkouts(40);
const calls = { "без порога": 0, "с порогом 0.5": 0 };
const refs = {
  "без порога": React.createRef<import("react-native").FlatList<Workout>>(),
  "с порогом 0.5": React.createRef<import("react-native").FlatList<Workout>>(),
};

function Feed({ label, threshold }: { label: keyof typeof calls; threshold?: number }) {
  return (
    <View style={{ height: 120 }}>
      <FlatList
        ref={refs[label]}
        data={workouts}
        keyExtractor={(workout) => workout.id}
        renderItem={({ item }: { item: Workout }) => <Text style={{ height: 30 }}>{item.title}</Text>}
        onEndReachedThreshold={threshold}
        onEndReached={() => { calls[label] += 1; }}
      />
    </View>
  );
}

mount(
  <View>
    <Feed label="без порога" />
    <Feed label="с порогом 0.5" threshold={0.5} />
  </View>,
);
function scrollBoth(offset: number, when: string) {
  for (const label of ["без порога", "с порогом 0.5"] as const) refs[label].current?.scrollToOffset({ offset, animated: false });
  setTimeout(() => console.log(when, "| без порога:", calls["без порога"], "| с порогом 0.5:", calls["с порогом 0.5"]), 300);
}
setTimeout(() => scrollBoth(1020, "за 60 точек до конца"), 900);
setTimeout(() => scrollBoth(1080, "в самом конце"), 1500);

const { FlatList, View, Text } = ReactNative;
type Workout = { id: string; n: number; title: string };
type Page = { items: Workout[]; hasMore: boolean };
declare function loadPage(page: number, size: number): Promise<Page>;
declare function requestsMade(): number;

const asked: string[] = [];

function Feed() {
  const [items, setItems] = React.useState<Workout[]>([]);
  const [loading, setLoading] = React.useState(false);
  const next = React.useRef(0);
  const load = () => {
    const page = next.current++;
    asked.push("страница " + page + " при " + items.length + " строках");
    setLoading(true);
    loadPage(page, 20).then((answer) => {
      setItems((prev) => [...prev, ...answer.items]);
      setLoading(false);
    });
  };
  React.useEffect(load, []);
  return (
    <View style={{ height: 120 }}>
      <FlatList
        data={items}
        keyExtractor={(workout) => workout.id}
        renderItem={({ item }: { item: Workout }) => <Text style={{ height: 30 }}>{item.title}</Text>}
        ListFooterComponent={loading ? <Text style={{ height: 30 }}>Загружаем…</Text> : null}
        onEndReachedThreshold={0.5}
        onEndReached={load}
      />
    </View>
  );
}

mount(<Feed />);
setTimeout(() => console.log(asked.join(" | "), "| запросов:", requestsMade()), 1200);

const { FlatList, View, Text } = ReactNative;
type Workout = { id: string; n: number; title: string };
type Page = { items: Workout[]; hasMore: boolean };
declare function loadPage(page: number, size: number): Promise<Page>;
declare function requestsMade(): number;

const list = React.createRef<import("react-native").FlatList<Workout>>();

function Feed() {
  const [items, setItems] = React.useState<Workout[]>([]);
  const [loading, setLoading] = React.useState(false);
  // страница в пути — в ref: проверить её нужно в тот же миг, а не после перерисовки
  const busy = React.useRef(false);
  const next = React.useRef(0);
  const load = () => {
    if (busy.current) return;
    busy.current = true;
    setLoading(true);
    loadPage(next.current, 20).then((page) => {
      next.current += 1;
      setItems((prev) => [...prev, ...page.items]);
      setLoading(false);
      busy.current = false;
    });
  };
  React.useEffect(load, []);
  return (
    <View style={{ height: 120 }}>
      <FlatList
        ref={list}
        data={items}
        keyExtractor={(workout) => workout.id}
        renderItem={({ item }: { item: Workout }) => <Text style={{ height: 30 }}>{item.title}</Text>}
        ListFooterComponent={loading ? <Text style={{ height: 30 }}>Загружаем…</Text> : null}
        onEndReachedThreshold={0.5}
        onEndReached={load}
      />
    </View>
  );
}

mount(<Feed />);
setTimeout(() => console.log("до прокрутки запросов:", requestsMade()), 1000);
setTimeout(() => list.current?.scrollToEnd({ animated: false }), 1100);
setTimeout(() => console.log("после прокрутки к концу:", requestsMade()), 2000);

const { FlatList, View, Text } = ReactNative;
type Workout = { id: string; n: number; title: string };
type Page = { items: Workout[]; hasMore: boolean };
declare function loadPage(page: number, size: number): Promise<Page>;
declare function requestsMade(): number;

const list = React.createRef<import("react-native").FlatList<Workout>>();
let blank = 0;
// рубильник: без него у опыта не было бы конца — в этом и дело
let stopped = false;

function Feed() {
  const [items, setItems] = React.useState<Workout[]>([]);
  const [loading, setLoading] = React.useState(false);
  const busy = React.useRef(false);
  const next = React.useRef(0);
  const load = () => {
    if (busy.current || stopped) return;
    busy.current = true;
    setLoading(true);
    loadPage(next.current++, 20).then((page) => {
      if (page.items.length === 0) {
        blank += 1;
        if (blank === 1) console.log("история кончилась, источник отдаёт пустую страницу");
        if (blank === 8) {
          stopped = true;
          console.log("пустых страниц подряд:", blank, "| всего запросов:", requestsMade());
        }
      }
      setItems((prev) => [...prev, ...page.items]);
      setLoading(false);
      busy.current = false;
    });
  };
  React.useEffect(load, []);
  return (
    <View style={{ height: 120 }}>
      <FlatList
        ref={list}
        data={items}
        keyExtractor={(workout) => workout.id}
        renderItem={({ item }: { item: Workout }) => <Text style={{ height: 30 }}>{item.title}</Text>}
        ListFooterComponent={loading ? <Text style={{ height: 30 }}>Загружаем…</Text> : null}
        onEndReachedThreshold={0.5}
        onEndReached={load}
      />
    </View>
  );
}

mount(<Feed />);
// шесть раз доезжаем до конца — больше в ленте ничего нет
[600, 1000, 1400, 1800, 2200, 2600].forEach((t) => setTimeout(() => list.current?.scrollToEnd({ animated: false }), t));

const { FlatList, View, Text } = ReactNative;
type Workout = { id: string; n: number; title: string };
type Page = { items: Workout[]; hasMore: boolean };
declare function loadPage(page: number, size: number): Promise<Page>;
declare function requestsMade(): number;

const list = React.createRef<import("react-native").FlatList<Workout>>();
let shown = 0;

function Feed() {
  const [items, setItems] = React.useState<Workout[]>([]);
  const [more, setMore] = React.useState(true);
  const busy = React.useRef(false);
  const next = React.useRef(0);
  const load = () => {
    if (busy.current || !more) return;
    busy.current = true;
    loadPage(next.current++, 20).then((page) => {
      setItems((prev) => [...prev, ...page.items]);
      setMore(page.hasMore);
      busy.current = false;
    });
  };
  React.useEffect(load, []);
  shown = items.length;
  return (
    <View style={{ height: 120 }}>
      <FlatList
        ref={list}
        data={items}
        keyExtractor={(workout) => workout.id}
        renderItem={({ item }: { item: Workout }) => <Text style={{ height: 30 }}>{item.title}</Text>}
        ListFooterComponent={<Text style={{ height: 30 }}>{more ? "Загружаем…" : "Это вся история"}</Text>}
        onEndReachedThreshold={0.5}
        onEndReached={load}
      />
    </View>
  );
}

mount(<Feed />);
[900, 1500, 2100, 2700, 3300, 3900].forEach((t) => setTimeout(() => list.current?.scrollToEnd({ animated: false }), t));
setTimeout(() => console.log("тренировок:", shown, "| запросов:", requestsMade()), 4600);

const { FlatList, View, Text } = ReactNative;
type Workout = { id: string; n: number; title: string };
declare function recentWorkouts(count: number): Workout[];
declare function countNodes(testID: string): number;
type Scroll = import("react-native").NativeSyntheticEvent<import("react-native").NativeScrollEvent>;

const workouts = recentWorkouts(20);
const list = React.createRef<import("react-native").FlatList<Workout>>();
let pulls = 0;
let highest = 0;

function Row({ item }: { item: Workout }) {
  return <Text style={{ height: 30 }}>{item.title}</Text>;
}

mount(
  <View>
    <View testID="plain" style={{ height: 120 }}>
      <FlatList data={workouts} keyExtractor={(w) => w.id} renderItem={Row} />
    </View>
    <View testID="pullable" style={{ height: 120 }}>
      <FlatList
        ref={list}
        data={workouts}
        keyExtractor={(w) => w.id}
        renderItem={Row}
        refreshing={false}
        onRefresh={() => { pulls += 1; }}
        onScroll={(e: Scroll) => { highest = Math.min(highest, e.nativeEvent.contentOffset.y); }}
      />
    </View>
  </View>,
);
// тянем ленту вниз от начала — это и есть жест обновления
setTimeout(() => list.current?.scrollToOffset({ offset: -80, animated: false }), 800);
setTimeout(() => console.log("onRefresh вызван раз:", pulls, "| выше начала уехали на:", highest, "| узлов: без onRefresh", countNodes("plain"), "с onRefresh", countNodes("pullable")), 1300);

// react-native-web 0.21.2 · exports/RefreshControl/index.js, сокращено
var _excluded = ["colors", "enabled", "onRefresh", "progressBackgroundColor",
  "progressViewOffset", "refreshing", "size", "tintColor", "title", "titleColor"];

function RefreshControl(props) {
  var colors = props.colors,
    enabled = props.enabled,
    onRefresh = props.onRefresh,
    // …и так все десять пропов: разобраны из props и дальше не используются
    rest = _objectWithoutPropertiesLoose(props, _excluded);
  return React.createElement(View, rest);
}

// react-native 0.86 · Libraries/Components/ScrollView/ScrollView.js, сокращено
if (refreshControl != null) {
  if (Platform.OS === 'ios') {
    // On iOS the RefreshControl is a child of the ScrollView.
    return (
      <NativeScrollView {...props} ref={scrollViewRef}>
        {refreshControl}
        {contentContainer}
      </NativeScrollView>
    );
  } else if (Platform.OS === 'android') {
    // On Android wrap the ScrollView with a AndroidSwipeRefreshLayout.
    const {outer, inner} = splitLayoutProps(flattenStyle(props.style));
    return cloneElement(
      refreshControl,
      {style: StyleSheet.compose(baseStyle, outer)},
      <NativeScrollView {...props} style={StyleSheet.compose(baseStyle, inner)} ref={scrollViewRef}>
        {contentContainer}
      </NativeScrollView>,
    );
  }
}

// react-native 0.86 · Libraries/Components/RefreshControl/RefreshControl.js, сокращено
componentDidUpdate(prevProps: RefreshControlProps) {
  // RefreshControl is a controlled component so if the native refreshing
  // value doesn't match the current js refreshing prop update it to
  // the js value.
  if (this.props.refreshing !== prevProps.refreshing) {
    this._lastNativeRefreshing = this.props.refreshing;
  } else if (this.props.refreshing !== this._lastNativeRefreshing && this._nativeRef) {
    // …Commands.setNativeRefreshing(this._nativeRef, this.props.refreshing)
    this._lastNativeRefreshing = this.props.refreshing;
  }
}

_onRefresh = () => {
  this._lastNativeRefreshing = true;
  this.props.onRefresh && this.props.onRefresh();
  // The native component will start refreshing so force an update to
  // make sure it stays in sync with the js component.
  this.forceUpdate();
};

const { FlatList, View, Text, Pressable } = ReactNative;
type Workout = { id: string; n: number; title: string };
type Page = { items: Workout[]; hasMore: boolean };
declare function loadBefore(before: number | null, size: number): Promise<Page>;
declare function addWorkout(): Workout;

let top = "";

function Feed() {
  const [items, setItems] = React.useState<Workout[]>([]);
  const [refreshing, setRefreshing] = React.useState(false);
  const cursor = React.useRef<number | null>(null);
  const load = () => loadBefore(cursor.current, 20).then((page) => {
    if (page.items.length) cursor.current = page.items[page.items.length - 1].n;
    setItems((prev) => [...prev, ...page.items]);
  });
  const refresh = () => {
    setRefreshing(true);
    // обновление — это лента заново с самого верха, поэтому курсор начинается с нуля
    loadBefore(null, 20).then((page) => {
      cursor.current = page.items.length ? page.items[page.items.length - 1].n : null;
      setItems(page.items);
      setRefreshing(false);
    });
  };
  React.useEffect(() => { load(); }, []);
  top = items.length ? items[0].title : "пусто";
  return (
    <View>
      <Pressable testID="refresh" onPress={refresh}>
        <Text>Обновить</Text>
      </Pressable>
      <View style={{ height: 120 }}>
        <FlatList
          data={items}
          keyExtractor={(workout) => workout.id}
          renderItem={({ item }: { item: Workout }) => <Text style={{ height: 30 }}>{item.title}</Text>}
          refreshing={refreshing}
          onRefresh={refresh}
        />
      </View>
    </View>
  );
}

mount(<Feed />);
setTimeout(() => console.log("сверху ленты:", top), 700);
// в зале записали тренировку — в ленте её ещё нет
setTimeout(() => { addWorkout(); }, 800);
setTimeout(() => fireEvent.press("refresh"), 900);
setTimeout(() => console.log("после обновления сверху:", top), 1500);