V3 examples #3857
V3 examples #3857
Conversation
j-piasecki
left a comment
j-piasecki
left a comment
There was a problem hiding this comment.
I've been seeing
[Worklets] Tried to modify key
currentof 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?
| </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 |
There was a problem hiding this comment.
| changes minDistanceof longPress, such that longPress will fail if is | |
| changes maxDistance of longPress, such that longPress will fail if it's |
| }); | ||
| }, | ||
| minDuration: 1000, | ||
| maxDistance: maxLongPressDistance, |
There was a problem hiding this comment.
On iOS, maxDistance doesn't seem to do anything. Could you investigate that?
| return ( | ||
| <View style={styles.container}> | ||
| <GestureDetector gesture={panGesture}> | ||
| <Animated.View |
There was a problem hiding this comment.
I like this one! Can it also change background color on onBegin?
| <ButtonWrapper ButtonComponent={BaseButton} color={COLORS.KINDA_BLUE} /> | ||
| <ButtonWrapper ButtonComponent={RectButton} color={COLORS.NAVY} /> | ||
| <ButtonWrapper ButtonComponent={BorderlessButton} color={COLORS.PURPLE} /> |
There was a problem hiding this comment.
They only console.log when pressed, should they also show some message on screen?
| SHOW_LEGACY_EXAMPLES_KEY, | ||
| ]).then(([openLastExample, lastExample, showLegacyExamples]) => { | ||
| const showLegacy = showLegacyExamples[1] === 'true'; | ||
| if (showLegacyExamples[1]) { |
There was a problem hiding this comment.
| 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.
| onActivate: () => { | ||
| 'worklet'; | ||
| runOnJS(startRecording)(); | ||
| captureProgress.value = withTiming(1, { duration: VIDEO_DURATION }); |
There was a problem hiding this comment.
I think this is missing easing: Easing.linear - the animation speeds up and slows down.
| // Tap to lock | ||
| const tap = useTapGesture({ | ||
| onDeactivate: () => { | ||
| 'worklet'; |
There was a problem hiding this comment.
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?
| @@ -0,0 +1,156 @@ | |||
| import { COLORS, Feedback } from '../../../common'; | |||
There was a problem hiding this comment.
This is not platform-specific, it just requires additional hardware on mobile (mouse, stylus).
| <View style={styles.subcontainer}> | ||
| <View style={styles.row}> | ||
| <Text style={styles.text}>Overlap Siblings</Text> | ||
| <InterceptingGestureDetector> |
There was a problem hiding this comment.
Out of curiosity, why InterceptingGestureDetector here?
| <View style={styles.row}> | ||
| <Text style={styles.text}>Overlap Child</Text> | ||
|
|
||
| <InterceptingGestureDetector> |
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:
Test plan
See if the examples in new api section from common-example work