Skip to main content

Getting Started

First, install the package via npm:

npm install rn-stylewind

🛠️ Setup

Before diving in, wrap your Metro bundler config to enable dynamic style generation.

1️⃣ Add to metro.config.js

const { getDefaultConfig } = require('expo/metro-config');
const withRNStylewind = require('rn-stylewind/metro');

const defaultConfig = getDefaultConfig(__dirname);

module.exports = withRNStylewind(defaultConfig); // wrap your defaultConfig with withRNStylewind HOF

2️⃣ Initialize Default Theme Configuration

To initialize and create the default theme.config.mjs file, run the following command:

npx init-rn-stylewind

This will generate a theme.config.mjs file in the root directory of your project as below. You can customize this file to define your theme colors, spacing, typography, utilities.

// theme.config.mjs
import { createTheme } from 'rn-stylewind';

export default await createTheme({
mode: 'light',
colors: {
primary: {
default: '#1D4ED8',
light: '#93C5FD',
dark: '#1E3A8A',
},
},
spacing: {
default: 8,
},
// Modify other theme settings if needed
});

🎯 Usage

Wrap your application with ThemeProvider to ensure your styles and theme configurations are accessible throughout the project:

import MyComponent from './MyComponent';
import { ThemeProvider } from 'rn-stylewind';

function App() {
return (
<ThemeProvider>
<MyComponent />
</ThemeProvider>
);
}

Here’s how simple and powerful rn-stylewind is:

import { Text, Pressable } from 'react-native';
import { styles } from 'rn-stylewind';

// 🚀 Utility-first styling at its finest!
export const Button = ({ title, ...rest }) => {
return (
<Pressable style={styles(['bgError', 'p-5'])} {...rest}>
<Text style={styles(['bgBackgroundLight', 'textCenter'])}>{title}</Text>
</Pressable>
);
};

Now go forth and style like a boss! 🚀