Gluestack v2 React Native Installation

[lmb-it]

Description

Styling classnames not take any effect

CodeSandbox/Snack link

https://gluestack.io/ui/docs/home/overview/upgrade-to-v2

Steps to reproduce

In React Native I'm trying to add gluestack v2. I did npx gluestack-ui@latest add --all the create global.css file and add Tailwind CSS inside global.css I add

@tailwind base;
@tailwind components;
@tailwind utilities;

and import this global file in app.tsx my problem the style of gluestack is not showing this is the code I'm trying to use: in index.tsx

<GluestackUIProvider >
      <MainApplication />
    </GluestackUIProvider>

in MainApplication.tsx

<Button size="md" variant="solid" action="negative" >
        <ButtonText>Hello World!</ButtonText>
      </Button>

and react native can't read css files so how to solve this problem

gluestack-ui Version

2

Platform

• [ ] Expo
• [X] React Native CLI
• [ ] Next
• [ ] Web
• [X] Android
• [X] iOS

Other Platform

No response

Additional Information

No response

[sra1kumar-NULL]

Hey, These are the steps to follow : Step 1:Initialize gluestack-ui v2: npx gluestack-ui@latest init Step 2:Setup Tailwind CSS: import "@/global.css" Step 3:Add All Components: npx gluestack-ui@latest add --all Step 4:Code Migration: npx @gluestack-ui/v2-codemod@latest You've missed the initialization step ie.., step 1. You don't have to manually add the global.css file and contents of it . Initialization step will take care of it . You just need to import the file at the location of provider. Please check this for more detailed approach .

[aaronatbissell]

I'm having a very similar problem. I've followed all the steps outlined above.

My main problems stems from the config.ts. Any colors defined there (like --color-primary-500) don't seem to make their way to the var(--color-primary-500) in the tailwind.config.ts. I can set the color directly in the tailwind.config.ts (by replacing var(--color-primary-500) with something like 255 0 0) and the colors show up correctly. I can also set the --color-primary-500 in global.css and the colors show up correctly as well. It appears that the vars function isn't properly defining those variables? Does anyone have any insight as to why this may be happening?

[aaronatbissell]

I think I just figured this out. We are using a babel JSX transformation plugin @babel/plugin-transform-react-jsx. In order for this to work properly, we have to use nativewind (not react to do our jsx transformation). So you have to set the importSource to nativewind in order to get it to take your styles.

[lmb-it]

@aaronatbissell Thank you for your comment, I tried but the same error Please look at all these and tell me if you have any solution

I tried to import global.css like import './global.css' I got this error

I tried to import it like import "@/global.css I got this error s";

My Project's Structure: ios android App.tsx babel.config.ts global.css gluestack-ui.config.json jest.config.js metro.config.js nativewind-env.d.ts tailwind.config.js tsconfig.json src -components --ui ---gluestack-ui-provider

Here is my files contents App.tsx

babel.config.ts: for alias I tried all type of aliases

Thank you

global.css: @tailwind base; @tailwind components; @tailwind utilities;

gluestack-ui.config.json: { "tailwind": { "config": "tailwind.config.js", "css": "global.css" }, "app": { "entry": "App.tsx", "components": "components/ui" } }

jest.config.js: module.exports = { preset: 'react-native', };

metro.config.js:

nativewind-env.d.ts: ///

tailwind.config.js: this have about 205 lines which is the same of the contents in the main gluestack website

tsconfig.json:

[aaronatbissell]

I'll preface this by saying, I'm not a maintainer of this repo, so take whatever I say with a grain of salt.

A couple of things stick out to me about this:

1. In your babel.config.ts
   • you have nativewind/babel listed as a plugin. This should be in the presets array (based on the nativewind documentation
   • Check out the documentation on the module-resolver plugin to understand how aliases should be used. Also check out the documentation on tsconfig paths as this should probably match your aliases
2. In your metro.config.ts, you should be exporting a withNativeWind (based on the nativewind documentation)

[lmb-it]

@aaronatbissell

Thank you very much now there are no longer errors and aliases working fine also I could import global.css but style not make any effect

this is my code which is copied from Main Website

and this is the result

Any solution?

Thanks again

[Viraj-10]

Hey @lmb-it, Can we schedule a call?

• Before this check if your expo version is 50 or above.

[lmb-it]

I am not using expo

[lmb-it]

Sure We can have a call

[Viraj-10]

@lmb-it, Currently We haven't explored v2 with react-native. Since nativewind v4 also recommend use of expo. However We will try it out with react native and let you know.

[aaronatbissell]

Based on NativeWind's docs, they support framework-less react-native

NativeWind works with both Expo and framework-less React Native projects but Expo provides a more streamlined experience.

I have it working without Expo. Like I mentioned before, the last straw for me was babel plugin to transform jsx using nativewind instead of react.

    [
      '@babel/plugin-transform-react-jsx',
      {
        runtime: 'automatic',
        importSource: 'nativewind',
      },
    ],

[rajat693]

I created a React Native project, set up NativeWind and Gluestack-v2, and added components. Everything is working fine. You can find the GitHub repository for reference below. repo - https://github.com/rajat693/rn-gluestack-v2 branch name - gluestack-v2-components

[rawatnaresh]

@rajat693 There is nothing in your repo apart from react native initialization.

[Viraj-10]

@rawatnaresh, please checkout branch gluestack-v2-components as mentioned in @rajat693 comment.

[rawatnaresh]

got this error while running

info Reloading connected app(s)...
tailwindcss(android) rebuilding... done
transform[stderr]:
transform[stderr]: <--- Last few GCs --->
transform[stderr]:
transform[stderr]: [74447:0x150008000]    31041 ms: Mark-Compact (reduce) 2039.4 (2083.3) -> 2039.4 (2083.3) MB, 730.21 / 0.00 ms  (average mu = 0.245, current mu = 0.247) allocation failure; GC in old space requested
transform[stderr]: [74447:0x150008000]    31889 ms: Mark-Compact (reduce) 2039.4 (2083.3) -> 2039.4 (2083.3) MB, 726.33 / 0.00 ms  (average mu = 0.196, current mu = 0.143) allocation failure; GC in old space requested
transform[stderr]:
transform[stderr]:
transform[stderr]: <--- JS stacktrace --->
transform[stderr]:
transform[stderr]: FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
 BUNDLE  ./index.js

error: global.css: A jest worker process (pid=74447) was terminated by another process: signal=SIGTERM, exitCode=null. Operating system logs may contain more information on why this occurred.

[Viraj-10]

Hey @rawatnaresh, Check out this article This issue is related to your node environment.

[cloudSchulze]

I have this issue as well. I created a new expo project and installed gleucstack v2. I can start my app and use it but the styles are not applied to the components. I used the box component from the install manual and i can see only the text. No color, or padding is added. Something is wrong with "npx gluestack-ui init"

[prateek3211]

Wonder why no one is taking this seriously, it literally means that with expo & gluestack v2 nothing is working.

[Viraj-10]

Hey Everyone,

Thank you for reporting all the issues. We have tested the init command for both Expo and Next.js projects and are working hard to resolve any problems. However, I ask for your patience as we work through these issues.

@rajat693 has created a repository using react-native-cli. While it works for us and some users, it breaks in certain edge cases. This might be due to a heap issue on Windows or other unknown factors.

We would appreciate it if you could provide us with repository access where we can reproduce these issues along with your system specifications. So far, we have only tested this on Mac machines with the latest versions of React Native.

I am also preparing a checklist and troubleshooting document for all users facing these issues.

[britt]

@aaronatbissell Thank you!

This is the fix. The Gluestack install process is not properly adding the withNativeWind call.

[azharrasheed]

Hi, I figured out the styling issue. I created a new bare react native project and added gluestack-ui with this cmd npx gluestack-ui init some styles which were defined in tailwind.config.css were working other styles of components and tailwind css were not working when you init gluestack-ui it created tailwind.config with this content

  content: [
    "./**/*.{js,jsx,ts,tsx,html}",
    './src/**/*.{html,js,jsx,ts,tsx}',
    './src/core-components/**/**/*.{html,js,jsx,ts,tsx}',
    './src/components/**/*.{html,js,jsx,ts,tsx,mdx}',
    './src/hooks/**/*.{html,js,jsx,ts,tsx,mdx}',
  ],

clearly for bare react native project content have wrong directories changing it to the following worked for me

  content: [
    "./App.{tsx,jsx,ts,js}",
    "./index.{tsx,jsx,ts,js}",
    "./components/**/*.{tsx,jsx,ts,js}"
  ],

this should be generated by default for react native cli bare projects

[johnsonchau-bulb]

Hey team, are there any updates to this issue?

[vaibhk20]

Hi Everyone 👋

Thank you for reporting the issue. The issue should now be resolved in the latest version of CLI, please try using the updated version, if possible. If you're still experiencing problems with the CLI, we are actively working on resolving any remaining issues and will keep you updated on our progress.

In the meantime, you can also try using this repository for React Native and gluestack-ui v2 setup with a working example: gluestack-react-native

If you encounter any problems with either the latest CLI or this alternative setup, we would appreciate it if you could report them. Your help in resolving these issues is greatly appreciated.