V3 examples #3857

akwasniewski · 2025-12-02T10:18:12Z

Description

Made a new PR, as it is easier than attempt to merge the old one with next.

This PR adds a toggle in the example app to switch between Legacy and V3 api examples. In the new api section I added split into few sections. Most of them are rewritten old V2 examples with more consistent styling.
I also added a Feedback component to showcase features console free.
The new examples are:

basic examples for every gestures
lock to showcase combining gestures
sharedValue, nestedText, svg - to showcase VirtualDetector
animated - to showcase cooperation with animated

Test plan

See if the examples in new api section from common-example work

j-piasecki

I've been seeing

[Worklets] Tried to modify key current of an object which has been already passed to a worklet. See
https://docs.swmansion.com/react-native-reanimated/docs/guides/troubleshooting#tried-to-modify-key-of-an-object-which-has-been-converted-to-a-shareable
for more details.

when running the examples (Svg for example). Could you investigate it?

j-piasecki · 2025-12-16T09:06:40Z

apps/common-app/src/new_api/showcase/shared_value/index.tsx

+      </View>
+      <Text style={styles.instructions}>
+        The ball has simultanous pan and longPress gestures. Upon update pan
+        changes minDistanceof longPress, such that longPress will fail if is


Suggested change

changes minDistanceof longPress, such that longPress will fail if is

changes maxDistance of longPress, such that longPress will fail if it's

j-piasecki · 2025-12-16T09:07:53Z

apps/common-app/src/new_api/showcase/shared_value/index.tsx

+      });
+    },
+    minDuration: 1000,
+    maxDistance: maxLongPressDistance,


On iOS, maxDistance doesn't seem to do anything. Could you investigate that?

Fixed in #3906

j-piasecki · 2025-12-16T09:09:22Z

apps/common-app/src/new_api/showcase/animated/index.tsx

+  return (
+    <View style={styles.container}>
+      <GestureDetector gesture={panGesture}>
+        <Animated.View


I like this one! Can it also change background color on onBegin?

Sure, I also made it turn red/green on tilt 68893ad

j-piasecki · 2025-12-16T09:13:03Z

apps/common-app/src/new_api/components/buttons/index.tsx

+      <ButtonWrapper ButtonComponent={BaseButton} color={COLORS.KINDA_BLUE} />
+      <ButtonWrapper ButtonComponent={RectButton} color={COLORS.NAVY} />
+      <ButtonWrapper ButtonComponent={BorderlessButton} color={COLORS.PURPLE} />


They only console.log when pressed, should they also show some message on screen?

They should 6b70961

j-piasecki · 2025-12-16T09:16:46Z

apps/common-app/App.tsx

+        SHOW_LEGACY_EXAMPLES_KEY,
+      ]).then(([openLastExample, lastExample, showLegacyExamples]) => {
+        const showLegacy = showLegacyExamples[1] === 'true';
+        if (showLegacyExamples[1]) {


Suggested change

if (showLegacyExamples[1]) {

if (showLegacyExamples[1] != null) {

I'm not sure whether this is what this check was supposed to do, or whether it should check showLegacy - imo it should be explicit.

thanks, b16d4f1

j-piasecki · 2025-12-16T10:15:43Z

apps/common-app/src/new_api/complicated/camera/index.tsx

+    onActivate: () => {
+      'worklet';
+      runOnJS(startRecording)();
+      captureProgress.value = withTiming(1, { duration: VIDEO_DURATION });


I think this is missing easing: Easing.linear - the animation speeds up and slows down.

j-piasecki · 2025-12-16T10:17:08Z

apps/common-app/src/new_api/complicated/lock/index.tsx

+  // Tap to lock
+  const tap = useTapGesture({
+    onDeactivate: () => {
+      'worklet';


If you use the latest react-native-worklets, this directive should be auto-included. Maybe it's worth it to update worklets and remove the directive?

Ohh, great. Thank you, removed in de7371a

j-piasecki · 2025-12-16T10:25:08Z

apps/common-app/src/new_api/hover_mouse/hover/index.tsx

@@ -0,0 +1,156 @@
+import { COLORS, Feedback } from '../../../common';


This is not platform-specific, it just requires additional hardware on mobile (mouse, stylus).

Yeah, i was trying to group the examples more logically then before. I think they should grouped together, but could not find a good section name. For now renamed it to 'Hover and mouse' 1679ca6. Let me now if you have a better name. Do you have better ideas, for grouping in general? cc @m-bert

j-piasecki · 2025-12-16T10:27:39Z

apps/common-app/src/new_api/showcase/overlap/index.tsx

+    <View style={styles.subcontainer}>
+      <View style={styles.row}>
+        <Text style={styles.text}>Overlap Siblings</Text>
+        <InterceptingGestureDetector>


Out of curiosity, why InterceptingGestureDetector here?

Then it won't change which square is on top, as overlap only supports this for siblings. We cannot apply elevated on the GestureDetector, thus I decided VirtualDetector works best here.

j-piasecki · 2025-12-16T10:27:47Z

apps/common-app/src/new_api/showcase/overlap/index.tsx

+      <View style={styles.row}>
+        <Text style={styles.text}>Overlap Child</Text>
+
+        <InterceptingGestureDetector>


m-bert

Okay, here are mu findings 🫨 I'm not sure if any of them will be fixed when we merge next, but hopefully there are a few like this 😅

apps/common-app/src/new_api/complicated/camera/index.tsx

m-bert · 2026-01-07T10:06:23Z

apps/common-app/src/new_api/complicated/camera/index.tsx

I also thought about splitting this file into multiple files, as it contains quite a lot elements. Let me know what you think.

Split somewhat in d700fbd. I don't think further splitting makes sense as the gestures are preety intertwined. Let me know what you think.

m-bert · 2026-01-07T10:08:41Z

apps/common-app/src/new_api/complicated/chat_heads/index.tsx

+  x: Animated.SharedValue<number>;
+  y: Animated.SharedValue<number>;


As far as I can see, importing SharedValue form Animated namespace is deprecated.

m-bert · 2026-01-07T12:58:17Z

apps/common-app/src/new_api/showcase/nested_text/nested_text.tsx

+          this part is not special :(
+        </Text>
+      </GestureDetector>
+      <Feedback ref={feedbackRef} />


Seems like it is not shown:

Screen.Recording.2026-01-07.at.13.57.21.mov

The legacy detector one only works on web, I left it there to highlight that it did not work in v2. I can remove the bottom part if you wish.

m-bert · 2026-01-07T13:01:25Z

apps/common-app/src/new_api/showcase/animated/index.tsx

Beside color blinking at entering, it seems to be broken on android.

Screen.Recording.2026-01-07.at.14.00.12.mov

m-bert · 2026-01-07T13:03:08Z

apps/common-app/src/new_api/hover_mouse/context_menu/index.tsx

I'll just leave a comment - it seems that it doesn't work, but I'm not sure if this is because next has not been merged yet.

m-bert · 2026-01-07T13:11:55Z

apps/common-app/src/new_api/components/drawer/index.tsx

Probably not for this PR, as it only changed colors, but it breaks when type is changed to back:

Screen.Recording.2026-01-07.at.14.11.13.mov

m-bert · 2026-01-07T13:21:47Z

apps/common-app/src/new_api/hover_mouse/hoverable_icons/index.tsx

+// eslint-disable-next-line import-x/no-commonjs, @typescript-eslint/no-var-requires
+const SCREENS = require('../../../common_assets/hoverable_icons/screens.png');
+
+const images = [GH, REA, SCREENS, SVG, FREEZE];


I think we should change how those are displayed 🫨

Fixed in 0232a84

copied from old pr

60cdb2d

akwasniewski changed the base branch from main to next December 2, 2025 10:18

akwasniewski mentioned this pull request Dec 2, 2025

v3 examples #3725

Closed

9 tasks

akwasniewski changed the title ~~examples~~ V3 examples Dec 2, 2025

akwasniewski and others added 26 commits December 2, 2025 11:35

better svg

d8b1818

nested text

c5e855f

feedback component

6bac695

Merge branch 'next' into @akwasniewski/examples

089ec64

simplify commons

ebf8e61

hover

6a18c4c

colours

911b7f5

more consistent styling

bef6b42

fix overlap feedback

21bbbfd

fix feedback

20e13ba

fix svg

f545956

delete redundant comments

141a65c

Merge branch 'next' into @akwasniewski/examples

2aa2e7e

reorganisation

85ee8ad

simple

f41079e

shared value

f74dc1e

mouse buttons

49ea4de

stylus data

712e748

context menu

7086651

animated card

a9702fc

animated

0524e0a

common assets

9e2059e

reorg

47cac99

fix overlap

3e7d620

final styling

8e059c6

Merge branch 'next' into @akwasniewski/examples

89b3c9b

akwasniewski requested review from j-piasecki and m-bert December 15, 2025 21:31

Merge branch 'next' into @akwasniewski/examples

37b7261

j-piasecki reviewed Dec 16, 2025

View reviewed changes

akwasniewski and others added 11 commits December 18, 2025 11:24

Merge branch 'next' into @akwasniewski/examples

00067fc

hover effect

15490fb

fix comment

cab8a09

colors in animated example

68893ad

button feedback

6b70961

explicit check

b16d4f1

button styling

c300e27

remove feedback handle

b967bef

easing linear

e2c9322

fix warning

c3d9d8f

removed worklet directive

de7371a

m-bert reviewed Jan 7, 2026

View reviewed changes

akwasniewski and others added 14 commits January 8, 2026 10:55

remove remaining worklets

1828c73

remove console log

46a0533

naming fix

2083fab

simplify lock

9831b5d

remove redundant function

441a4c7

remove ''

478550e

simplify styling

d80d8fe

fix hoverable icons display

0232a84

rename platform specific

1679ca6

Merge branch 'next' into @akwasniewski/examples

d2ccfda

Merge branch 'next' into @akwasniewski/examples

5297d13

split camera

d700fbd

longpress success color indication

5d2af0a

remove react prefix

11543b5

	changes minDistanceof longPress, such that longPress will fail if is
	changes maxDistance of longPress, such that longPress will fail if it's

	if (showLegacyExamples[1]) {
	if (showLegacyExamples[1] != null) {

		@@ -0,0 +1,156 @@
		import { COLORS, Feedback } from '../../../common';

		x: Animated.SharedValue<number>;
		y: Animated.SharedValue<number>;

Uh oh!

V3 examples #3857

Are you sure you want to change the base?

V3 examples #3857

Uh oh!

Conversation

akwasniewski commented Dec 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Test plan

Uh oh!

j-piasecki left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

m-bert left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

akwasniewski commented Dec 2, 2025 •

edited

Loading