DEV Community: Shubham Singh

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

Shubham Singh — Wed, 13 May 2026 05:24:30 +0000

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.

React Native + Sentry: Smarter Crash Reporting & Debugging

Shubham Singh — Thu, 30 Apr 2026 13:50:51 +0000

Ever shipped a React Native app to production and then started getting crash reports from users that you simply couldn’t reproduce?

That’s exactly where tools like Sentry come in — and once you start using it, you’ll wonder how you ever worked without it.

Building a stable app and delivering a consistent user experience takes serious effort. You go through multiple rounds of testing, UAT, and write unit test cases — but still, some issues only appear in production. And when they do, they often go unnoticed until a user reports them.

The real problem starts after that.

User reports are usually vague. You don’t get:

the exact error
the stack trace
the device details
or the steps to reproduce the issue

This makes debugging slow, frustrating, and sometimes guesswork.

On top of that, it becomes difficult to prioritize which issues to fix first, especially when you don’t know how many users are affected.

This is exactly the gap that Sentry fills.

It gives you complete visibility into what’s happening inside your app in real time, making debugging faster and much more reliable.

So in this article, we’ll understand what Sentry is and how to integrate it into your React Native application.

What is Sentry?

Sentry is a real-time error monitoring and performance tracking tool that helps developers detect, understand, and fix issues in their applications.

Instead of guessing what went wrong in production, Sentry gives you:

Exact error message

Instead of guessing, you’ll see messages like:

“Cannot read property 'map' of undefined”
“Network request failed”

Stack trace (where it broke)
A stack trace shows the exact line of code and file where the error happened.
It answers:
Which screen caused the crash?
Which function triggered it?
Which file needs fixing?

User and device context
Sentry gives you details about the environment where the crash occurred:
Device (iPhone 13, Pixel 6, etc.)
OS version (iOS 17, Android 14)
App version
User ID (if tracked)

Steps leading to the error (breadcrumbs)
Breadcrumbs show the sequence of actions before the crash, like:

User opened Home Screen
Clicked “Buy Now”
API request failed
App crashed

Setup and Integration of Sentry
Let’s integrate Sentry into a React Native app step by step.

Step 1: Install Sentry
Add Sentry to your project using either Yarn or npm:

yarn add @sentry/react-native
npm install @sentry/react-native

Step 2: Link and Configure the Project

After installing, run the Sentry setup wizard:

npx @sentry/wizard -i reactNative -p ios android

This command will:

Link Sentry with your project
Ask for your Sentry account details
Automatically configure native files (iOS & Android)

Step 3: Configure Sentry in Your App

Create a setup file Create a file named sentrySetup.ts:

import * as Sentry from '@sentry/react-native';

Sentry.init({
  dsn: 'YOUR_DSN_HERE',
  tracesSampleRate: 1.0, // adjust in production
});

Replace YOUR_DSN_HERE with your project DSN from the Sentry dashboard.

2. Initialize Sentry in your app
Import this setup file at the root of your app (usually in App.tsx):

import './sentrySetup';

function App() {
  return <RootNavigator />;
}

export default Sentry.wrap(App);

This ensures:

Global error tracking
Performance monitoring
Automatic crash reporting

Step 4: Add Error Boundary (Better User Experience)
You can also use Sentry’s built-in Error Boundary to handle UI crashes gracefully.

Instead of showing a blank/white screen, you can show a fallback UI.

import * as Sentry from '@sentry/react-native';

function App() {
  return (
    <Sentry.ErrorBoundary fallback={<ErrorScreen />}>
      <RootNavigator />
    </Sentry.ErrorBoundary>
  );
}

export default Sentry.wrap(App);

What this does:
If a crash happens inside the app
Instead of crashing completely
A fallback screen (ErrorScreen) is shown to the user

Sentry Dashboard
The Sentry dashboard provides a centralised view of all errors and crashes in your application, with detailed analysis to help you identify, prioritise, and resolve issues efficiently.

Conclusion

Integrating Sentry into your React Native app can make a big difference, especially in production. It helps you track errors and crashes in real time, so you’re not left guessing what went wrong for your users. Instead of relying on user complaints or vague logs, you get detailed insights—like stack traces, device info, and user actions—that make debugging much easier.

If you care about delivering a smooth, reliable experience to your users while keeping your development workflow efficient, integrating Sentry is absolutely worth it.