⚛️📱💻 #1: Gluestack UI with NativeWind v4 support, Tamagui UI patch has bugfix for Expo Router starter, RN apps in TVs and more
Hello everyone 👋, ROFI here with the first Universal State of Mind newsletter 🥳.
I have been in love with the multi-platform promise of React Native for years now and have closely followed its development. I can tell that the community, projects, and tooling have been growing by the day, which is great to see. As a small tribe, I noticed that we were missing a place to gather and discuss all the updates. So here we are!
This week's newsletter is a quick first issue to share some of the news that caught my attention. I will make it more comprehensive and complete for the next one.
I hope this helps you and the community grow as we have fun creating universal apps together. ❤️
[ui][new] Gluestack UI now with Nativewind support
Gluestack is offering a new way to use it with the incorporation of the `className` prop into a bunch of components (and more to come soon). This showcases the nature of the Gluestack project as a Radix UI alternative for React Native. Besides that lets remember to also have the unstyled option to bring in your own styling.
I love this because NativeWind, for the most part, serves almost as a blank framework for building your own UI, and for that, you are on your own. Even getting a button out will take you time. Not anymore.
→ Gluestack tweet thread release
→ Gluestack UI / NativeWind docs
[fix] New Tamagui v1.89.22 with Expo Router starter fix
A couple of weeks ago, the Tamagui team released an Expo Router-compatible starter. It is still in beta, but there was a major bug when touching the initial configuration even just a bit. Adding path aliases or moving the app directory to the src directory could break the HMR. It’s fine. Tamagui has it on a beta state and this things happen. But if you had any issues like me, we have a fix now! Make sure to run `npm run upgrade:tamagui` on your starter and update your Babel config to:
module.exports = (api) => {
api.cache(true)
return {
ignore: [
// speeds up compile
'**/@tamagui/**/dist/**',
],
presets: ['babel-preset-expo'],
}
}In any case you could just spin up a new starter with `npm run tamagui@latest` to get the latest changes with the fix. too.
[tut] Native and Web app development with Tamagui
You always have the official docs to pick up on Tamagui, but I found out this post by Morrow Studio crosses all the checkmarks, especially regarding starting to use Tamagui not only from just native but right away with the web in mind. It covers the installation process, customizing components and themes, using variants, color tokens, and managing fonts.
→ Native and Web app development with Tamagui
[podcast] Multiplatform App Development With React Native
This episode of the React Native Show, with guest Mo Javad, goes full throttle universal! It delves into the formation and benefits of a multiplatform vision, including the evolution of universal apps and the business perspective. It also discusses the challenges faced in sharing UI and provides solutions for breaking it up. But that's not all! It covers UI libraries, navigation, business logic, styling, and animations as well. Go ahead and give it a listen.
→ Multiplatform App Development With React Native | The React Native Show Podcast #35
[post] Universal now means TVs too
The plasticity of React Native may push universal development beyond mobile and web. TV may be the next useful frontier. Expo just released a blog post with step-by-step instructions to try out your first Expo TV, thanks to config plugins and the grace and talent of the Infinite Red team and its custom Ignite starter for TV.
That’s it. Universal update done! See you in the next one 👋