flicker

[smooJitter]

I am trying out the examples. With the exception of one, the screen flickers each time the focus changes. Is this a known bug or could it have something to do with my setup?

Environment:
ios Device
react-native: 0.61.2
navigation: react-native-navigation
deeply nested styled-components.

I can confirm this problem exists, repro below and video from Android device:

import { SafeAreaView } from "react-native-safe-area-context";
import * as React from "react";
import { useCallback, useState } from "react";
import { Pager, PagerProvider } from "@crowdlinker/react-native-pager";
import { Button, View } from "react-native";

interface Rect {
  height: number;
  width: number;
  color: string;
}
function Component() {
  const [activeItem, setActiveImageIndex] = useState(0);

  const renderItem = useCallback(
    ({ item, index }: { index: number; item: Rect }) => {
      return (
        <View
          key={index}
          style={{
            width: item.width,
            height: item.height,
            opacity: 0.5,
            backgroundColor: item.color,
          }}
        />
      );
    },
    []
  );
  return (
    <PagerProvider activeIndex={activeItem} onChange={setActiveImageIndex}>
      <Pager>
        {[
          {
            height: 400,
            color: "blue",
            width: 800,
          },
          {
            height: 1200,
            color: "red",
            width: 800,
          },
        ].map((item, index) => renderItem({ item, index }))}
      </Pager>
    </PagerProvider>
  );
}

export default function App() {
  const [visible, setVisible] = useState(false);
  return (
    <SafeAreaView>
      {visible && <Component />}
      <Button
        title="Toggle"
        onPress={() => {
          setVisible((visible) => !visible);
        }}
      />
    </SafeAreaView>
  );
}

flashing.mov