React Native Yoga

Issue #283.April 25, 2024.2 Minute read.
Bytes

Today’s issue: Node’s controversial new NFT project, knuckle puck time for React, and playing “spot the difference” with landing pages.

Welcome to #283.

Eyeballs logo

The Main Thing

An old lady doing a yoga pose

When you unlock your predictable styling chakra

React Native Yoga

When I first learned that Tuesday’s React Native 0.74 release came with “Yoga 3.0”, I thought the React Native team had finally created a next-gen software solution for my lower back pain.

But it turns out that Yoga is just the name of RN’s layout engine, and it probably won’t help you open up any of your chakras 😭.

That said, Yoga 3.0 does come with a couple new updates that should make styling a lot more predictable:

  • Full support for the static position type, allowing you to position an element relative to an ancestor which is not its direct parent

  • Support for align-content: 'space-evenly', which distributes the lines in a multi-line flex container using evenly spaced gaps

The other big news from this 0.74 release is that React Native is making Bridgeless Mode the default when you enable the (still-experimental) New Architecture.

Historically, the Bridge has facilitated communication between JavaScript and native – but it’s been limiting for React Native because of its asynchronous design, message batching, and serialization costs. That’s why the RN team has spent the last few years multiple years working to move component rendering and the rest of the RN runtime off the Bridge, with the intention of sunsetting it entirely.

Bottom Line: They say the best way to stay relevant is to disrupt yourself, and as React Native nears its 10th (!!) anniversary, this New Architecture looks like it could usher in a whole new era for the framework – one with concurrent React features, improved DX, and a more modernized approach to building cross-platform apps.

        
QA Wolf logo

Our Friends
(With Benefits)

Bobby Hill lying in bed and holding up his hand

When my manager asks if I want to do some QA testing

QA Wolf gets you full end-to-end test coverage in 4 months

And it’s way less expensive than hiring a full-time QA team, and way more effective than forcing your engineers to do it themselves.

Here’s how it works:

  • They automate hundreds of tests for you in Playwright to test every single user flow, API, third-party integration, etc.

  • They provide all the infra to run 100% of your test suite in parallel, so your team can test and deploy continuously.

  • They sort all the real bugs from the flakes with human-verified bug reports – so you never waste time on flaky tests.

See how QA Wolf helped AutoTrader save $620k per year by trading in manual testing for automation, while boosting test coverage and developer happiness 😇.

Learn more about their 90-day pilot program.

Pop Quiz logo

Pop Quiz

Sponsored by Sentry

They’re hosting a free Supabase + Sentry workshop on May 16th that will dive deep on how you can leverage Supabase and Sentry together, demonstrated with a Next.js app. RSVP now.

What gets logged?

const myObject = {};

const key = Symbol('key');

myObject[key] = 'this is the value for the key';

console.log(myObject[Symbol('key')]);
console.log(JSON.stringify(myObject));
Cool Bits logo

Cool Bits

  1. Node.js 22 just came out with support for require()ing ESM graphs, a WebSocket client, and a brand new NFT series featuring their Rocket Turtle mascot (jk).

  2. Sam Scott (co-founder/CTO of Oso) wrote a technical deep dive on How they created a logic programming language called Polar for expressing authorization, which compiles down to SQL over a custom data model.

  3. Malte Ubl wrote a great post on Latency numbers every frontend developer should know.

  4. Ryan Dahl wrote about how JSR is not another package manager – it’s a cool package manager package registry.

  5. StackBlitz is hosting a livestream on how to use their JavaScript SDK to build advanced interactive experiences that are similar to the interactive tutorials MUI and Angular have built for their docs. RSVP here. [sponsored]

  6. Astro 4.7 comes with big improvements to their API for making toolbar apps, a new update checker, and more.

  7. Puck is a visual editor for React for building no-code builders and WYSIWYG editors into your app. Now they just need to watch D2 The Mighty Ducks, so they can be inspired to release the Kunckle Puck library.

  8. Podlite just released v1.0 of their block-oriented markup language.

  9. Ryan Mulligan wrote about Detecting JavaScript support in CSS using the scripting CSS media feature.

  10. Franken UI gives you a shadcn/ui experience for Web Components with a bunch of copy-pasteable, framework-agnostic components. And you can tell they’re serious about copy-pasting, because if you put their landing page side by side with shadcn’s, it looks like one of those “Spot the Difference” picture games on a kids menu at Denny’s.

Pop Quiz logo

Pop Quiz: Answer

Sponsored by Sentry

What gets logged?

const myObject = {};

const key = Symbol('key');

myObject[key] = 'this is the value for the key';

console.log(myObject[Symbol('key')]);
console.log(JSON.stringify(myObject));

  1. undefined - The Symbol constructor creates a unique value, so the Symbol used to set the value of myObject[key] is not the same as the Symbol used to get the value of myObject[key].

  2. {} - JSON.stringify ignores Symbol properties when stringifying an object.

This is useful for creating private properties on objects that can’t be accessed or modified outside of the object. You can read more about Symbols here.