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";constbreakpoints={xs: 360,sm: 600,md: 960,lg: 1280,xl: 1920,};const{ up, down, only, between }=createBreakpoints(breakpoints);constapplyBreakpoints=createBreakpointsMatcher(breakpoints,maxWidth);consttheme={palette: {textColor: "black"},breakpoints: { up, down, only, between,apply: applyBreakpoints},utils: {fade: (color,value)=>{},},};constRoot=()=>(<ThemeProvidervalue={theme}><App/></ThemeProvider>);exportdefaultRoot;

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";exportconstuseStyles=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....600lg: 18,// if window width 601..1280default: 16,// if window width 1281...}),},}));

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

And finally just use in component:

importReact,{Component}from"react";importuseStylesfrom"./styles";// Functional component (hooks variant)constRoot=()=>{conststyles=useStyles();return<Viewstyle={styles.root}/>;};exportdefaultRoot;//--------------------------------// Class component (HOC variant)classRootextendsComponent{render(){const{ styles }=this.props;return<Viewstyle={styles.root}/>;}}exportdefaultwithStyles(useStyles)(Root);

5️⃣ Do you use a Typescript ?

• Look at typescript guide

Alternative solutions

• uniwind
• react-native-unistyles
• nativewind
• @emotion/native
• @shopify/restyle
• tamagui
• dripsy