refactor(ThemeProvider): simplify the ThemeProvider #2970

markrickert · 2025-06-23T23:05:01Z

Description

This refactors the theme section to be easier to use and use common react context patterns.

The functionality that used to be in app/utils/useAppTheme.ts and put it in app/theme/context.ts. I moved the code from the hook into the context so it's much easier to use and implement.

Before:

const App = () => {
  const { themeScheme, navigationTheme, setThemeContextOverride, ThemeProvider } =
    useThemeProvider()
  return (
    <ThemeProvider value={{ themeScheme, setThemeContextOverride }}>
      <Component />
    </ThemeProvider>
  )
}

After:

const App = () => {
  return (
    <ThemeProvider>
      <Component />
    </ThemeProvider>
  )
}

This paradigm also makes the useAppTheme() code stupid simple:

export const useAppTheme = () => {
  const context = useContext(ThemeContext)
  if (!context) {
    throw new Error("useAppTheme must be used within an ThemeProvider")
  }
  return context
}

This refactor also removes the barrel file from the app/theme and aligns the documentation to the new ThemeProvider instructions.

Checklist

README.md and other relevant documentation has been updated with my changes
I have manually tested this, including by generating a new app locally (see docs).

Copilot

Pull Request Overview

This PR refactors the theming logic by simplifying the ThemeProvider and consolidating the theming hook into the context, eliminating the need for a separate useThemeProvider hook. Key changes include:

Removing the extra value prop from ThemeProvider and simplifying its API.
Replacing imports from "@/utils/useAppTheme" with the new "@/theme/context" and adjusting type imports accordingly.
Updating documentation and snapshots to reflect the new, simpler theming paradigm.

Reviewed Changes

Copilot reviewed 52 out of 53 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
test/vanilla/ignite-generate.test.ts	Updated import paths for theme values and type definitions.
src/tools/markup.test.ts	Removed ThemeProvider value prop and updated imports to the new context.
docs/*	Updated documentation to reflect the new ThemeProvider API and usage.
boilerplate/*	Adjusted imports and removed obsolete hook usage across components.
.github/CONTRIBUTING.md	Updated command reference for code formatting.

Comments suppressed due to low confidence (2)

src/tools/markup.test.ts:547

The ThemeProvider no longer accepts a 'value' prop. Please update its usage to simply render without passing any props.

    <NavigationContainer ref={navigationRef} theme={navigationTheme} {...props}>

docs/boilerplate/app/theme/Theming.md:74

Update the code example to reflect the new ThemeProvider API by removing the 'value' prop; it should be used as without additional parameters.

  return (

boilerplate/app/app.tsx

markrickert · 2025-06-24T01:21:21Z

src/tools/__snapshots__/markup.test.ts.snap


  useBackButtonHandler((routeName) => exitRoutes.includes(routeName))

  return (
-    <ThemeProvider value={{ themeScheme, setThemeContextOverride }}>


This ThemeProvider instance has moved up a level so that the NavigationContainer can get it's value from useAppTheme()

frankcalise

Really like the refactors here, nice work!

boilerplate/app/app.tsx

frankcalise · 2025-06-24T11:30:20Z

boilerplate/app/theme/context.tsx

+export const useAppTheme = () => {
+  const context = useContext(ThemeContext)
+  if (!context) {
+    throw new Error("useAppTheme must be used within an ThemeProvider")
+  }
+  return context
+}


coolsoftwaretyler

Thanks for making these changes, @markrickert! I have one suggestion about the TypeScript here, but I wouldn't block on it. I ran the new code and everything lints, tests, builds, and works!

coolsoftwaretyler · 2025-06-24T13:20:37Z

.github/CONTRIBUTING.md

@@ -9,7 +9,7 @@ _Working on Ignite CLI requires Yarn v1._
 - Everything works on iOS/Android
 - Jest tests pass in the root folder (`yarn test`)
 - New tests are included for any new functionality
- Code is compliant with our linter and prettier (`yarn format && yarn lint`)
+- Code is compliant with our linter and prettier (`yarn format:write && yarn lint`)


praise: good catch, thanks!

boilerplate/app/theme/types.d.ts

coolsoftwaretyler · 2025-06-24T13:28:23Z

docs/boilerplate/app/theme/Theming.md

@@ -42,16 +42,12 @@ Head on over to the [Ignite Cookbook](https://ignitecookbook.com/) to find recip

 :::

-**New in Ignite 10**: the `useAppTheme` hook allows you to create dynamically-themed styles, right out of the box. Here's an example:


praise: good update!

Jpoliachik

Awesome work! No notes 💅

@markrickert

BREAKING CHANGE: adopt new architecture by default and remove legacy support (#2961 by @markrickert) - Enable New Architecture in all new projects; legacy option removed from CLI - Boilerplate and CLI now assume New Arch by default feat: upgrade to Expo SDK 53 with Android edge-to-edge support (#2938 by @fpena) - Upgrade to Expo SDK 53 and align all dependencies - Add support for Android edge-to-edge using SystemBars - Update app.json, jest-expo, metro.config, and related config for compatibility feat: remove mobx-state-tree and enable bring-your-own state management (#2960 by @markrickert) - Remove MST from boilerplate and CLI - Replace with lightweight React Context examples for demo state - Support persistence via useMMKVString feat: simplify theming with refactored ThemeProvider (#2970 by @markrickert) - Refactor useAppTheme and ThemeProvider for easier integration fix: address compatibility issues with React 19, TypeScript, and tests (#2966, #2968 by @objecttiveSee) - Solve TS 5.4/React 19 type issues and downgrade TS to 5.3.3 - Fix failing snapshots and metro test conditions - Add missing ESLint plugin and clean up demo code chore: update docs, config, and version alignment (#2964 by @frankcalise) - Sync README, quickstart, and context docs - Enforce node >= 20 and update linting rules across project

@markrickert

# [11.0.0](v10.5.3...v11.0.0) (2025-07-02) * Ignite v11 (Expo SDK 53) (#2938) ([154d2ed](154d2ed)), closes [#2938](#2938) [#2938](#2938) [#2960](#2960) [#2970](#2970) [#2966](#2966) [#2968](#2968) [#2964](#2964) ### Bug Fixes * **BackHandler:** switch to non-deprecated listener syntax [#2966](#2966) [skip ci] ([aeb3ee9](aeb3ee9)) * **types:** update useRef with default undefined value ([#2968](#2968)) [skip ci] ([1f7a8fe](1f7a8fe)) ### BREAKING CHANGES * adopt new architecture by default and remove legacy support (#2961 by @markrickert) - Enable New Architecture in all new projects; legacy option removed from CLI - Boilerplate and CLI now assume New Arch by default

markrickert requested review from frankcalise, robinheinze and Copilot June 23, 2025 23:05

Copilot AI reviewed Jun 23, 2025

View reviewed changes

boilerplate/app/app.tsx Show resolved Hide resolved

markrickert mentioned this pull request Jun 23, 2025

Ignite v11 (Expo SDK 53) #2938

Merged

8 tasks

refactor(ThemeProvider): simplify the ThemeProvider and usage

30f103c

markrickert force-pushed the mrickert/theme-provider-update branch from 688be86 to 30f103c Compare June 23, 2025 23:20

markrickert commented Jun 24, 2025

View reviewed changes

frankcalise approved these changes Jun 24, 2025

View reviewed changes

coolsoftwaretyler approved these changes Jun 24, 2025

View reviewed changes

Jpoliachik approved these changes Jun 24, 2025

View reviewed changes

markrickert added 2 commits June 24, 2025 09:32

fix: rename types.d.ts to just types.d

e0d2faa

docs: fix usage of themeScheme

0bf1ed1

markrickert merged commit ee3ba38 into feat/expo-sdk-53 Jun 24, 2025
1 check passed

markrickert deleted the mrickert/theme-provider-update branch June 24, 2025 15:38

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

refactor(ThemeProvider): simplify the ThemeProvider #2970

refactor(ThemeProvider): simplify the ThemeProvider #2970

Uh oh!

markrickert commented Jun 23, 2025

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

markrickert Jun 24, 2025

Uh oh!

frankcalise left a comment

Uh oh!

Uh oh!

frankcalise Jun 24, 2025

Uh oh!

coolsoftwaretyler Jun 24, 2025

Uh oh!

coolsoftwaretyler left a comment

Uh oh!

coolsoftwaretyler Jun 24, 2025

Uh oh!

Uh oh!

coolsoftwaretyler Jun 24, 2025

Uh oh!

Jpoliachik left a comment

Uh oh!

Uh oh!

Uh oh!

		@@ -42,16 +42,12 @@ Head on over to the [Ignite Cookbook](https://ignitecookbook.com/) to find recip

		:::

		New in Ignite 10: the `useAppTheme` hook allows you to create dynamically-themed styles, right out of the box. Here's an example:

refactor(ThemeProvider): simplify the ThemeProvider #2970

refactor(ThemeProvider): simplify the ThemeProvider #2970

Uh oh!

Conversation

markrickert commented Jun 23, 2025

Description

Before:

After:

Checklist

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

markrickert Jun 24, 2025

Choose a reason for hiding this comment

Uh oh!

frankcalise left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

frankcalise Jun 24, 2025

Choose a reason for hiding this comment

Uh oh!

coolsoftwaretyler Jun 24, 2025

Choose a reason for hiding this comment

Uh oh!

coolsoftwaretyler left a comment

Choose a reason for hiding this comment

Uh oh!

coolsoftwaretyler Jun 24, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

coolsoftwaretyler Jun 24, 2025

Choose a reason for hiding this comment

Uh oh!

Jpoliachik left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!