[Android] v9: pager starts on the last page (initialPage ignored) when first laid out with zero width, e.g. inside `display: 'none'`

import { useCallback, useRef, useState } from 'react';
import { Button, ScrollView, StyleSheet, Text, View } from 'react-native';
import PagerView from 'react-native-pager-view';

const COLORS = ['#ffb3ba', '#bae1ff', '#baffc9', '#ffffba'];
const HOST_HEIGHT = 120;

function usePagerLog() {
  const [selected, setSelected] = useState<number | null>(null);
  const [events, setEvents] = useState<string[]>([]);
  const push = useCallback(
    (e: string) => setEvents((prev) => [...prev.slice(-5), e]),
    []
  );
  const onPageSelected = useCallback(
    (e: { nativeEvent: { position: number } }) => {
      setSelected(e.nativeEvent.position);
      push(`selected:${e.nativeEvent.position}`);
    },
    [push]
  );
  const onPageScroll = useCallback(
    (e: { nativeEvent: { position: number; offset: number } }) => {
      const { position, offset } = e.nativeEvent;
      if (offset === 0) push(`scroll:${position}`);
    },
    [push]
  );
  return { selected, events, onPageSelected, onPageScroll };
}

function Pages({ tag, count = 4 }: { tag: string; count?: number }) {
  return Array.from({ length: count }, (_, i) => COLORS[i % COLORS.length]).map(
    (color, i) => (
      <View key={i} collapsable={false} style={[styles.page, { backgroundColor: color }]}>
        <Text style={styles.pageLabel}>{`${tag} PAGE ${i}`}</Text>
      </View>
    )
  );
}

function Log({ tag, log }: { tag: string; log: ReturnType<typeof usePagerLog> }) {
  return (
    <Text style={styles.log}>
      {`${tag} selected=${log.selected ?? '-'} events=[${log.events.join(' ')}]`}
    </Text>
  );
}

/** A: mounted inside a `display: 'none'` container, then shown. */
function HiddenOnMountCase() {
  const [shown, setShown] = useState(false);
  const log = usePagerLog();
  return (
    <View style={styles.case}>
      <Text style={styles.heading}>A: mounted hidden (display: none), then shown</Text>
      <Button title="A show" onPress={() => setShown(true)} />
      <View style={[styles.host, { display: shown ? 'flex' : 'none' }]}>
        <PagerView
          style={styles.pager}
          initialPage={0}
          onPageSelected={log.onPageSelected}
          onPageScroll={log.onPageScroll}
        >
          {Pages({ tag: 'A' })}
        </PagerView>
      </View>
      <Log tag="A" log={log} />
    </View>
  );
}

/** B: laid out, moved to page 1, hidden with `display: 'none'`, shown again. */
function HideAfterMountCase() {
  const [shown, setShown] = useState(true);
  const ref = useRef<PagerView>(null);
  const log = usePagerLog();
  return (
    <View style={styles.case}>
      <Text style={styles.heading}>B: go to page 1, hide, show</Text>
      <View style={styles.row}>
        <Button title="B page 1" onPress={() => ref.current?.setPage(1)} />
        <Button title="B hide" onPress={() => setShown(false)} />
        <Button title="B show" onPress={() => setShown(true)} />
      </View>
      <View style={[styles.host, { display: shown ? 'flex' : 'none' }]}>
        <PagerView
          ref={ref}
          style={styles.pager}
          initialPage={0}
          onPageSelected={log.onPageSelected}
          onPageScroll={log.onPageScroll}
        >
          {Pages({ tag: 'B' })}
        </PagerView>
      </View>
      <Log tag="B" log={log} />
    </View>
  );
}

/** C: mounted inside a zero-height container, then expanded. */
function ZeroHeightOnMountCase() {
  const [expanded, setExpanded] = useState(false);
  const log = usePagerLog();
  return (
    <View style={styles.case}>
      <Text style={styles.heading}>C: mounted at height 0, then expanded</Text>
      <Button title="C expand" onPress={() => setExpanded(true)} />
      <View style={[styles.host, { height: expanded ? HOST_HEIGHT : 0 }]}>
        <PagerView
          style={styles.pager}
          initialPage={0}
          onPageSelected={log.onPageSelected}
          onPageScroll={log.onPageScroll}
        >
          {Pages({ tag: 'C' })}
        </PagerView>
      </View>
      <Log tag="C" log={log} />
    </View>
  );
}

/** D: mounted inside a zero-width container, then expanded. */
function ZeroWidthOnMountCase() {
  const [expanded, setExpanded] = useState(false);
  const log = usePagerLog();
  return (
    <View style={styles.case}>
      <Text style={styles.heading}>D: mounted at width 0, then expanded</Text>
      <Button title="D expand" onPress={() => setExpanded(true)} />
      <View style={[styles.host, expanded ? null : { width: 0 }]}>
        <PagerView
          style={styles.pager}
          initialPage={0}
          onPageSelected={log.onPageSelected}
          onPageScroll={log.onPageScroll}
        >
          {Pages({ tag: 'D' })}
        </PagerView>
      </View>
      <Log tag="D" log={log} />
    </View>
  );
}

/** E: laid out, hidden with `display: 'none'`, a page appended while hidden, shown again. */
function AddPageWhileHiddenCase() {
  const [shown, setShown] = useState(true);
  const [count, setCount] = useState(4);
  const log = usePagerLog();
  return (
    <View style={styles.case}>
      <Text style={styles.heading}>E: hide, add a page while hidden, show</Text>
      <View style={styles.row}>
        <Button title="E hide" onPress={() => setShown(false)} />
        <Button title="E add" onPress={() => setCount((c) => c + 1)} />
        <Button title="E show" onPress={() => setShown(true)} />
      </View>
      <View style={[styles.host, { display: shown ? 'flex' : 'none' }]}>
        <PagerView
          style={styles.pager}
          initialPage={0}
          onPageSelected={log.onPageSelected}
          onPageScroll={log.onPageScroll}
        >
          {Pages({ tag: 'E', count })}
        </PagerView>
      </View>
      <Log tag="E" log={log} />
    </View>
  );
}

export function ZeroWidthInitialPageRepro() {
  return (
    <ScrollView contentContainerStyle={styles.container}>
      <HiddenOnMountCase />
      <HideAfterMountCase />
      <ZeroHeightOnMountCase />
      <ZeroWidthOnMountCase />
      <AddPageWhileHiddenCase />
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: { padding: 12, gap: 12, backgroundColor: '#fff' },
  case: { gap: 6 },
  heading: { fontWeight: '600', color: '#000' },
  row: { flexDirection: 'row', gap: 8 },
  host: { height: HOST_HEIGHT, overflow: 'hidden' },
  pager: { flex: 1 },
  page: { flex: 1, alignItems: 'center', justifyContent: 'center' },
  pageLabel: { fontSize: 20, color: '#000' },
  log: { fontSize: 12, color: '#000' },
});