Questions tagged [nativewind]
The nativewind tag has no usage guidance.
nativewind
61
questions
57
votes
14
answers
56k
views
Getting Error: "Use process(css).then(cb) to work with async plugins"
screens/HomeScreen.js: Use process(css).then(cb) to work with async plugins
Here is my HomeScreen.js
import { View, Text } from 'react-native'
import React from 'react'
export default function ...
- 1,641
5
votes
1
answer
4k
views
Typescript error Use process(css).then(cb) to work with async plugins
I'm starting with React Native using Nativewind and I get this error.
iOS Bundling failed 1748ms error: App.tsx:
/Users/gcortinez/Projects/eynurse/eynurse-rn/eynurse_app/App.tsx: Use
process(css)....
3
votes
2
answers
398
views
Pressable styling doesn't work with native-wind
I'm using react-native with nativewind library and conditional styling in Pressable doesn't work when it's wrapped in a View with nativewind classnames.
So basically removing the className from the ...
- 2,079
2
votes
3
answers
184
views
React Native's TouchableOpacity not taking styles by className
I'm making a custom Button component with React Native & Nativewind. But the styling doesn't work when className is applied to TouchableOpacity.
Component:
import {TouchableOpacity} from "...
- 45
2
votes
3
answers
2k
views
Babel "plugins" is not a valid plugin property?
I am trying to get Nativewind to work on my expo react-native project. But i keep getting the following error:
iOS Bundling failed 3618ms (C:\Documents\project\node_modules\expo-router\entry.js) error:...
2
votes
1
answer
585
views
NativeWind border color not working as expected in React Native app
I'm trying to style some pills using NativeWind. Here's my app:
import React, { useState, useEffect } from 'react';
import { StatusBar, View } from 'react-native';
import { Pill } from './components/...
- 65.9k
2
votes
1
answer
395
views
React Native Storybook and Nativewind
I have a react native project and I want to use storybook to document components. However the issue I'm running into is nativewind styles don't apply when viewing in storybook. So i just see a ...
- 365
2
votes
1
answer
521
views
NativeWind in an NX project with react native (expo) not working
I've followed the documentation on the NativeWind site to setup NativeWind with me React native application, but it doesn't seem to be working.
I have several other react projects running with ...
- 1,005
1
vote
2
answers
1k
views
TypeScript Error with NativeWind in React Native: "No overload matches this call"
I'm working on a React Native project using NativeWind for Tailwind CSS support. I've followed the NativeWind documentation for TypeScript integration, but I'm still encountering a TypeScript error ...
- 1,881
1
vote
1
answer
2k
views
How to style child elements with nativewind
I'm trying to set the color of the text of all elements in a View to a specific color, this can be done with practicaly any class pretty easily in tailwind by simply giving the class you want to the ...
1
vote
1
answer
278
views
How to make font size responsive in React Native using NativeWind
I need to make text phrase to be fit in one line by using nativewind based on height and width of the screen
here is my code
<Text className="text-base md:text-xl">Agree to our Terms ...
- 143
1
vote
1
answer
2k
views
Error while integrating TailwindCSS (Nativewind) with React Native 18 + Expo 49 in TypeScript
I'm trying to set up a project using React Native 18, Expo 49, TailwindCSS (Nativewind), and TypeScript. However, I'm encountering an issue while attempting to compile my TypeScript code with ...
1
vote
1
answer
85
views
TailwindCSS not working in React Native project
I created a React Native app using Expo and tried to use Tailwind CSS with the help of NativeWind. I followed this docs:
Read the docs here...
Versions:
react-native : 0.74.3
nativewind: 2.0.11
...
1
vote
1
answer
31
views
NativeWind will transform className into style as an array, can it be one single style object
i use both NativeWind and twrnc in my project.
suppose i have a component looks like this.
import tw from "twrnc";
...
const Test=(props)=>
{
console.log(props);
return <View style=...
- 1,492
1
vote
0
answers
58
views
Set up of NativeWind with className management libraries
I am working on a React Native with Expo project. I would like to set up NativeWind the same way that I normally use Tailwind. Usually, I install these libraries: clsx and tailwind-merge. Then I used ...
- 326
1
vote
0
answers
157
views
Error Importing CSS in React Native with Expo and NativeWind: Numeric Escape Error
I am developing a React Native app using Expo, NativeWind, and Metro. I'm encountering a syntax error related to a CSS import when I try to start my project with npx expo start -c. Here are the ...
- 11
1
vote
1
answer
549
views
Invariant Violation: "main" has not been registred on first project with expo
I'm trying to start learning React Native, Expo and using Tailwind, but I'm facing problems and I can't find solutions, one of which is the error:
Invariant Violation: "main" has not been ...
- 1,494
1
vote
0
answers
101
views
Does Native wind support extending classes in the tailwind.config.js file?
So, my question is pretty straight forward. Can I add extended classes in my tailwind.config.js file when using NativeWind ?
So here is my tailwind.config.js file :
module.exports = {
content: [&...
- 11
1
vote
0
answers
85
views
Issue with Nativewind CSS Styles Not Displaying
I created an npm package called react-native-toastbox for toast notifications in React Native using nativewind. However, after downloading from npm, the code works, but the CSS (from nativewind) doesn'...
1
vote
1
answer
236
views
NativeWind View with padding left
I have a strange padding on left when using View inside other View
I'm using nativewind 2.0.11
<View className="flex-col items-center justify-center flex-grow gap-2 bg-blue-400">
&...
- 4,091
1
vote
1
answer
215
views
Nativewind not taking effect?
I'm trying to use nativewind with a React Native component.
It works if I apply the className line to a Text directly but it doesn't work like this.
Follow up question: is it ok to use both nativewind ...
- 11
1
vote
0
answers
610
views
Nativewind toggling Dark mode with custom color schemes
I have a React Native project leveraging Nativewind.
I have dark mode toggle working and and am trying to use the same methodology as the default Tailwind scheme
i.e.
<View className=&...
- 2,191
1
vote
1
answer
291
views
Nativewind not working in both android and web expo
I Set up a project in expo Nativewind for both web and android platforms. But getting errors in the CSS file.
But project is running in web.
Android Bundling failed 2084ms
Unable to resolve "./...
- 372
1
vote
0
answers
1k
views
Nativewind with React-native, <Image className="h-7 w-7"> does NOT show an image on the web
I am fairly new to coding and am trying out Nativewind for my react native app, I'm using expo and testing live with the web compiler as well as an Android emulator.
The following code works fine on ...
- 53
1
vote
1
answer
981
views
Transition for TextInput width in React Native Expo app using Tailwind/NativeWind
In a React Native Expo app, there is a TextInput whose width can change due to having the Tailwind/Nativewind className="flex-grow when the Pressable component gets hidden.
Is there a way to ...
- 6,591
0
votes
1
answer
20
views
Relative View overlay in web - React Native
I recently crafted a Dropdown component in React Native. However, I faced a challenge where the Flatlist content ended up positioned beneath the subsequent Dropdown component. This positioning issue ...
- 89
0
votes
1
answer
288
views
Nativewind styless not being applied to React Native project
I'm working on this app and no styles are being applied. I think I made the right configuration, can someone help me find what is wrong?
package.json
{
"name": "nlw-expert",
&...
- 142
0
votes
1
answer
437
views
Development server returned response error code:500 in reactNative adding nativewind nativewind component library
Stuck in Error while Adding Tailwind CSS Library (Nativewind) to React Native App - Seeking Community Help
Hey fellow developers,
I hope you're all doing well! I'm currently facing a challenging issue ...
0
votes
1
answer
15
views
I can not place what causing NativeWind props to not be recognised in tsx
I am able to call className in jsx file, but not in tsx files. Can someone assist.
The error being thrown is:
No overload matches this call.
Overload 1 of 2, '(props: ViewProps): View', gave the ...
- 49
0
votes
0
answers
41
views
Taiwind styles through className variables not working in ReactNative
I am using
"nativewind": "^2.0.11", as "dependencies"
and
"tailwindcss": "^3.3.2", as "devDependencies"
Normal css styling operations using ...
- 1,244
0
votes
0
answers
14
views
does NativeWind support custom plugin defined in tailwind.config.js
my tailwind.config.js is like this
const plugin = require("tailwindcss/plugin");
module.exports = {
plugins: [
plugin(function ({ addUtilities}) {
addUtilities({
&...
- 1,492
0
votes
1
answer
33
views
custom plugin in tailwind.config.js under Expo is not working
i am using tailwindcss in an Expo project, and i try to use some custom color in custom plugin function,however,i got an error says Error: tailwindcss plugin function argument object prop "colors....
- 1,492
0
votes
0
answers
17
views
How to place image behind the content
I have custom drawer header component in expo. Here is my code
interface CustomDrawerHeaderProps {
title: string;
rightAction?: React.ReactNode;
backRoute?: string;
}
function ...
0
votes
0
answers
114
views
Nativewind on ReactNative Expo working but only accepting single option
New Boilerplate project React TS Expo project compiling but I cant apply multiple native wind options
using tabs index.tsx rather than App.tsx
for example i can do
<Text className="text-3xl&...
0
votes
0
answers
60
views
I can't get nativewind to work on react native even after following the most basic of steps
Even after following guides tailwind still refuses to work on react native.
I have tried many things but this is the simplest approach I have found:
1. npx create-expo-app@latest App --template blank@...
- 13
0
votes
0
answers
68
views
React native error with nativewind: Use process(css).then(cb) to work with async plugins
I'm new to Reactnative and just following a tutorial on youtube, but I'm getting this error
Android Bundling failed 187129ms C:\Users\user2\Desktop\Apps\test_app\node_modules\expo-router\entry.js (936 ...
- 63
0
votes
0
answers
24
views
How can I find the hex code of a predefined color in React Native (NativeWind)?
I've used 'bg-gray-400' somewhere in my app, but I want to get this color's hex code. How can I learn the preset color's hex code?
- 15
0
votes
2
answers
436
views
After setup nativewind does not work with expo
Update: tailwind started working, I have no clue why it just started working without changing anything in the code base. The only difference was that I switched to a different phone to pixel 4 in ...
- 107
0
votes
1
answer
34
views
How can I resize the image in React Native? (a simple question)
Here is my Card component's code:
const AnnouncementsCard = ({title, content, imageSrc}) => {
return (
<View className="bg-white items-center resize-x justify-center rounded-lg p-2 m-...
- 15
0
votes
0
answers
41
views
Nativewind styles are not being applied in react native and expo application
I am building a react native application with expo. I am trying to style it using Nativewind. But when I am trying to apply the styles to the components, they are not being applied.
No error is ...
0
votes
0
answers
14
views
Using percentage value for absolutely positioned elements doesn't work when parent has padding
Using percentage value for absolutely positioned elements doesn't work when parent has padding.
code:
<View className="w-full py-40 mt-10 bg-gray-300 border border-black">
<View ...
- 45
0
votes
0
answers
185
views
How to Integrate Nativewind v4 with expo and nextjs
I am trying to integrate or make universal tailwind CSS template using nativewind (react native components) and tailwind for web components. I can make components work if its not react-native. That is,...
- 42
0
votes
1
answer
103
views
Nativewind styles are not executing in my react native application during build
I have a default react native application. I want to integrate Nativewind into my application. I followed the complete guide setup for Nativewind from their site. I am not changing some styling and ...
- 173
0
votes
0
answers
61
views
react native nativewind open dialog on center
I'm making a form and I have a button that I need to open a popup with information in the center of the app, but I can't imagine how to do this, could anyone help me?
my main:
import { Image, View, ...
- 1,494
0
votes
0
answers
60
views
I used nativewind this plugs, but it's only working app.js not working login.jsx, where has problem?
I used nativewind this plugs, but it's only working app.js not working login.jsx, where has problem?
When I writed this code in app.js, it's working.
export default function App() {
return (
<...
- 463
0
votes
0
answers
227
views
Nativewind V4 with expo Router
i'm developpong a react native app using Expo router and Nativewind v4.
evrerything was working perfect, but suddenly the Nativewind classes stopped working.
i tried resetting ths cache, uninstalling ...
0
votes
2
answers
275
views
Config Tailwind in react native not working
i am new with react native and typescript.
in this project i want to use the tailwind css and follow instruction at nativewind to config tailwind.config.js like this
/** @type {import('tailwindcss')....
0
votes
0
answers
12
views
Search Section Behind Homepage Image in React Native and tailwindcss
I'm working on a React Native project and trying to implement a search section behind the homepage image. I want the search bar to be partially obscured by the homepage image, creating a visually ...
- 1
0
votes
0
answers
125
views
How to implement a weight measurement scale in react-native?
I am new to react-native. I am trying to create a fitness app. While creating the profile, I am asking for weight to input. Our UI will look like the above image.
But I have no idea, How I can ...
- 106
0
votes
0
answers
118
views
Why does Nativewind cause nothing to render when I have an <ImageBackground />?
I just installed Nativewind in my expo app (Expo SDK v50.0.0-preview.7). Before updating my metro and babel configs to include Nativewind, everything was rendering properly, but now <...
- 164