tamagui / tamagui Goto Github PK

View Code? Open in Web Editor NEW

10.0K 43.0 403.0 422.48 MB

Style React fast with 100% parity on React Native, an optional UI kit, and optimizing compiler.

Home Page: https://tamagui.dev

License: MIT License

JavaScript 1.43% TypeScript 89.50% CSS 0.69% HTML 0.04% Shell 0.07% PLpgSQL 0.24% Dockerfile 0.01% MDX 8.02% Rust 0.01%

react react-native react-native-web css-in-js ui ui-components typescript optimizing-compiler atomic-css tailwind

tamagui's People

Contributors

Stargazers

Watchers

Forkers

chrisdrackett hiroppy ratebseirawan dorucioclea therakeshpurohit naturalclar jottenlips fli lyhour-archieved nijarshrestha rajsatish4ar mrjackdavis yamov rodbs iankaufman orlando seeden pavestru infng kyunghoon park365 phoorichet somiashtec timothymiller broerjuang mrbirb nghialmt loveholly kungfu321 chris533 gabriel-vivas-sonarsource lexfro captdaylight nandorojo aulneau christianalares apperside fahad-islam zhamkovv tomassestak tt0mmy penx redbar0n bang88 cyberflamego alegendstale lfgraf sushritpasupuleti digitalmista hitesh97 yinchinan010 cuppazee warmherz aviavinav 0xbigboss aeroxander intergalacticspacehighway michaelkilbane sync astahmer tinaxing14 stbaer dhatguy react-native-awesom rymate1234 devular jonsherrard alisherks mikehuebner peterjskaltsis pronevich skyriverbend lostpebble jlalmes kzlar majidnajafi gg-big-org vivekvt nderscore davidalphafox flexbox geekwolverine spread0x rosswaycaster standardgalactic mwood23 iketutg murthy71191 arjunnaha mbrukman chen-rn codedeep cantasci nghuutaiuit prichodko le-kag chuckstock apaajabolehd uiforks saschawebdev

tamagui's Issues

HookWebpackError when running with next.js

I'm trying to get tamagui up and running with next.js but I cannot seem to make it work with my config.

I always get the following error (when I try to load the first page, not during startup):

error - HookWebpackError: Cannot read property 'replace' of undefined
error - unhandledRejection: HookWebpackError: Cannot read property 'replace' of undefined

I have no idea how to start finding the issue because this doesn't even mention a file inside webpack or anything.
I am trying to run it together with expo, maybe that's not supported?

Here is my next config:

process.env.TAMAGUI_TARGET = "web";

const { withExpo } = require("@expo/next-adapter");
const { withTamagui } = require("@tamagui/next-plugin");
const withTM = require("next-transpile-modules");
const withPlugins = require("next-compose-plugins");

const transform = withPlugins(
  [
    withTM(["shared", "mobile", "date-fns", "@expo/vector-icons"], {
      resolveSymlinks: true,
    }),
    withExpo,
    withTamagui({
      config: "../shared/utils/tamagui.config.ts",
      components: ["tamagui"],
      importsWhitelist: ["constants.js", "colors.js"],
      logTimings: true,
      disableExtraction: false,
      excludeReactNativeWebExports: ["Switch", "ProgressBar", "Picker"],
    }),
  ],
  {
    projectRoot: __dirname,
    typescript: {
      ignoreBuildErrors: true,
    },
  }
);

module.exports = function (name, { defaultConfig }) {
  return transform(name, { defaultConfig });
};

Resolved versions of relevant packages are:

Do you have any idea how to debug this?

Vite compatibility?

Is Tamagui compatible with Vite? As you know, Vite enables unbundled development (much faster than Webpack) and uses esbuild to transpile types (20-30x faster than tsc), and uses Rollup for production builds.

I’d like to use Tamagui with vite-plugin-ssr instead of NextJS (which is tied to Webpack…).

I see that you use Webpack and Babel currently.

Also, how do you bundle Tamagui for native? I’ve looked at the docs, but it doesn’t say anything about Expo / Metro procedure or compatibility.

incorrect link for why stack views are good

the link here (https://github.com/snackui/snackui/blame/master/README.md#L100) is to https://github.com/jsxstyle/jsxstyle#why-write-styles-inline-with-jsxstyle but I assume you wanted to link to something talking about the benefits of stack views

Group component throws `Can't find variable: React`

Describe the bug
Group component throws Can't find variable: React, crashing the mobile app.

To Reproduce

        <Group>
          <Button
            onPress={() => setShow((x) => !x)}
            color="black"
            bc="white"
            size="$5"
            icon={Plus}
          >
            Create
          </Button>
          <Button size="$5">Cancel</Button>
        </Group>

Environment (please complete the following information):

OS: Android
Browser ?
Version 12

token mismatch | bug

I will get the wrong size/space when creating two different size/space tokens with similar names.

{
  '3.5': 14, 
  '3/5': '60%',
}

When I try to use token 3.5, it will use value 60% instead of 14.

<Space py="$3.5">

There is probably a problem with regex, which is ignoring some characters or something like this.

OS: mac
Browser safari
Version beta.54

use Pressable for native instead of having an extra TouchableOpacity

There might be a reason for using TouchableOpacity that I'm missing, but if not using the newish Pressable component from react native (https://reactnative.dev/docs/pressable) should simplify the stack a bit on native.

Just wanted to say amazing work

Found your project from your comment on HN the other day.
I wanted to say I love the project and I believe you're on the right track.

Currently the RN cross-platform style ecosystem is limited, this project is the first that combines atomic CSS, types, media queries, psuedo selector support, theming, all while working with RN(W) stylesheets.

Keep up the good work, I'm following along and I hope to contribute where I can.

Weird dependency

Running yarn why react-native-reanimated gives me this weird dependency that seems to be caused by Tamagui. Not sure why this is a dependency.

[Question] Next SSR support

Hello, I was interested to try snackui with a project, in which we use next with expo as our web platform. I saw the information about no SSR support, and I was curious what problem there is to solve, maybe I could contribute a solution.

"yarn native" command throws error on "@my/ui"

Hello 👋,

I have set up the starter template using "npx create-tamagui-app@latest".

After launch "yarn native" and connect my ios device, i got this error

Tamagui error loading file:

    @my/ui

Cannot find module '/Users/antoine/Documents/projet-perso/test-tamagui/node_modules/@my/ui/dist/cjs'. Please verify that the package.json has a valid "main" entry
Error: Cannot find module '/Users/antoine/Documents/projet-perso/test-tamagui/node_modules/@my/ui/dist/cjs'. Please verify that the package.json has a valid "main" entry
    at tryPackage (node:internal/modules/cjs/loader:353:19)
    at Function.Module._findPath (node:internal/modules/cjs/loader:566:18)
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:919:27)
    at Function.Module._load (node:internal/modules/cjs/loader:778:27)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at Module.Mod.require (/Users/antoine/Documents/projet-perso/test-tamagui/node_modules/@tamagui/static/dist/cjs/extractor/loadTamagui.js:56:19)
    at require (node:internal/modules/cjs/helpers:94:18)
    at Object.<anonymous> (/Users/antoine/Documents/projet-perso/test-tamagui/packages/app/tamagui.config.ts:3:45)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
    at Module._compile (/Users/antoine/Documents/projet-perso/test-tamagui/node_modules/esbuild-register/dist/node.js:2258:26)

iOS Bundling failed 6750ms
index.js: Call retries were exceeded

variants and GetProps are not working together

When you try to use the following typed source code, you will get a typescript error: Property 'bold' does not exist on type 'TextProps.'
I see the same error for boolean, string, and other variants.

import React, { memo, forwardRef, useMemo, Children, ComponentProps } from 'react';
import { SizableText, styled, type GetProps } from 'tamagui';

const StyledText = styled(SizableText, {
  variants: {
    bold: {
      true: {
        fontWeight: 'bold',
      },
    },
  }
});

export type TextProps = GetProps<typeof StyledText>;

function Text(props: TextProps) {
  const { children, bold, ...rest } = props;

OS: Mac
Browser: Safari
Version: latest beta 44

Support styled(Button) and styled(ListItem)

Right now you can't do:

const StyledButton = styled(Button)

This is because Button isn't a styled() component or core tamagui component, it's a HOC. We have a pattern called extractable that does make it extract using the compiler, but doesn't support wrapping in styled().

This is definitely doable, but requires a few steps to get there - I started work on it, but supporting variants requires a bit more work than anticipated so logging here for future work.

react-native-gesture-handler for interactive components (buttons) in React Native

It's always great to have React Native components closest to native.

you can not override fontWeight in variant | bug

You are not able to override fontWeight in your styled() component when you use createInterFont

export default createInterFont({
  family: 'Roboto',
  weight: {
    6: 'normal',
  },
});

import { SizableText } from 'tamagui';

export const ExtendedSizableText = styled(SizableText, {
  name: 'ExtendedSizableText',
  variants: {
    bold: {
      true: {
        fontWeight: 'bold',
      },
      false: {
        fontWeight: 'normal',
      },
    },
});

When you try to use prop bold, it will be "ignored." Not ignored but overridden by element style object, which has higher priority.

return (
   <ExtendedSizableText bold />
);

I used "temp hack" with an undefined value, but it is not working from version 56 because of typescript.

export default createInterFont({
  family: 'Roboto',
  weight: {
    6: undefined,
  },
});

I also tried to use !important but there is no support for it :)

export const ExtendedSizableText = styled(SizableText, {
  name: 'ExtendedSizableText',
  variants: {
    bold: {
      true: {
        fontWeight: 'bold !important',
      },
      false: {
        fontWeight: 'normal',
      },
    },
});

Environment (please complete the following information):

OS: Mac
Browser safari
Versions: all (56)

Fresh installation with webpack fails to resolve loader

Hello, I've tried to setup the project with webpack loader inside a fresh expo project and through the next example from the repository, on both startup process fails with a simple resolution error:

Error: Cannot find module '@snackui/static/loader'

I have confirmed that there is no such import after installing the packages. I have only cloned the provided example, without any modifications, so it should be fairly easy to reproduce.

My tools:
node: 14.15.4
yarn: 1.22.10

Failures with tamagui-loader for webpack

Describe the bug
After following the installation steps and the starters demo for expo, I get an error from tamagui-loader when trying to run the web version

ERROR TypeError: this.getOptions is not a function
at Object.loader (/repo/packages/client/node_modules/tamagui-loader/src/loader.ts:32:47)
at LOADER_EXECUTION (/repo/node_modules/loader-runner/lib/LoaderRunner.js:119:14)
at runSyncOrAsync (/repo/packages/client/node_modules/loader-runner/lib/LoaderRunner.js:120:4)
at iterateNormalLoaders (/repo/packages/client/node_modules/loader-runner/lib/LoaderRunner.js:232:2)
at Array.<anonymous> (/repo/packages/client/node_modules/loader-runner/lib/LoaderRunner.js:205:4)
at Storage.finished (/repo/packages/client/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:55:16)
at /repo/packages/client/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:91:9
at /repo/packages/client/node_modules/graceful-fs/graceful-fs.js:123:16
at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read_file_context:68:3)

// webpack.config.js
const createExpoWebpackConfigAsync = require('@expo/webpack-config');
const { shouldExclude } = require('tamagui-loader');

module.exports = async function (env, argv) {
	const config = await createExpoWebpackConfigAsync(env, argv);
	// Customize the config before returning it.

	const DefinePlugin = config.plugins.find((x) => x.constructor.name === 'DefinePlugin')
	DefinePlugin.definitions['process.env']['TAMAGUI_TARGET'] = `"web"`
	const rules = config.module.rules[1].oneOf
	const ruleIndex = rules.findIndex((x) => x.use?.loader?.includes('babel-loader'))
	rules[ruleIndex] = {
		test: /\.(mjs|[jt]sx?)$/,
		use: [
			{
				loader: 'tamagui-loader',
				options: {
					config: './tamagui.config.ts',
					components: ['tamagui'],
				}
			}
		]
	}

	return config;
};

To Reproduce
With this configuration running expo start --web

Environment (please complete the following information):

OS: [e.g. Macos ]
Browser [e.g. chrome, safari]
Version [e.g. 22]

Dripsy import

tamagui/packages/benchmarks/bench/drispy/index.tsx

Line 1 in 3c9d4f5

import { View, makeTheme, styled } from 'dripsy'

super cool! I think this View should be imported from RN though, rather than a recursive styled call (I have to update Dripsy docs for this)

Fails to build for expo.dev

After several hours of debugging, i figure out a hacky workaround.

@tamagui/core/dist/cjs/constants/rnw.js imports react-native-web and causes build errors on their servers. Commenting the offending lines fixes the issue on native, but breaks web. A conditional will not work because metro expands require statements. I suppose the proper fix would either be splitting @tamagui/core into native and web variants, or some sort of babel transformation.

linear gradient without EXPO | feature

I am not using expo in my native application, and I need to add it as a dependency for linear gradient.
Can we add support also for the native version?
react-native-linear-gradient

Something similar did native base for their linear gradient.
https://docs.nativebase.io/3.0.x/box#h3-with-linear-gradient

@expo/media-query is a standalone package which is fine because it is not based on the whole expo ecosystem.

Using tamagui in an nx workspace

Hello,
I am trying to use you awesome tool in a nx workspace (https://nx.dev), because I think that using tamagui together with nx is a very cool match. nx will take care of the build system, and tamagui provides the ui engine, really cool!

The problem is that when I try to run the project, I get tons of this kind of error

Called createTamagui twice! Should never do so
Already configured mediaQueries once (you may have called getMedia() before configureMedia())
ERROR TypeError: Cannot read properties of undefined (reading '$bg2')
    at getToken (/Users/simone/dev/prova-tamagui/node_modules/@tamagui/core/src/helpers/createPropMapper.ts:125:32)
    at Object.propMapper (/Users/simone/dev/prova-tamagui/node_modules/@tamagui/core/src/helpers/createPropMapper.ts:56:15)
    at getSplitStyles (/Users/simone/dev/prova-tamagui/node_modules/@tamagui/core/src/helpers/getSplitStyles.tsx:90:30)
    at /Users/simone/dev/prova-tamagui/node_modules/@tamagui/core/src/createComponent.tsx:471:18
    at /Users/simone/dev/prova-tamagui/node_modules/@tamagui/core/src/createTamagui.ts:177:37
    at Set.forEach (<anonymous>)
    at createTamagui (/Users/simone/dev/prova-tamagui/node_modules/@tamagui/core/src/createTamagui.ts:177:21)
    at Object.<anonymous> (/Users/simone/dev/prova-tamagui/apps/prova-tamagui/tamagui.config.ts:3:16)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
    at Module._compile (/Users/simone/dev/prova-tamagui/node_modules/esbuild-register/dist/node.js:2258:26)
    at Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Object.newLoader [as .ts] (/Users/simone/dev/prova-tamagui/node_modules/esbuild-register/dist/node.js:2262:9)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at Module.Mod.require (/Users/simone/dev/prova-tamagui/node_modules/@tamagui/static/src/extractor/loadTamagui.ts:30:15)
    at Module.Mod.require (/Users/simone/dev/prova-tamagui/node_modules/@tamagui/static/src/extractor/loadTamagui.ts:30:15)
    at Module.Mod.require (/Users/simone/dev/prova-tamagui/node_modules/@tamagui/static/src/extractor/loadTamagui.ts:30:15)
    at Module.Mod.require (/Users/simone/dev/prova-tamagui/node_modules/@tamagui/static/src/extractor/loadTamagui.ts:30:15)
    at Module.Mod.require (/Users/simone/dev/prova-tamagui/node_modules/@tamagui/static/src/extractor/loadTamagui.ts:30:15)
    at Module.Mod.require (/Users/simone/dev/prova-tamagui/node_modules/@tamagui/static/src/extractor/loadTamagui.ts:30:15)
    at Module.Mod.require (/Users/simone/dev/prova-tamagui/node_modules/@tamagui/static/src/extractor/loadTamagui.ts:30:15)
    at Module.Mod.require (/Users/simone/dev/prova-tamagui/node_modules/@tamagui/static/src/extractor/loadTamagui.ts:30:15)
    at Module.Mod.require (/Users/simone/dev/prova-tamagui/node_modules/@tamagui/static/src/extractor/loadTamagui.ts:30:15)
    at Module.Mod.require (/Users/simone/dev/prova-tamagui/node_modules/@tamagui/static/src/extractor/loadTamagui.ts:30:15)
    at Module.Mod.require (/Users/simone/dev/prova-tamagui/node_modules/@tamagui/static/src/extractor/loadTamagui.ts:30:15)
    at Module.Mod.require (/Users/simone/dev/prova-tamagui/node_modules/@tamagui/static/src/extractor/loadTamagui.ts:30:15)
    at Module.Mod.require (/Users/simone/dev/prova-tamagui/node_modules/@tamagui/static/src/extractor/loadTamagui.ts:30:15)
    at Module.Mod.require (/Users/simone/dev/prova-tamagui/node_modules/@tamagui/static/src/extractor/loadTamagui.ts:30:15)
    at Module.Mod.require (/Users/simone/dev/prova-tamagui/node_modules/@tamagui/static/src/extractor/loadTamagui.ts:30:15)
    at Module.Mod.require (/Users/simone/dev/prova-tamagui/node_modules/@tamagui/static/src/extractor/loadTamagui.ts:30:15)
    at Module.Mod.require (/Users/simone/dev/prova-tamagui/node_modules/@tamagui/static/src/extractor/loadTamagui.ts:30:15)
    at Module.Mod.require (/Users/simone/dev/prova-tamagui/node_modules/@tamagui/static/src/extractor/loadTamagui.ts:30:15)
    at Module.Mod.require (/Users/simone/dev/prova-tamagui/node_modules/@tamagui/static/src/extractor/loadTamagui.ts:30:15)
    at Module.Mod.require (/Users/simone/dev/prova-tamagui/node_modules/@tamagui/static/src/extractor/loadTamagui.ts:30:15)
    at Module.Mod.require (/Users/simone/dev/prova-tamagui/node_modules/@tamagui/static/src/extractor/loadTamagui.ts:30:15)
    at Module.Mod.require (/Users/simone/dev/prova-tamagui/node_modules/@tamagui/static/src/extractor/loadTamagui.ts:30:15)
    at Module.Mod.require (/Users/simone/dev/prova-tamagui/node_modules/@tamagui/static/src/extractor/loadTamagui.ts:30:15)
    at Module.Mod.require (/Users/simone/dev/prova-tamagui/node_modules/@tamagui/static/src/extractor/loadTamagui.ts:30:15)
    at Module.Mod.require (/Users/simone/dev/prova-tamagui/node_modules/@tamagui/static/src/extractor/loadTamagui.ts:30:15)
    at Module.Mod.require (/Users/simone/dev/prova-tamagui/node_modules/@tamagui/static/src/extractor/loadTamagui.ts:30:15)
    at Module.Mod.require (/Users/simone/dev/prova-tamagui/node_modules/@tamagui/static/src/extractor/loadTamagui.ts:30:15)
    at Module.Mod.require (/Users/simone/dev/prova-tamagui/node_modules/@tamagui/static/src/extractor/loadTamagui.ts:30:15)
    at Module.Mod.require (/Users/simone/dev/prova-tamagui/node_modules/@tamagui/static/src/extractor/loadTamagui.ts:30:15)
    at Module.Mod.require (/Users/simone/dev/prova-tamagui/node_modules/@tamagui/static/src/extractor/loadTamagui.ts:30:15)
    at Module.Mod.require (/Users/simone/dev/prova-tamagui/node_modules/@tamagui/static/src/extractor/loadTamagui.ts:30:15)
    at Module.Mod.require (/Users/simone/dev/prova-tamagui/node_modules/@tamagui/static/src/extractor/loadTamagui.ts:30:15)
    at Module.Mod.require (/Users/simone/dev/prova-tamagui/node_modules/@tamagui/static/src/extractor/loadTamagui.ts:30:15)
    at Module.Mod.require (/Users/simone/dev/prova-tamagui/node_modules/@tamagui/static/src/extractor/loadTamagui.ts:30:15)
    at Module.Mod.require (/Users/simone/dev/prova-tamagui/node_modules/@tamagui/static/src/extractor/loadTamagui.ts:30:15)
    at Module.Mod.require (/Users/simone/dev/prova-tamagui/node_modules/@tamagui/static/src/extractor/loadTamagui.ts:30:15)
    at Module.Mod.require (/Users/simone/dev/prova-tamagui/node_modules/@tamagui/static/src/extractor/loadTamagui.ts:30:15)
    at Module.Mod.require (/Users/simone/dev/prova-tamagui/node_modules/@tamagui/static/src/extractor/loadTamagui.ts:30:15)
    at Module.Mod.require (/Users/simone/dev/prova-tamagui/node_modules/@tamagui/static/src/extractor/loadTamagui.ts:30:15)
    at Module.Mod.require (/Users/simone/dev/prova-tamagui/node_modules/@tamagui/static/src/extractor/loadTamagui.ts:30:15)
    at Module.Mod.require (/Users/simone/dev/prova-tamagui/node_modules/@tamagui/static/src/extractor/loadTamagui.ts:30:15)
    at Module.Mod.require (/Users/simone/dev/prova-tamagui/node_modules/@tamagui/static/src/extractor/loadTamagui.ts:30:15)
    at Module.Mod.require (/Users/simone/dev/prova-tamagui/node_modules/@tamagui/static/src/extractor/loadTamagui.ts:30:15)
    at Module.Mod.require (/Users/simone/dev/prova-tamagui/node_modules/@tamagui/static/src/extractor/loadTamagui.ts:30:15)
    at Module.Mod.require (/Users/simone/dev/prova-tamagui/node_modules/@tamagui/static/src/extractor/loadTamagui.ts:30:15)
    at require (node:internal/modules/cjs/helpers:102:18)
    at loadTamagui (/Users/simone/dev/prova-tamagui/node_modules/@tamagui/static/src/extractor/loadTamagui.ts:35:31)
    at Object.parse (/Users/simone/dev/prova-tamagui/node_modules/@tamagui/static/src/extractor/createExtractor.ts:86:45)
    at extractToClassNames (/Users/simone/dev/prova-tamagui/node_modules/@tamagui/static/src/extractor/extractToClassNames.ts:83:25)
    at Object.loader (/Users/simone/dev/prova-tamagui/node_modules/tamagui-loader/src/loader.ts:76:23)
    at LOADER_EXECUTION (/Users/simone/dev/prova-tamagui/node_modules/loader-runner/lib/LoaderRunner.js:132:14)
    at runSyncOrAsync (/Users/simone/dev/prova-tamagui/node_modules/loader-runner/lib/LoaderRunner.js:133:4)
    at iterateNormalLoaders (/Users/simone/dev/prova-tamagui/node_modules/loader-runner/lib/LoaderRunner.js:250:2)
    at /Users/simone/dev/prova-tamagui/node_modules/loader-runner/lib/LoaderRunner.js:223:4
    at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read_fileCalled createTamagui twice! Should never do so

The webpack customization is inside apps/prova-tamagui/webpack.config.js, and it seem it's properly integrated inside apps/prova-tamagui/project.json.

I published here the repo

https://github.com/apperside/test-tamagui

Unable to resolve module '@unimodules/core` from '...expo-screen...'

Thanks for an awesome project - really loved it!

We are building our UI library in react-native which will get used in our web projects as well, we are trying to move our setup to `tamagui` and facing the below issue in our react-native project setup.

Attaching screenshot for reference:

Package details
"@tamagui/babel-plugin": "1.0.0-alpha.68"
"react-native": "0.63.4"
"react-native-web": "0.17.7"

babel.config.js

      '@tamagui/babel-plugin',
      {
        components: ['tamagui'],
        config: './theme.js',
        importsWhitelist: ['constants.js', 'colors.js'],
        logTimings: true,
        disableExtraction: process.env.NODE_ENV === 'development',
      },
    ]```

Create `config` from any file and pass it via `Tamagui.Provider`

Hello, I was trying to set up the library and the docs mentioned that we need to create a tamagui.config.js file at the root of the project. I think it might be more flexible to allow developers to define the config object in any file. The config object can be imported and passed via Tamagui.Provider.

For example, I have defined my config in src/theme.js:

import { createTamagui } from 'tamagui';

const config = createTamagui({ ... });

export default config;

I can safely provide the config object via Tamagui.Provider in my src/App.js file:

import config from './theme';

const App = () => {
  return (
    <Tamagui.Provider config={config}>
      {...}
    </Tamagui.Provider>
  );
}

running ejected expo app within xcode is broken

Running metro run:ios successfully ejects/generates xcode project files and runs successfully outside of xcode. Inside however, metro paths become incorrect.

I believe it's related to this issue https://github.com/facebook/metro/issues/605. My guess is that react-native and workspaces do not get along.

Any advice on getting it to run without expo-go on a device would be greatly appreciated.

Iterator value textDecorationLine is not an entry object | bug

When I create a variant where I use property: textDecorationLine. I see the following error during rendering: Iterator value textDecorationLine is not an entry object

const StyledText = styled(SizableText, {
  variants: {
    underline: {
      true: {
        textDecorationLine: 'underline',
      },
      false: {
        textDecorationLine: 'none',
      },
    },
  },
  defaultVariants: {
   underline: false,
  }
});

// render
<StyledText underline />

Stacktrace:
Uncaught TypeError: Iterator value textDecorationLine is not an entry object
at Function.fromEntries ()
at updateReactDOMStyle (getStylesAtomic.ts:113:33)
at expandStyles (getStylesAtomic.ts:17:5)
at Object.mapper [as propMapper] (fixNativeShadow.tsx:75:43)
at getSubStyle (getVariantExtras.tsx:448:35)
at getSplitStyles (getVariantExtras.tsx:296:28)
at useSplitStyles (getVariantExtras.tsx:428:15)
at createVariable.ts:154:39
at renderWithHooks (Dimensions.js:16175:18)
at updateForwardRef (Dimensions.js:20023:20)
at beginWork (Dimensions.js:22465:16)

OS:Mac
Browser Safari
Version beta 46

"yarn web" and "yarn native" commands throw error

I have set up the starter template using "npx create-tamagui-app@latest". But when I run the command "yarn web", it throws the following error:

For "yarn native":

Android Bundling failed 4272ms
index.js: [BABEL] D:\rn-tamagui\apps\expo\index.js: ENOENT: no such file or directory, open 'D:\rn-tamagui\node_modules\react-native-web\dist\cjs\index.js\dist\tamagui-exports.js' (While processing: "D:\rn-tamagui\node_modules\@tamagui\babel-plugin\dist\cjs\index.js")
Error: [BABEL] D:\rn-tamagui\apps\expo\index.js: ENOENT: no such file or directory, open 'D:\rn-tamagui\node_modules\react-native-web\dist\cjs\index.js\dist\tamagui-exports.js' (While processing: "D:\rn-tamagui\node_modules\@tamagui\babel-plugin\dist\cjs\index.js")
at Object.openSync (fs.js:497:3)
at Object.writeFileSync (fs.js:1528:35)
at patchReactNativeWeb (D:\rn-tamagui\node_modules@tamagui\static\dist\cjs\patchReactNativeWeb.js:37:8)
at snackBabelPlugin (D:\rn-tamagui\node_modules@tamagui\babel-plugin\dist\cjs\index.js:62:43)
at D:\rn-tamagui\node_modules@babel\helper-plugin-utils\lib\index.js:22:12
at sync (D:\rn-tamagui\node_modules@babel\core\lib\gensync-utils\async.js:38:25)
at sync (D:\rn-tamagui\node_modules\gensync\index.js:182:19)
at D:\rn-tamagui\node_modules\gensync\index.js:210:24
at Generator.next ()

Radius tokens are not used for border radius properties.

I have the following radius object defined in my tokens

const radius = {
  none: 0,
  xs: 1,
  sm: 2,
  base: 4,
  md: 6,
  lg: 8,
  xl: 12,
  '2xl': 16,
  '3xl': 24,
  full: 9999,
},

I have an XStack component with the borderRadius set to one of the radius tokens.

<XStack borderRadius="$full">...</XStack>

I receive an error when running it in the iOS simulator

Error setting property 'borderRadius' of RCTView with tag #359: JSON value '$full' of type NSString cannot be converted to NSNumber

I checked when running it on the web because I noticed it was working when I used the space tokens. E.g. I have a space token 1: 4 defined in my config.

<XStack borderRadius="$1">...</XStack>

In the developer console I can see it's using the space tokens' CSS variable.

I can manually edit the style and I see that there are radius token CSS variables defined, e.g. I can change the style to use var(--radius-full) and it works.

I'm using the following:
tamagui, @tamagui/babel-plugin, @tamagui-loader all on 1.0.0-alpha.37

Website is blocked is india - https://tamagui.dev/

patchReactNativeWeb doesn't work on Windows

Describe the bug
patchReactNativeWeb doesn't work correctly on Windows.

This seems to be due to patchReactNativeWeb not correctly handling \ as a file path separator. It looks like this should mostly be fixable just by replacing \/ in the regex with [\\/] here (although I haven't tested that so might be other code which doesn't handle windows file separators either) https://github.com/tamagui/tamagui/blob/master/packages/static/src/patchReactNativeWeb.ts#L12

To Reproduce
Try to run the next-expo-solito starter on Windows.

Environment (please complete the following information):

OS: Windows
Browser: N/A
Version: 1.0.1-beta.57

How to add to existing (Expo) project?

Hi, I was wondering if RNW was a bit slower than vanilla React, & glad I found your project!

I'm using the latest Expo; any tips to use this there?
Fortunately I'm focusing on getting XState to work with Expo, so I haven't really touched the styling yet.

TIA

Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules [NEXT 12]

Describe the bug

Warning: createTamagui called twice (maybe HMR)
Already configured mediaQueries once (you may have called getMedia() before configureMedia())
Store does not have a valid reducer. Make sure the argument passed to combineReducers is an object whose values are reducers.
Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
    at SafeAreaProvider (/Users/prohertz/Documents/reliance-react/node_modules/tamagui/src/views/SafeAreaProvider.tsx:12:3)
    at conf.Provider (/Users/prohertz/Documents/reliance-react/node_modules/tamagui/src/createTamagui.tsx:14:22)
    at NextThemeProvider (webpack-internal:///./node_modules/@tamagui/next-theme/dist/jsx/NextTheme.js:43:53)
    at Hydrate (/Users/prohertz/Documents/reliance-react/node_modules/react-query/lib/react/Hydrate.js:33:23)

To Reproduce
Latest version of ui with. next 12

Unhandled Runtime Error
SecurityError: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules

Call Stack
updateInserted
node_modules/@tamagui/core/dist/esm/helpers/insertStyleRule.js (43:28)
eval
node_modules/@tamagui/core/dist/esm/helpers/insertStyleRule.js (68:0)
./node_modules/@tamagui/core/dist/esm/helpers/insertStyleRule.js
file:///Users/prohertz/Documents/reliance-react/.next/static/chunks/pages/_app.js (1974:1)
options.factory
/_next/static/chunks/webpack.js (633:31)
__webpack_require__
file:///Users/prohertz/Documents/reliance-react/.next/static/chunks/webpack.js (37:33)
fn
/_next/static/chunks/webpack.js (288:21)
eval
webpack-internal:///./node_modules/@tamagui/core/dist/esm/Tamagui.js (10:82)
./node_modules/@tamagui/core/dist/esm/Tamagui.js
file:///Users/prohertz/Documents/reliance-react/.next/static/chunks/pages/_app.js (1611:1)
options.factory
/_next/static/chunks/webpack.js (633:31)
__webpack_require__
file:///Users/prohertz/Documents/reliance-react/.next/static/chunks/webpack.js (37:33)
fn
/_next/static/chunks/webpack.js (288:21)
eval
webpack-internal:///./node_modules/@tamagui/core/dist/esm/index.js (14:66)
./node_modules/@tamagui/core/dist/esm/index.js
file:///Users/prohertz/Documents/reliance-react/.next/static/chunks/pages/_app.js (2194:1)
options.factory
/_next/static/chunks/webpack.js (633:31)
__webpack_require__
file:///Users/prohertz/Documents/reliance-react/.next/static/chunks/webpack.js (37:33)
fn
/_next/static/chunks/webpack.js (288:21)
eval
webpack-internal:///./node_modules/@tamagui/animate-presence/dist/jsx/AnimatePresence.js (7:71)
./node_modules/@tamagui/animate-presence/dist/jsx/AnimatePresence.js
file:///Users/prohertz/Documents/reliance-react/.next/static/chunks/pages/_app.js (160:1)
options.factory
/_next/static/chunks/webpack.js (633:31)
__webpack_require__
file:///Users/prohertz/Documents/reliance-react/.next/static/chunks/webpack.js (37:33)
fn
/_next/static/chunks/webpack.js (288:21)
eval
webpack-internal:///./node_modules/@tamagui/animate-presence/dist/jsx/index.js (6:74)
./node_modules/@tamagui/animate-presence/dist/jsx/index.js
file:///Users/prohertz/Documents/reliance-react/.next/static/chunks/pages/_app.js (204:1)
options.factory
/_next/static/chunks/webpack.js (633:31)
__webpack_require__
file:///Users/prohertz/Documents/reliance-react/.next/static/chunks/webpack.js (37:33)
fn
/_next/static/chunks/webpack.js (288:21)
eval
webpack-internal:///./node_modules/@tamagui/animations-reanimated/dist/jsx/createAnimations.js (5:83)
./node_modules/@tamagui/animations-reanimated/dist/jsx/createAnimations.js
file:///Users/prohertz/Documents/reliance-react/.next/static/chunks/pages/_app.js (226:1)
options.factory
/_next/static/chunks/webpack.js (633:31)
__webpack_require__
file:///Users/prohertz/Documents/reliance-react/.next/static/chunks/webpack.js (37:33)
fn
/_next/static/chunks/webpack.js (288:21)
eval
webpack-internal:///./node_modules/@tamagui/animations-reanimated/dist/jsx/index.js (4:75)
./node_modules/@tamagui/animations-reanimated/dist/jsx/index.js
file:///Users/prohertz/Documents/reliance-react/.next/static/chunks/pages/_app.js (237:1)
options.factory
/_next/static/chunks/webpack.js (633:31)
__webpack_require__
file:///Users/prohertz/Documents/reliance-react/.next/static/chunks/webpack.js (37:33)
fn
/_next/static/chunks/webpack.js (288:21)
eval
webpack-internal:///./node_modules/@atom/core/dist/jsx/index.js (8:88)
./node_modules/@atom/core/dist/jsx/index.js
file:///Users/prohertz/Documents/reliance-react/.next/static/chunks/pages/_app.js (61:1)
options.factory
/_next/static/chunks/webpack.js (633:31)
__webpack_require__
file:///Users/prohertz/Documents/reliance-react/.next/static/chunks/webpack.js (37:33)
fn
/_next/static/chunks/webpack.js (288:21)
eval
webpack-internal:///./theme/config.ts (2:68)
./theme/config.ts
file:///Users/prohertz/Documents/reliance-react/.next/static/chunks/pages/_app.js (9180:1)
options.factory
/_next/static/chunks/webpack.js (633:31)
__webpack_require__
file:///Users/prohertz/Documents/reliance-react/.next/static/chunks/webpack.js (37:33)
fn
/_next/static/chunks/webpack.js (288:21)
eval
webpack-internal:///./pages/_app.tsx (10:71)
./pages/_app.tsx
file:///Users/prohertz/Documents/reliance-react/.next/static/chunks/pages/_app.js (9158:1)
options.factory
/_next/static/chunks/webpack.js (633:31)
__webpack_require__
file:///Users/prohertz/Documents/reliance-react/.next/static/chunks/webpack.js (37:33)

Separate starters

Is your feature request related to a problem? Please describe.
No

Describe the solution you'd like
Addition of 2 more starter templates. Expo only and Next only. These two without monorepo

Describe alternatives you've considered
I'll try dismantling the starter template.

Additional context
Add any other context or screenshots about the feature request here.

Using the deprecated unimodules package for RN?

Your installation instructions for RN mention using @unimodules/core for LinearGradient support. However, this package is deprecated in favor of the expo package. I didn't want to jump in a rabbit hole, so I haven't tried it out yet with the expo package instead, I just wanted to get your thoughts on it first.

expo packages installed are not compatible with Android Gradle 7

The version of expo-linear-gradient that gets resolved through tamagui ends up being 11.2.0 which does not have the maven --> maven-publish fix in 11.0.2 (see: expo/expo#12774 )

$ yarn why expo-linear-gradient
├─ tamagui@npm:1.0.0-alpha.68
│  └─ expo-linear-gradient@npm:11.2.0 (via npm:^11.0.2)
│
├─ tamagui@npm:1.0.0-alpha.68 [23952]
│  └─ expo-linear-gradient@npm:11.2.0 [8ac96] (via npm:^11.0.2 [8ac96])
│
└─ tamagui@npm:1.0.0-alpha.68 [50cbc]
   └─ expo-linear-gradient@npm:11.2.0 [8ac96] (via npm:^11.0.2 [8ac96])

In tamagui's package json, the rule for linear gradient's version should be ~11.0.2 to fix this for now

attribute text-decoration instead of css functionality

When I use the underline variant HTML output is not correct and contains additional text-decoration attributes instead of valid CSS values. Text is not using text-decoration: 'underline' css property.

const Text = styled(SizableText, {
  variants: {
   underline: {
      true: {
        textDecoration: 'underline',
      },
      false: {
        textDecoration: 'none',
      },
    },
  },
  defaultVariants: {
    underline: false,
  },
});

<Text underline>TeStBlABla</Text>

HTML result:
As you can see there is attribute: text-decoration="underline" instead of default underline functionality.

<span text-decoration="none" class="   _ww-fl0oek _boxs-1pkamc3 _fofam-1f039uq _disp-1ffesbf _ww-fl0oek _boxs-1pkamc3 _fofam-1f039uq _disp-1ffesbf">TeStBlABla</span>

OS: MAc
Browser Safari
Version 46

How to use with Remix Run

I would like use this library within a Remix Run web, but can figure it how.

Any help would be appreciated.

Expo app build fails

Describe the bug
When creating a new tamagui app with yarn create tamagui-app expo eas build for android fails.

To Reproduce
Create a new app with yarn create tamagui-app, setup eas, expo-dev-client and build.
There's the logs on my builds.
https://expo.dev/accounts/ivopr/projects/vermeil/builds/cf02a075-242d-42a4-b09c-594fb3158c4b

This ceases to happen if I go to expo folder and expo install expo-linear-gradient here.

Environment (please complete the following information):

OS: Android
Browser .
Version All (?)

Starter app with expo-dev-client bug

Describe the bug
So, I've created a new tmagui app via create-tamagui-app, added expo-dev-client to the expo app dependencies and import 'expo-dev-client' to the top of App.tsx, built the dev client, ran yarn build at the root to build @my/ui, and the app welcomed me with a beautiful red logbox.
On console this is what I have.

Logs

   Warning: forwardRef render functions accept exactly two parameters: props and ref. %s, Did you forget to use the ref parameter?
at /home/ivopr/projects/test/node_modules/react/cjs/react.development.js:220:4 in printWarning
at /home/ivopr/projects/test/node_modules/react/cjs/react.development.js:196:16 in error
at /home/ivopr/projects/test/node_modules/react/cjs/react.development.js:1377:13 in forwardRef
at /home/ivopr/projects/test/node_modules/@tamagui/card/dist/cjs/Card.js:115:78 in <global>
at /home/ivopr/projects/test/node_modules/metro-runtime/src/polyfills/require.js:339:11 in loadModuleImplementation
at /home/ivopr/projects/test/node_modules/@tamagui/card/dist/cjs/index.js:17:31 in <global>
at /home/ivopr/projects/test/node_modules/metro-runtime/src/polyfills/require.js:339:11 in loadModuleImplementation
at /home/ivopr/projects/test/node_modules/tamagui/dist/cjs/index.js:130:31 in <global>
at /home/ivopr/projects/test/node_modules/metro-runtime/src/polyfills/require.js:339:11 in loadModuleImplementation
at /home/ivopr/projects/test/packages/ui/dist/cjs/index.js:17:31 in <global>
at /home/ivopr/projects/test/node_modules/metro-runtime/src/polyfills/require.js:339:11 in loadModuleImplementation
at /home/ivopr/projects/test/packages/app/features/home/screen.tsx:7:0 in <global>
at /home/ivopr/projects/test/node_modules/metro-runtime/src/polyfills/require.js:339:11 in loadModuleImplementation
at /home/ivopr/projects/test/packages/app/navigation/native/index.tsx:4:0 in <global>
at /home/ivopr/projects/test/node_modules/metro-runtime/src/polyfills/require.js:339:11 in loadModuleImplementation
at App.tsx:3:0 in <global>
at /home/ivopr/projects/test/node_modules/metro-runtime/src/polyfills/require.js:339:11 in loadModuleImplementation
at index.js:3:0 in <global>
at /home/ivopr/projects/test/node_modules/metro-runtime/src/polyfills/require.js:339:11 in loadModuleImplementation
at /home/ivopr/projects/test/node_modules/metro-runtime/src/polyfills/require.js:200:44 in guardedLoadModule
at http://10.0.0.105:8081/index.bundle?platform=android&dev=true&minify=false&app=com.demonicat.tamaguitest&modulesOnly=false&runModule=true:370652:3 in global code

ViewPropTypes will be removed from React Native. Migrate to ViewPropTypes exported from 'deprecated-react-native-prop-types'.
at /home/ivopr/projects/test/node_modules/react-native/index.js:470:4 in module.exports.get__ViewPropTypes
at /home/ivopr/projects/test/node_modules/@react-native-community/blur/src/BlurView.android.js:87:6 in <global>
at /home/ivopr/projects/test/node_modules/metro-runtime/src/polyfills/require.js:339:11 in loadModuleImplementation
at /home/ivopr/projects/test/node_modules/@react-native-community/blur/index.js:1:0 in <global>
at /home/ivopr/projects/test/node_modules/metro-runtime/src/polyfills/require.js:339:11 in loadModuleImplementation
at /home/ivopr/projects/test/node_modules/tamagui/dist/cjs/views/BlurView.native.js:23:25 in <global>
at /home/ivopr/projects/test/node_modules/metro-runtime/src/polyfills/require.js:339:11 in loadModuleImplementation
at /home/ivopr/projects/test/node_modules/tamagui/dist/cjs/index.js:150:31 in <global>
at /home/ivopr/projects/test/node_modules/metro-runtime/src/polyfills/require.js:339:11 in loadModuleImplementation
at /home/ivopr/projects/test/packages/ui/dist/cjs/index.js:17:31 in <global>
at /home/ivopr/projects/test/node_modules/metro-runtime/src/polyfills/require.js:339:11 in loadModuleImplementation
at /home/ivopr/projects/test/packages/app/features/home/screen.tsx:7:0 in <global>
at /home/ivopr/projects/test/node_modules/metro-runtime/src/polyfills/require.js:339:11 in loadModuleImplementation
at /home/ivopr/projects/test/packages/app/navigation/native/index.tsx:4:0 in <global>
at /home/ivopr/projects/test/node_modules/metro-runtime/src/polyfills/require.js:339:11 in loadModuleImplementation
at App.tsx:3:0 in <global>
at /home/ivopr/projects/test/node_modules/metro-runtime/src/polyfills/require.js:339:11 in loadModuleImplementation
at index.js:3:0 in <global>
at /home/ivopr/projects/test/node_modules/metro-runtime/src/polyfills/require.js:339:11 in loadModuleImplementation
at /home/ivopr/projects/test/node_modules/metro-runtime/src/polyfills/require.js:200:44 in guardedLoadModule
at http://10.0.0.105:8081/index.bundle?platform=android&dev=true&minify=false&app=com.demonicat.tamaguitest&modulesOnly=false&runModule=true:370652:3 in global code

Invariant Violation: requireNativeComponent: "RNCSafeAreaProvider" was not found in the UIManager.

This error is located at:
  in RNCSafeAreaProvider (created by SafeAreaProvider)
  in SafeAreaProvider (created by SafeAreaProvider)
  in SafeAreaProvider
  in Unknown (created by Provider)
  in Provider (created by App)
  in App (created by ExpoRoot)
  in ExpoRoot
  in RCTView (created by View)
  in View (created by AppContainer)
  in RCTView (created by View)
  in View (created by AppContainer)
  in AppContainer
  in main(RootComponent)
at /home/ivopr/projects/test/node_modules/react-native/Libraries/Core/ExceptionsManager.js:95:4 in reportException
at /home/ivopr/projects/test/node_modules/react-native/Libraries/Core/ExceptionsManager.js:141:19 in handleException
at /home/ivopr/projects/test/node_modules/react-native/Libraries/Core/ReactFiberErrorDialog.js:52:4 in showErrorDialog
at /home/ivopr/projects/test/node_modules/expo-font/build/FontHooks.js:26:33 in loadAsync.then$argument_0

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in %s.%s, a useEffect cleanup function, 
  in App (created by ExpoRoot)
  in ExpoRoot
  in RCTView (created by View)
  in View (created by AppContainer)
  in RCTView (created by View)
  in View (created by AppContainer)
  in AppContainer
  in main(RootComponent)

Only the warning about PropTypes is yellow (not sure if this will be of any use tho)

To Reproduce
Create a new tamagui app, add expo-dev-client, add import 'expo-dev-client' on top of App.tsx. Run eas build:configure to setup eas build. Build with eas build -p android --profile development. Start dev client yarn native --dev-client, try to run on the built APK.

Environment (please complete the following information):

OS: Android
Browser ?
Version 12

Typo on website

Hi, I just noticed a typo on your website, and thought you might like to fix it.

You've written ryhthm, but according to (e.g.) wikipedia, the correct spelling is rhythm.

Label component requires `htmlFor` on native

Describe the bug
The Label component requires the property htmlFor, but on mobile, when added it throws
Warning: Failed %s type: %s%s, prop, Invalid props.style key 'pressStyle' supplied to 'Text'.
It doesn't crash the app or anything.

To Reproduce
Add a Label component on page. It will underline it red, saying it needs htmlFor, then you set an htmlFor. Now the above warning should be shown to you.

Environment (please complete the following information):

OS: Android
Browser ?
Version 12

X/YStack and hide element with media | question

I am looking for the best option on how to hide elements for some media in the Stack.

The following solution will hide elements, but auto-added spaces stay visible.

const media = useMedia();

return (
  <YStack als="center" space={20}>
    <H1>Heading 1</H1>
    <H2 $gtLg={{ display: 'none' }} >Heading 2</H2>
    <H3>Heading 3</H3>
  </YStack>
);

The following solution is working fine, but it will remove items entirely from DOM, which I do not want to use because of SSR and SEO.

const media = useMedia();

return (
  <YStack als="center" space={20}>
    <H1>Heading 1</H1>
    {!media.gtLg && <H2 >Heading 2</H2>}
    <H3>Heading 3</H3>
  </YStack>
);

Is there any third solution how to do that?

media are mismatched with variants

First of all here is my media configuration: (I am not using $gtLg because I was always writing just gt prefixes)

  media: {
    // xs: { minWidth: 0 }, this is default behaviour - never used directly (mobile first)
    sm: { minWidth: 660 },
    md: { minWidth: 800 },
    lg: { minWidth: 1020 },
    xl: { minWidth: 1280 },
    '2xl': { minWidth: 1420 },
    '3xl': { minWidth: 1600 },
  },

In the following example, everything is working fine. Standard CSS properties are correctly resolved.

<Text
  fontWeight="100"
  $md={{
    fontWeight: 'bold',
  }}
  $lg={{
    fontWeight: 'normal',
  }}
>
  Test
</Text>

Here you can see broken example:
I will create new Text component which is using variant bold instead of fontWeight

import { SizableText, styled, type GetProps } from 'tamagui';

const Text = styled(SizableText, {
  variants: {
    bold: {
      true: {
        fontWeight: 'bold',
      },
    },
    defaultVariants: {
      bold: false,
    }
});

First broken example

<Text
  $md={{
    bold: true,
  }}
  $lg={{
    bold: false,
  }}
>
  Test
</Text>

Text is bold only for media === 'lg'.

Second broken example

<Text
  bold
  $md={{
    bold: false,
  }}
  $lg={{
    bold: true,
  }}
>
  Test
</Text>

Text is not bold for media < md and it is bold for media > md which is broken in the previous example.

OS: Mac
Browser: Safari
Version: latest beta 44

to add @shopify/restyle to the benchmark list

https://github.com/Shopify/restyle

Used it a lot in my side projects
my guess is it would be at the same level as drispy,
but worth checking. :)

Guides/Developing throws 404 error

When clicking on The Button below

it takes you to this page with 404

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.

Not inheriting properties

See the following examples.

Here, the default XStack has flexDirection 'row':

But here, the MyStack apparently is not inheriting the flexDirection 'row':

Overwrite the flexDirection not works yet.

But overwrite it inside a boolean variant just works.

react native error of Tried to register two views with the same name RNCSafeAreaProvider

running expo run:ios causes runtime errors due to module version conflicts.

the current version of expo uses [email protected]. tamagui/package.json has a requirement of ^4.2.5. lowering it to ^4.2.4 should resolve this issue.

add support for multiple media values in one property

I would like to use properties with simplified multiple media values

<Component
width={{ base: '50%', md: '43%', lg: '35%', xl: '28%' }}
/>

instead of

<Component
  width="50%"
  $gtSm={{ width: '50%' }}
  $gtMd={{ width: '43%' }}
  $gtLg={{ width: '35%' }}
  $gtXl={{ width: '28%' }}
/>

Do you have any suggestions on how to achieve it?
Thank you

Button component is not keyboard focusable on web

On web, Button components are not keyboard focusable when tabbing through the screen unless I add a tag="button" prop.

As a workaround right now, I'm just re-exporting the Tamagui Button component with the tag prop set to button like this:

import React from 'react'
import { Button as TButton, ButtonProps } from 'tamagui'

export const Button = (props: ButtonProps) => {
  return <TButton {...props} tag="button" />
}

I tried installing tamagui in normal expo project but getting this error.

TypeError: undefined is not an object (evaluating 'navigator.userAgent.toLowerCase')
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:95:4 in reportException
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:141:19 in handleException
at node_modules/react-native/Libraries/Core/setUpErrorHandling.js:24:6 in handleError
at node_modules/@react-native/polyfills/error-guard.js:49:36 in ErrorUtils.reportFatalError
at node_modules/metro-runtime/src/polyfills/require.js:203:6 in guardedLoadModule
at http://10.1.104.68:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&strict=false&minify=false:319604:3 in global code

Invariant Violation: "main" has not been registered. This can happen if:
* Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
* A module failed to load due to an error and `AppRegistry.registerComponent` wasn't called.
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:95:4 in reportException
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:141:19 in handleException
at node_modules/react-native/Libraries/Core/setUpErrorHandling.js:24:6 in handleError
at node_modules/@react-native/polyfills/error-guard.js:49:36 in ErrorUtils.reportFatalError

github Repo link

styles not getting applied for hover state

Describe the bug

<Button theme="dark" hoverStyle={{ backgroundColor: '$green04' }}>Plain</Button>

adding hover style to the button is not getting applied only below if getting applied

background-color: var(--backgroundHover) !important;

To Reproduce
add custom color and add it to the hover style

Environment (please complete the following information):

OS: Mac
Browser chrome
Version latest

tamagui / tamagui Goto Github PK

tamagui's People

Contributors

Stargazers

Watchers

Forkers

tamagui's Issues

Thanks for an awesome project - really loved it!

We are building our UI library in react-native which will get used in our web projects as well, we are trying to move our setup to tamagui and facing the below issue in our react-native project setup.

Recommend Projects

Recommend Topics

Recommend Org

We are building our UI library in react-native which will get used in our web projects as well, we are trying to move our setup to `tamagui` and facing the below issue in our react-native project setup.