From 5497c0ffd8c09ecbe28b1e7e6af6512f7403bf87 Mon Sep 17 00:00:00 2001
From: Oskar Eichler <62393985+OskarEichler@users.noreply.github.com>
Date: Fri, 28 Aug 2026 01:56:10 +0300
Subject: [PATCH] perf(example): initialize animation and page resources lazily

---
 example/src/HeadphonesCarouselExample.tsx | 4 ++--
 example/src/PaginationDotsExample.tsx     | 7 +++----
 example/src/ScrollViewInsideExample.tsx   | 2 +-
 example/src/tabView/CoverflowExample.tsx  | 2 +-
 4 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/example/src/HeadphonesCarouselExample.tsx b/example/src/HeadphonesCarouselExample.tsx
index b8d632fe..76d3de03 100644
--- a/example/src/HeadphonesCarouselExample.tsx
+++ b/example/src/HeadphonesCarouselExample.tsx
@@ -235,8 +235,8 @@ const Pagination = ({
 const AnimatedPagerView = Animated.createAnimatedComponent(PagerView);
 
 export default function HeadphonesCarouselExample() {
-  const scrollOffsetAnimatedValue = React.useRef(new Animated.Value(0)).current;
-  const positionAnimatedValue = React.useRef(new Animated.Value(0)).current;
+  const [scrollOffsetAnimatedValue] = React.useState(() => new Animated.Value(0));
+  const [positionAnimatedValue] = React.useState(() => new Animated.Value(0));
 
   return (
     <View style={styles.container}>
diff --git a/example/src/PaginationDotsExample.tsx b/example/src/PaginationDotsExample.tsx
index 6bba8a61..c9942d83 100644
--- a/example/src/PaginationDotsExample.tsx
+++ b/example/src/PaginationDotsExample.tsx
@@ -50,8 +50,8 @@ const INTRO_DATA = [
 export default function PaginationDotsExample() {
   const width = Dimensions.get('window').width;
   const ref = React.useRef<PagerView>(null);
-  const scrollOffsetAnimatedValue = React.useRef(new Animated.Value(0)).current;
-  const positionAnimatedValue = React.useRef(new Animated.Value(0)).current;
+  const [scrollOffsetAnimatedValue] = React.useState(() => new Animated.Value(0));
+  const [positionAnimatedValue] = React.useState(() => new Animated.Value(0));
   const inputRange = [0, INTRO_DATA.length];
   const scrollX = Animated.add(
     scrollOffsetAnimatedValue,
@@ -76,8 +76,7 @@ export default function PaginationDotsExample() {
           useNativeDriver: false,
         }
       ),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []
+    [scrollOffsetAnimatedValue, positionAnimatedValue]
   );
 
   return (
diff --git a/example/src/ScrollViewInsideExample.tsx b/example/src/ScrollViewInsideExample.tsx
index 1bad4a12..5035d405 100644
--- a/example/src/ScrollViewInsideExample.tsx
+++ b/example/src/ScrollViewInsideExample.tsx
@@ -7,7 +7,7 @@ import { PAGES, createPage } from './utils';
 const AnimatedPagerView = Animated.createAnimatedComponent(PagerView);
 
 export const ScrollViewInsideExample = (): React.JSX.Element => {
-  const [pages] = useState(
+  const [pages] = useState(() =>
     Array(PAGES)
       .fill(1)
       .map((_, index) => createPage(index))
diff --git a/example/src/tabView/CoverflowExample.tsx b/example/src/tabView/CoverflowExample.tsx
index 8c35b553..4f38bc22 100644
--- a/example/src/tabView/CoverflowExample.tsx
+++ b/example/src/tabView/CoverflowExample.tsx
@@ -89,7 +89,7 @@ const Scene = ({ route, position, layout, index, length }: Props) => {
 
 export default function CoverflowExample() {
   const [index, onIndexChange] = React.useState(2);
-  const [routes] = React.useState(Object.keys(ALBUMS).map((key) => ({ key })));
+  const [routes] = React.useState(() => Object.keys(ALBUMS).map((key) => ({ key })));
 
   return (
     <TabView