14 December 2023 • 5 min read

Welcome to Unistyles 2.0!

C++ bindings, first class support for variants, new media queries, and more!

#react-native#react-nativelink#styling#stylinglink#unsityles#unsityleslink#cxx#cxxlink

Source code available on Github

Introduction

I’m very excited to present the new RC version of Unistyles 2.0. This is a big update with many new things and better features. I listened to what you said and worked on the problems we often talked about.

Now, the main core of the library is made in C++. It also has JSI bindings that communicate with React Native. You can expect that library will work the same on iOS and Android. It’s also faster and easier to use!

New features

Unistyles 2.0 is a complete rewrite of the library. I replaced the bad things with better ones. I also added a few new features that you will love ❤️

Improved TypeScript types and DX

One of the most challenging yet rewarding aspects of this update has been enhancing TypeScript types and the overall Developer Experience (DX). Intellisense will hint you at every interaction you have with the library, helping you avoid common mistakes. But that’s not all. The new API ensures seamless integration with your app.

And with all this in mind, you can still use the same createStyleSheet and useStyles introduced in version 1.0!

No React Context

In version 2.0 I’ve eliminated the need for React Context, by incorporating JSI. Now, you no longer need to wrap your application with the UnistylesTheme component.

import React from 'react'
import { UnistylesTheme } from 'react-native-unistyles'
import { theme } from './theme'

export const App: React.FunctionComponent = () => (
-   <UnistylesTheme theme={theme}>
        // your app
-    </UnistylesTheme>
)

C++ bindings

The most significant change in the library is the new core, now written in C++. This represents a substantial improvement over the previous version. Unistyles now has its own events, no longer relying on React Native. This ensures controlled re-renders occur only when necessary.

This upgrade not only boosts performance but also creates the way for more sophisticated and fine-tuned features that will be introduced in the future.

UnistylesRuntime

The library now exposes UnistylesRuntime an API that lets you communicate with Unistyles. This tool is handy for accessing information about phone orientation, color scheme, screen dimensions, and more. An exciting feature is the ability to change the theme from anywhere in your app, even outside the React component tree!

Here’s a quick example showing how to use UnistylesRuntime to change the theme:

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

// change the theme in any component
export const ChangeTheme = () => (
    <Button
        title="Change theme"
        onPress={() => UnistylesRuntime.setTheme('dark')}
    />
)

Learn more about UnistylesRuntime.

First class support for variants

Responding to the most requested feature from the previous version, Unistyles now includes first-class support for variants. This update enhances the library’s capabilities, making it more robust and versatile.

Variants are fully compatible with other features, such as media queries and breakpoints. This synergy allows for more dynamic and responsive design options, ensuring that your application adapts seamlessly across different platforms and screen sizes. This advancement in Unistyles significantly simplifies the process of creating responsive and adaptive UIs.

Learn more about variants.

New media queries

Unistyles now introduces new media queries that don’t rely on strings. You can now build them with mq util that resolves to a JavaScript symbol and is accepted as object key.

Here’s the quick demo how easy and safe is to build cross-platform media queries:

import { createStyleSheet, mq } from 'react-native-unistyles'

const stylesheet = createStyleSheet(theme => ({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
        backgroundColor: {
            [mq.only.width(240, 380)]: theme.colors.background,
            [mq.only.width(380)]: theme.colors.barbie
        }
    }
}))

Learn more about mq.

Plugins

Unistyles has introduced an exciting new feature: plugin support. This addition allows you to enhance the library’s capabilities by adding new functionalities or tweaking existing ones. It’s especially useful for those with specific, unique requirements that aren’t covered by the core library. Plugins offer a flexible solution to these needs.

In essence, plugins are functions that take a style object and return a modified style object. This provides a powerful way to customize and extend the styling capabilities of Unistyles.

Here’s an example of how you can define a plugin:

import type { UnistylesPlugin } from 'react-native-unistyles'

export const myPlugin: UnistylesPlugin = {
    name: 'myPlugin',
    onParsedStyle: (key, styles, runtime) => {
        // parse styles here
    }
}

Learn more about plugins.

New docs

I’m excited to unveil our new documentation website, crafted with the artistic talent of Magda 👩‍🎨, our graphic designer. She hand-drew all the illustrations, adding a unique and creative touch. Our Unicorn illustration is a so beautiful, we half-joke that it could take your attention away from the main content! 😅

The new documentation is more comprehensive and easier to navigate. It also includes a guide about every feature in the library. I highly recommend viewing it on a desktop to experience the beautiful animation of the unicorn’s mane 🦄.

You can check new docs here.

What’s next?

I already shared the roadmap for version 3.0. It will evolve based on your valuable feedback and needs. Excitingly, I’ve also collected some fresh ideas from X (Twitter) following the initial release announcements. I’ll be sharing these with you shortly.

Don’t forget, there’s a discord server for our library. You’re welcome to join! It’s a great place to ask questions, exchange ideas, or simply say hello.

My goal is to create a vibrant community around the library. This is why I’m eager to see your show cases. If you’re using Unistyles in your app, please let me know! I’m excited to showcase it to our community.

For those interested in being featured on the Unistyles page, here are the guides for UI Kits and other projects.

Summary

It’s been just under 24 hours since the release! I’m eagerly waiting to hear your thoughts. I really hope you enjoy the new version of the library. I’m also searching for people who can contribute. If you’re interested in helping out with the library, please get in touch!

Happy Coding!

PS

Your response has been amazing! Over 155,000 people saw the post on Twitter, and the documentation was viewed more than 10,000 times. Just WOW!

Do you want to support me even more?

Sponsor me on Github

Buy me a coffee

Buy

Share it on Twitter

Share