Fixes #861 reanimated value in render (#866)

* fix: Reading from .value of reanimated during render closes #861

* fix: Closes #861 using reanimated value during render

* fix: schedule selected value with scheduleOnRN

* fix: avoid reanimated value in pagination render

* chore: add changeset for pagination render fix

---------

Co-authored-by: Caspian 東澔 <caspian.zhao@outlook.com>

Author: hennessyevan

.changeset/fix-pagination-accessibility.md

@@ -0,0 +1,5 @@
+---
+"react-native-reanimated-carousel": patch
+---
+
+Fix pagination accessibility state by syncing selection with scheduleOnRN instead of reading reanimated values during render, and add coverage to avoid test warnings.

src/components/Pagination/Basic/PaginationItem.tsx

@@ -1,9 +1,15 @@
 import type { PropsWithChildren } from "react";
-import React from "react";
+import React, { useState } from "react";
 import type { ViewStyle } from "react-native";
 import { Pressable, View } from "react-native";
 import type { SharedValue } from "react-native-reanimated";
-import Animated, { Extrapolation, interpolate, useAnimatedStyle } from "react-native-reanimated";
+import Animated, {
+  Extrapolation,
+  interpolate,
+  useAnimatedReaction,
+  useAnimatedStyle,
+} from "react-native-reanimated";
+import { scheduleOnRN } from "react-native-worklets";
 
 export type DotStyle = Omit<ViewStyle, "width" | "height"> & {
   width?: number;
@@ -55,6 +61,16 @@ export const PaginationItem: React.FC<
   const width = sizes.width;
   const height = sizes.height;
 
+  const [isSelected, setIsSelected] = useState(false);
+
+  useAnimatedReaction(
+    () => animValue.value,
+    (value) => {
+      scheduleOnRN(setIsSelected, value === index);
+    },
+    [animValue, index]
+  );
+
   const animStyle = useAnimatedStyle(() => {
     const size = horizontal ? height : width;
     let inputRange = [index - 1, index, index + 1];
@@ -79,8 +95,8 @@ export const PaginationItem: React.FC<
       onPress={onPress}
       accessibilityLabel={accessibilityLabel}
       accessibilityRole="button"
-      accessibilityHint={animValue.value === index ? "" : `Go to ${accessibilityLabel}`}
-      accessibilityState={{ selected: animValue.value === index }}
+      accessibilityHint={isSelected ? "" : `Go to ${accessibilityLabel}`}
+      accessibilityState={{ selected: isSelected }}
     >
       <View
         style={[

src/components/Pagination/Custom/PaginationItem.tsx

@@ -1,5 +1,5 @@
 import type { PropsWithChildren } from "react";
-import React from "react";
+import React, { useState } from "react";
 import { Pressable } from "react-native";
 import type { ImageStyle, TextStyle, ViewStyle } from "react-native";
 import type { SharedValue } from "react-native-reanimated";
@@ -10,6 +10,7 @@ import Animated, {
   useAnimatedStyle,
   useSharedValue,
   useDerivedValue,
+  useAnimatedReaction,
 } from "react-native-reanimated";
 import { scheduleOnRN } from "react-native-worklets";
 
@@ -59,10 +60,20 @@ export const PaginationItem: React.FC<
     customReanimatedStyleRef.value = customReanimatedStyle?.(progress, index, count) ?? {};
   };
 
+  const [isSelected, setIsSelected] = useState(false);
+
   useDerivedValue(() => {
     scheduleOnRN(handleCustomAnimation, animValue?.value);
   });
 
+  useAnimatedReaction(
+    () => animValue.value,
+    (value) => {
+      scheduleOnRN(setIsSelected, value === index);
+    },
+    [animValue, index]
+  );
+
   const animStyle = useAnimatedStyle((): AnimatedDefaultStyle => {
     const {
       width = size || defaultDotSize,
@@ -112,8 +123,8 @@ export const PaginationItem: React.FC<
       onPress={onPress}
       accessibilityLabel={accessibilityLabel}
       accessibilityRole="button"
-      accessibilityHint={animValue.value === index ? "" : `Go to ${accessibilityLabel}`}
-      accessibilityState={{ selected: animValue.value === index }}
+      accessibilityHint={isSelected ? "" : `Go to ${accessibilityLabel}`}
+      accessibilityState={{ selected: isSelected }}
     >
       <Animated.View
         style={[

src/components/Pagination/Pagination.test.tsx

@@ -1,9 +1,14 @@
 import { fireEvent, render } from "@testing-library/react-native";
 import { View } from "react-native";
 import { useSharedValue } from "react-native-reanimated";
+import { act } from "react-test-renderer";
 
 import { Pagination } from ".";
 
+jest.mock("react-native-worklets", () => ({
+  scheduleOnRN: (fn: (...args: unknown[]) => void, ...args: unknown[]) => fn(...args),
+}));
+
 describe("Pagination.Basic", () => {
   it("throws when size/dot width/height are non-number", () => {
     const Test = () => {
@@ -21,7 +26,7 @@ describe("Pagination.Basic", () => {
     expect(() => render(<Test />)).toThrow("size/width/height must be a number");
   });
 
-  it("renders dots and calls onPress", () => {
+  it("renders dots and calls onPress", async () => {
     const handlePress = jest.fn();
     const Test = () => {
       const progress = useSharedValue(0);
@@ -36,6 +41,7 @@ describe("Pagination.Basic", () => {
     };
 
     const { UNSAFE_root } = render(<Test />);
+    await act(async () => {});
 
     const buttons = UNSAFE_root.findAll(
       (node) =>
@@ -50,7 +56,9 @@ describe("Pagination.Basic", () => {
 
     expect(uniqueByLabel).toHaveLength(3);
 
-    fireEvent.press(uniqueByLabel[1]);
+    await act(async () => {
+      fireEvent.press(uniqueByLabel[1]);
+    });
     expect(handlePress).toHaveBeenCalledWith(1);
   });
 });
@@ -72,7 +80,7 @@ describe("Pagination.Custom", () => {
     expect(() => render(<Test />)).toThrow("size/width/height must be a number");
   });
 
-  it("uses max item dimensions for container min sizes", () => {
+  it("uses max item dimensions for container min sizes", async () => {
     const Test = () => {
       const progress = useSharedValue(0);
       return (
@@ -87,6 +95,7 @@ describe("Pagination.Custom", () => {
     };
 
     const { UNSAFE_root } = render(<Test />);
+    await act(async () => {});
 
     // @ts-expect-error
     const container = UNSAFE_root.findByType(View);