code/tamagui.dev/data/blog/tamagui-enters-beta-themes-and-animations.mdx
At its core are three libraries:
<IntroParagraph> <UL> <LI>A style library (`@tamagui/core`) for creating React Native + Web components.</LI> <LI>An optimizing compiler (`@tamagui/static`) for incredible performance.</LI> <LI>A component kit (`tamagui`) built using both of the above.</LI> </UL> </IntroParagraph>It's been six monthsΒ since the first alpha, several hundreds of bugfixes, three demo apps, ten new components, and now a few big new core features. Plus, a refreshed site, a benchmark suite, a host of type improvements, and compatibility with more versions of Next.js, Webpack, and React Native.
What's new?
Introducing npm create tamagui, to get started much faster with a bootstrapped
monorepo that uses Expo, Next.js, Solito and Tamagui.
A big shout out to Fernando Rojo for creating Solito, a great library for sharing all your views between Expo and Next.js, and the bootstrap repo.
Theme internally have been completely redone, and they're really fun. They work
better, nest better, and come with a nice preset in @tamagui/themes.
Theme objects now default to names that map to standard style names (with
optional pseudo suffixes), so color, plus the alternates colorHover,
colorFocus, and colorPress are definable.
Building off that, themes can nest unlimited times - dark and light can have
dark_blue and light_blue, and then different tints below that, like
dark_blue_alt1.
The theme prop is now also available on every component, including ones you
create using the styled factory function.
Components now apply any sub-theme that matches their name - so Button, will
look for dark_blue_Button if it exists, giving complete control the UI at the
theme level, across every component. PLus, icons, buttons and more components
have been upgraded to better handle passing themes down automatically.
I'm really happy with how this landed. This release could have focused more on new components, but it became obvious while working on Tooltip / Popover / Sheet that getting animations and themes right needed to happen first to avoid future pain.
We now have a very solid foundation.
Read the docs for much more on themes.
Animations are making their way, experimentally, into @tamagui/core. They are
unstable, but we want to get feedback and use them more in practice.
They're implemented as pluggable drivers, starting with two:
Which means you can swap entire animation drivers depending on your platform. Want lighter bundles on web, but spring animations on native? Install both packages and swap them out based on your environment.
We've also added a new pseudo enterStyle that works if you have an animation
prop set, giving you easy styling on mount (and see the next section for
exitStyle).
Read the docs on animations to get started.
In early form, we've added
AnimatePresence, which is directly
forked off Framer Motion. It works with exitStyle and variants to make
once-complex animations quite easy.
We've added quite a few new components, and a good portion more are nearing release. Since the alpha we've introduced: Inputs, Label, Switch, Image, Separator, ThemeInverse, Popover, Tooltip, Drawer, Square and Circle, HTML Elements.
Here's the new Switch component working with spring animations:
<HeroContainer> <SwitchDemo /> </HeroContainer>Join our Discord to vote for new components.
The styled() factory function as well gets many upgrades, it accepts React
Native components directly and automatically interprets their props, as well as
many fixes - full media query support, much faster/accurate types, and better
compilation.
Popover was introduced in alpha, but we've redone it for the beta. It's still early stage, but the API is significantly improved. It now gives you much more control over the target, content and trigger. Importantly, it works using Tamagui primitives, and automatically wraps your content in AnimatePresence supporting beautiful and simple enter/exit animations.
The core of Popover is now powered by the wonderful Floating UI, saving us a lot of complexity and giving it more reliable and powerful behaviors.
It's also been split out optionally into it's own package at @tamagui/popover.
Show the code below to see the improved component-based API.
<HeroContainer> <PopoverDemo /> </HeroContainer>Tooltip likewise was rebuilt in a similar fashion to Popover - a compound component API, full animation support, and powered by Floating UI's React DOM Interactions.
<HeroContainer> <TooltipDemo /> </HeroContainer>LinearGradient, Image, and
Button have received lots of love. LinearGradient now fully
supports all theme values and the compiler will help it extract any style
properties. Image should still be considered beta, but has gone through many
rounds of bugfixes and improvements. And Button now handles passing more text
properties down, themes and sizes icons more reliably, and has many fixes for
variants like circular.
We landed experimental support for the focusStyle prop, which works much like
pressStyle and hoverStyle. You can see it in action on Input:
Sometimes you want to reset the current theme to the grandparent. ThemeReset does just this. Note: it's not SSR compatible if you use automatic light/dark themes (it will still work, but it won't fully render until JS runs). There's a fix for this that is a bit involved, but we think it's still useful to release it as experimental.
Use the themes from the Tamagui site itself without any setup at all, simply
install @tamagui/themes and add themes and tokens to createTamagui() in
your tamagui.config.ts.
Likewise, we've released @tamagui/shorthands, nice preset default shorthands.
We've released @tamagui/lucide-icons-2, which have numerous adjustments to work well with themes and sizing.
You can import and use them directly, or pass them to Buttons:
import { Play } from '@tamagui/lucide-icons-2'
import { Button } from 'tamagui'
// theme and size are properly passed from Button to icons automatically
export default () => <Button size="$6" icon={Play} />
asChild prop that lets you simply pass all style props down to a child._ (underscore) separators.tokens.font => fonts.TooltipSimple component that mimics the old TooltipThere's a ton of progress here, but likewise a ton more to go. There's many components, docs, and features to be written, and alongside that I'd like to get better at community and sharing progress from here on out.
What really excites me with this release is the foundation laid. Tamagui now has such a rich set of primitives - from animations, themes, and sizing, to performance across every feature, to all the helpers and hooks adopted since alpha that make animated, sizable and Radix-like compound API's a breeze, all the way to Floating UI and all the powerful primitives that brings. Everything feels like it's working together well (βπͺ΅).
Seeing Tooltip come to life somewhat easily in the latest refactor by just
importing a few hooks/components and giving it an animation prop with
AnimatePresence was really inspiring.
For the the first time I feel like building and shipping an actually beautiful, cross platform app, without needing huge funding is within reach. That's cool.
π»
This release once again is inspired by or forks code from a variety of other libraries and developers.
I'd like to thank:
@tamagui/animations-reanimated, as well as
for putting together Solito that powers the first
template in create-tamagui.@tamagui/animate-presence.asChild.