Thanks for going over this. I am just starting up an App idea that I want to build and I was unsure if I wanted to use NativeWind but this video gave me the confidence to go ahead and try it!
ive had this same issue as well :( i made a change to a font size in theme and it never applies it to the Text class unless i stop running the app and build again which is a pain
Great video!! I have a question, when I make a component that takes props with Text daughter, this returns an error that says : a text node cannot be a child of view component. Any fix please?
horhorou, thank you for watching and I'm pleased you like my videos. If you stick around, I promise the videos and content will improve over time. Please let me know if I can help you in any way. Happy to help!
I found this library too, it’s real good; but I can’t seem to make darkMode styles to work; using useColorTheme() though top header (network and battery icons) respond just fine. Any help from anyone please
Hi Ezile, thank you for watching. Sorry to hear you're having / had an issue. Using NPM or YARN should not be a cause for why it didn't work. Could you please be more specific to what is not working?
For some reason if I do .//**/*.{js,jsx,ts,tsx} it is not able to see any of my files, have to have screens folder on main directory level and use './screens/**/*.{js,jsx,ts,tsx}
Dude it's working fine on App.js But when I created a folder called *screens* and add it to *talwind.config.js* content: ["./App.{js,jsx,ts,tsx}", "./screens/*.{js,jsx,ts,tsx}"], Then it's not working in the Components which I import in App Is there any Fix ?
The Problem is fixed, Just created a folder *src* then inside it I have created my folders like screens,components then replace the line in talwind.config.js to *content: ["./App.{js,jsx,ts,tsx}", "./src/**/*.{js,jsx,ts,tsx}"],* and now it's working fine ! :)
Hey, I'm attempting to utilize Nativewind using the same instructions, but I encountered an error while trying to execute the app. The error message pertains to the file index.js within the node_modules\@react-navigation\core ode_modules\escape-string-regexp directory. Could anyone lend a hand in resolving this issue for me?
I tried using _useColorScheme_ from screen component, it doesn't work and returns _undefined_ . Doesn't it work with other components other than App component?
Hi Gary, great question. Unfortunately, I have not tried React Native Reanimated with NativeWind. I could try it and let you know, or perhaps others involved in the topic could help answer this. The creator of NativeWind is also very responsive in answering questions on his library. After some digging, It looks like it is not a goal of NativeWind, however you can read more on the NativeWind goals here: github.com/marklawlor/nativewind/blob/6d6a377eed2eded57620f4ca62b80c98a07f5587/apps/website/docs/guides/goals.mdx - TL;DR it may or may not work - if you end up trying it before I do, please let me know your results. Thanks so much!
When using reanimated, make sure your reanimated plugin is the last plugin in the list. This is my setup plugins: ['nativewind/babel', 'react-native-reanimated/plugin']
I have followed the tutorial but am stuck when it comes to editing the code, the template recently brings this code "import type {Node} from 'react';" and that brings error. can you help?
Hi @Amme Sidd, thank you for watching! Are you sure there is no error of any kind? Have you tried restarting your local server? Unfortunately, it's a challenge to help you debug without more knowledge of the issue. Could you post an issue on my Discord or ping me on GitHub with a link to your repo? Also, there's a new version of NativeWind just released this past week. I haven't made a video on it, but will soon. Maybe things have changed since this video?
Hey @Amme Sidd Check Your tailwindcss.confiq.js and make sure you replaced with the right folder name like src or components or any folder name you are using
@@ammesidd6669 Nice work - Happy you sorted it out! Thank you @jr for your help as well! Love that this community is helping each other out - I appreciate you all deeply.
I want to keep styles in different file.. also to reuse styles by creating different custom classname like we do in tailwind css ... i dont how to do it .. can u provide a way ?
Great question - this is important to know that some things between web vs native are different. Please see the compatibility chart here www.nativewind.dev/tailwind/layout/display#compatibility
Thanks for going over this. I am just starting up an App idea that I want to build and I was unsure if I wanted to use NativeWind but this video gave me the confidence to go ahead and try it!
Glad it was helpful!
How are things going? I'm planning to use NativeWind as well, and I'd like to know if you're making good progress.
This is great, I was having troubles setting my nativewind but It's now done thanks
How did you set up your nativewind? I am having trouble
@@nickd621 which part are you having troubles with? Shall I make a video?
nice one mate . me switching to your recommendation ... subed you from now on
its great. there is another issue when we customize anything tailwind.config.ts import anything from native wind lets say fontscale. we got ts error
ive had this same issue as well :( i made a change to a font size in theme and it never applies it to the Text class unless i stop running the app and build again which is a pain
Awesome Content! would love to see you grow on youtube!
Great video!!
I have a question, when I make a component that takes props with Text daughter, this returns an error that says : a text node cannot be a child of view component. Any fix please?
Nice content, thanks for this video ! 👏
horhorou, thank you for watching and I'm pleased you like my videos. If you stick around, I promise the videos and content will improve over time. Please let me know if I can help you in any way. Happy to help!
I found this library too, it’s real good; but I can’t seem to make darkMode styles to work; using useColorTheme() though top header (network and battery icons) respond just fine.
Any help from anyone please
I tried doing this with npm instead of yarn, but it did not work. Can you please help?
Hi Ezile, thank you for watching. Sorry to hear you're having / had an issue. Using NPM or YARN should not be a cause for why it didn't work. Could you please be more specific to what is not working?
kindly make tutorial on React Native Elements(icons) .
For some reason if I do .//**/*.{js,jsx,ts,tsx} it is not able to see any of my files, have to have screens folder on main directory level and use './screens/**/*.{js,jsx,ts,tsx}
if you have a src folder which contains your screens, components, etc. change to src
Everyone use expo, thanks a lot this is realy helpful
Dude it's working fine on App.js
But when I created a folder called *screens* and add it to
*talwind.config.js*
content: ["./App.{js,jsx,ts,tsx}", "./screens/*.{js,jsx,ts,tsx}"],
Then it's not working in the Components which I import in App
Is there any Fix ?
The Problem is fixed, Just created a folder *src* then inside it I have created my folders like screens,components then replace the line in talwind.config.js to *content: ["./App.{js,jsx,ts,tsx}", "./src/**/*.{js,jsx,ts,tsx}"],*
and now it's working fine ! :)
Is it possible to separate styling?
Hey, I'm attempting to utilize Nativewind using the same instructions, but I encountered an error while trying to execute the app. The error message pertains to the file index.js within the node_modules\@react-navigation\core
ode_modules\escape-string-regexp directory. Could anyone lend a hand in resolving this issue for me?
sir i can't able to use tailwind in my app i can't able to wrap my app with what should i do?
I tried using _useColorScheme_ from screen component, it doesn't work and returns _undefined_ . Doesn't it work with other components other than App component?
Great vid! Have you had any issues using this with reanimated?
Hi Gary, great question. Unfortunately, I have not tried React Native Reanimated with NativeWind. I could try it and let you know, or perhaps others involved in the topic could help answer this. The creator of NativeWind is also very responsive in answering questions on his library. After some digging, It looks like it is not a goal of NativeWind, however you can read more on the NativeWind goals here: github.com/marklawlor/nativewind/blob/6d6a377eed2eded57620f4ca62b80c98a07f5587/apps/website/docs/guides/goals.mdx - TL;DR it may or may not work - if you end up trying it before I do, please let me know your results. Thanks so much!
When using reanimated, make sure your reanimated plugin is the last plugin in the list. This is my setup
plugins: ['nativewind/babel', 'react-native-reanimated/plugin']
I have followed the tutorial but am stuck when it comes to editing the code, the template recently brings this code "import type {Node} from 'react';" and that brings error. can you help?
Your videos are Awesome . NativeWind is only working on my App.js screen not the others and there is no error . kindly help me because I'm beginner...
Hi @Amme Sidd, thank you for watching! Are you sure there is no error of any kind? Have you tried restarting your local server? Unfortunately, it's a challenge to help you debug without more knowledge of the issue. Could you post an issue on my Discord or ping me on GitHub with a link to your repo? Also, there's a new version of NativeWind just released this past week. I haven't made a video on it, but will soon. Maybe things have changed since this video?
Hey @Amme Sidd
Check Your tailwindcss.confiq.js and make sure you replaced with the right folder name like src or components or any folder name you are using
Hey @jr and @Eric David Smith, thank you both for your assist😊. I'm replaced with my folder name and now its working.
@@ammesidd6669 Nice work - Happy you sorted it out! Thank you @jr for your help as well! Love that this community is helping each other out - I appreciate you all deeply.
Hi, I can't fix the error of className prop, even after setting the app.d.ts file, anyone has an idea ?
I have the same problem too..
Same issue
I want to keep styles in different file.. also to reuse styles by creating different custom classname like we do in tailwind css ... i dont how to do it .. can u provide a way ?
Pls do you find a way to do this, I also want to do separate my style
great vid. Is grid compatible with native wind?
Great question - this is important to know that some things between web vs native are different. Please see the compatibility chart here www.nativewind.dev/tailwind/layout/display#compatibility
@@EricDavidSmith Thank you .
It's a good library but they need a tutorial on how to add Typescript for the className prop..
Hi, what do you mean by add Typescript for the className prop ? I can't fix the issue :/
@@popey4525 to fix className prop just create a app.d.ts file in root project and inside add this: ///
lovely
Thanks for watching, Nurul. Hope you found this video useful. Happy to help you if you get stuck.
@@EricDavidSmith thanks
yeah, it doesn't work now, following the docs and its now applying styles. 🤷♂🤷♂
Thank you for your patience - what doesn't work? is this video outdated already? Happy you got it working!!