code/tamagui.dev/data/blog/version-one-release-candidate.mdx
It supports the full APIs of React Native alongside helpful inline style props, variants, and a typed design system while optimizing everything by hoisting logic, flattening trees, and generating atomic CSS and other CSS features. This lets you ship faster, share more code across platforms, and net better performance all at once.
Enjoy modern design system library features like typed tokens and inline CSS-in-JS styling while optimal VDOM and CSS is output, besting hand-tuned code. The compiler uses logical and VM-based analysis of your code for surprising results.
On the Tamagui homepage, the compiler flattens 200+ unique components for a 18% Lighthouse score increase.
This Release Candidate marks API stability and the v1 release will follow
shortly as we get feedback on any last outstanding bugs. The V1 blog post will
cover these changes in far more thorough detail. Over a thousand bugfixes
landed during the Beta, alongside major changes all around, including 14 new
components in tamagui.
Here's a very brief overview of changes since Beta:
@tamagui/core Updatesreact-native dependency in @tamagui/core - 🔥 huge for web-only use
casesstyled - The factory now supports wrapping any component you
give it, so long as that component accepts a style prop.<FontLanguage /> - Support for unique fonts per-language.font.face configuration - React Native makes loading fonts a bit trickier
than the web, this option makes it easy to load different fonts by weight or
style.themeShallow prop - The theme prop in Tamagui by default will re-theme
all sub-components. Using themeShallow only themes that component, not
children.loadTheme() - The loadTheme utility function means you can only load the
default themes you want to serve, saving on bundle size, and then add in
alternative themes later on.updateTheme() - Using updateTheme gives you the ability to dynamically
modify themes on the fly.useMediaPropsActive() - Useful for authoring your own custom components
built on Tamagui, easily access the "currently active" set of styles.@tamagui/static Updatescomponents and config.@tamagui/static only knew how to optimize
components found in your separated design system package. The compiler now
analyzes components anywhere in your app, by dynamically loading and reading
their configuration. This experimental feature is enabled with the environment
variable TAMAGUI_ENABLE_DYNAMIC_LOAD=1.core.tamagui updatesTamagui welcomed a flood of new components to the party. These are incredibly
rich components that follow the Radix model of compound component APIs. They
have the ability to adapt their appearance completely using <Adapt /> to
target media queries and platforms.
The V1 blog post will cover these in more detail. You can see the accompanying docs for each for now:
Sheet, Select, Dialog, AlertDialog, Slider, Label, Card, ListItem, Avatar, Progress, Spinner, Unspaced, ScrollView, XGroup and YGroup
A complete CI/CD pipeline in GitHub Actions lints, tests, and type checks everything before release. Our release script has added many checks and features for making sure things go out smoothly.
Testing now covers far more of core and static, as well as a complete
integration test that verifies the entire flow of starting a Tamagui app with
npm create tamagui all the way to Playwright ensuring the final output is
correct and functional.
The best part of this post is how active the community has become.
The Discord has many posts every day. We've had 33 new contributors to the repo, with many of the most significant contributions coming over the last three months.
And I've personally met my goal of 10 GitHub Sponsors for the year, something especially cool given it wasn't promoted beyond a Twitter thread.
Be sure to check the Community page for more goodies like a Figma design system file, example repos, sponsors, and other helpful links.
npm create tamagui can break, requires WSL