Universal UI kit and style system for React Native + Web - with an optimizing compiler 🚄

Last update: Jan 1, 2023

Overview

A style system, UI kit and optimizing compiler for React Native & Web

@tamagui/core - Independent minimal style system on top of React Native/Web.
tamagui - Complete universal UI kit built on top of @tamagui/core.
@tamagui/static - Optimizing compiler that works with core and tamagui.

See tamagui.dev for documentation.

Tamagui lets you share more code between web and native apps while improving, rather than sacrificing, DX, performance, and code maintainability.

It does this with an optimizing compiler that flattens your React trees and outputs platform-specific optimizations like generating atomic CSS and media queries on the web.

The compiler enables a win-win-win: more performance, easier to write, works on every platform. Typically you'd have to choose two of: performant, cross-platform, concise. With Tamagui, you don't!

The compiler actually partially evaluates code including imports, logic, spreads, and nested ternaries. Any fully analyzable JSX usage will be flattened entirely (to a div on web, or View on native, rather than your custom defined component), leading to large reductions in tree-size.

Learn more on the website.

Contributing

Tamagui is a monorepo that makes it easy to contribute. Install:

yarn

While developing, you'll want to run the build watcher in a dedicated terminal:

yarn watch

It's easiest to use the sandbox project to test and develop things for web:

yarn sandbox

This runs a client-side only vite build of tamagui, with a complete configuration already set up.

To test on native, kitchen-sink is equally light weight and well set up:

yarn kitchen-sink

Once you've made changes, you can add tests. All compiler and CSS generation tests live in packages/static.

Before submitting a PR, check everything works across every combination of environments.

To do so, run the site, first in development to test if it works entirely at runtime:

# Make sure you have run `yarn watch` before you excute this command.

yarn site

You replace _app.tsx to return just your component/use case. If it looks good, try running again with the compiler on:

yarn site:extract

Finally, if that looks good, build to production and test that:

yarn site:prod

This flow ensures it works with Vite, Webpack, Metro, Next.js with SSR, and with the compiler both on and off.

Our plan is to add integration tests to cover all this and more soon!

Comments

Tamagui starter not compatible with Expo EAS build

Describe the bug Starting a new project with npm create [email protected] will not successful build on Expo EAS services. This is mostly I think due to the fact that the tamagui-app starter uses yarn v3 which seems not compatible with Expo services.

To Reproduce Run npm create [email protected] and install all dependencies. After that drop a minimal eas.json into the apps/expo folder:

{
  "build": {
    "development": {
      "distribution": "internal",
      "android": {
        "buildType": "apk"
      },
      "ios": {
        "simulator": true,
        "image": "latest"
      }
    },
    "production": {
      "distribution": "store",
      "android": {
        "buildType": "app-bundle"
      }
    }
}

Last run following command in apps/expo folder

eas build --profile development --platform ios

See attached screenshot that on ios builds the eas build hangs and does not complete.

System Info (please complete the following information):

  System:
    OS: macOS 12.4
    CPU: (10) arm64 Apple M1 Max
    Memory: 3.20 GB / 64.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.16.0 - ~/.nvm/versions/node/v16.16.0/bin/node
    Yarn: 3.2.0 - ~/.nvm/versions/node/v16.16.0/bin/yarn
    npm: 8.13.2 - ~/.nvm/versions/node/v16.16.0/bin/npm
  Browsers:
    Brave Browser: 105.1.43.88
    Safari: 15.5

opened by dohomi 20

[Windows] Required appropriate loader error when running yarn web

Describe the bug Received a required appropriate loader error when running yarn web on fresh install using npx [email protected] my-app

error - ../packages/app/provider/index.tsx
Module parse failed: Unexpected token (5:46)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| import { TamaguiProviderProps } from '@my/ui'
|
> export function Provider({ children, ...rest }: TamaguiProviderProps) {
|   return (
|     <Tamagui.Provider disableInjectCSS defaultTheme="light" {...rest}>

To Reproduce

Start a new project using npx [email protected] my-app
cd to project
run yarn web

System Info (please complete the following information): Output of npx envinfo --system --npmPackages '{vitest,vite,@vitejs/*}' --binaries --browsers

  System:
    OS: Windows 10 10.0.19044
    CPU: (24) x64 AMD Ryzen 9 3900X 12-Core Processor
    Memory: 15.48 GB / 31.91 GB
  Binaries:
    Node: 16.15.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 3.2.0 - C:\Program Files (x86)\Yarn\bin\yarn.CMD       
    npm: 8.11.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 103.0.5060.134
    Edge: Spartan (44.19041.1266.0), Chromium (103.0.1264.77)    
    Internet Explorer: 11.0.19041.1566

opened by vktrwlt 17

[bug] Responsive props (e.g `$gtSm`) don't work in native.
Describe the bug

On expo/in-native responsive props on Tamagui elements do not work at all

Repro here: https://github.com/jonsherrard/responsive-prop-repro

Example component: https://github.com/jonsherrard/responsive-prop-repro/blob/main/packages/ui/src/MyComponent.tsx

To Reproduce

npx [email protected]

Add a prop to your component, compare in Next.js and Expo

Try to use the object syntax with a $xs or $gtLg style prop on any tamagui element.

Repro: https://github.com/jonsherrard/responsive-prop-repro

Video

https://user-images.githubusercontent.com/631670/206288311-596b99f6-aebc-4169-b466-b45d0840bc0d.mp4

System Info (please complete the following information):

Output of npx envinfo --system --npmPackages --binaries --browsers

System: OS: macOS 12.6 CPU: (16) x64 Intel(R) Xeon(R) W-2140B CPU @ 3.20GHz Memory: 425.63 MB / 32.00 GB Shell: 5.8.1 - /bin/zsh Binaries: Node: 16.17.0 - ~/.nvm/versions/node/v16.17.0/bin/node Yarn: 3.2.3 - ~/.yarn/bin/yarn npm: 2.15.12 - ~/node_modules/.bin/npm Watchman: 2022.07.04.00 - /usr/local/bin/watchman Browsers: Brave Browser: 107.1.45.123 Chrome: 108.0.5359.94 Firefox: 107.0 Safari: 16.0 npmPackages: @babel/runtime: ^7.18.9 => 7.20.6 @manypkg/cli: ^0.19.1 => 0.19.2 @types/react: ^18.0.15 => 17.0.21 @types/react-native: ^0.69.6 => 0.69.15 eslint: ^8.21.0 => 8.28.0 prettier: ^2.7.1 => 2.8.0 turbo: ^1.4.2 => 1.6.3 typescript: ^4.7.4 => 4.9.3
opened by jonsherrard 14
Ease the dependency on @expo/match-media

I wanted to bring attention to the hard dependency on @expo/match-media. IMO core module should not force the bare react-native developer to install the expo module, which requires changes to the native code.

In this PR I drafted an option to make the match-media function pluggable. It will simplify the installation process for react-native developers who might not even use media props.

@natew, let me know how we can tackle this issue.

opened by alisherks 14

Buttons are not clickable on mobile

Describe the bug Buttons are not clickable on mobile when they are on the web. Reproducible on both version 1.0.1-beta.115 and 1.0.1-beta.116.

To Reproduce

<Button onPress={() => console.log('signIn')}>
  Sign in
</Button>

System Info (please complete the following information):

System:
    OS: macOS 12.4
    CPU: (8) arm64 Apple M1 Pro
    Memory: 97.30 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
Binaries:
    Node: 16.15.1 - ~/.nvm/versions/node/v16.15.1/bin/node
    Yarn: 1.22.15 - ~/.nvm/versions/node/v16.15.1/bin/yarn
    npm: 8.11.0 - ~/.nvm/versions/node/v16.15.1/bin/npm
Browsers:
    Brave Browser: 103.1.40.113
    Chrome: 103.0.5060.134
    Safari: 15.5```

opened by matthieuh 12

Vercel build fails with tamagui starter monorepo
Is your feature request related to a problem? Please describe. The current Tamagui starter does not build successfully on Vercel using the Github monorepo approach.

Type error: Cannot find module '@my/ui' or its corresponding type declarations.

Locally NextJS works, also the build. It seems to be some config missing that Vercel recognises the path to "@my/ui" Below is the config for the Vercel build.

Describe the solution you'd like Add the necessary config to NextJS for successful deploy to Vercel
opened by dohomi 10

Unable to make Tamagui work on a managed Expo project

Describe the bug I recently stumbled upon Tamagui. I believe it's a great system and wanted to style an upcoming React Native Expo app using it. So I followed all the instructions for React Native and Expo, but there seems to be a problem with the Tamagui.Provider component that I am not able to resolve.

To Reproduce

Install all the Tamagui packages and upgrade react-native-web to ^0.18.1 and react-native-safe-area-context ^4.3.1.
Add the following code to babel.config.js:

plugins: [
      'react-native-reanimated/plugin',
      [
        '@tamagui/babel-plugin',
        {
          components: ['tamagui'],
          config: './app/theme/tamagui-config.ts',
          logTimings: true,
          disableExtraction: process.env.NODE_ENV === 'development',
        },
      ],
      // be sure to set TAMAGUI_TARGET
      [
        'transform-inline-environment-variables',
        {
          include: 'TAMAGUI_TARGET',
        },
      ],
    ],

Create the following tamagui-config.ts file:

import { createTamagui } from 'tamagui';
import { createInterFont } from '@tamagui/font-inter';
import { shorthands } from '@tamagui/shorthands';
import { themes, tokens } from '@tamagui/theme-base';
import { createAnimations } from '@tamagui/animations-reanimated';

const animations = createAnimations({
  bouncy: {
    type: 'spring',
    damping: 10,
    mass: 0.9,
    stiffness: 100,
  },
  lazy: {
    type: 'spring',
    damping: 20,
    stiffness: 60,
  },
  quick: {
    type: 'spring',
    damping: 20,
    mass: 1.2,
    stiffness: 250,
  },
});

const headingFont = createInterFont({
  size: {
    6: 15,
  },
  transform: {
    6: 'uppercase',
    7: 'none',
  },
  weight: {
    6: '400',
    7: '700',
  },
  color: {
    6: '$colorFocus',
    7: '$color',
  },
  letterSpacing: {
    5: 2,
    6: 1,
    7: 0,
    8: -1,
    9: -2,
    10: -3,
    12: -4,
    14: -5,
    15: -6,
  },
});

const bodyFont = createInterFont(
  {},
  {
    sizeSize: (size: number) => Math.round(size * 1.1),
    sizeLineHeight: (size: number) =>
      Math.round(size * 1.1 + (size > 20 ? 10 : 10)),
  },
);

const config = createTamagui({
  animations,
  defaultTheme: 'light',
  shouldAddPrefersColorThemes: true,
  themeClassNameOnRoot: true,
  shorthands,
  fonts: {
    heading: headingFont,
    body: bodyFont,
  },
  themes,
  tokens,
  media: {
    xs: { maxWidth: 660 },
    sm: { maxWidth: 800 },
    md: { maxWidth: 1020 },
    lg: { maxWidth: 1280 },
    xl: { maxWidth: 1420 },
    xxl: { maxWidth: 1600 },
    gtXs: { minWidth: 660 + 1 },
    gtSm: { minWidth: 800 + 1 },
    gtMd: { minWidth: 1020 + 1 },
    gtLg: { minWidth: 1280 + 1 },
    short: { maxHeight: 820 },
    tall: { minHeight: 820 },
    hoverNone: { hover: 'none' },
    pointerCoarse: { pointer: 'coarse' },
  },
});

export type Conf = typeof config;

declare module 'tamagui' {
  interface TamaguiCustomConfig extends Conf {}
}

export default config;

Add provider to App.tsx:

import React, { useCallback, useEffect } from 'react';
import { StatusBar } from 'expo-status-bar';
import * as SplashScreen from 'expo-splash-screen';
import { SafeAreaProvider } from 'react-native-safe-area-context';

import './localization/i18n';

import useCachedResources from './hooks/useCachedResources';
import useColorScheme from './hooks/useColorScheme';
import Navigation from './navigation';
import { View } from 'react-native';
import Tamagui from './theme/tamagui-config';

export default function App() {
  const isLoadingComplete = useCachedResources();
  const colorScheme = useColorScheme();

  useEffect(() => {
    const preventSplashFromHiding = async () => {
      await SplashScreen.preventAutoHideAsync();
    };
    preventSplashFromHiding();
  }, []);

  const onLayoutRootView = useCallback(async () => {
    if (isLoadingComplete) {
      // This tells the splash screen to hide immediately! If we call this after
      // `setAppIsReady`, then we may see a blank screen while the app is
      // loading its initial state and rendering its first pixels. So instead,
      // we hide the splash screen once we know the root view has already
      // performed layout.
      await SplashScreen.hideAsync();
    }
  }, [isLoadingComplete]);

  if (!isLoadingComplete) {
    return null;
  }

  return (
    <SafeAreaProvider onLayout={onLayoutRootView}>
      <Tamagui.Provider disableInjectCSS defaultTheme="light"></Tamagui.Provider>
    </SafeAreaProvider>
  );
}

You will get this error every time the app starts: TypeError: null is not an object (evaluating 'dispatcher.useMemo'). Which makes it impossible for it to start. If, leaving all the rest of the files the same, you were to replace the provider with a simple view with text, the app runs perfectly.

Environment (please complete the following information):

OS: iOS 15.5 (Expo)
Version: ^1.0.1-beta.75

opened by inakineitor 10

Local images not shown
Describe the bug I am trying to integrate cross platform images in my tamagui app. I started from create-tamagui-app, and now I am trying to add an Image component, so I added an assets folder to my app

Then inside my packages/app/features/home/screen.ts file I am trying to require it

const logo = require('../../assets/logo.png')`

and to render it with

<Image style={{ width: 100, height: 100 }} source={{ uri: logo }}></Image>

or

<Image style={{ width: 100, height: 100 }} source={{ logo }}></Image>

But there is no way to make it show up.

I also tried to import the Image component directly from react-native instead of tamagui without luck.

What is the proper way to render local assets?

Thank you

To Reproduce Try to render a local image

System Info (please complete the following information):

System: OS: macOS 12.6 CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz Memory: 22.40 MB / 16.00 GB Shell: 5.8.1 - /bin/zsh Binaries: Node: 16.17.0 - /usr/local/bin/node Yarn: 3.2.0 - ~/.nvm/versions/node/v16.17.0/bin/yarn npm: 8.15.0 - ~/.nvm/versions/node/v16.17.0/bin/npm Browsers: Chrome: 105.0.5195.125 Firefox: 104.0.2 Safari: 16.0
opened by apperside 9

Reanimated crashing when using animations

When using the code:

<Square
  bc="$pink10"
  animation="bouncy"
  elevation="$4"
  size={110}
  br="$9"
  hoverStyle={{
    scale: 1.2,
  }}
  pressStyle={{
    scale: 0.9,
  }}
>
  <MyComponent width="$4" height="$4" />
</Square>;

I'm getting the following error: Tried to synchronously call anonymous function from a different thread.

opened by cmaycumber 9

[bug] `` breaks with `next build`

I'll make a full repro soon...but the following issues exist with ThemeInverse:

1. Broken in web prod

If I yarn next build, then ThemeInverse doesn't seem to apply at all. Kinda odd. I inspected the output HTML, and it's outputting class="light" in the place where I put ThemeInverse. I believe it should be class="t_light", right? When I change it to t_light it gets fixed.

2. Doesn't SSR (separate issue, I believe)

In dev mode, the themeInverse does work, but it has a pretty significant flicker since it's not SSR'ing. Not as big of a deal as the issue above, but maybe it could be made a bit faster by using a layout effect or something. Separate issue, just thought I'd flag it first.

opened by nandorojo 8
Using panels (Dialog and Sheet)
Describe the bug Hello @natew , first of all let me tell you that the work you have done is truly impressive, and I don't understand why tamagui is so less popular than other similar framework like Native Base or other. BTW, I am very happy to have found tamagui, and I think I will use it by default on all my future projects, its build layer is a real superpower, and the typing system is amazing.

That being said, I am also a NX fan boy and an Expo detractor, so I built a monorepo project with NX + Tamagui + NextJS + Bare React Native Project, you can find it here.

It works pretty well, I also managed to integrate solito (even though I had quite a lot of headaches with it).

The reason for this issue however is because I am experiencing troubles integrating Dialogs and Sheet on both the web and native.

From what I can understand from the documentation:

AlertDialog work only on web

Dialog work on web and on native too, but it needs some tweak on the latter

Sheet has no warning about compatibility, so I assume it should work both on the web and native

I am than trying to integrate Sheet, and the first problem is this:

it seem that shorthands are not recognized, even though they are on the rest of the codebase.

It is just a typescript error, so I am able to use it anyway by ignoring warnings: If I add to my a component with the exact same code of you example https://tamagui.dev/docs/components/sheet, I get this error on the web

and this one on mobile

The tamagui provider is properly integrated as I can successfully use useTheme hook.

What's the proper way to integrate the Sheet component?

The second question is:

In the docs, for the Modal component, you say

Notice: Dialog is in beta for Web only, it renders on Native but some styling and interaction needs fixes before it's usable.

Can you please elaborate more on what you mean for "but some styling and interaction needs fixes before it's usable."?

Thank you

To Reproduce

Clone the repo https://github.com/apperside/nx-tamagui-example

CHECKOUT test-sheet branch

launch mobile and web app and you will get the described errors.

System Info (please complete the following information): System: OS: macOS 12.4 CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz Memory: 248.80 MB / 16.00 GB Shell: 5.8.1 - /bin/zsh Binaries: Node: 14.19.3 - ~/.nvm/versions/node/v14.19.3/bin/node Yarn: 1.22.19 - ~/.nvm/versions/node/v14.19.3/bin/yarn npm: 6.14.17 - ~/.nvm/versions/node/v14.19.3/bin/npm Browsers: Chrome: 103.0.5060.134 Firefox: 102.0.1 Safari: 15.5
opened by apperside 8
Using animations inside of a dialog causes dialog to break when opening and closing [bug]

See title. Will add a video later. Current workaround is to preform conditional rendering to remove the dialog when it's not opened which removes the pretty dialog close animation.

opened by GigaBigBoss 0
[bug] Reproducibly failing Vite project
Hey Nate, congrats and thanks for the v1 release! Super excited to give it a go 😄

Sadly, I've ran into various teething issues with a Vite project. I've widdled it down to a minimally reproducible example that I've put into a CodeSandbox - https://codesandbox.io/p/sandbox/tamagui-vite-ssr-h3ueim . Let me know if you'd prefer that I add it to the apps folder!

In essence, I'm trying to set up Tamagui on Vite, with the compiler and with SSR. The above CodeSandbox is about as far as I can get. It renders fine on the client, without the compiler. The SSR dev server seems to pick up react-native module issues, despite only targetting the web.

I've annotated everything I've seen with a TODO in the codebase, so you should be able to more easily search. But to list them here as well:

vite.config.ts

Named import from @tamagui/vite-plugin doesn't seem to work correctly

I don't believe the Vite plugin is correctly applying its settings, from React Native Web Lite to Aliases

The compiler fails with errors originating from variableToCSS / createCSSVariable, where it appears to be trying to create a variable for the Proxy Worm, which I can't figure out why the config is being detected as such in the first place?

devServer.ts

Transpiling for the client works fine (via yarn dev -> yarn dev:client), however transpiling for SSR seems to pick up react-native modules (change yarn dev -> yarn dev:ssr in package.json)

Again, do let me know how I can help or if you need any more information on what I'm seeing! Hopefully, the CodeSandbox is a good starting point 🤞

Much appreciated 🙏
opened by tazsingh 1
Text inputs break when using a seperator outside of SSR [bug]

Code where the issue is occuring:

What it should look like:

What it looks like:

Here's a repo with the bug: https://github.com/GigaBigBoss/tamagui/tree/master/starters/next-expo-solito and you can see it live here: https://tamagui-sandbox.vercel.app/

Issue doesn't occur when not using "SSR finish", issue seems to be present with more than just separators but am unsure what else at the moment, issue also appears to of popped up within the last month or so.

opened by GigaBigBoss 0
Dialogs don't respect theme settings [bug]

Everything else appears to properly accept theme except dialogs which instead will switch based on device lightmode/darkmode. (I'm using DidSSRFinish() so this bug might only occur under whilst using outside of SSR)

opened by GigaBigBoss 0
[bug] Tamagui starter fails to run on Android: java.lang.Double cannot be cast...
Describe the bug

A fresh Tamagui app via npm create tamagui fails to run on Android device or emulator, giving the following error.

Looks like it may be related to the react-native-svg version, but the suggested version (12.1.0) is already the only one in yarn.lock. Unsure how to fix.

To Reproduce

npm create [email protected] [or npm create tamagui] cd appdir yarn native Press {a} to run on Android emulator or device

System Info (please complete the following information):

System: OS: macOS 13.0.1 CPU: (16) x64 Intel(R) Xeon(R) W-2140B CPU @ 3.20GHz Memory: 54.34 MB / 32.00 GB Shell: 5.8.1 - /bin/zsh Binaries: Node: 14.19.3 - ~/.nvm/versions/node/v14.19.3/bin/node Yarn: 1.22.19 - ~/.yarn/bin/yarn npm: 6.14.17 - ~/.nvm/versions/node/v14.19.3/bin/npm Browsers: Chrome: 108.0.5359.124 Safari: 16.1

Received same error on emulator (Pixel 3 XL API 30) and device (Galaxy S9).

Error goes away when I uninstall react-native-svg and the tamagui icons package and comment out the references.
opened by ArcadeCityMayor 4

Releases(v1.0.2)

v1.0.2(Jan 1, 2023)
Bug Fixes

Metro installation link (#458) #458 (Anil Seervi)

focusable: unregister focusable Inputs before reregistering between renders (#465) #465 (_nderscore)

core: various minor bundle size improvements (natew)

core: fix animate on mount on native regression (natew)

starters: Use react-native-svg 13.4 to fix android issue with latest expo (natew)

create-tamagui: fix test in ci (natew)

site: reported kb size, we confused the diff between rnw and core vs just core, but well get this down to 17kb anyway in the next few releases (natew)

Documentation

upgrade archived link for starter (#470) #470 (David Leuliette)

update expo starter link (#456) #456 (Abdullah Mzaien)

update expo starter link (#456) (Abdullah Mzaien)

Builds

run ci checks on pull requests (#464) #464 (Connor Tumbleson)

Commits

84dcb41: update-starters-v1.0.1 (natew)

f7a8f4e: site fix links (natew)

df9a39b: add bugger 1.0 button to home (natew)

46bbea7: site fix small blog post style (natew)

37d918c: Fix blog typo (Sky) #461

ae9377a: blog words (natew)

ddfe3b8: Fix more blog typos (Sky) #461

add font example to installation docs (natew)

77bf5f8: site fix intro paragraph link bold (natew)

1c49a2a: add youtube video to launch post (natew)

1fe2d1d: site video placement (natew)

8a3b2ee: site typo (natew)

4728d27: site add error boundaries (natew)

f1aa331: site remove video its heavy (natew)

6f882c1: optimize heavy image (natew)

52ea075: Add tsx for better syntax highlighting (#473) (Ross Waycaster) #473

b4c0b9e: fix merge typos (natew) #461

b77ec55: site fix blog card overflow and small size, words (natew)

b4d34aa: fix types (natew)

21f0cc4: v1.0.2 (natew)

Source code(tar.gz)
Source code(zip)
v1.0.1-rc.17(Dec 29, 2022)
Bug Fixes

dialog: fix desktop and sheet together incompat with portal (natew)

Commits

eb80d85: update-starters-v1.0.1-rc.16 (natew)

5cd64c4: v1.0.1-rc.17 (natew)

Source code(tar.gz)
Source code(zip)
v1.0.1-rc.16(Dec 29, 2022)
Features

sheet: Add forceRemoveScrollEnabled boolean (natew)

Bug Fixes

core: fix hydrations issues with animated mount values occasionally being off (natew)

dialog: fix dialog contents not adapting to sheet due to invalid hostname (natew)

core: some slight theme change improvements (natew)

sheet: fix remove scroll on body properly (natew)

Commits

799d720: update-starters-v1.0.1-rc.15 (natew)

d27c05b: site words add studio screenshots (natew)

8feef54: work towards proper tama cli (natew)

2cbe637: site words (natew)

b9fd7ad: v1.0.1-rc.16 (natew)

Source code(tar.gz)
Source code(zip)
v1.0.1(Dec 29, 2022)
Bug Fixes

core: Theme passes on data-themeable prop to lists of children (natew)

Commits

8a74803: update-starters-v1.0.1-rc.17 (natew)

50cd5a3: publish blog post (natew)

c98a276: next.md (natew)

63b1673: v1.0.1 (natew)

Source code(tar.gz)
Source code(zip)
v1.0.1-rc.15(Dec 28, 2022)
Bug Fixes

core: fix theme should return new value during rendering (natew)

core: fix native not animating again after initial animation occasionally (natew)

input: numberOfLines sets height rather than maxHeight to avoid movemewnt on focus changing border width (natew)

core: Bundle size reduction (natew)

loosen peerDependencies all over (natew)

Performance Improvements

core: avoid re-rendering much more often on theme changes (natew)

Commits

8440c54: update-starters-v1.0.1-rc.11 (natew)

improve install docs (natew)

591b6de: fix tests (natew)

1066c30: update-starters-v1.0.1-rc.14 (natew)

add sponsor header button (natew)

fb5c705: site fix link (natew)

c830551: site fix mobile menu (natew)

v1 bump versions and docs (natew)

1b8f34e: site fix (natew)

3281ee9: v1.0.1-rc.15 (natew)

Source code(tar.gz)
Source code(zip)
v1.0.1-rc.11(Dec 28, 2022)
Features

core: add t_will-mount className before enterStyle animations run first time to allow for clean CSS fallbacks when js turned off and no flash of mounted styling otherwise (natew)

Bug Fixes

sheet: when fully hidden Sheet will set opacity 0 to avoid accidently showing on web during resize, and defaults to background color for the overlay (natew)

popover: Fix popover not passing zIndex to right element (natew)

core: Add t_unmounted className to documentElement and document usage with Next.js, easier properly done mount animations that work with JS turned off (natew)

create-app: fix tests timing out on cleanup (natew)

site: fix link hydration issue (natew)

core: dont want on newlines (natew)

Commits

6c78d8e: update-starters-v1.0.1-rc.10 (natew)

c6971bf: add funding (natew)

5cd3fbf: auto xmas mode (natew)

fix hydration issue with nextlink (natew)

0b1f481: site fix link styles and hydration (natew)

e243055: site redo article link (natew)

1019dce: demos draft (natew)

version one post (natew)

version one post 2 (natew)

version one post 3 (natew)

fix alignment (natew)

32a3e43: site title (natew)

89a5f5a: site words 4 (natew)

69addd8: v1.0.1-rc.11 (natew)

Source code(tar.gz)
Source code(zip)
v1.0.1-rc.9(Dec 25, 2022)
Breaking Changes

button: themeable() components now accept themeReset rather than reset for the reset property to match themeInverse (natew)

Bug Fixes

site: fix overuse of useWindowDimensions (natew)

sheet: fix SheetScrollView closing when it shouldnt due to running release logic when scrolling (natew)

core: track mutations for removed StyleSheets so we properly re-add styles if removed #452 (natew)

Performance Improvements

core: Add WeakMap cache to getSplitStyles, use in operator for faster lookups (natew)

Commits

81e435f: update-starters-v1.0.1-rc.8 (natew)

66a5fa6: site installation docs (natew)

cbc6468: site words (natew)

142963c: site words (natew)

button: themeable() components now accept themeReset rather than reset for the reset property to match themeInverse (natew)

b58fd93: use simpler npm init script (natew) #452

1076ac1: site various release (natew) #452

a319d44: rename create-tamagui-app to just create-tamagui (natew) #452

ed5a285: site words (natew)

5cf3122: fix builds (natew)

36ae641: v1.0.1-rc.9 (natew)

Source code(tar.gz)
Source code(zip)
v1.0.1-rc.10(Dec 25, 2022)
Bug Fixes

core: left in log, paying the cost immediately for using rome (natew)

static: fix leaking esbuild process (natew)

core: track mutations for removed StyleSheets so we properly re-add styles if removed (natew)

animations-react-animated: fix avoid re-running animations when not changed (natew)

Documentation

popover: added example for button within popover (#450) #450 (kzlar)

Commits

9145cd5: site words (natew) #452

2b179c4: site words (natew) #452

51884ce: fix builds (natew) #452

8483f4f: v1.0.1-rc.9 (natew) #452

5a48ebf: update-starters-v1.0.1-rc.9 (natew) #452

654ad77: use simpler npm init script (natew)

76bcd55: fix revert bad merge (natew)

21660b5: fix broken merge (natew) #452

bb37336: site various release (natew)

7d95b11: rename create-tamagui-app to just create-tamagui (natew)

827ff52: site words (natew)

274b026: site words (natew)

5aa0c08: fix builds (natew)

4781972: v1.0.1-rc.9 (natew)

bb0b07d: update-starters-v1.0.1-rc.9 (natew)

santa (natew)

b1774b9: merge (natew)

a05b69d: fix mobile santa (natew)

bb1846e: v1.0.1-rc.10 (natew)

Source code(tar.gz)
Source code(zip)
v1.0.1-rc.8(Dec 24, 2022)
Bug Fixes

select: fix glitched positioned for a frame on close (natew)

alert-dialog: fix missing scope error (natew)

Commits

0446f07: update-starters-v1.0.1-rc.7 (natew)

6a3bf73: fix credit (natew)

6062537: site start on mailing list signup (natew)

39ef38d: v1.0.1-rc.8 (natew)

Source code(tar.gz)
Source code(zip)
v1.0.1-rc.7(Dec 24, 2022)
Bug Fixes

next-plugin: avoid css stuff on server side #451 (natew)

sandbox: fix webpack setup for debugging sandbox #451 (natew)

loader: fix webpack not loading subsequent css by adding dependency to the output css #451 (natew)

sheet: fix portals on android to properly target the root element #451 (natew)

dialog: fix dialog sheet adapt on android #451 (natew)

select: fix select + sheet + modal on android #451 (natew)

popover: fix popover on android #451 (natew)

starters: move transpilePackages out of experimental #451 (natew)

sheet: automatically add padding bottom to scrollable sheets to avoid bottom content clipping off the screen #451 (natew)

Commits

b77e4db: update-starters-v1.0.1-rc.6 (natew)

52f12e2: sync to latest starter (natew) #451

979a10f: update next (natew) #451

7ffa773: site docs install (natew) #451

09122df: remove unused dep (natew) #451

d3aaad6: fix some types (natew)

40ce9c7: v1.0.1-rc.7 (natew)

Source code(tar.gz)
Source code(zip)
v1.0.1-rc.6(Dec 23, 2022)
Bug Fixes

next-theme: use next/script to avoid warnings (natew)

popover: Fix more consistent id usage for sheet adapt bug not showing content (natew)

core: fix useMedia unlistening in dev mode and not updating (natew)

Performance Improvements

tamagui: Use startTransition for most heavier component state changes from open/closed (natew)

Commits

13bd318: update-starters-v1.0.1-rc.5.1 (natew)

update sponsors (natew)

aa00b8e: move to rome lint and re-format (natew)

b477196: v1.0.1-rc.6 (natew)

Source code(tar.gz)
Source code(zip)
v1.0.1-rc.5.1(Dec 22, 2022)
Bug Fixes

button: Fix button defaulting to span instead of button tag #444 (natew)

Commits

0f28e9c: update-starters-v1.0.1-rc.5 (natew)

d08db9f: start on cli (natew) #444

09732be: start on interation tests within starter app for easier iteration than in create-tamagui-app (natew)

4f8964d: v1.0.1-rc.5.1 (natew)

Source code(tar.gz)
Source code(zip)
v1.0.1-rc.5(Dec 21, 2022)
Features

starters: Expo 0.47.x (natew)

Bug Fixes

core: fix native styles not merging default styles that arent expanded, cuasing expanding over child styles (natew)

Commits

3f2dd23: update-starters-v1.0.1-rc.4.1 (natew)

039a8d4: Simply _app.tsx (Fernando Rojo) #441

4eb7239: v1.0.1-rc.5 (natew)

Source code(tar.gz)
Source code(zip)
v1.0.1-rc.4.1(Dec 20, 2022)
Commits

e41c853: update-starters-v1.0.1-rc.4 (natew)

2cd7ddf: fix always use tamagui react-native-svg by default (natew)

7254b3b: v1.0.1-rc.4.1 (natew)

Source code(tar.gz)
Source code(zip)
v1.0.1-rc.4(Dec 20, 2022)
Bug Fixes

site: one header instance that retains state across pages (natew)

fix deps to be less likely to cause duplicates and not allow >= major versions on react, react-dom, react-native-svg (natew)

starters: remove config dependency to simplify and fix require cycle (natew)

Commits

40e5977: update-starters-v1.0.1-rc.3.1 (natew)

fc059c3: improve release de-couple version from tests (natew)

8126572: v1.0.1-rc.4 (natew)

Source code(tar.gz)
Source code(zip)
v1.0.1-rc.3.1(Dec 19, 2022)
Bug Fixes

core: animation prop accept null values (natew)

Commits

e8e38d7: update-starters-v1.0.1-rc.3 (natew)

b7e36a6: v1.0.1-rc.3.1 (natew)

Source code(tar.gz)
Source code(zip)
v1.0.1-rc.3(Dec 19, 2022)
Features

tamagui: Inputs use placeholderColor from themes instead of specific color value (natew)

starters: update expo to 0.47 and update expo sub-dependencies #438 (natew)

Bug Fixes

site: update media player (natew)

tamagui: Input sets outlineWidth 0 by default #438 (natew)

core: Use CSS variables for initial createComponent styles #438 (natew)

core: Text defaults to suppressHighlighting true to match web style #438 (natew)

starters: fix android build dependencies #438 (natew)

Commits

271783c: update-starters-v1.0.1-rc.2 (natew)

fb26585: restore rc button (natew)

8a49702: site docs use-media (natew)

f514804: use billie jean (natew) #438

24cd452: v1.0.1-rc.3 (natew)

Source code(tar.gz)
Source code(zip)
v1.0.1-rc.2(Dec 15, 2022)
Features

portal: allow forwarding props to portal children, and fix mis-matched id on removal #435 (natew)

core: allow forwarding space if a child component has "shouldForwardSpace" set onto the component instance, and only one child exists of this type #435 (natew)

adapt: Adapt.Contents forwards space props when they exist #435 (natew)

Bug Fixes

core: fix enterStyle not applying with SSR when not used with AnimatePresence #435 (natew)

dialog: fix web not being position fixed, disable full trap focus for now as it prevents text selection on Chrome until bug is fixed in focus-scope #435 (natew)

react-native-web-lite: fix vite animation bug avoid using inline require #435 (natew)

Commits

fb9d9f9: v1.0.1-rc.1.5 (natew)

b4fcf68: update-starters-v1.0.1-rc.1.5 (natew)

words and blog design #435 (natew)

start on update command #435 (natew)

words and blog design (natew)

14c2d74: v1.0.1-rc.2 (natew)

Source code(tar.gz)
Source code(zip)
v1.0.1-rc.1.5(Dec 13, 2022)
Performance Improvements

core: remove concatClassName entirely (natew)

Commits

567227a: update-starters-v1.0.1-rc.1.4 (natew)

c3809f1: v1.0.1-rc.1.5 (natew)

Source code(tar.gz)
Source code(zip)
v1.0.1-rc.1.4(Dec 12, 2022)
Bug Fixes

let useCurrentColor access token colors #431 (Peter Skaltsis)

site: fix subsequent pages missing css #432 (natew)

starters: turn on optimizeCss by default to avoid next page-load css bug #432 (natew)

Chores

update to typescript 4.9.4 #432 (natew)

Commits

6e06325: update-starters-v1.0.1-rc.1.3 (natew)

38b1a3f: start on cli for allowing the pre-build strategy (natew) #432

core: remove custom types-react-native and just use @types/react-native (natew)

7d5b037: v1.0.1-rc.1.4 (natew)

Source code(tar.gz)
Source code(zip)
v1.0.1-rc.1.3(Dec 12, 2022)
Features

react-native-web-lite: Import concurrent mode compat animated driver from react-native repo #428 (natew)

core: Export ThemeProviderRootContext for accessing defaultTheme #428 (natew)

core: add outlineStyle, outlineWidth, outlineOffset, outlineColor to the web-only style props to match react-native-web #428 (natew)

react-native-web-lite: Import concurrent mode compat animated driver from react-native repo (natew)

Bug Fixes

animate-presence: fix not mounting on client side due to SSR fix #428 (natew)

next-theme: SSR safe change for useRootTheme #428 (natew)

starters: use as const for variants #428 (natew)

core: fix getMedia should return non-$ prefixed media keys #428 (natew)

core: fix set defaults for animatable values on defaults when using enterStyle #428 (natew)

select: update floating-ui, avoid showing outlines by default, and fixes some firefox bugs #428 (natew)

Commits

fdf8cb0: update-starters-v1.0.1-rc.1.2 (natew)

11e2a3b: site remove copy-to-clipboard in favor of navigator.clipboad (natew)

c73df61: v1.0.1-rc.1.3 (natew)

Source code(tar.gz)
Source code(zip)
v1.0.1-rc.1.2(Dec 11, 2022)
Bug Fixes

core: Fix native invalid key usage breaking inline media query styles (natew)

Commits

62524e3: update-starters-v1.0.1-rc.1.1 (natew)

f3dd81e: update next juse concurrent (natew)

0d7e386: site fix double render (natew)

5b2eb03: site fix docs import (natew)

57e9caf: #426 - Fix Wrong Link (Manan Tank) #427

f96fe19: Fix another wrong link (Manan Tank) #427

aeeb654: Update package.json (Dominic Garms) #425

4de3366: Should work with non hoisted dependencies (pnpm) (Alexey Pronevich) #424

2519fcd: v1.0.1-rc.1.2 (natew)

Source code(tar.gz)
Source code(zip)
v1.0.1-rc.1.1(Dec 9, 2022)
Bug Fixes

core: fix regression in media query + space not re-rendering and not preferring the more important state when using classnames (natew)

Performance Improvements

core: ThemeManager WeakMap to avoid double calculating state (natew)

Commits

192c481: update-starters-v1.0.1-rc.1 (natew)

f1abe14: v1.0.1-rc.1.1 (natew)

Source code(tar.gz)
Source code(zip)
v1.0.1-rc.1(Dec 9, 2022)
Bug Fixes

site: z-index (natew)

studio: restore cli command (natew)

site: Fix SSR issue in chrome #423 (natew)

core: Use simple media query method for styled components to better get accurate space value and avoid re-rendering more simply and accurately #423 (natew)

site: fix hero top glow rendering often #423 (natew)

core: dont use useDeferredValue for useMedia since it needs to by sync #423 (natew)

Documentation

site: remove need to install expo packages (natew)

Performance Improvements

core: Avoid media query listening when only generating css theme values #423 (natew)

Commits

e2d0cbc: improve readme words (natew)

3fb4def: remove @expo/match-media dependency from @tamagui/core (Alisher Khalmuratov) #422

add studio back in (natew)

add studio back in (natew)

59c0464: fix studio commands (natew)

9837652: v1.0.1-rc.0.4 (natew)

b0c2538: update-starters-v1.0.1-rc.0.4 (natew)

5165154: add starters sync package.json script (natew) #423

6462182: v1.0.1-rc.1 (natew)

Source code(tar.gz)
Source code(zip)
v1.0.1-rc.0.3(Dec 7, 2022)
Commits

f3d3a35: update-starters-v1.0.1-rc.0.2 (natew)

f6dfc06: Fix for create-tamagui-app on windows (Paul Myburgh) #417

e077c4f: v1.0.1-rc.0.3 (natew)

Source code(tar.gz)
Source code(zip)
v1.0.1-rc.0.2(Dec 7, 2022)
Bug Fixes

select: native sheet non-adapted blank implementation instead of error (natew)

static: re-enable dev mode data-attributes when only extraction disabled (natew)

core: fix inverse on mount ssr logic to avoid hydration issues (natew)

animate-presence: fix SSR hydration issue (natew)

Commits

7e90039: update-starters-v1.0.1-rc.0.1 (natew)

3ea5c0b: upgrade vite (natew)

fix rc blog words (natew)

50b7522: site various docs cleanup, fix copy to clipboard (natew)

91d6156: v1.0.1-rc.0.2 (natew)

Source code(tar.gz)
Source code(zip)
v1.0.1-rc.0.1(Dec 6, 2022)
Bug Fixes

site: Fix meta info (natew)

sheet: Fix bug on ios safari only in edge cases not hiding all the way (natew)

react-native-web-lite: Add back in TouchableOpacity and TouchableWithoutFeedback (natew)

core: detect chrome touch enabled as well (natew)

sheet: disable fancy sheet scroll handoff due to regression (natew)

Performance Improvements

core: small perf, check allSelectors more quickly/simply (natew)

Commits

05570da: update-starters-v1.0.1-rc.0 (natew) #410

ea6b2e0: site words (natew)

403811d: perf(core) fix regression, prevent re-insert styles in prod (natew)

e8c19e3: Add .tamagui folder to .gitignore (Sky) #414

9348991: Use built in transpilePackages (Alexey Pronevich)

93ea6c0: Hash themeKeys in getThemeCSSRules (Peter Skaltsis)

e3a6b20: site typo (natew)

sheet demo scroll (natew)

e168a75: site fix imports (natew)

78b32d7: v1.0.1-rc.0.1 (natew)

Source code(tar.gz)
Source code(zip)
v1.0.1-rc.0(Dec 5, 2022)
Features

adapt: Add optional platform property with values "web" "native" and "touch" (natew)

Bug Fixes

adapt: isomorphic layout effect (natew)

core: Fix reverting to parent theme wouldnt re-render bug (natew)

core: Hash variable names to avoid invalid characters in CSS (natew)

sheet: Disable pan responder events when sheet inside sheet showing #410 (natew)

Documentation

site: Document font face config for native (natew)

Chores

release script move to rc versioning #410 (natew)

Commits

5c4f2c6: update-starters-v1.0.1-beta.228 (natew)

c8693df: site resize performance (natew)

8515c9e: rc0 blog post (natew) #410

50d7fda: v1.0.1-rc.0 (natew) #410

Source code(tar.gz)
Source code(zip)
v1.0.1-beta.228(Dec 5, 2022)
Breaking Changes

adapt: Add Adapt component and remove sheetBreakpoint from Dialog, Select, Popover in favor of using Adapt component #397 (natew)

Features

next-plugin: Add in optional tamaguiOptions.enableCSSOptimizations for next plugin to help debug issues with mini-css-extract on some configurationsgl #397 (natew)

adapt: Add Adapt component and remove sheetBreakpoint from Dialog, Select, Popover in favor of using Adapt component #397 (natew)

Bug Fixes

core: Fix Theme SSR issue when not changing theme returned true only on serverside (natew)

core: Fix ensure default values set on pseudos will set those default values on the base style for animations (natew)

core: Fix animation enterVariant and exitVariant only enable when proper state is set (natew)

core: Use normalize-css-color for color normalization to fix css color names not being processed (natew)

site: Slightly improve algolia coloring (natew)

next-plugin: Fix automatic component transpile to detect both esm and cjs style paths for enabling transpilation (natew)

static: Add presence check to avoid bugs on failed loading of components (natew)

static: de-opt it not flattened on web, reducing output size and work for compiler for a bit more performance (natew)

core: Fix removing themes when combined with componentName not removing when set to null (natew)

core: Find border radius tokens over space tokens (natew)

site: Jumping around issue #397 (natew)

core: Fix name + componentName themes not searching upwards #397 (natew)

core: remove leftover try catch (natew)

Documentation

site: Update example code output for first example (natew)

site: rc0 blog post updates (natew)

Code Refactoring

core: Extract mergeStyle() to be shared with getSubStyle() (natew)

static: Disable dynamic loading by default, require environment variable TAMAGUI_ENABLE_DYNAMIC_LOAD=1 to re-enable (natew)

Performance Improvements

core: Lessen memory usage in useTheme response (natew)

core: Micro optimizations on sensitive performance loops in getStyle #397 (natew)

site: Enable dynamic load for site #397 (natew)

Commits

e411385: Remove array prop from style (Fernando Rojo) #394

Publish RC0 blog (natew)

af5a06f: fix app starter update deps (natew)

4bd468b: fix site image import incompat (natew)

e152b97: remove old drafts (natew)

55b42e3: v1.0.1-beta.227 (natew)

51f2816: fix upgrade starters script (natew)

bfd23c0: update-starters-v1.0.1-beta.227 (natew)

static: Add debug log for loadModule path #397 (natew)

95565f1: small cleanups (natew) #397

1d3dcff: v1.0.1-beta.228 (natew)

Source code(tar.gz)
Source code(zip)
v1.0.1-beta.227(Dec 4, 2022)
Bug Fixes

core: Fix Theme SSR issue when not changing theme returned true only on serverside #397 (natew)

core: Fix ensure default values set on pseudos will set those default values on the base style for animations #397 (natew)

core: Fix animation enterVariant and exitVariant only enable when proper state is set #397 (natew)

core: Use normalize-css-color for color normalization to fix css color names not being processed #397 (natew)

site: Slightly improve algolia coloring #397 (natew)

next-plugin: Fix automatic component transpile to detect both esm and cjs style paths for enabling transpilation #397 (natew)

static: Add presence check to avoid bugs on failed loading of components #397 (natew)

static: de-opt it not flattened on web, reducing output size and work for compiler for a bit more performance #397 (natew)

core: Fix removing themes when combined with componentName not removing when set to null #397 (natew)

core: Find border radius tokens over space tokens #397 (natew)

Documentation

site: install compiler, intro (natew)

site: Update example code output for first example #397 (natew)

site: rc0 blog post updates #397 (natew)

Code Refactoring

core: Extract mergeStyle() to be shared with getSubStyle() #397 (natew)

static: Disable dynamic loading by default, require environment variable TAMAGUI_ENABLE_DYNAMIC_LOAD=1 to re-enable #397 (natew)

Performance Improvements

core: Lessen memory usage in useTheme response #397 (natew)

Commits

c50d6de: update-starters-v1.0.1-beta.226 (natew)

Publish RC0 blog #397 (natew)

bfada02: fix app starter update deps (natew) #397

4c1a6ea: fix site image import incompat (natew) #397

12b9805: remove old drafts (natew) #397

385c956: v1.0.1-beta.227 (natew) #397

Source code(tar.gz)
Source code(zip)