react-native-stylex
    TypeScript icon, indicating that this package has built-in type declarations

    4.1.1 • Public • Published

    react-native-stylex

    Better styling for react-native

    react-native-stylex on npm react-native-stylex downloads react-native-stylex bundle size CI status

    Module features:

    Integrations

    Links

    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 ?

    Keywords

    none

    Install

    npm i react-native-stylex

    DownloadsWeekly Downloads

    13,069

    Version

    4.1.1

    License

    MIT

    Unpacked Size

    33.7 kB

    Total Files

    76

    Last publish

    Collaborators

    • retyui