Skip to content

Commit c496d78

Browse files
committed
chore: update README.md
1 parent 90250ed commit c496d78

File tree

1 file changed

+35
-4
lines changed

1 file changed

+35
-4
lines changed

README.md

Lines changed: 35 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,43 @@
11
# react-native-css
22

3-
A CSS polyfill for React Native's native platforms
3+
A CSS polyfill for React Native
4+
5+
The goal of this library is to provide the most complete CSS support for React Native, within the limitations of Yoga and the core React Native package. This includes multiple advanced CSS features like media queries, container queries, CSS variables, and more.
46

57
## Installation
68

7-
## Usage
9+
1. Create a CSS file in your project, e.g. `styles.css`.
10+
2. Import the CSS file in your App entry point, or root layout component:
11+
3. Setup the bundler using one of the methods below.
12+
13+
### Metro based projects
14+
15+
> [!TIP]
16+
> All Expo and React Native community projects use Metro as the bundler, so this guide applies to them.
17+
18+
You will need to add `withReactNativeCSS` to your Metro configuration.
19+
20+
```ts
21+
import { getDefaultConfig } from "expo/metro-config";
22+
import { withReactNativeCSS } from "react-native-css/metro";
823

9-
### Without `globalClassNamePolyfill`
24+
const defaultConfig = getDefaultConfig(__dirname);
1025

11-
If you are not using the `globalClassNamePolyfill`, you can use the library by importing the React Native components directly from `react-native-css/components`:
26+
export default withReactNativeCSS(defaultConfig);
27+
28+
// OR with the globalClassNamePolyfill enabled
29+
export default withReactNativeCSS(defaultConfig, {
30+
globalClassNamePolyfill: true,
31+
});
32+
```
33+
34+
### Other bundlers
35+
36+
`react-native-css` officially only supports Metro as the bundler, but we welcome community contributions to support other bundlers like Webpack, Vite or Turbopack.
37+
38+
## Usage
39+
40+
You can use the library by importing the React Native components directly from `react-native-css/components`:
1241

1342
```ts
1443
import { View } from 'react-native-css/components';
@@ -145,6 +174,8 @@ See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the
145174

146175
MIT
147176

177+
See the [license](LICENSE) file for more details.
178+
148179
---
149180

150181
Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)

0 commit comments

Comments
 (0)