Exploring react-native-unistyles: A Powerful Styling Solution for React Native

Styling in React Native plays a crucial role in creating visually appealing and responsive mobile applications. Traditionally, React Native developers have been using the built-in StyleSheet for styling components. However, a new contender has emerged in the form of react-native-unistyles. In this blog post, we'll dive into what react-native-unistyles is, and explore its benefits over the standard React Native StyleSheet.

What is react-native-unistyles?

react-native-unistyles is a styling library designed to enhance the way we handle styles in React Native applications. It provides a set of tools and utilities that go beyond the capabilities of the default StyleSheet. Developed with flexibility and extensibility in mind, this library introduces innovative features to make styling more powerful and enjoyable.

Benefits of react-native-unistyles

Let’s explore some of the key benefits that react-native-unistyles brings to the table:

1. Theme-based Styling:

react-native-unistyles introduces the concept of themes, allowing developers to create styles that adapt to different themes. This is particularly useful for implementing dark mode or light mode in your application. The ability to dynamically change styles based on a theme object enhances the overall design consistency.

const stylesheet = createStyleSheet(theme => ({
  container: {
    backgroundColor: theme.colors.background,
  },
  text: {
    color: theme.colors.text,
  },
}));

2. Responsive Styles:

One of the standout features of react-native-unistyles is its support for responsive styles. You can define styles that adapt based on screen breakpoints, making it easier to create layouts that look great on various device sizes.

rectangle: {
  width: {
    xs: 100,
    md: 200,
    xl: 400,
  },
  height: {
    xs: 50,
    md: 100,
    xl: 200,
  },
  backgroundColor: theme.colors.secondary,
},

3. Dynamic Functions and Runtime Values:

The library allows you to use dynamic functions and runtime values in your styles. This means you can create styles that are determined at runtime, providing a high degree of flexibility.

4. Clean and Readable Code:

With the separation of styles into a separate file using createStyleSheet, the code becomes more organized and easier to maintain. This makes collaboration among team members smoother and improves the overall readability of the codebase.

Refactoring your React Native Styles with react-native-unistyles

import React from 'react'
import { View } from 'react-native'
import { createStyleSheet, useStyles } from 'react-native-unistyles'

export const Demo: React.FunctionComponent = () => {
    const { styles } = useStyles(stylesheet)

    return (
        <View style={styles.container}>
            <View style={styles.box} />
            <View style={styles.rectangle} />
        </View>
    )
}

const stylesheet = createStyleSheet(theme => ({
    // regular RN styles
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
    },
    // or with some superpowers 🦄
    // ◦ with theme
    box: {
        width: 100,
        height: 100,
        backgroundColor: theme.colors.primary
    },
    // ◦ with breakpoints
    rectangle: {
        width: {
            xs: 100,
            md: 200,
            xl: 400
        },
        height: {
            xs: 50,
            md: 100,
            xl: 200
        },
        backgroundColor: theme.colors.secondary
    },
    // ◦ and much much more!
    // dynamic functions, media queries, variants, runtime values
}))

Installation:

To get started with react-native-unistyles, you need to install the package. Open your terminal and run:

npm install react-native-unistyles

or using yarn:

yarn add react-native-unistyles

Configuration with UnistylesRegistry:

After installing the package, you’ll need to configure it using UnistylesRegistry. This central registry helps manage and organize your styles efficiently. Import and initialize it in your application. Every step mentioned here is optional. If you don’t want to use theming, breakpoints, or any other setting, you don’t need to even call UnistylesRegistry. You can jump directly into working on your components. Remember that UnistylesRegistry should be called only once.
If you want to interact with Unistyles use UnistylesRuntime as described here.

Define Your Breakpoints:

export const breakpoints = {
  xs: 0,
  sm: 576,
  md: 768,
  lg: 992,
  xl: 1200,
  superLarge: 2000,
  tvLike: 4000
} as const

Define your theme(s)

You can define as many themes as you want. Each theme just needs to have a unique name and the same type. The library has no restrictions on the shape of the theme. You can use nested objects, functions, spread operators, and so on.

 export const lightTheme = {
   colors: {
     typography: '#000000',
     background: '#ffffff'
   },
   margins: {
     sm: 2,
     md: 4,
     lg: 8,
     xl: 12
   }
 } as const

 export const darkTheme = {
   colors: {
     typography: '#ffffff',
     background: '#000000'
   },
   margins: {
     sm: 2,
     md: 4,
     lg: 8,
     xl: 12
   }
 } as const

 // define other themes

Configure TypeScript

If you’re using TypeScript, create types for your breakpoints and/or themes. This step is required to achieve perfect Intellisense support across all StyleSheets.

// if you defined breakpoints
type AppBreakpoints = typeof breakpoints

// if you defined themes
type AppThemes = {
  light: typeof lightTheme,
  dark: typeof darkTheme
}

// override library types
declare module 'react-native-unistyles' {
  export interface UnistylesBreakpoints extends AppBreakpoints {}
  export interface UnistylesThemes extends AppThemes {}
}

Did you encounter errors like these?

“An interface declaring no members is equivalent to its supertype.”

Don’t worry! This issue arises due to the eslint preset. To fix it, disable the following rule.

“TS2664: Invalid module name in augmentation, module ‘react-native-unistyles’ cannot be found.”

To resolve this, simply follow the steps described below. You need to import something from react-native-unistyles.

Call UnistylesRegistry

import { UnistylesRegistry } from 'react-native-unistyles'

UnistylesRegistry
  .addBreakpoints(breakpoints)
  .addThemes({
    light: lightTheme,
    dark: darkTheme,
    // register other themes with unique names
  })
  .addConfig({
    // you can pass here optional config described below
    adaptiveThemes: true
  })

Optional config

UnistylesRegistry has a method called addConfig that let’s you use some cool additional features. List of all available settings can be found here.

Full example

import { UnistylesRegistry } from 'react-native-unistyles'
import { breakpoints } from './breakpoints'
import { lightTheme, darkTheme } from './themes'

type AppBreakpoints = typeof breakpoints
type AppThemes = {
  light: typeof lightTheme,
  dark: typeof darkTheme
}

declare module 'react-native-unistyles' {
  export interface UnistylesBreakpoints extends AppBreakpoints {}
  export interface UnistylesThemes extends AppThemes {}
}

UnistylesRegistry
  .addBreakpoints(breakpoints)
  .addThemes({
    light: lightTheme,
    dark: darkTheme,
  })
  .addConfig({
    adaptiveThemes: true
  })

Conclusion

Unistyles is a superset of StyleSheet similar to how TypeScript is a superset of JavaScript. If you’re familiar with styling in React Native, then you already know how to use Unistyles. With its support for themes, responsive styles, and dynamic functions, it provides a powerful alternative to the standard StyleSheet. Consider incorporating this library into your projects to enhance code quality, maintainability, and overall developer experience. Explore the documentation, experiment with the features, and elevate your React Native styling game with react-native-unistyles.

🌟 Thank You for Reading!

• 👏 Show your appreciation by giving the article a round of applause.
• 📌 Follow Abhishek Kumar for more insightful content.

📣 Stay Engaged

• 🔔 Follow Us on Twitter
• 🔗 Connect on LinkedIn

Stay connected, stay informed! We look forward to sharing more exciting content with you. Until next time, happy coding! 🚀

Stackademic

Thank you for reading until the end. Before you go:

• Please consider clapping and following the writer! 👏
• Follow us X | LinkedIn | YouTube | Discord
• Visit our other platforms: In Plain English | CoFeed | Venture