Expo only + Tamagui (native+web)

[LunatiqueCoder]

Current Behavior

Hello! Currently working with Tamagui and Expo only (for web as well) and I'm having a few issues.

1. CSS classes are not working with Tamagui

2. Resetting Tamagui CSS does not work

3. <SizableText /> styles are not applied on native.

Expected Behavior

No response

Tamagui Version

1.74.11

Reproduction

• Source code: https://github.com/LunatiqueCoder/expotamagui
• Live web app: https://expotamagui.vercel.app/

System Info

  System:
    OS: macOS 14.0
    CPU: (8) arm64 Apple M1 Pro
    Memory: 98.64 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 19.7.0 - /opt/homebrew/bin/node
    Yarn: 1.22.19 - ~/.yarn/bin/yarn
    npm: 9.5.0 - /opt/homebrew/bin/npm
    pnpm: 8.6.5 - /opt/homebrew/bin/pnpm
    Watchman: 2023.03.13.00 - /opt/homebrew/bin/watchman
  Browsers:
    Chrome: 117.0.5938.149
    Safari: 17.0
  npmPackages:
    @babel/core: ^7.20.0 => 7.22.9
    @react-native-async-storage/async-storage: 1.18.2 => 1.18.2
    @react-native/eslint-config: ^0.72.2 => 0.72.2
    @react-navigation/drawer: ~6.6.4 => 6.6.4
    @tamagui/animations-moti: ~1.74.11 => 1.74.11
    @tamagui/babel-plugin: ~1.74.11 => 1.74.11
    @tamagui/font-inter: ~1.74.11 => 1.74.11
    @tamagui/font-silkscreen: ~1.74.11 => 1.74.11
    @tamagui/lucide-icons: ~1.74.11 => 1.74.11
    @tamagui/shorthands: ~1.74.11 => 1.74.11
    @tamagui/themes: ~1.74.11 => 1.74.11
    @tamagui/web: ~1.74.11 => 1.74.11
    @types/node: ^20.4.1 => 20.4.2
    @types/react: ~18.2.14 => 18.2.15
    babel-plugin-module-resolver: ^5.0.0 => 5.0.0
    babel-plugin-transform-inline-environment-variables: ^0.4.4 => 0.4.4
    burnt: ~0.11.7 => 0.11.7
    eslint: ^8.38.0 => 8.45.0
    expo: ^49.0.13 => 49.0.13
    expo-auth-session: ~5.0.2 => 5.0.2
    expo-build-properties: ~0.8.3 => 0.8.3
    expo-constants: ~14.4.2 => 14.4.2
    expo-dev-client: ~2.4.11 => 2.4.11
    expo-font: ~11.4.0 => 11.4.0
    expo-image: ~1.3.4 => 1.3.4
    expo-linear-gradient: ~12.3.0 => 12.3.0
    expo-linking: ~5.0.2 => 5.0.2
    expo-router: 2.0.0 => 2.0.0
    expo-secure-store: ~12.3.1 => 12.3.1
    expo-splash-screen: ~0.20.5 => 0.20.5
    expo-status-bar: ~1.6.0 => 1.6.0
    expo-system-ui: ^2.4.0 => 2.4.0
    expo-updates: ~0.18.16 => 0.18.16
    metro-react-native-babel-transformer: ^0.76.7 => 0.76.7
    prettier: ^2.8.7 => 2.8.8
    react: 18.2.0 => 18.2.0
    react-dom: ~18.2.0 => 18.2.0
    react-native: ^0.72.5 => 0.72.5
    react-native-gesture-handler: ~2.12.0 => 2.12.1
    react-native-ios-modal: ~0.1.8 => 0.1.8
    react-native-pager-view: 6.2.0 => 6.2.0
    react-native-reanimated: ~3.3.0 => 3.3.0
    react-native-safe-area-context: 4.6.3 => 4.6.3
    react-native-screens: ~3.22.0 => 3.22.1
    react-native-svg: 13.9.0 => 13.9.0
    react-native-tab-view: ~3.5.2 => 3.5.2
    react-native-web: ~0.19.9 => 0.19.9
    sass: ~1.69.0 => 1.69.0
    tamagui: ~1.74.11 => 1.74.11
    ts-node: ^10.9.1 => 10.9.1
    tslib: ^2.6.0 => 2.6.0
    typescript: ^5.1.3 => 5.1.6

[0xsj]

Perhaps you are overwriting the existing styles over with your custom css because of precedence.
Input component, did you double check the import?

TamaguiComponentPropsBase has the disabled prop in there for sure.

Even still, you should be still able to use the native props, since the input component is using react native TextInput.
editable={false} selectTextOnFocus={false}

[LunatiqueCoder]

There is a reproduction repository. editable={false} works just fine. However, I would expect Tamagui to come with some disabled styles, just like for other components. 🤔 And also, the disabled prop works only on web

[LunatiqueCoder]

Didn't test the new versions, but I got a feeling this got fixed. Will reopen if needed.

[LunatiqueCoder]

Hello @natew, I'm reopening this with the updated issues that I could find when using Tamagui + Expo on web. Thank you!

[LunatiqueCoder]

Ugh, it's just me who didn't understand very well how tamagui and expo css classes works behind the scenes. I'll close this for now, if anyone has the same issues, you can @ ping me for help.