Open lmb-it opened 1 month ago
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
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?
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.
@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:
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:
nativewind/babel
listed as a plugin
. This should be in the presets
array (based on the nativewind
documentation module-resolver
plugin to understand how aliases should be used. Also check out the documentation on tsconfig paths as this should probably match your aliaseswithNativeWind
(based on the nativewind
documentation)@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
Hey @lmb-it, Can we schedule a call?
I am not using expo
Sure We can have a call
@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.
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',
},
],
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
@rajat693 There is nothing in your repo apart from react native initialization.
@rawatnaresh, please checkout branch gluestack-v2-components
as mentioned in @rajat693 comment.
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.
Hey @rawatnaresh, Check out this article This issue is related to your node environment.
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"
Wonder why no one is taking this seriously, it literally means that with expo & gluestack v2 nothing is working.
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.
@aaronatbissell Thank you!
This is the fix. The Gluestack install process is not properly adding the withNativeWind
call.
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
Hey team, are there any updates to this issue?
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.
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
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
in MainApplication.tsx
and react native can't read css files so how to solve this problem
gluestack-ui Version
2
Platform
Other Platform
No response
Additional Information
No response