Shubham Singh

Posted on May 13

Why I Started Using react-native-unistyles in My React Native Apps

#javascript #reactnative #mobile #appdev

Styling in React Native looks simple in the beginning. We all start with StyleSheet.create(), add some inline styles, and everything works fine for smaller apps.

But as the app starts growing, styling becomes one of the biggest pain points in the project

You start facing problems like:

Repeated colors and spacing values
Complex dark/light mode handling
Responsive layouts becoming messy
Large style files
Performance issues with dynamic styles
Difficult design system management

This is where react-native-unistyles completely changed the way I handle styling in React Native.

In this article, I’ll explain:

What react-native-unistyles is
Why it is different from normal StyleSheet
How it improves theming and performance
Where it is useful
Pros and cons
Real-world use cases
Why it is becoming popular among React Native developers

What is react-native-unistyles?

react-native-unistyles is a modern styling library for React Native that focuses on:

Performance
Theming
Responsive design
Scalable architecture
Better developer experience

Unlike traditional styling approaches, Unistyles is built around the idea of creating a reactive and optimized design system for React Native apps.

It provides:

Dynamic themes
Responsive utilities
Runtime optimizations
Babel-powered compile-time optimizations
Better handling of large-scale UI systems

The Problem with Traditional StyleSheet

React Native’s built-in StyleSheet.create() is great for simple and static apps.

Example:

const styles = StyleSheet.create({
container: {
backgroundColor: '#fff',
flex: 1,
},
});

This works perfectly fine initially.

But once your app grows, you start writing patterns like:

const styles = createStyles(theme);

const createStyles = (theme) =>
StyleSheet.create({
container: {
backgroundColor: theme.colors.background,
},
});

Now every theme change:

recreates styles
triggers re-renders
increases complexity

This becomes difficult to scale in large applications.

How Unistyles is Different

With Unistyles:

const styles = useStyles(theme => ({
container: {
backgroundColor: theme.colors.background,
},
}));

The important difference is:

Unistyles tracks dependencies and optimizes updates internally.

Instead of manually recreating styles everywhere, the library handles updates much more efficiently.

This becomes extremely useful in:

Large applications
Theme-heavy apps
Apps with many dynamic screens
Complex UI systems

Built-in Theming Support

One of the biggest advantages of Unistyles is theming.

You can define themes like:

export const lightTheme = {
colors: {
background: '#ffffff',
text: '#000000',
},
};

export const darkTheme = {
colors: {
background: '#000000',
text: '#ffffff',
},
};

And switch themes globally with minimal effort.

This makes:

Dark mode
Multiple themes
Brand customization
Dynamic UI systems

much easier to manage.

Performance Benefits

This is one of the strongest reasons developers prefer Unistyles.

Traditional dynamic styling often causes:

unnecessary recalculations
unnecessary re-renders
runtime overhead

Unistyles improves this using:

Babel plugin optimizations
dependency tracking
optimized style computation
efficient updates

This is especially noticeable in:

Chat applications
Social media feeds
Complex dashboards
Apps with large FlatLists
Theme-heavy applications

Responsive Design Made Easier

Handling responsive design manually in React Native can become repetitive.

Normally developers use:

Dimensions
custom hooks
window listeners

With Unistyles, responsive utilities are built into the styling system.

This helps create:

tablet layouts
orientation-aware UI
adaptive spacing
scalable responsive components

in a cleaner way.

Better Design System Architecture

Large applications usually follow a design system approach.

Instead of hardcoded values everywhere:

color: '#000'

you can use semantic tokens:

theme.colors.textPrimary

This creates:

consistency
maintainability
centralized control which is extremely important for scalable projects.

Setup

Installation

npm i react-native-unistyles
or
Yarn add react-native-unistyles

Install dependencies

npm i react-native-nitro-modules
or
yarn add react-native-nitro-modules

babel.config.js

module.exports = function (api) {
  api.cache(true);

  return {
    presets: ["module:@react-native/babel-preset"],
    plugins: [
      [
        "react-native-unistyles/plugin",
        {
          root: "src",
        },
      ],
    ],
  };
};

unistyles.tsx

import { StyleSheet } from 'react-native-unistyles';

export const lightTheme = {
  colors: {
    primary: '#2563EB',
    primaryText: '#FFFFFF',
    secondary: '#EFF6FF',
    background: '#F8FAFC',
    surface: '#FFFFFF',
    surfaceMuted: '#F1F5F9',
    text: '#0F172A',
    textMuted: '#475569',
    border: '#CBD5E1',
    shadow: '#0F172A',
  },
  radii: {
    sm: 6,
    md: 8,
    lg: 12,
  },
  gap: (v: number) => v * 8,
  margin: (v: number) => v * 8,
  padding: (v: number) => v * 8,
} as const;

export const darkTheme = {
  colors: {
    primary: '#60A5FA',
    primaryText: '#020617',
    secondary: '#172554',
    background: '#020617',
    surface: '#0F172A',
    surfaceMuted: '#1E293B',
    text: '#F8FAFC',
    textMuted: '#CBD5E1',
    border: '#334155',
    shadow: '#000000',
  },
  radii: lightTheme.radii,
  gap: lightTheme.gap,
  margin: lightTheme.margin,
  padding: lightTheme.padding,
} as const;

export const redTheme = {
  colors: {
    primary: '#E11D48',
    primaryText: '#FFFFFF',
    secondary: '#FFE4E6',
    background: '#FFF1F2',
    surface: '#FFFFFF',
    surfaceMuted: '#FFE4E6',
    text: '#4C0519',
    textMuted: '#9F1239',
    border: '#FDA4AF',
    shadow: '#9F1239',
  },
  radii: lightTheme.radii,
  gap: lightTheme.gap,
  margin: lightTheme.margin,
  padding: lightTheme.padding,
} as const;

StyleSheet.configure({
  settings: {
    initialTheme: 'light',
  },
  themes: {
    light: lightTheme,
    dark: darkTheme,
    redTheme,
  },
});

export const appThemes = {
  light: lightTheme,
  dark: darkTheme,
  redTheme,
} as const;

export type AppThemeName = keyof typeof appThemes;

declare module 'react-native-unistyles' {
  export interface UnistylesThemes {
    light: typeof lightTheme;
    dark: typeof darkTheme;
    redTheme: typeof redTheme;
  }
}

App.tsx

import { useState } from 'react';
import { Pressable, StatusBar, Text, View } from 'react-native';
import {
  StyleSheet,
  UnistylesRuntime,
  useUnistyles,
} from 'react-native-unistyles';
import {
  SafeAreaProvider,
  useSafeAreaInsets,
} from 'react-native-safe-area-context';
import type { AppThemeName } from './src/helpers/unistyles';

const themeOptions: Array<{ label: string; value: AppThemeName }> = [
  { label: 'Light', value: 'light' },
  { label: 'Dark', value: 'dark' },
  { label: 'Valentine', value: 'redTheme' },
];

function App() {
  return (
    <SafeAreaProvider>
      <AppContent />
    </SafeAreaProvider>
  );
}

function AppContent() {
  const insets = useSafeAreaInsets();
  const { theme, rt } = useUnistyles();
  const [isThemeMenuOpen, setIsThemeMenuOpen] = useState(false);
  const activeTheme = (rt.themeName ?? 'light') as AppThemeName;

  const handleThemeChange = (themeName: AppThemeName) => {
    UnistylesRuntime.setTheme(themeName);
    setIsThemeMenuOpen(false);
  };

  return (
    <View style={styles.container}>
      <StatusBar
        backgroundColor={theme.colors.background}
        barStyle={activeTheme === 'dark' ? 'light-content' : 'dark-content'}
      />

      <View style={[styles.header, { paddingTop: insets.top + theme.padding(2) }]}>
        <View>
          <Text style={styles.eyebrow}>React Native Unistyles</Text>
          <Text style={styles.title}>Demo Project</Text>
        </View>

        <Pressable
          accessibilityRole="button"
          accessibilityLabel="Open theme selector"
          onPress={() => setIsThemeMenuOpen(isOpen => !isOpen)}
          style={styles.changeThemeButton}
        >
          <Text style={styles.changeThemeText}>Change Theme</Text>
        </Pressable>
      </View>

      {isThemeMenuOpen ? (
        <View style={styles.themeMenu}>
          {themeOptions.map(option => {
            const isSelected = option.value === activeTheme;

            return (
              <Pressable
                key={option.value}
                accessibilityRole="button"
                accessibilityState={{ selected: isSelected }}
                onPress={() => handleThemeChange(option.value)}
                style={[
                  styles.themeOption,
                  isSelected && styles.themeOptionSelected,
                ]}
              >
                <Text
                  style={[
                    styles.themeOptionText,
                    isSelected && styles.themeOptionSelectedText,
                  ]}
                >
                  {option.label}
                </Text>
              </Pressable>
            );
          })}
        </View>
      ) : null}

      <View style={styles.content}>
        <View style={styles.card}>
          <Text style={styles.cardTitle}>Theme tokens are active</Text>
          <Text style={styles.cardText}>
            Backgrounds, text, buttons, borders, and surfaces now come from the
            selected Unistyles theme.
          </Text>

          <Pressable style={styles.primaryButton}>
            <Text style={styles.primaryButtonText}>Primary Button</Text>
          </Pressable>
        </View>
      </View>
    </View>
  );
}

const styles = StyleSheet.create(theme => ({
  container: {
    flex: 1,
    backgroundColor: theme.colors.background,
  },
  header: {
    alignItems: 'center',
    backgroundColor: theme.colors.surface,
    borderBottomColor: theme.colors.border,
    borderBottomWidth: 1,
    flexDirection: 'row',
    justifyContent: 'space-between',
    paddingBottom: theme.padding(2),
    paddingHorizontal: theme.padding(2),
  },
  eyebrow: {
    color: theme.colors.textMuted,
    fontSize: 12,
    fontWeight: '700',
    textTransform: 'uppercase',
  },
  title: {
    color: theme.colors.text,
    fontSize: 22,
    fontWeight: '800',
    marginTop: theme.margin(0.5),
  },
  changeThemeButton: {
    backgroundColor: theme.colors.primary,
    borderRadius: theme.radii.md,
    paddingHorizontal: theme.padding(1.5),
    paddingVertical: theme.padding(1),
  },
  changeThemeText: {
    color: theme.colors.primaryText,
    fontSize: 14,
    fontWeight: '700',
  },
  themeMenu: {
    backgroundColor: theme.colors.surface,
    borderBottomColor: theme.colors.border,
    borderBottomWidth: 1,
    flexDirection: 'row',
    gap: theme.gap(1),
    padding: theme.padding(2),
  },
  themeOption: {
    backgroundColor: theme.colors.surfaceMuted,
    borderColor: theme.colors.border,
    borderRadius: theme.radii.md,
    borderWidth: 1,
    paddingHorizontal: theme.padding(1.5),
    paddingVertical: theme.padding(1),
  },
  themeOptionSelected: {
    backgroundColor: theme.colors.primary,
    borderColor: theme.colors.primary,
  },
  themeOptionText: {
    color: theme.colors.text,
    fontSize: 14,
    fontWeight: '700',
  },
  themeOptionSelectedText: {
    color: theme.colors.primaryText,
  },
  content: {
    alignItems: 'center',
    flex: 1,
    justifyContent: 'center',
    padding: theme.padding(3),
  },
  card: {
    backgroundColor: theme.colors.surface,
    borderColor: theme.colors.border,
    borderRadius: theme.radii.lg,
    borderWidth: 1,
    padding: theme.padding(3),
    shadowColor: theme.colors.shadow,
    shadowOffset: {
      height: 8,
      width: 0,
    },
    shadowOpacity: 0.12,
    shadowRadius: 18,
    width: '100%',
  },
  cardTitle: {
    color: theme.colors.text,
    fontSize: 24,
    fontWeight: '800',
    textAlign: 'center',
  },
  cardText: {
    color: theme.colors.textMuted,
    fontSize: 16,
    lineHeight: 23,
    marginTop: theme.margin(1.5),
    textAlign: 'center',
  },
  primaryButton: {
    alignItems: 'center',
    backgroundColor: theme.colors.primary,
    borderRadius: theme.radii.md,
    marginTop: theme.margin(3),
    paddingHorizontal: theme.padding(2),
    paddingVertical: theme.padding(1.5),
  },
  primaryButtonText: {
    color: theme.colors.primaryText,
    fontSize: 16,
    fontWeight: '800',
  },
}));

export default App;

Real-World Use Cases

I personally think Unistyles becomes very valuable in applications that have:

1. Dark/Light Mode

Apps with heavy theme switching benefit a lot from it.

2. Large-Scale Applications

When your app has:

many screens
many developers
reusable design systems

Unistyles helps maintain consistency.

3. Responsive Layouts
Tablet + mobile support becomes cleaner.

4. Design-System Based Products
Apps that rely on:

reusable components
spacing tokens
typography systems
centralized themes

can scale better.

Pro and Cons of Unistyles

When You Should Use It

I would recommend using Unistyles if your app has:

Dark/light mode
Dynamic themes
Complex UI
Responsive layouts
Many reusable components
Long-term scalability requirements
When You Might Avoid It

You may not need it if:

your app is very small
UI is mostly static
theming is minimal
you prefer keeping dependencies minimal

My Final Thoughts

react-native-unistyles is not just another styling library.

It is more like:

a scalable styling and theming system for React Native applications.

For small projects, traditional StyleSheet is still completely fine.

But for medium and large applications, Unistyles can significantly improve:

maintainability
performance
theming
responsiveness
overall developer experience

And honestly, once you start building larger React Native apps, you realize styling architecture matters much more than you initially expected.

DEV Community