From 353eb4714aff5e5a8569781d4bbce6f11845d934 Mon Sep 17 00:00:00 2001
From: Evan Hennessy <hello@hennessyevan.com>
Date: Mon, 3 Nov 2025 16:47:37 -0500
Subject: [PATCH 1/3] fix: Reading from .value of reanimated during render
 closes #861

---
 src/components/Pagination/Basic/PaginationItem.tsx | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/components/Pagination/Basic/PaginationItem.tsx b/src/components/Pagination/Basic/PaginationItem.tsx
index da7fe35f..7dd7fd1c 100644
--- a/src/components/Pagination/Basic/PaginationItem.tsx
+++ b/src/components/Pagination/Basic/PaginationItem.tsx
@@ -1,9 +1,9 @@
 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";
 
 export type DotStyle = Omit<ViewStyle, "width" | "height"> & {
   width?: number;
@@ -74,13 +74,19 @@ export const PaginationItem: React.FC<
     };
   }, [animValue, index, count, horizontal]);
 
+  const [isSelected, setIsSelected] = useState(false)
+  
+  useAnimatedReaction(() => animValue.value, (animValue) => {
+    setIsSelected(animValue === index)
+  })
+
   return (
     <Pressable
       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={[

From 47ee1b11db23363b948e54d1f54d22af76a24754 Mon Sep 17 00:00:00 2001
From: Evan Hennessy <hello@hennessyevan.com>
Date: Mon, 3 Nov 2025 16:50:12 -0500
Subject: [PATCH 2/3] fix: Closes #861 using reanimated value during render

---
 src/components/Pagination/Basic/PaginationItem.tsx  |  2 +-
 src/components/Pagination/Custom/PaginationItem.tsx | 13 ++++++++++---
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/components/Pagination/Basic/PaginationItem.tsx b/src/components/Pagination/Basic/PaginationItem.tsx
index 7dd7fd1c..02475dab 100644
--- a/src/components/Pagination/Basic/PaginationItem.tsx
+++ b/src/components/Pagination/Basic/PaginationItem.tsx
@@ -78,7 +78,7 @@ export const PaginationItem: React.FC<
   
   useAnimatedReaction(() => animValue.value, (animValue) => {
     setIsSelected(animValue === index)
-  })
+  }, [animValue, index])
 
   return (
     <Pressable
diff --git a/src/components/Pagination/Custom/PaginationItem.tsx b/src/components/Pagination/Custom/PaginationItem.tsx
index ccd3faff..99cb7b26 100644
--- a/src/components/Pagination/Custom/PaginationItem.tsx
+++ b/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";
 
@@ -107,13 +108,19 @@ export const PaginationItem: React.FC<
     };
   }, [animValue, index, count, horizontal, dotStyle, activeDotStyle, customReanimatedStyle]);
 
+  const [isSelected, setIsSelected] = useState(false)
+  
+  useAnimatedReaction(() => animValue.value, (animValue) => {
+    setIsSelected(animValue === index)
+  }, [animValue, index])
+
   return (
     <Pressable
       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={[

From 9151b4b54ab9639e01b3bfda45ba04ce73ca5b8a Mon Sep 17 00:00:00 2001
From: Evan Hennessy <hello@hennessyevan.com>
Date: Thu, 13 Nov 2025 15:41:39 -0500
Subject: [PATCH 3/3] fix: schedule selected value with scheduleOnRN

---
 src/components/Pagination/Basic/PaginationItem.tsx  | 2 +-
 src/components/Pagination/Custom/PaginationItem.tsx | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/Pagination/Basic/PaginationItem.tsx b/src/components/Pagination/Basic/PaginationItem.tsx
index 02475dab..3e036ee8 100644
--- a/src/components/Pagination/Basic/PaginationItem.tsx
+++ b/src/components/Pagination/Basic/PaginationItem.tsx
@@ -77,7 +77,7 @@ export const PaginationItem: React.FC<
   const [isSelected, setIsSelected] = useState(false)
   
   useAnimatedReaction(() => animValue.value, (animValue) => {
-    setIsSelected(animValue === index)
+    scheduleOnRN(setIsSelected, animValue === index)
   }, [animValue, index])
 
   return (
diff --git a/src/components/Pagination/Custom/PaginationItem.tsx b/src/components/Pagination/Custom/PaginationItem.tsx
index 99cb7b26..8f4a122e 100644
--- a/src/components/Pagination/Custom/PaginationItem.tsx
+++ b/src/components/Pagination/Custom/PaginationItem.tsx
@@ -10,7 +10,7 @@ import Animated, {
   useAnimatedStyle,
   useSharedValue,
   useDerivedValue,
-  useAnimatedReaction,
+  useAnimatedReaction
 } from "react-native-reanimated";
 import { scheduleOnRN } from "react-native-worklets";
 
@@ -111,7 +111,7 @@ export const PaginationItem: React.FC<
   const [isSelected, setIsSelected] = useState(false)
   
   useAnimatedReaction(() => animValue.value, (animValue) => {
-    setIsSelected(animValue === index)
+    scheduleOnRN(setIsSelected, animValue === index)
   }, [animValue, index])
 
   return (