#04: Solito, ts-rest, Nativewind, typed-memo.ts

React Native + Next.js = ♥️. Incrementally adaptable API typing with ts-rest. Tailwind in React Native. Did you know React.memo does not accept generics?

Jul 29, 2023

A word from me. If you enjoy my content, then let your friends or colleagues know using the button below. Me and your friends will greatly appreciate that because every developer will utilize this curated collection of packages and technologies!

Welcome to this weeks edition of ByteBullet. This week we are heading into React Native territory but we still have great TypeScript libraries included.

Here’s a sneak peak of what’s in store:

Solito - The missing piece for using React Native with Next.js to build cross-platform apps
ts-rest - Incrementally adoptable type-safety for your new and existing APIs
Nativewind - Use Tailwind in React Native to build cross platform apps using universal style system
typed-memo.ts - The missing piece in @total-typescript/ts-reset which fixes generic type safety in React.memo

But before we shoot straight into this weeks edition, let me ask you a question:

Do you have a library, technology, opinion or just want to say “hi”?

Then do not hesitate to hit me up on twitter @ByteBulletDev or reply to this email directly!

Solito

Solito is a cross platform framework targeting react-native + Next.js stack. It can be used to create cross platform apps. Solito was featured as #3 on the front page of Hackernews. It can be used in combination with Nativebase, Nativewind or other cross platform UI frameworks to build great and easy to manage projects.

This is a bigger project to fit into a simple code snippet, thus I advise you to take a look and give some luck to the Solito project by Fernando Rojo.

ts-rest

EDIT: We are going to talk about ts-rest project, which is a full ecosystem of packages which brings adoptable type-safety into your projects.

I have mistakenly addressed @total-typescript/ts-reset before which fixes several TypeScript typing issues. We are going to talk about it next Saturday!

ts-rest is an incrementally adoptable type-safety system for your new and existing APIs. This is not just one package, this is a full ecosystem with adapters built for many notable tools like react-query, solid-query, express, next and more… Take a look at the following code example taken from their website!

Nativewind

Nativewind is a tool which uses Tailwind CSS scripting language to build a universal style system for React Native, which can also be used on web using a simple babel plugin. It can be also used in combination with Next.js.

The code example above (taken from their official website) can be simplified using babel preprocessor, which automatically wraps each component with the styled() function. Head over to their website and give them some love!

typed-memo.ts

And to finish off this edition we have a quick code snippet that @munigis suggested after @mattpocockuk created a pool asking:

If there was a ts-reset/react, what would you add to it? Top of my list is forwardRef, but I'm not sure I want to add it alone.

typed-memo.ts is a quick code snippet that fixes an issue that has been bothering react since the inception of React.memo. If you pass a generic to the component it will not give you type safe props.