Move examples to separate files

Author: m-bert

packages/docs-gesture-handler/docs/fundamentals/_examples/hooks/Competing.tsx

@@ -0,0 +1,48 @@
+import { View, StyleSheet } from 'react-native';
+import {
+  GestureDetector,
+  usePanGesture,
+  useLongPressGesture,
+  GestureHandlerRootView,
+  useCompetingGestures,
+} from 'react-native-gesture-handler';
+
+export default function App() {
+  const panGesture = usePanGesture({
+    onUpdate: () => {
+      console.log('Pan');
+    },
+  });
+  const longPressGesture = useLongPressGesture({
+    onDeactivate: (_, success) => {
+      if (success) {
+        console.log('Long Press');
+      }
+    },
+  });
+
+  const gesture = useCompetingGestures(panGesture, longPressGesture);
+
+  return (
+    <GestureHandlerRootView style={styles.container}>
+      <GestureDetector gesture={gesture}>
+        <View style={styles.box} />
+      </GestureDetector>
+    </GestureHandlerRootView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'space-around',
+  },
+  box: {
+    height: 120,
+    width: 120,
+    backgroundColor: '#b58df1',
+    borderRadius: 20,
+    marginBottom: 30,
+  },
+});

packages/docs-gesture-handler/docs/fundamentals/_examples/hooks/Exclusive.tsx

@@ -0,0 +1,49 @@
+import { StyleSheet, View } from 'react-native';
+import {
+  GestureDetector,
+  GestureHandlerRootView,
+  useTapGesture,
+  useExclusiveGestures,
+} from 'react-native-gesture-handler';
+
+export default function App() {
+  const singleTap = useTapGesture({
+    onDeactivate: (_, success) => {
+      if (success) {
+        console.log('Single tap!');
+      }
+    },
+  });
+
+  const doubleTap = useTapGesture({
+    numberOfTaps: 2,
+    onDeactivate: (_, success) => {
+      if (success) {
+        console.log('Double tap!');
+      }
+    },
+  });
+
+  const taps = useExclusiveGestures(doubleTap, singleTap);
+
+  return (
+    <GestureHandlerRootView style={styles.container}>
+      <GestureDetector gesture={taps}>
+        <View style={styles.box} />
+      </GestureDetector>
+    </GestureHandlerRootView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'space-around',
+  },
+  box: {
+    width: 100,
+    height: 100,
+    backgroundColor: 'plum',
+  },
+});

…/fundamentals/_examples/simultaneous.tsx …mentals/_examples/hooks/Simultaneous.tsxpackages/docs-gesture-handler/docs/fundamentals/_examples/simultaneous.tsx renamed to packages/docs-gesture-handler/docs/fundamentals/_examples/hooks/Simultaneous.tsx packages/docs-gesture-handler/docs/fundamentals/_examples/simultaneous.tsx renamed to packages/docs-gesture-handler/docs/fundamentals/_examples/hooks/Simultaneous.tsx

@@ -0,0 +1,96 @@
+import React, { useState } from 'react';
+import { StyleSheet } from 'react-native';
+import {
+  GestureDetector,
+  GestureHandlerRootView,
+  ScrollView,
+  NativeGesture,
+  usePinchGesture,
+} from 'react-native-gesture-handler';
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withTiming,
+} from 'react-native-reanimated';
+
+const ITEMS = ['red', 'green', 'blue', 'yellow'];
+
+type ItemProps = {
+  backgroundColor: string;
+  scrollGesture: NativeGesture | null;
+};
+
+function Item({ backgroundColor, scrollGesture }: ItemProps) {
+  const scale = useSharedValue(1);
+  const zIndex = useSharedValue(1);
+
+  const pinch = usePinchGesture({
+    onBegin: () => {
+      zIndex.value = 100;
+    },
+    onUpdate: (e) => {
+      scale.value *= e.scaleChange;
+    },
+    onFinalize: () => {
+      scale.value = withTiming(1, undefined, (finished) => {
+        if (finished) {
+          zIndex.value = 1;
+        }
+      });
+    },
+    block: scrollGesture ?? undefined,
+  });
+
+  const animatedStyles = useAnimatedStyle(() => ({
+    transform: [{ scale: scale.value }],
+    zIndex: zIndex.value,
+  }));
+
+  return (
+    <GestureDetector gesture={pinch}>
+      <Animated.View
+        style={[
+          { backgroundColor: backgroundColor },
+          styles.item,
+          animatedStyles,
+        ]}
+      />
+    </GestureDetector>
+  );
+}
+
+export default function App() {
+  const [scrollGesture, setScrollGesture] = useState<NativeGesture | null>(
+    null
+  );
+
+  return (
+    <GestureHandlerRootView style={styles.container}>
+      <ScrollView
+        style={styles.container}
+        onGestureUpdate_CAN_CAUSE_INFINITE_RERENDER={(gesture) => {
+          if (!scrollGesture || scrollGesture.tag !== gesture.tag) {
+            setScrollGesture(gesture);
+          }
+        }}>
+        {ITEMS.map((item) => (
+          <Item
+            backgroundColor={item}
+            key={item}
+            scrollGesture={scrollGesture}
+          />
+        ))}
+      </ScrollView>
+    </GestureHandlerRootView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  item: {
+    flex: 1,
+    aspectRatio: 1,
+  },
+});

packages/docs-gesture-handler/docs/fundamentals/_examples/props/Block.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import {
+  GestureDetector,
+  GestureHandlerRootView,
+  useTapGesture,
+} from 'react-native-gesture-handler';
+
+export default function App() {
+  const innerTap = useTapGesture({
+    numberOfTaps: 2,
+    onDeactivate: (_, success) => {
+      if (success) {
+        console.log('inner tap');
+      }
+    },
+  });
+
+  const outerTap = useTapGesture({
+    onDeactivate: (_, success) => {
+      if (success) {
+        console.log('outer tap');
+      }
+    },
+    requireToFail: innerTap,
+  });
+
+  return (
+    <GestureHandlerRootView style={styles.container}>
+      <GestureDetector gesture={outerTap}>
+        <View style={styles.outer}>
+          <GestureDetector gesture={innerTap}>
+            <View style={styles.inner} />
+          </GestureDetector>
+        </View>
+      </GestureDetector>
+    </GestureHandlerRootView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  outer: {
+    width: 250,
+    height: 250,
+    backgroundColor: 'lightblue',
+  },
+  inner: {
+    width: 100,
+    height: 100,
+    backgroundColor: 'blue',
+    alignSelf: 'center',
+  },
+});

packages/docs-gesture-handler/docs/fundamentals/_examples/props/RequireToFail.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import {
+  GestureDetector,
+  GestureHandlerRootView,
+  useTapGesture,
+} from 'react-native-gesture-handler';
+
+export default function App() {
+  const innerTap = useTapGesture({
+    onDeactivate: (_, success) => {
+      if (success) {
+        console.log('inner tap');
+      }
+    },
+  });
+
+  const outerTap = useTapGesture({
+    onDeactivate: (_, success) => {
+      if (success) {
+        console.log('outer tap');
+      }
+    },
+    simultaneousWith: innerTap,
+  });
+
+  return (
+    <GestureHandlerRootView style={styles.container}>
+      <GestureDetector gesture={outerTap}>
+        <View style={styles.outer}>
+          <GestureDetector gesture={innerTap}>
+            <View style={styles.inner} />
+          </GestureDetector>
+        </View>
+      </GestureDetector>
+    </GestureHandlerRootView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  outer: {
+    width: 250,
+    height: 250,
+    backgroundColor: 'lightblue',
+  },
+  inner: {
+    width: 100,
+    height: 100,
+    backgroundColor: 'blue',
+    alignSelf: 'center',
+  },
+});