Update example

Author: j-piasecki

apps/basic-example/src/App.tsx

@@ -1,63 +1,51 @@
 import * as React from 'react';
-import { Animated, Button, useAnimatedValue } from 'react-native';
-import {
-  GestureHandlerRootView,
-  NativeDetector,
-  useGesture,
-} from 'react-native-gesture-handler';
+import { SafeAreaView, Platform } from 'react-native';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
 
-export default function App() {
-  const [visible, setVisible] = React.useState(true);
-
-  const value = useAnimatedValue(0);
-  const event = Animated.event(
-    [{ nativeEvent: { handlerData: { translationX: value } } }],
-    {
-      useNativeDriver: true,
-    }
-  );
+import Navigator from './Navigator';
 
-  const tap = useGesture('PanGestureHandler', {
-    // numberOfTaps: 2,
-    // needsPointerData: true,
-    // onGestureHandlerStateChange: (event) => {
-    //   console.log('onHandlerStateChange', event.nativeEvent);
-    // },
-    onGestureHandlerAnimatedEvent: event,
-    onGestureHandlerEvent: (e: any) =>
-      console.log('onGestureHandlerEvent', e.nativeEvent),
-    // onGestureHandlerTouchEvent: (event) => console.log('onGestureTouchEvent', event.nativeEvent),
-  });
+import NativeDetector from './NativeDetector';
+import RuntimeDecoration from './RuntimeDecoration';
 
-  return (
-    <GestureHandlerRootView
-      style={{ flex: 1, backgroundColor: 'white', paddingTop: 150 }}>
-      <Button
-        title="Toggle"
-        onPress={() => {
-          setVisible(!visible);
-        }}
-      />
+const EXAMPLES = [
+  {
+    name: 'Runtime Decoration',
+    component: RuntimeDecoration,
+  },
+  {
+    name: 'Native Detector',
+    component: NativeDetector,
+  },
+];
 
-      {visible && (
-        <NativeDetector gesture={tap}>
-          <Animated.View
-            style={[
-              {
-                width: 150,
-                height: 150,
-                backgroundColor: 'blue',
-                opacity: 0.5,
-                borderWidth: 10,
-                borderColor: 'green',
-                marginTop: 20,
-                marginLeft: 40,
+const Stack = Navigator.create();
+Stack.setRoutes(
+  Object.fromEntries(
+    EXAMPLES.map((example, index) => [
+      example.name.toLowerCase().replace(/\s+/g, ''),
+      {
+        component: example.component,
+        title: example.name,
+        rightButtonAction:
+          index === EXAMPLES.length - 1
+            ? undefined
+            : () => {
+                Stack.navigateTo(
+                  EXAMPLES[index + 1].name.toLowerCase().replace(/\s+/g, '')
+                );
               },
-              { transform: [{ translateX: value }] },
-            ]}
-          />
-        </NativeDetector>
-      )}
+      },
+    ])
+  )
+);
+
+export default function App() {
+  return (
+    <GestureHandlerRootView style={{ flex: 1 }}>
+      <SafeAreaView
+        style={[{ flex: 1 }, Platform.OS === 'android' && { paddingTop: 50 }]}>
+        <Stack.Navigator />
+      </SafeAreaView>
     </GestureHandlerRootView>
   );
 }