design engineer @coinbase, reactiive.io/demos
- Tweets 2,210
- Following 479
- Followers 11,724
- Likes 8,312
You might also want to check out the React Native Skia Graphite announcement from @wcandillon!
piped.video/watch?v=L-PNQi1n…
4
1,115
I've been building a chess puzzles app using @expo, and it’s finally coming together 👀
Made a fun little page for the launch.
→ tempo.reactiive.io
7
10
103
7,209
What @reczko_konrad built is the closest thing to magic I've seen this year.
Couldn't stop thinking about the concept of drawing with light. So I built this small React Native prototype on top of his shader.
Depth-aware light injection in TypeGPU
I got a 448x448 monocular depth model down to ~8 ms on my M4 Pro across ~250 dispatches, which is fast enough to use in realtime :D
Since the inference is written directly in TypeGPU, I can just feed the depth buffer straight into the lighting pass. It never has to leave the GPU or go through any extra synchronization/interop step
Inference, lighting and draw all go through the same command encoder.
13
20
312
20,384
3. to avoid too much randomness and keep the icon easy to recognize, I'm only updating the display text (e.g. 122, the number of animations) and the spiral.
1
3
516
2. to generate a new app icon on every build i'm using a ci hook from @expo called "eas-build-pre-install". It runs automatically before installing the deps on EAS.
1
6
843
1. the idea is that the app icon is designed via code (using headless Skia) and gets re-created on every build
2
1
56
4,306
One of my favorite things about the Demos app is that every update generates a slightly different app icon, so it's always a nice little surprise.
6
3
129
12,309
thank you!! great feedback too, I'll definitely have a try. The way this works is that the letters move around, trying to match a pattern defined by an image. I think it could be improved quite a bit by making a few changes to the original image (maybe removing the planets?), but tweaking the opacity might help a lot too
1
2
126
Great books always feel like the letters themselves are alive.
I’ve had this idea in mind for a while, and it was so fun to prototype with React Native Skia.
9
13
253
16,218
You can now just run "ennio improvise" and your app gets randomly stress-tested.
Useful if you want to make sure you haven't vibecoded too hard.
8
17
287
14,420
2. The best way to feel the difference is to try running your maestro tests with Ennio. It now takes 5 seconds.
1
1
10
1,337
1. note: these results have no statistical significance - they're just the output of my local runs (macbook pro m3).
The bsky e2e suite starts with a setupServer call, I cut that time from the measurements and started after it.
2
7
1,377
3. I had to rethink the initial architecture a lot. Previously it was built on top of the React Native newArch assumption.
Now it doesn't make assumptions.
The search no longer happens via the Fabric tree - it's based on a native
UIView traversal. This works perfectly in React Native because, of course, React Native components are real native components.
Why? The prev idea is still my favorite but has a lot of edge cases (e.g. what about all the components that go undetected by a Fabric tree traversal?). Removing the newArch assumption also simplifies maintenance a ton and (potentially) opens the door to all native apps.
4. the main idea is simple. Instead of using XCUITest, we can rely on the Fabric shadow tree to detect the items, then cross check with the a11y tree and the viewport.
1
2
1,136
2. It's no longer a native package, but a dev dependency (still requires idb right now, but no prebuilds). You can install it and test it in less than 10 seconds.
1
7
950
I've completely reworked the core of Ennio. It's now much easier to get started.
running e2e tests in react native has to be faster 🧵
9
9
171
11,172
Heading back home from @appjsconf. This conf has something magical.
I learned something new from every talk, but more importantly, I’m heading home with so many great memories.
5
3
54
2,870
The way @GroundControl delivered his talk through the companion audience app was just brilliant
1
2
25
2,476
6. Ennio ships as a package with an expo plugin that automatically strips it from release builds.
1
12
1,593
5. once we find the item, we can synchronously measure its coordinates and pass them to IDB, which will simulate a real finger tap at those x,y coordinates. That’s really it.
2
14
1,699
4. the main idea is simple. Instead of using XCUITest, we can rely on the Fabric shadow tree to detect the items, then cross check with the a11y tree and the viewport.
2
23
3,037
3. why faster? Ennio interprets the maestro yaml only for react native apps, which allows it to make additional assumptions. It assumes RN + newArch and communicates via Hermes inspector.
2
27
2,237
2. I'm building Ennio with 1:1 parity with maestro yaml - tapOn, assertVisible, scroll, runFlow, retry, env interpolation. drop your existing flows in, they should just work (hopefully).
1
1
27
3,401
I've been recently experimenting with a new way to run e2e flows in React Native. Same maestro e2e test, same yaml, but 2-3x faster.
learn about Ennio 🧵
25
42
558
60,550
I've been playing with React Native WebGPU recently and it's really flipping my perspective on animations.
178
1,160
16,491
1,038,892
5. Now you can prototype as much as you'd like until you land on a result that's good enough for you.
1
15
3,547
3. Once the mascot was ready, Claude was kind enough to read it directly from Paper via MCP and translate it into Skia paths.
2
18
4,502
Interactive demos speak louder than words.
Finally reworked reanimate.dev to make the concepts click faster.
1
1
84
5,895
3. The website is built with @expo and powered by Skia, it ships to the web and still runs natively. That’s the best part.
1
1
16
1,827
Creating a QR code in React Native should be fun.
→ qrcode.reactiive.io
21
55
1,043
87,833
Shape morphing animations are so addictive.
Just added a few to enzo.fyi
27
27
900
39,865
12/ That’s it! If you found this useful, the full talk goes deeper on each of these 👀 piped.video/cbTsg8GggzA
1
2
17
3,189
11/ Skia can feel overwhelming to learn, but I’ve found that over the past three years, more than 50% of my Skia animations were built on a Skia Path, which has proven to be the most flexible component I’ve ever used.
1
4
2,050
6/ Prototyping a spring animation is hard. But with Reanimated v4, all you need to define a spring animation is a perceptual duration and a damping ratio (0.9 ↔ 1)
1
1
9
1,218
4/ That's not just easier. It's way more delightful, as you get the exact scrolling behavior the user expects.
1
5
839
3/ By doing that, you’ll just lose the native feeling. What’s happening here instead is that there’s a single invisible ScrollView that lets you control all of them with one shared value.
1
2
919
2/ When dealing with cards, it's very tempting to have full control by setting up a Pan Gesture Handler for every single one. But...
3
8
1,149
My talk at @RNLConf has just been published!
I shared some tips for adding delight to React Native apps.
1/ ✦ Invisible ScrollViews 🧵
9
10
238
29,347
Hey Louis! Nice one. Unfortunately, I don't. I think you can go very far with this by using this existing GL Transition gl-transitions.com/editor/In… along with this Skia technique piped.video/PzKWpwmmRqM
1
1
37
7. spring-config-consistency: enforces that spring animations either have all three spring physics parameters (mass, damping, stiffness) or none of them (quite helpful when migrating from reanimated v3 -> v4)
1
8
1,919
6. require-hitslop-small-touchables: requires hitSlop prop on touchable elements that are smaller than a configurable threshold (default: 40pt) to improve tap target size
1
15
1,905
5. prefer-hairline-width: suggests using hairlineWidth for border widths less than or equal to a configurable threshold (default: 0.3)
1
13
2,024
3. prefer-box-shadow: this is not about having clean code - it helps you support beautiful shadows on Android too! (requires newArch)
1
30
2,410
2. border-radius-with-curve: always prefer adding borderCurve property when borderRadius is specified. It makes your corners a bit smoother (iOS only)
2
22
2,601
Introducing Refined ✨
A simple eslint plugin that instantly sharpens your React Native app.
🧵 Here are the rules/tips:
20
28
373
23,522
👀 You can get a 25% discount today with the code “TODAY25” on my animations course.
More info in the thread below 🧵
1
2
10
1,965
Missed this one! I think either works to be honest but I was convinced by the RNGH docs in the end docs.swmansion.com/react-nat…
1
56
