React Native makes it official

Today’s issue: Turning your type safety up to 11, rediscovering old tools, and the data store that never told you life was gonna be this way.

Welcome to #306.

---

React Native makes it official

The React Native team just declared that using the Expo framework is now the officially recommended way to build new React Native apps.

That’s not exactly shocking news, but it might feel a little strange if you haven’t worked with React Native recently. Why should you need to use a whole different framework to build RN apps?

According to the React Native team, it’s because “you’re either using a framework, or you’re building your own framework.”

First of all, that’s a bar. And it’s the same sentiment that the React team expressed when they made a similar recommendation earlier this year for React developers.

Let’s take a closer look at some of the key things Expo saves RN developers from having to build themselves, courtesy of Kadi Kraman’s talk at React Conf:

• Access to native capabilities – The Expo SDK acts as an “extended standard library” for RN with 70+ native libraries, and the Expo Modules API makes it a lot simpler to build additional native modules.

• Simple navigation – The Expo Router gives you file system-based routing for RN, so you can build for Android, iOS, and the web from a single codebase.

• Native code management – Expo’s Continuous Native Generation provides a much smoother experience for maintaining native code in your project.

Bottom Line: You might have good reasons for choosing to build this framework-like functionality from scratch for your React Native app. Maybe you’re a large org that requires a custom-built solution with a deep integration – or maybe you’re a solo dev who’s trying to avoid all his weird cousins at a family reunion in southern Florida right now, so you’re inventing new problems for yourself to solve in the hopes that it will make the next 5 days pass faster haha wouldn’t that be crazy?

But for 99% of RN devs, Expo is clearly the best option now. And it’s cool to see the React Native team officially recognize that.

---

Manage all your API credentials with Zero

Manually managing your team’s API keys can feel like a full-time job (from hell).

You need to rotate them for security, allow developers to access them quickly, make sure they don’t get accidentally exposed – or just put them all in a .env file and hope it never gets pushed 🥴.

That’s why smart teams use Zero. It gives you everything you need to securely and intuitively manage your API credentials from one platform:

• Multi-platform SDKs for TypeScript, Rust, and more to easily fetch your API secrets

• A fast, Rust-based CLI

• A centralized platform to see the usage stats of all your different API keys in one place, and rotate them without changing your application code

• A quick-and-easy way to securely share secrets with team members via limited-time passcodes

Check out the free tier and never waste time worrying about API keys again.

---

const items = [
  { id: 1, name: 'Apple', price: 0.5 },
  { id: 2, name: 'Banana', price: 0.3 },
  { id: 3, name: 'Orange', price: 0.6 }
];

function applyDiscount(items, discount) {
  for (let i = 0; i < items.length; i++) {
    items[i].price -= items[i].price * discount;
    items[i].price = items[i].price.toFixed(2);
  }
  return items;
}

const discountedItems = applyDiscount(items, 0.1);
const totalPrice = discountedItems.reduce((sum, item) => sum + item.price, 0);

---

1. Tinybase just launched v5.0 of its reactive data store. They named this release “The One You Can Sync” because it adds new data sync functionality and because they’ll be there for you when the rain starts to pour.

2. Kevin Schiener wrote about How the React compiler won’t save you from sneaky memory leaks.

3. Join Snyk’s Live Hack Workshop to learn how to proactively identify security weaknesses in your AI generated code. Get live support in the hands-on lab as you build a demo app with AI-assisted coding tools, then exploit and remediate vulnerabilities 🤖 🛠 [sponsored]

4. Effect 3.5 just came out with better support for Error.cause and a bunch of other features to help you crank your Type safety up to level 11.

5. kurtextrem wrote about How to improve INP with yield patterns.

6. jsben.ch is a performance benchmarking playground for JavaScript that’s been around for a while, but has been making the rounds again lately – just like this video of my middle school band struggling to cover a Weezer song.

7. Deno 1.45 just added support for workspaces and monorepos, and folks are hyped.

8. CarbonQA gives your dev team high-quality QA services that scale. Their US-based testers work directly with your tools and break your app repeatedly, so you never have to waste eng time on QA testing again. [sponsored]

9. Salma Alam Naylor wrote about How to hack your Google Lighthouse scores in 2024. Maybe Willem Dafoe’s character in The Lighthouse wouldn’t have gone so crazy if he had just read this blog post.

10. Daishi Kato wrote about How Zustand was born. There’s nothing more powerful than a parent’s love for their baby.

---

The bug is in the applyDiscount function.

After applying the discount, we use toFixed(2) to round the price to two decimal places. However, toFixed() returns a string, not a number. This means that when we later try to calculate the total price using reduce(), we’re actually performing string concatenation instead of number addition.

There are a bunch of ways to fix this. The simplest (if you’re confident in your data), is to use Number.

function applyDiscount(items, discount) {
  return items.map(item => ({
    ...item,
    price: Number((item.price * (1 - discount)).toFixed(2))
  }));
}