Introducing Zephyr: Tailwind CSS for React Native

Building complex web apps with plain CSS can be a daunting challenge. As a result, developers tend to go for popular styling libraries like Bootstrap and Tailwind CSS in order to improve development cycles.

Similar to styling on the web, using the built-in styling functionalities in React Native can be a slow and laborious process. There are solutions similar to Bootstrap and Tailwind CSS available for React Native, and one such solution is React Native Zephyr. React Native Zephyr is a Tailwind CSS-inspired styling library designed to improve your development speed and ship React Native applications faster.

It also brings the Tailwind CSS experience to React Native. If you are familiar with Tailwind CSS, you can easily pick Zephyr up because of the similarities between the two. This article will introduce you to the main features of React Native Zephyr.

• What is React Native Zephyr?
• How to use React Native Zephyr
• How to use the styling methods in React Native Zephyr
• The default theme in React Native Zephyr
• Extend and override the default theme in React Native Zephyr

What is React Native Zephyr?

React Native Zephyr is a React Native styling library inspired by Tailwind CSS. It implements some of the core ideas of Tailwind CSS in the context of React Native without any native dependencies.

Though still in active development at the time of writing this article, the following are some of the key features of React Native Zephyr.

• It provides a handy set of built-in styling utilities out of the box
• It comes with an extendable default theme
• It has support for dark mode out of the box

The features above make React Native Zephyr a better alternative to the built-in styling functionality found in other libraries. The features above are by no means exhaustive, and I’d recommend checking out the official documentation for more built-in features of React Native Zephyr.

React Native has styling functionalities that are not directly compatible with the web. Therefore, it may be difficult to directly transfer your web-focused styling solutions like Bootstrap and Tailwind CSS to React Native. However, some of your Tailwind CSS skill sets are transferable to React Native Zephyr because of the similarities between the two libraries.

If you have an existing React Native project, you can install React Native Zephyr from the npm package registry like so:

# Using npm
npm i react-native-zephyr

# Using yarn
yarn add react-native-zephyr

# Using pnpm
pnpm add react-native-zephyr

How to use React Native Zephyr

React Native Zephyr uses the StyleProvider component under the hood for managing, among other things, your application’s color scheme. To start using react-native-zephyr, import the StyleProvider component and wrap your app in it.

import { StyleProvider } from "react-native-zephyr";
export const App = () => (
  <StyleProvider>
    { /* The rest of your app goes here */}
  </StyleProvider>
);

React Native Zephyr exports the createStyleBuilder function for generating core styling utilities. Invoking createStyleBuilder will return the styles, useStyles, and makeStyledComponent utility functions. These styling utility functions provide React Native Zephyr’s different styling approaches.

For easy maintenance, React Native Zephyr recommends creating a dedicated utility file for managing your styling utilities. The code below shows React Native Zephyr’s basic styling utility file.

import { createStyleBuilder } from "react-native-zephyr";
export const { styles, useStyles, makeStyledComponent } = createStyleBuilder();

The createStyleBuilder function also takes an optional argument, though we didn’t pass it in the above example, which you can use for overriding or extending the default theme. If you invoke createStyleBuilder without an argument, as we did, React Native Zephyr will use the default theme. We will learn to override and extend the default theme in the upcoming sections.

You can export what you need from this utility file to the other components of your app. As the above example shows, the core styling utilities are the styles and makeStyledComponent functions and the useStyles hook.

How to use the styling methods in React Native Zephyr

As noted in the previous section, React Native Zephyr recommends creating a dedicated styles.js utility file for managing its utility functions. Invoking the createStyleBuilder function returns the styles and makeStyledComponent functions and the useStyles hook. You can export these utility functions from the styles.js file to the components that need them in your app.

import { createStyleBuilder } from "react-native-zephyr";
export const { styles, useStyles, makeStyledComponent } = createStyleBuilder();

The styles function takes an array of React Native Zephyr class names and returns a React Native styles object. The class names you pass as arguments are from your theme and handlers. You can use the styles function like so:

export default function App() {
  return (
    <View style={styles("flex:1", "bg:black")} >
      <Text style={styles("color:white", "text:5xl")}>
        Hello World
      </Text>
    </View>
  );
}

Be aware that the styles function doesn’t have out-of-the-box support for dark mode. Therefore, it is only suitable for a one-off style.

You can also style using the makeStyledComponent wrapper in React Native Zephyr. As its name suggests, makeStyledComponent is a utility function for making styled Components. The makeStyledComponent utility function takes a Component as an argument and adds class and darkClass props to the Component. It returns the wrapped Component to which you can pass style classes.

As suggested above, it is best to create styled components in your styles.js file and export them like so:

export const StyledText = makeStyledComponent(Text);
export const StyledView = makeStyledComponent(View);

The useStyles hook internally uses the styles method. Unlike the styles method, the useStyles hook has support for dark mode. Like any other React hook, you can only use the useStyles hook with functional components and another hook — it returns a style object you can pass to a React Native element.

The code below demonstrates how you can use the useStyles hook.

export default function App() {
  const wrapperStyles = useStyles({
    classes: ["flex:1", "bg:black"],
  });
  const textStyles = useStyles({
    classes: ["color:white", "text:5xl"],
  });
  return (
    <View style={wrapperStyles}>
      <Text style={textStyles}>Hello World</Text>
      <StatusBar style="auto" />
    </View>
  );
}

The default theme in React Native Zephyr

React Native Zephyr has a default theme that you can use without configuration — we have been using it from the beginning. The default theme draws its inspiration from the default theme in Tailwind CSS; you can also extend the default theme if it doesn’t meet your needs.

The default theme comes with several styling constraints; which React Native Zephyr uses to generate styling classes.

When you apply the pl:56 styling to an element as in the example below, React Native Zephyr will add the left padding of 224px. In the pl:56 style class, pl is the paddingLeft property, and 56 is a default theme spacing constraint whose size is 224px when React Native Zephyr transforms the style to a React Native style object. The documentation has a complete list of the default theme constraints and their corresponding scales.

<StyledText classes={["pl:56"]}>Hello World</StyledText>

React Native Zephyr uses the spacing constraints to generate margin and padding, as well as sizing style classes. The default theme includes several other constraints like opacities and letterSpacing constraints.

Extend and override the default theme in React Native Zephyr

Though it ships with a default theme, React Native Zephyr lets you extend and override it. The createStyleBuilder function introduced in one of the previous sections takes an optional object as an argument. The object has the overrideTheme and extendTheme properties for overriding and extending the default theme, respectively. The value of both properties can either be objects or functions.

If you set the value of the overrideTheme property to an object like the example below, React Native Zephyr will override the colors in the default theme. The colors dark, light, and brandColorPalette will override the default colors in the example below.

export const { makeStyledComponent, styles, useStyles } = createStyleBuilder({
 overrideTheme: {
  colors: {
    dark: "#737373",
    light: "#e5e5e5",
    brandColorPalette: "#a1323e",
  }
 }
});

You can set the value of the overrideTheme property to a function that returns the theme constraints object as in the code below. You will have access to the base font size when you set the value of the overrideTheme property to a function.

export const { makeStyledComponent, styles, useStyles } = createStyleBuilder({
  baseFontSize: 18,
  overrideTheme: ({ baseFontSize }) => {
    return {
      colors: {
        dark: "#737373",
        light: "#e5e5e5",
        brandColorPalette: "#a1323e",
      },
      spacing: {
        enormous: baseFontSize * 100,
      },
    };
  },
});

In the example above, React Native Zephyr will override the colors and spacing in the default theme with the one you have provided in the custom theme.

You can similarly use extendTheme — unlike the overrideTheme property, the extendTheme property extends the default theme instead of overriding it.

export const { makeStyledComponent, styles, useStyles } = createStyleBuilder({
  extendTheme: {
    colors: {
      brandColorPalette: "#a1323e",
    },
  },
});

If you want access to the base font size, you can also set the value of the extendTheme property to a function that returns an object like so:

export const { makeStyledComponent, styles, useStyles } = createStyleBuilder({
  baseFontSize: 12,
  extendTheme: ({ baseFontSize }) => {
    return {
      spacing: {
        enormous: baseFontSize * 100,
      },
      colors: {
        brandColorPalette: "#a1323e",
      },
    };
  },
});

Conclusion

Styling solutions such as Bootstrap and Tailwind CSS are popular because they increase the speed of development. React Native Zephyr is attempting to bring the Tailwind CSS experience to React Native, and picking it up is easy if you are already familiar with Tailwind CSS.

React Native Zephyr comes rigged with a default theme offering a generous set of values to set you off. If the default theme doesn’t meet your needs, you can extend or override it as described in the article. Though young at the time of writing this article, it is worth exploring React Native Zephyr to see if it works for you — hopefully, you will find it useful for your project.

There are several features of React Native Zephyr that we haven’t covered in this article. Do check out the official documentation for more features. Let me know what you think in the comments section below.