simplified tap example

Author: relextm19

packages/docs-gesture-handler/static/examples/PinchGestureBasic.js

@@ -97,7 +97,7 @@ export default function App() {
 
   return (
     <GestureHandlerRootView>
-      <View ref={containerRef} style={[styles.container]}>
+      <View ref={containerRef} style={styles.container}>
         <GestureDetector gesture={pan}>
           <Animated.View
             ref={boxRef}
@@ -135,6 +135,7 @@ const styles = StyleSheet.create({
     flex: 1,
     alignItems: 'center',
     justifyContent: 'center',
+    aspectRatio: 3,
   },
   box: {
     aspectRatio: 1,

packages/docs-gesture-handler/static/examples/TapGestureBasic.js

@@ -15,25 +15,24 @@ import Animated, {
 const COLORS = ['#b58df1', '#fa7f7c', '#ffe780', '#82cab2'];
 
 export default function App() {
-  const colorIndex = useSharedValue(1);
+  const currentIndex = useSharedValue(0);
+  const nextIndex = useSharedValue(0);
+  const progress = useSharedValue(0);
 
   const tap = useTapGesture({
     onActivate: () => {
-      if (colorIndex.value > COLORS.length) {
-        colorIndex.value =
-          colorIndex.value % 1 === 0 ? 1 : colorIndex.value % 1;
-      }
-
-      const nextIndex = Math.ceil(colorIndex.value + 1);
-      colorIndex.value = withTiming(nextIndex, { duration: 250 });
+      currentIndex.value = nextIndex.value;
+      nextIndex.value = (nextIndex.value + 1) % COLORS.length;
+      progress.value = 0;
+      progress.value = withTiming(1, { duration: 250 });
     },
   });
 
   const animatedStyle = useAnimatedStyle(() => ({
     backgroundColor: interpolateColor(
-      colorIndex.value,
-      [0, ...COLORS.map((_, i) => i + 1), COLORS.length + 1],
-      [COLORS[COLORS.length - 1], ...COLORS, COLORS[0]]
+      progress.value,
+      [0, 1],
+      [COLORS[currentIndex.value], COLORS[nextIndex.value]]
     ),
   }));
 

packages/docs-gesture-handler/versioned_docs/version-2.x/examples/TapGestureBasic.js

@@ -15,22 +15,22 @@ import Animated, {
 const COLORS = ['#b58df1', '#fa7f7c', '#ffe780', '#82cab2'];
 
 export default function App() {
-  const colorIndex = useSharedValue(1);
+  const currentIndex = useSharedValue(0);
+  const nextIndex = useSharedValue(0);
+  const progress = useSharedValue(0);
 
   const tap = Gesture.Tap().onEnd(() => {
-    if (colorIndex.value > COLORS.length) {
-      colorIndex.value = colorIndex.value % 1 === 0 ? 1 : colorIndex.value % 1;
-    }
-
-    const nextIndex = Math.ceil(colorIndex.value + 1);
-    colorIndex.value = withTiming(nextIndex, { duration: 250 });
+    currentIndex.value = nextIndex.value;
+    nextIndex.value = (currentIndex.value + 1) % COLORS.length;
+    progress.value = 0;
+    progress.value = withTiming(1, { duration: 250 });
   });
 
   const animatedStyle = useAnimatedStyle(() => ({
     backgroundColor: interpolateColor(
-      colorIndex.value,
-      [0, ...COLORS.map((_, i) => i + 1), COLORS.length + 1],
-      [COLORS[COLORS.length - 1], ...COLORS, COLORS[0]]
+      progress.value,
+      [0, 1],
+      [COLORS[currentIndex.value], COLORS[nextIndex.value]]
     ),
   }));