Simplifying React Native Styling with React Native Zephyr

What is React Native Zephyr?

React Native Zephyr is a React Native styling library that brings the Tailwind CSS experience to React Native. With its core ideas inspired by Tailwind CSS, React Native Zephyr provides a handy set of built-in styling utilities out of the box, an extendable default theme, and support for dark mode.

Key Features of React Native Zephyr

• Provides a set of built-in styling utilities
• Comes with an extendable default theme
• Supports dark mode out of the box

Getting Started with React Native Zephyr

To start using React Native Zephyr, you need to import the StyleProvider component and wrap your app in it. React Native Zephyr also exports the createStyleBuilder function for generating core styling utilities.

import { StyleProvider, createStyleBuilder } from 'react-native-zephyr';

const App = () => {
  const styleBuilder = createStyleBuilder();

  return (
    <StyleProvider styleBuilder={styleBuilder}>
      // Your app components here
    </StyleProvider>
  );
};

Using the createStyleBuilder Function

The createStyleBuilder function returns the styles, useStyles, and makeStyledComponent utility functions. These styling utility functions provide different styling approaches for your React Native application.

Styling Methods in React Native Zephyr

styles

A function that takes an array of React Native Zephyr class names and returns a React Native styles object.

const styles = styleBuilder.styles(['flex-1', 'justify-center', 'items-center']);

makeStyledComponent

A utility function for making styled components.

const StyledView = styleBuilder.makeStyledComponent('View', ['bg-red-500', 'p-4']);

useStyles

A hook that returns a style object you can pass to a React Native element.

const useStyles = styleBuilder.useStyles();

const MyComponent = () => {
  const styles = useStyles(['text-lg', 'font-bold']);

  return <Text style={styles}>Hello World</Text>;
};

Default Theme in React Native Zephyr

React Native Zephyr comes with a default theme that provides a set of values to get you started. The default theme includes constraints for spacing, opacities, and letter spacing.

Extending and Overriding the Default Theme

React Native Zephyr allows you to extend and override the default theme using the overrideTheme and extendTheme properties of the createStyleBuilder function.

const styleBuilder = createStyleBuilder({
  overrideTheme: {
    spacing: {
      sm: 10,
      md: 20,
      lg: 30,
    },
  },
  extendTheme: {
    colors: {
      primary: '#3498db',
    },
  },
});

By providing a simple and efficient way to style React Native applications, React Native Zephyr aims to bring the benefits of Tailwind CSS to the React Native ecosystem.