Fix examples (#4806)

## Summary This PR fixes some regression in our examples introduced in #4672 PR. ## What was wrong? |Before|After| |---|---| | <video src="https://github.com/software-mansion/react-native-reanimated/assets/36106620/a711194f-d699-4445-9d54-c7e80e373a9e" /> | <video src="https://github.com/software-mansion/react-native-reanimated/assets/36106620/9a81ff19-d5cd-45f5-9f32-a12b3e6446f4" /> | |Before|After| |---|---| | <video src="https://github.com/software-mansion/react-native-reanimated/assets/36106620/948a6b28-370b-4da1-a0d7-9bb757026f9f" /> | <video src="https://github.com/software-mansion/react-native-reanimated/assets/36106620/64bd05fa-1549-41f7-bffb-7a22d530cb66" /> | |Before|After| |---|---| | <video src="https://github.com/software-mansion/react-native-reanimated/assets/36106620/28fa7c95-3f24-44b7-847a-6b6b6dfff964" /> | <video src="https://github.com/software-mansion/react-native-reanimated/assets/36106620/8050de48-5490-4491-8fd5-f9781ba17c90" /> | |Before|After| |---|---| | <video src="https://github.com/software-mansion/react-native-reanimated/assets/36106620/31892ece-663b-4f98-8244-f74b84d868f0" /> | <video src="https://github.com/software-mansion/react-native-reanimated/assets/36106620/abe1c2f5-2c50-49c7-810f-98b7353a31a6" /> |
software-mansion · Jul 25, 2023 · fbd816c · fbd816c
1 parent 80dfdf1
commit fbd816c
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 9 deletions.
diff --git a/app/src/examples/AnimatedTabBarExample.tsx b/app/src/examples/AnimatedTabBarExample.tsx
@@ -93,9 +93,9 @@ const styles = StyleSheet.create({
   },
   circleIcon: {
     position: 'absolute',
-    width: width,
+    width: tabWidth,
     top: -8,
-    left: width / 2,
+    left: tabWidth / 2,
     height: 64,
     justifyContent: 'center',
     alignItems: 'center',

diff --git a/app/src/examples/ExtrapolationExample.tsx b/app/src/examples/ExtrapolationExample.tsx
@@ -86,7 +86,7 @@ export default function ExtrapolationExample(): React.ReactElement {
   return (
     <>
       <PanGestureHandler onGestureEvent={gestureHandler}>
-        <Animated.View style={[styles.circle, stylez]} />
+        <Animated.View style={[styles.circle, styles.topCircle, stylez]} />
       </PanGestureHandler>
       <Animated.View style={[styles.circle, button1Style]} />
       <Animated.View style={[styles.circle, button2Style]} />
@@ -96,14 +96,17 @@ export default function ExtrapolationExample(): React.ReactElement {
 }
 
 const styles = StyleSheet.create({
+  topCircle: {
+    zIndex: 1,
+    backgroundColor: '#001a72',
+  },
   circle: {
     width: 50,
     height: 50,
     position: 'absolute',
     top: 400,
     alignSelf: 'center',
     borderRadius: 25,
-    zIndex: 1,
-    backgroundColor: '#001a72',
+    backgroundColor: 'red',
   },
 });
diff --git a/app/src/examples/MatrixTransform.tsx b/app/src/examples/MatrixTransform.tsx
@@ -32,6 +32,8 @@ export default function MatrixTransform() {
   });
 
   const handlePress = React.useCallback(() => {
+    currentTransformIndex.current++;
+    currentTransformIndex.current %= TRANSFORM_MATRICES.length;
     matrix.value = withSpring(
       TRANSFORM_MATRICES[currentTransformIndex.current],
       springConfig
@@ -41,9 +43,6 @@ export default function MatrixTransform() {
       [...TRANSFORM_MATRICES[currentTransformIndex.current], 0],
       springConfig
     );
-
-    currentTransformIndex.current += 1;
-    currentTransformIndex.current %= TRANSFORM_MATRICES.length;
   }, [matrix, matrix2, currentTransformIndex]);
 
   return (

diff --git a/app/src/examples/SharedElementTransitions/RestoreState.tsx b/app/src/examples/SharedElementTransitions/RestoreState.tsx
@@ -61,7 +61,7 @@ export default function RestoreStateExample() {
   return (
     <Stack.Navigator
       screenOptions={{
-        animation: 'none',
+        animation: 'fade',
       }}>
       <Stack.Screen
         name="Screen1"