React-Theme-Provider - the Easiest Way to Use Multiple Themes in Your App

Authors

Jakub Kłobus

Software Engineer

Callstack

Have you ever wanted to add theming possibilities to your application? To introduce to users an option to choose their favourite app “look and feel” without struggling with React context or huge singletons with theming data.

Now it’s possible with <rte-code>react-theme-provider<rte-code>! And let me tell you more… it’s possible in both <rte-code>React<rte-code> and <rte-code>React Native<rte-code>.

Origins of react-theme-provider

<rte-code>react-theme-provider<rte-code> started its life as a local module in react-native-paper and react-native-ios-kit (I encourage you to check out those libs). It was duplicated so we decided to make a totally separated library with both React Native and React support. We’ve added some additional features, wrapped it into nice API, added some tests, and voila!

Getting started

Just install <rte-code>@callstack/react-theme-provider<rte-code> package from <rte-code>npm<rte-code> and import <rte-code>ThemeProvider<rte-code> component into your main JS file. After that simply wrap your code into <rte-code>ThemeProvider<rte-code> component and pass your theme as a <rte-code>theme<rte-code> prop. Just like this:

  
          <ThemeProvider theme={{ primaryColor: 'red', background: 'gray'}}>
        
            <App />
        
          </ThemeProvider>

view raw app.jsx hosted with ❤ by GitHub

To change theme of the application just change the value of the <rte-code>theme<rte-code>prop.

Ok, so we provided our — for sure beautiful — theme. Now it’s time to use it in our components. It is possible thanks to <rte-code>withTheme<rte-code> Higher Order Component. Wrap your component with it and start using theme data injected into the<rte-code>theme<rte-code> prop.

  
          class App extends React.Component {
        
            render() {
        
              return (
        
                <div style={{ color: props.theme.primaryColor }}>
        
                  Hello
        
                </div>
        
              );
        
            }
        
          }
        
          export default withTheme(App);

view raw component.js hosted with ❤ by GitHub

Demo time

You can try our demo here:

But wait… there is more!

You can use <rte-code>createTheming<rte-code> function to add multiple ThemeProviers for one application or inject a default theme. But I’m going to stop here and invite you to check out our documentation. If you have any trouble or ideas for improvements, feel free to open an issue on our repository.

Big thanks to Satyajit Sahoo who is the father of this project and main author of the code.

Need better developer experience?

We help teams elevate DX in React Native environments.

Let’s chat

Insights

Learn more about Developer Experience

View all

May 5Article

Codex Ambassador: Q1 Recap Across 5 Cities

A short recap of Codex events in Berlin, Wroclaw, Warsaw, Sopot, and Miami, plus what we learned from each format and where we want to go next.

Feb 5Live Stream

Storybook Explained: From Basics to Advanced Workflows

Core Storybook concepts, stories and args, interaction testing, and how Storybook works in React Native projects.

Jan 29Article

Announcing AI SDK Profiler for React Native

Announcing the AI SDK Profiler plugin for Rozenite DevTools. Capture OpenTelemetry spans from the Vercel AI SDK and inspect AI requests across on-device and cloud providers.

Nov 28Talk

How I Hacked React Native DevTools (And Built a Plugin Framework)

Learn how React Native DevTools work under the hood, and how to inject custom plugins with clean hooks and no forks.

Sep 16Talk

How I Hacked React Native DevTools (And Built a Plugin Framework)

Learn how React Native DevTools work under the hood, and how to inject custom plugins with clean hooks and no forks.

Jul 28Article

Introducing Rozenite: A Plugin Framework for React Native DevTools

Build custom debugging panels inside React Native DevTools with Rozenite: a modular, TypeScript-ready plugin framework with full device-scoped support.

Feb 12Article

How to Easily Create Native Libraries With Nitro and Turbo Modules

Learn how to optimize React Native performance with Turbo and Nitro Modules. Ditch the legacy bridge and master modern native module development.

Dec 4Podcast

Radon IDE: Better Developer Experience for React Native Teams

Find out how Radon IDE can help increase team velocity and rid you of the common React Native app development pain points.

Sep 19Podcast

Exploring Bun: Jarred Sumner on Hyperfast JavaScript Toolkit

Is Bun the future of React Native package management? Join us as we talk with Jarred Sumner, the creator of this lightning-fast JavaScript toolkit.

Sep 11Podcast

Vim: from Zero to Hero

Discover the power of Vim, the legendary text editor, as we explore its origins, standout features, and practical tips to boost your coding efficiency.

May 15Article

Add-Ons for Web Browsers With React

At times you may need to create an add-on to use a web browser more effectively. Find out how to build one with React.

Jan 27Article

Why Is It Worth to Automate Your Dependency Management with `Autolinking`?

When you automate your dependency management, you can fully focus on developing your app. Find out how you can do it with autolinking.

Mar 19Tutorial

The Hard Way vs. The React Native AI SDK Way: Stop Writing Custom Modules for Every Model

Learn how React Native AI uses a unified provider model to switch between cloud and on-device LLMs without rewriting application logic, enabling reliable AI experiences online and offline.

Mar 12Tutorial

Build Smarter Apps: Tool Calling & AI Orchestration Explained

Learn how on-device models in React Native can call tools, interact with external APIs, and return structured outputs you can use directly in application logic.

Mar 5Tutorial

MLC LLM + React Native: On-Device AI Without the Pain

Learn how to run third-party on-device LLMs in React Native using MLC LLM. Choose your models, run them efficiently across platforms, and keep a unified JavaScript API with React Native AI.

Feb 24Tutorial

Intelligent Fallbacks with Apple Intelligence in React Native

Learn how to use Apple’s built-in Foundation Models in React Native apps, reduce memory usage, and enable fast, fully on-device AI with React Native AI Apple.

Feb 10Tutorial

What Is the React Native AI SDK? A Complete Intro & Quickstart

Learn why on-device AI matters for React Native apps, how local LLMs behave offline, and what problems React Native AI is designed to solve from day one.

Jan 29Tutorial

Implementing an Android TurboModule with Kotlin

Learn how to implement a React Native TurboModule on Android, from the TypeScript spec and Codegen to the Kotlin implementation and package registration.

Jan 19Tutorial

Working with Different Threads in Swift TurboModules

Learn how JavaScript, native module, background, and main threads interact in React Native TurboModules, and how to use GCD queues to run async work safely in Swift.

Jan 9Tutorial

How to Add Type-Safe Constants to Swift TurboModules

Learn how to expose typed, immutable constants from a Swift TurboModule using Codegen, and get full end-to-end type safety between native and JavaScript.

Dec 30Tutorial

Adding Event Emitters to Your TurboModule in Swift

Learn how to emit native events from a Swift TurboModule and subscribe to them in JavaScript, including proper memory management and Codegen integration.

Dec 22Tutorial

Writing Your First TurboModule in Swift

Learn how to build a fully working TurboModule in Swift, integrate it with Codegen, and bridge it through Objective‑C inside an Expo app.

	<ThemeProvider theme={{ primaryColor: 'red', background: 'gray'}}>
	<App />
	</ThemeProvider>

	class App extends React.Component {
	render() {
	return (
	<div style={{ color: props.theme.primaryColor }}>
	Hello
	</div>
	);
	}
	}

	export default withTheme(App);

Origins of react-theme-provider

Getting started

Demo time

But wait… there is more!

Ship priority features with React and React Native experts.

React Native Development

React Development

Next.js Development

Expo Development

Node.js Development

C++ Development

Module Federation Development

On-Device AI

Feature UX/UI Design

Cross-Platform Design Systems

Learn more about Developer Experience

Codex Ambassador: Q1 Recap Across 5 Cities

Storybook Explained: From Basics to Advanced Workflows

Announcing AI SDK Profiler for React Native

How I Hacked React Native DevTools (And Built a Plugin Framework)

How I Hacked React Native DevTools (And Built a Plugin Framework)

Introducing Rozenite: A Plugin Framework for React Native DevTools

How to Easily Create Native Libraries With Nitro and Turbo Modules

Radon IDE: Better Developer Experience for React Native Teams

Exploring Bun: Jarred Sumner on Hyperfast JavaScript Toolkit

Vim: from Zero to Hero

Add-Ons for Web Browsers With React

Why Is It Worth to Automate Your Dependency Management with `Autolinking`?

The Hard Way vs. The React Native AI SDK Way: Stop Writing Custom Modules for Every Model

Build Smarter Apps: Tool Calling & AI Orchestration Explained

MLC LLM + React Native: On-Device AI Without the Pain

Intelligent Fallbacks with Apple Intelligence in React Native

What Is the React Native AI SDK? A Complete Intro & Quickstart

Implementing an Android TurboModule with Kotlin

Working with Different Threads in Swift TurboModules

How to Add Type-Safe Constants to Swift TurboModules

Adding Event Emitters to Your TurboModule in Swift

Writing Your First TurboModule in Swift