V3 examples

apps/common-app/src/common.tsx

@@ -1,10 +1,60 @@
-import React from 'react';
-import { Text, StyleSheet, ViewStyle, StyleProp } from 'react-native';
+import React, {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from 'react';
+import {
+  Text,
+  StyleSheet,
+  ViewStyle,
+  StyleProp,
+  View,
+  Platform,
+} from 'react-native';
+import Animated, {
+  Easing,
+  runOnJS,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+
+export interface Example {
+  name: string;
+  component: React.ComponentType;
+  unsupportedPlatforms?: Set<typeof Platform.OS>;
+}
+
+export interface ExamplesSection {
+  sectionTitle: string;
+  data: Example[];
+}
 
 const styles = StyleSheet.create({
   lipsum: {
     padding: 10,
   },
+  info_container: {
+    padding: 16,
+    backgroundColor: '#F5F7FA',
+    borderRadius: 12,
+    marginVertical: 12,
+    borderWidth: 1,
+    borderColor: '#E2E8F0',
+  },
+  info_body: {
+    fontSize: 15,
+    lineHeight: 22,
+    color: '#4A5568',
+  },
+  feedback: {
+    marginTop: 20,
+    fontSize: 16,
+    fontWeight: '600',
+  },
 });
 
 type Props = {
@@ -25,9 +75,101 @@ export class LoremIpsum extends React.Component<Props> {
   }
 }
 
+interface InfoSectionProps {
+  description: string;
+}
+
+export function InfoSection({ description }: InfoSectionProps) {
+  return (
+    <View style={styles.info_container}>
+      <Text style={styles.info_body}>{description}</Text>
+    </View>
+  );
+}
+
+type FeedbackProps = {
+  duration?: number;
+};
+
+export type FeedbackHandle = {
+  showMessage: (message: string) => void;
+};
+
+export const Feedback = forwardRef<FeedbackHandle, FeedbackProps>(
+  ({ duration = 1000 }, ref) => {
+    const [text, setText] = useState('Feedback');
+    const timerRef = useRef<number | null>(null);
+
+    const opacity = useSharedValue(0);
+
+    const animatedStyle = useAnimatedStyle(() => ({
+      opacity: opacity.value,
+    }));
+
+    const displayMessage = useCallback(
+      (message: string) => {
+        console.log(message);
+        if (timerRef.current) {
+          clearTimeout(timerRef.current);
+        }
+
+        setText(message);
+        opacity.value = withTiming(1, {
+          duration: 100,
+          easing: Easing.out(Easing.ease),
+        });
+
+        timerRef.current = setTimeout(() => {
+          opacity.value = withTiming(0, {
+            duration: 500,
+            easing: Easing.out(Easing.ease),
+          });
+          timerRef.current = null;
+        }, duration) as unknown as number;
+      },
+      [duration, opacity]
+    );
+
+    useImperativeHandle(ref, () => ({
+      showMessage: (message: string) => {
+        'worklet';
+        runOnJS(displayMessage)(message);
+      },
+    }));
+
+    useEffect(() => {
+      return () => {
+        if (timerRef.current) {
+          clearTimeout(timerRef.current);
+        }
+      };
+    }, []);
+
+    if (!text) {
+      return null;
+    }
+
+    return (
+      <Animated.Text style={[styles.feedback, animatedStyle]}>
+        {text}
+      </Animated.Text>
+    );
+  }
+);
+
 export const COLORS = {
   offWhite: '#f8f9ff',
   headerSeparator: '#eef0ff',
+  PURPLE: '#b58df1',
+  NAVY: '#001A72',
+  RED: '#A41623',
+  YELLOW: '#F2AF29',
+  GREEN: '#0F956F',
+  GRAY: '#ADB1C2',
+  KINDA_RED: '#FFB2AD',
+  KINDA_YELLOW: '#FFF096',
+  KINDA_GREEN: '#C4E7DB',
+  KINDA_BLUE: '#A0D5EF',
 };
 
 const LOREM_IPSUM = `

apps/common-app/src/basic/bouncing/index.tsx → apps/common-app/src/legacy/basic/bouncing/index.tsx

@@ -11,7 +11,7 @@ import {
   RotationGestureHandlerStateChangeEvent,
 } from 'react-native-gesture-handler';
 
-import { USE_NATIVE_DRIVER } from '../../config';
+import { USE_NATIVE_DRIVER } from '../../../config';
 
 class Snappable extends Component<PropsWithChildren<Record<string, unknown>>> {
   private onGestureEvent?: (event: PanGestureHandlerGestureEvent) => void;

apps/common-app/src/basic/draggable/index.tsx → apps/common-app/src/legacy/basic/draggable/index.tsx

@@ -9,8 +9,8 @@ import {
   ScrollView,
 } from 'react-native-gesture-handler';
 
-import { USE_NATIVE_DRIVER } from '../../config';
-import { LoremIpsum } from '../../common';
+import { USE_NATIVE_DRIVER } from '../../../config';
+import { LoremIpsum } from '../../../common';
 
 type DraggableBoxProps = {
   minDist?: number;

apps/common-app/src/basic/forcetouch/index.tsx → apps/common-app/src/legacy/basic/forcetouch/index.tsx

@@ -7,7 +7,7 @@ import {
   ForceTouchGestureHandlerStateChangeEvent,
 } from 'react-native-gesture-handler';
 
-import { USE_NATIVE_DRIVER } from '../../config';
+import { USE_NATIVE_DRIVER } from '../../../config';
 
 export default class Example extends Component {
   private force = new Animated.Value(0);

apps/common-app/src/basic/multitap/index.tsx → apps/common-app/src/legacy/basic/multitap/index.tsx

@@ -10,7 +10,7 @@ import {
   TapGestureHandlerStateChangeEvent,
 } from 'react-native-gesture-handler';
 
-import { LoremIpsum } from '../../common';
+import { LoremIpsum } from '../../../common';
 
 interface PressBoxProps {
   setDuration?: (duration: number) => void;

apps/common-app/src/basic/panResponder/index.tsx → apps/common-app/src/legacy/basic/panResponder/index.tsx

@@ -12,7 +12,7 @@ import {
 import { ScrollView } from 'react-native-gesture-handler';
 
 import { DraggableBox } from '../draggable';
-import { LoremIpsum } from '../../common';
+import { LoremIpsum } from '../../../common';
 
 const CIRCLE_SIZE = 80;