react-native-stylex

Better styling for react-native

Module features:

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

Integrations

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

Links

• Documentation;
• Live demo;
• Example app.

Install

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

1️⃣ Add module

yarn add react-native-stylex

# or npm install react-native-stylex

2️⃣ Add theme <ThemeProvider/>

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

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 = () => (
  <ThemeProvider value={theme}>
    <App />
  </ThemeProvider>
);

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:

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:

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

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

  return <View style={styles.root} />;
};

export default Root;

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

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

    return <View style={styles.root} />;
  }
}

export default withStyles(useStyles)(Root);

5️⃣ Do you use a Typescript ?

• Look at typescript guide

Alternative solutions

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