|
1 | 1 | # react-native-css
|
2 | 2 |
|
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. |
4 | 6 |
|
5 | 7 | ## Installation
|
6 | 8 |
|
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"; |
8 | 23 |
|
9 |
| -### Without `globalClassNamePolyfill` |
| 24 | +const defaultConfig = getDefaultConfig(__dirname); |
10 | 25 |
|
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`: |
12 | 41 |
|
13 | 42 | ```ts
|
14 | 43 | import { View } from 'react-native-css/components';
|
@@ -145,6 +174,8 @@ See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the
|
145 | 174 |
|
146 | 175 | MIT
|
147 | 176 |
|
| 177 | +See the [license](LICENSE) file for more details. |
| 178 | + |
148 | 179 | ---
|
149 | 180 |
|
150 | 181 | Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)
|
0 commit comments