"You cannot use tokens without wrapping the component with StyleProvider" when using variants in react-native

[harrisrobin]

Hi,

first of all, i love this library! This is exactly what i was looking for from an API perspective.

I have the following text component:

import React from "react"
import { Text as RNText } from "react-native"
import { styled } from "@gluestack-style/react"
import { TextProps } from "./text.props"
import { translate } from "../../services/i18n"

const StyledText = styled(
  RNText,
  {
    variants: {
      variant: {
        body: {
          fontSize: "$3",
        },
      },
    },
  },
  {
    componentName: "Text",
  } as const,
)
type StyledTextProps = React.ComponentProps<typeof StyledText>

export function Text(props: TextProps & StyledTextProps): JSX.Element {
  const {
    tx,
    text,
    children,
    txOptions,
    sx = {},
    variant = "body",
    ...rest
  } = props

  const i18nText = tx && translate(tx, txOptions)
  const content = text || i18nText || children

  return (
    <StyledText variant={variant} sx={sx} {...rest}>
      {content}
    </StyledText>
  )
}

However, when i use it i get

removing the token "$3" gets rid of the error, but this makes the variants api practically unusable for me. My entire app is wrapped in StyledProvider, so not sure what I'm doing wrong.

Thank you

[ankit-tailor]

Hey @harrisrobin, You need to wrap your App with StyledProvider and pass the config to use tokens and aliases. You can check out here.

[harrisrobin]

Hey @harrisrobin, You need to wrap your App with StyledProvider and pass the config to use tokens and aliases. You can check out here.

ah sorry for not being clear. i have wrapped the app with the StyledProvider and passed the config already. despite that i get this error in my expo app.

will put up a reproduction repo shortly.

this only happens when i attempt to use tokens in variant API, otherwise my tokens work fine.

[ankit-tailor]

Thanks @harrisrobin, That'll help to debug the issue.

[harrisrobin]

hey @ankit-tailor , while trying to debug ran into another issue I am able to reproduce. I have not yet put my finger on what's causing this but here's something that breaks in my expo/expo-router project:

Steps to reproduce:

1. wrap react-native's Text component in styled and import it.
2. i get the following:

You can try it by running the following project. To get past the issue, simply replace StyledText with RNText on line 85 of text.tsx.

It seems to be that wrapping Text in styled is causing this issue. What's interesting is when using expo's dev client, this issue doesn't always manifest and when i build a project on expo without using the dev client, i get the following error:

❌ Metro encountered an error:
src/components/profile-footer/profile-footer.tsx: /Users/expo/workingdir/build/src/components/profile-footer/profile-footer.tsx: You cannot use tokens without wrapping the component with StyledProvider. Please wrap the component with a StyledProvider and pass theme config.

I'm not yet sure how all of this relates, all i know is that gluestack-styles will regularly throw an error when i try to run the bundle without expo's dev client and the only thing i've been able to reliably reproduce locally is the above.

Will keep digging, for now working in the dev client seems to work fine.

EDIT:

If you try to run the app with the expo dev client enabled, you should not run into the above error at all 🤔

[harrisrobin]

This is still an issue for me, the problem is i am not able to always reproduce it but in my expo-router react-native app i keep getting this error and the bundle fails:

My app is wrapped in a StyledProvider and sometimes i get "Cannot read properties of undefined (reading 'name')" and other times i get "You cannot use tokens without wrapping the component with StyledProvider. Please wrap the component with a StyledProvider and pass theme config."

I may have to move away from gluestack unfortunately but I'm hoping to figure this out before i have to do that.

[rennanlurahy]

Any solutions for that? I'm experiencing this when using gluestack babel plugin resolver in my project.

[harrisrobin]

Any solutions for that? I'm experiencing this when using gluestack babel plugin resolver in my project.

I ended up using Dripsy for my project.

[sidpremkumar]

@rennanlurahy

Any solutions for that? I'm experiencing this when using gluestack babel plugin resolver in my project.

Same exact thing happened to me. Removed @gluestack-style/babel-plugin-styled-resolver and was able to get past this error specifically. Thanks for the heads up here 🙇

[Looooong]

I got the same error but when using token with Center from @gluestack-ui/themed. Everything is wrapped inside GluestackUIProvider. Other components like VStack or HStack work with the same props.

<Center backgroundColor='$primary400'>...</Center>

If I use bg instead of backgroundColor, there will be no error, but it will translate the prop directly into CSS property named bg.

[jordmccord]

This is an error I'm experiencing despite passing in the config and having the provider wrapped around the entire app. Any updates on this? It's preventing me from using the babel plugin on my project.

[eminx]

I'm also experiencing this error only in certain circumstances which is a little absurd, because it normally works fine. I'm not using the <StyledProvider />, rather I'm using the <GluestackUIProvider />

After some debugging, I figured out that the problem was due to the <ButtonSpinner /> when it's used in certain actions. I removed it and now it works fine. It also works fine to use <Spinner /> instead, just that shorthand props like ml="$1" won't work.

[surajahmed]

There may be multiple versions of @gluestack-style/react in your project. Could you please try removing node_modules and install @gluestack-style/react@latest, @gluestack-ui/themed@latest and @gluestack-ui/config@latest ?