npm tamagui 1.88.0
v1.88.0
on Node.js NPM

latest releases: 1.136.9, 1.136.8, 1.136.7...
21 months ago

Highlights

Metro Plugin + Web support!

Tamagui 1.88.0 has Expo 50 support, a new beta Expo Router Starter template, and an official @tamagui/metro-plugin which works with both native and web and is compatible with Expo Router! This is super exciting as it turns what was a very complex setup process into a snap - and universal file routes for web and native with a shared bundler is an amazing DX.

We have some further improvements coming here as it's just an initial working version and we haven't optimized much yet. But look out for an update coming soon that reduces generated themes CSS by nearly 80%! 🤯

Hugely improved types and type speed

We fixed many outstanding issues and greatly sped up the type system in Tamagui. This has been a long time in the making, at least three failed attempts over the past few months. It's hard to overstate how incredibly tricky the types are in Tamagui - the layering of styled() components, the modifying of types as you layer, and having to wrap a huge amount of style props with all sort of conditional logic based on your settings for media queries, strictness, and more has been a constant battle. We've had to disable improvements to types multiple times because too many users reported the dreaded "too complex" TSC errors.

Well, no more! The types generated as you nest your styled() components have gone from passable but huge, to something like this (this is a component that is 4 layers deep):

Beyond the mysterious TamaguiDefer which can probably be refactored away soon enough, the types are now readable, compact and most importantly, much flatter. This hasn't been one small fix but a series of hard fixes to get right, and now that our types are faster and more correct, we've already rolled in a large number of correctness fixes in this release. Your apps may have some complaints, especially if you are using the onlyAllowShorthands flag which had been breaking in many configurations.

AnimatePresence gets way more solid + working custom prop for much easier animations

This was quite an expedition actually!

AnimatePresence was originally forked from the wonderful framer-motion. We adapted it to Tamagui and occasionally would pull in bugfixes from their side. Well, we some weirdness in the deep dive earlier this month into fixing SSR + animations, and in revisiting this actually had quite a weird little journey.

The framer-motion carousel demo we often refer to seemed to work perfectly, but no matter how much we ported over the fixes and carefully ensured every part of our logic matched theirs, we finally gave up and cloned the Codesandbox - only to find that the Codesandbox was running framer-motion 5.0, whereas the current version if 10.X! When we updated to the latest, we could replicate some of the issues we were seeing.

So, we've actually reverted the logic, and then tested it thoroughly and added a coupe small fixes for what we saw. And the result is pretty amazing actually - especially when combined with us getting an equivalent custom prop working now in the Tamagui AnimatePresence that can set variants of exiting children as they unmount. The prop name likely will change, but for now it's a testing ground for the feature.

This is all shown nicely in the updated AnimatePresence docs.

The $outlineColor token

We've added a new generic to @tamagui/themes called $outlineColor which gives us a nice way to control outline colors across all components and themes.

Features

  • tamagui: export createMedia to avoid two imports for easier onboarding (natew)
  • select: add focus ring #2104 (Ehsan Sarshar)
  • themes: add outlineColor #2104 (Ehsan Sarshar)
  • toggle-group: use $outlineColor for focusStyle outlineColor #2104 (natew)
  • toast: use $outlineColor for focusStyle outlineColor #2104 (natew)
  • checkbox: use $outlineColor for focusStyle outlineColor #2104 (natew)
  • switch: use $outlineColor for focusStyle outlineColor #2104 (natew)
  • select: use $outlineColor for focusStyle outlineColor #2104 (natew)
  • radio-group: use $outlineColor for focusStyle outlineColor #2104 (natew)
  • button: use $outlineColor for focusStyle outlineColor #2104 (natew)
  • input: use $outlineColor for focusStyle outlineColor #2104 (natew)

Bug Fixes

  • animate-presence: port some fixes from framer motion #2116 (natew)
  • web: fix mount logic when combined with presence to fire mounts whether or not hydrated #2116 (natew)
  • core: fix transformOrigin types to match what React Native supports #2116 (natew)
  • animate-presence: update AnimatePresence with latest framer-motion changes #2116 (natew)
  • web: fix mount animations not running if AnimatePresence is used and you have an enterStyle only defined in a sub-variant #2116 (natew)
  • web: fix initial prevent mount animations using AnimatePresence #2116 (natew)
  • animate-presence: align logic with framer-motion 5.0 which seems to have less buggy logic with the carousel demo #2116 (natew)
  • core: refactor types for performance, accuracy, cleanup #2116 (natew)
  • popper: broken when rtl #2103 (Ehsan Sarshar)
  • animate-presence: port some fixes from framer motion (natew)
  • web: fix mount logic when combined with presence to fire mounts whether or not hydrated (natew)
  • core: fix transformOrigin types to match what React Native supports (natew)
  • animate-presence: update AnimatePresence with latest framer-motion changes (natew)
  • web: fix mount animations not running if AnimatePresence is used and you have an enterStyle only defined in a sub-variant (natew)
  • web: fix initial prevent mount animations using AnimatePresence (natew)
  • animate-presence: align logic with framer-motion 5.0 which seems to have less buggy logic with the carousel demo (natew)
  • core: refactor types for performance, accuracy, cleanup (natew)
  • popper: broken when rtl (Ehsan Sarshar)
  • web: avoid re-export React type (natew)
  • starters-expo-router: upgrade to version 50 and fix issues running (natew)
  • update types to latest, fix release script canary (natew)
  • lucide-icons: bring back the non-standard extra icons we added to ensure backwards compat (natew)
  • web: fix various type regressions, improve some type names (natew)
  • web: fix incorrect extraneous types that were left out but with refactor are now picked up (natew)
  • fix outlineColor to color4 to be not overly bold (natew)
  • animations-react-native: fix setting displayName causing errors in some environments (natew)
  • web: fix SSR issue when animating a nested styled component (natew)

Documentation

  • site: improve configuration docs (natew)
  • site: improve configuration docs (natew)
  • site: fix some configuration animations and shorthands (natew)

Performance Improvements

  • web: simplify GetProps, improve performance typing non-Tamagui components nested (natew)
  • core: further improve inference on non-tamagui nested styled components (natew)

Commits

Check out latest releases or
releases around tamagui 1.88.0

Don't miss a new tamagui release

NewReleases is sending notifications on new releases.

Get notifications