diff --git a/.argent/flows/basic-tap-test.yaml b/.argent/flows/basic-tap-test.yaml new file mode 100644 index 0000000000..1bf752c68b --- /dev/null +++ b/.argent/flows/basic-tap-test.yaml @@ -0,0 +1,51 @@ +steps: + - echo: Launching Expo Example + - launch: com.example.ExpoExample + - await: { visible: { text: "Empty Example" }, timeout: 15000 } + - echo: "On the Home list, search for tap example" + - type: { text: "tap", into: { id: "search-examples" } } + - echo: "Tap the example to open it" + - tap: "Basic Tap" + - echo: "Clear console" + - await: { visible: "open-console-button" } + - await: { idle: true } + - tap: "open-console-button" + - await: { visible: "clear-console-button" } + - tap: "clear-console-button" + - tap: "close-console-button" + - await: { idle: true } + - echo: "Tap the box and check if tap count is updated" + - await: { visible: "Tap count: 0" } + - assert: { visible: "tap-box" } + - tap: "tap-box" + - assert: { visible: "Tap count: 1" } + - echo: "Check if console logs are printed in order" + - tap: "open-console-button" + - await: { idle: true } + - await: { visible: "close-console-button" } + - assert: { visible: "1. onBegin" } + - assert: { visible: "2. onActivate" } + - assert: { visible: "3. onDeactivate" } + - assert: { visible: "4. onFinalize" } + - tap: "close-console-button" + - await: { idle: true } + - await: { visible: "Tap count: 1" } + - echo: "Tap the box again and check if tap count is updated" + - tap: "tap-box" + - assert: { visible: "Tap count: 2" } + - echo: "Clear console" + - await: { visible: "open-console-button" } + - tap: "open-console-button" + - await: { visible: "clear-console-button" } + - tap: "clear-console-button" + - tap: "close-console-button" + - await: { idle: true } + - echo: "Long press the box and check if tap count is not updated" + - long-press: "tap-box" + - assert: { visible: "Tap count: 2" } + - echo: "Check if console logs are printed in order" + - tap: "open-console-button" + - await: { idle: true } + - await: { visible: "close-console-button" } + - assert: { visible: "9. onBegin" } + - assert: { visible: "10. onFinalize" } diff --git a/apps/common-app/src/common.tsx b/apps/common-app/src/common.tsx index 8cdc3e8d5d..fd12711d98 100644 --- a/apps/common-app/src/common.tsx +++ b/apps/common-app/src/common.tsx @@ -14,6 +14,7 @@ import Animated, { useSharedValue, withTiming, } from 'react-native-reanimated'; +import { scheduleOnRN } from 'react-native-worklets'; export interface Example { name: string; @@ -140,6 +141,24 @@ type Props = { style: StyleProp; }; +export function useIndexedLogger() { + const messageCounter = useRef(0); + + const logMessage = (message: string) => { + messageCounter.current += 1; + const indexedMessage = `${messageCounter.current}. ${message}`; + console.log(indexedMessage); + }; + + const logMessageWorklet = (message: string) => { + 'worklet'; + // Schedule log on the JS thread so the console interceptor can pick it up + scheduleOnRN(logMessage, message); + }; + + return logMessageWorklet; +} + export class LoremIpsum extends React.Component { static defaultProps = { words: 1000, diff --git a/apps/common-app/src/new_api/simple/tap/index.tsx b/apps/common-app/src/new_api/simple/tap/index.tsx index 37e329758c..a090cad9ba 100644 --- a/apps/common-app/src/new_api/simple/tap/index.tsx +++ b/apps/common-app/src/new_api/simple/tap/index.tsx @@ -1,5 +1,5 @@ -import React from 'react'; -import { View } from 'react-native'; +import React, { useCallback, useState } from 'react'; +import { Text, View } from 'react-native'; import { GestureDetector, useTapGesture } from 'react-native-gesture-handler'; import Animated, { interpolateColor, @@ -7,11 +7,16 @@ import Animated, { useSharedValue, withTiming, } from 'react-native-reanimated'; +import { scheduleOnRN } from 'react-native-worklets'; -import { COLORS, commonStyles } from '../../../common'; +import { COLORS, commonStyles, useIndexedLogger } from '../../../common'; export default function TapExample() { + const [count, setCount] = useState(0); const colorProgress = useSharedValue(0); + const log = useIndexedLogger(); + + const incrementCount = useCallback(() => setCount((c) => c + 1), []); const animatedStyle = useAnimatedStyle(() => { return { @@ -25,11 +30,20 @@ export default function TapExample() { const tapGesture = useTapGesture({ onBegin: () => { + log('onBegin'); colorProgress.value = withTiming(1, { duration: 100, }); }, + onActivate: () => { + log('onActivate'); + scheduleOnRN(incrementCount); + }, + onDeactivate: () => { + log('onDeactivate'); + }, onFinalize: () => { + log('onFinalize'); colorProgress.value = withTiming(0, { duration: 100, }); @@ -38,8 +52,12 @@ export default function TapExample() { return ( + Tap count: {count} - + );