react-native-stylex

Better styling for react-native


$3

- 📦 Very light and simple;
- ⚡️ Hooks \ HoC support;
- 🔋 Theming support;
- ⛱️ Typescript support;
- 📝 Easy integrated with Jest.

$3

- 🛡️ react-native-safe-area-view;
- 🗺 i18n;
- 🕳️ Appearance (a.k.a Dark mode);
- 📐 Dimensions;
- 📲 Orientation;
- 💉 Media Queries support.

$3

- Documentation;
- Live demo;
- Example app.

Install

react-native-stylex requires react-native 0.59.0 or later.

#### 1️⃣ Add module

``sh
yarn add react-native-stylex

or npm install react-native-stylex


`

#### 2️⃣ Add theme

Stylex provides component, which makes the theme available to the rest of your app:

`js
import { ThemeProvider } from "react-native-stylex";
import {
createBreakpointsMatcher,
createBreakpoints,
maxWidth,
} from "react-native-stylex/media-query";

const breakpoints = {
xs: 360,
sm: 600,
md: 960,
lg: 1280,
xl: 1920,
};
const { up, down, only, between } = createBreakpoints(breakpoints);
const applyBreakpoints = createBreakpointsMatcher(breakpoints, maxWidth);

const theme = {
palette: { textColor: "black" },
breakpoints: { up, down, only, between, apply: applyBreakpoints },
utils: {
fade: (color, value) => {},
},
};

const Root = () => (



);

export default Root;
`

#### 3️⃣ Create styles makeUseStyles(...)

Stylex provides a helper function to inject styles to your component.

Normally, you’ll use it in this way:

`js
import { makeUseStyles } from "react-native-stylex";
import { maxWidth } from "react-native-stylex/media-query";

export const useStyles = makeUseStyles(({ palette, utils, breakpoints }) => ({
root: {
color: utils.fade(palette.textColor, 0.5),
height: 100,
// On screens that are 320 or less, set the height to 69
...maxWidth(320, { height: 69 }),
},

text: {
fontSize: 16, // default value
...breakpoints.down("lg", { fontSize: 18 }), // if window width 0..1280
...breakpoints.down("sm", { fontSize: 20 }), // if window width 0..600
},

// The same example that you see above but unsing a 'applyBreakpoints'
title: {
fontSize: breakpoints.apply({
sm: 20, // if window width 0....600
lg: 18, // if window width 601..1280
default: 16, // if window width 1281...
}),
},
}));
`

#### 4️⃣ Inject styles useStyles(...) & withStyles(...)

And finally just use in component:

`js
import React, { Component } from "react";
import useStyles from "./styles";

// Functional component (hooks variant)
const Root = () => {
const styles = useStyles();

return ;
};

export default Root;

//--------------------------------

// Class component (HOC variant)
class Root extends Component {
render() {
const { styles } = this.props;

return ;
}
}

export default withStyles(useStyles)(Root);
``

$3

- Look at typescript guide

$3

- @emotion/native
- nativewind 
- @shopify/restyle 
- tamagui 
- twrnc 
- tailwind-rn 
- dripsy 
- react-native-unistyles 
- react-native-zephyr 
- @fast-styles/react