What is NativeWind?
NativeWind is a library that allows you to use Tailwind CSS in React Native projects. It helps you style your mobile apps quickly and efficiently.
Why Use NativeWind?
- Easy to Use: You can write styles directly in your components.
- Consistent Design: Tailwind CSS ensures your design is consistent across different components.
- Fast Development: Quickly apply styles without writing a lot of custom CSS.
Prerequisites
Before you start, make sure you have:
- Node.js installed
- React Native CLI installed
- Basic knowledge of React Native
Step-by-Step Guide
1. Create a New React Native Project
If you haven't already, create a new React Native project using React Native CLI:
npx react-native init MyNativeWindApp
cd MyNativeWindApp
2. Install NativeWind
Next, install NativeWind and its dependencies:
npm install nativewind
npm install --save-dev tailwindcss@3.3.2
# Yarn
yarn add nativewind
yarn add --dev tailwindcss@3.3.2
3. Setup Tailwind CSS
Run npx tailwindcss init to create a tailwind.config.js file.
Add the paths to all of your component files in your tailwind.config.js file. If you put your screens and components inside the src folder, update <custom-folder> with your folder name. For example, './src/**/*.{js,jsx,ts,tsx}'.
// tailwind.config.js
module.exports = {
content: ["./App.{js,jsx,ts,tsx}", "./<custom-folder>/**/*.{js,jsx,ts,tsx}"],
theme: {
extend: {},
},
plugins: [],
}
Make sure
nativewind.d.tsfile is created in your project's root directory with the following content:
/// <reference types="nativewind/types" />
// NOTE: This file should not be edited and should be committed with your source code. It is generated by NativeWind.
4. Configure Babel
Add the NativeWind plugin to your Babel configuration. Open your babel.config.js file and add the following:
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: [
'nativewind/babel',
],
}
5. Use NativeWind in Your Components
Now, you can start using NativeWind in your components. Here's an example:
import React from 'react';
import { View, Text } from 'react-native';
import { NativeWindStyleSheet } from 'nativewind';
export default function App() {
return (
<View className="flex-1 justify-center items-center bg-blue-500">
<Text className="text-white text-lg">Hello, NativeWind!</Text>
</View>
);
}
Button Component
To add margin or padding to buttons, wrap them with a styled component using styled(Button) as shown below:
import { styled } from 'nativewind'
import React from 'react'
import { Pressable, StyleProp, Text, ViewStyle } from 'react-native'
const variantStyles = {
default: {
background: 'bg-white',
text: 'text-black',
},
primary: {
background: 'bg-blue-500',
text: 'text-white',
},
}
const StyledPressable = styled(Pressable)
interface Props {
title: string
onPress?: () => void
disabled?: boolean
variant?: keyof typeof variantStyles
style?: StyleProp<ViewStyle>
}
function Button({
onPress,
title,
disabled,
variant = 'default',
style,
}: Props): JSX.Element {
return (
<StyledPressable
disabled={disabled}
onPress={onPress}
className={`rounded-lg p-2 my-1 ${disabled ? 'bg-gray-300' : ''}
${variantStyles[variant].background} active:bg-slate-500 `}
style={style}>
<Text
className={`text-lg font-bold ${variantStyles[variant].text} text-center`}>
{title}
</Text>
</StyledPressable>
)
}
// Export the styled component
export default styled(Button)
You can now use the Button component in your app. Notice that the className prop is used to apply styles to the component.
import React from 'react'
import { View } from 'react-native'
import Button from './Button'
export default function App() {
return (
<View className="flex-1 justify-center items-center">
<Text>Hello world!</Text>
<Button title="Press Me" className="mt-4" />
</View>
)
}
Conclusion
NativeWind makes it easy to style your React Native apps using Tailwind CSS. With this guide, you should be able to set up and start using NativeWind in your projects. Happy coding!
Top comments (0)