Skip to content

Commit 37e7ed6

Browse files
committed
refactor(theme): consolidate DynamicTheme role map and drop DefaultTheme export
- DynamicTheme.android: replace duplicated light/dark tables with a single colorRoleMap + buildDynamicColors helper; use Palette.* tokens directly for the ref fallback instead of reading back through LightTheme.colors.*/DarkTheme.colors.*; export isDynamicColorSupported and short-circuit map construction when unsupported - PaperProvider: respect theme.dark when picking the base scheme and shallow-merge colors so partial color overrides survive - Remove public DefaultTheme export (use LightTheme); update internal imports and babel-import-rewrite fixtures
1 parent 46292bd commit 37e7ed6

9 files changed

Lines changed: 491 additions & 495 deletions

File tree

src/babel/__fixtures__/rewrite-imports/code.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,5 +10,4 @@ import {
1010
NonExistentSecond as Stuff,
1111
ThemeProvider,
1212
withTheme,
13-
DefaultTheme,
1413
} from 'react-native-paper';

src/babel/__fixtures__/rewrite-imports/output.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,4 +8,3 @@ import { MD3Colors } from "react-native-paper/lib/module/deprecated";
88
import { NonExistent, NonExistentSecond as Stuff } from "react-native-paper/lib/module/index.js";
99
import { ThemeProvider } from "react-native-paper/lib/module/core/theming";
1010
import { withTheme } from "react-native-paper/lib/module/core/theming";
11-
import { DefaultTheme } from "react-native-paper/lib/module/core/theming";

src/components/__tests__/TextInput.test.tsx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,10 @@ import { Platform, StyleSheet, Text, View } from 'react-native';
55
import { fireEvent } from '@testing-library/react-native';
66

77
import PaperProvider from '../../core/PaperProvider';
8-
import { DefaultTheme, getTheme, ThemeProvider } from '../../core/theming';
8+
import { getTheme, ThemeProvider } from '../../core/theming';
99
import { render } from '../../test-utils';
1010
import { red500 } from '../../theme/colors';
11+
import { LightTheme } from '../../theme/schemes';
1112
import { tokens } from '../../theme/tokens';
1213
import {
1314
getFlatInputColors,
@@ -369,9 +370,9 @@ it('calls onLayout on right-side affix adornment', () => {
369370
it("correctly applies theme background to label when input's background is transparent", () => {
370371
const backgroundColor = 'transparent';
371372
const theme = {
372-
...DefaultTheme,
373+
...LightTheme,
373374
colors: {
374-
...DefaultTheme.colors,
375+
...LightTheme.colors,
375376
background: 'pink',
376377
},
377378
};

src/core/PaperProvider.tsx

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -29,17 +29,15 @@ const PaperProvider = (props: Props) => {
2929
const resolvedReduceMotion = useResolvedReduceMotion(reduceMotion);
3030

3131
const theme = React.useMemo(() => {
32-
const scheme = colorScheme === 'dark' ? 'dark' : 'light';
33-
const defaultThemeBase = defaultThemes[scheme];
34-
const userScale = props.theme?.animation?.scale ?? 1;
32+
const isDark = props.theme?.dark ?? colorScheme === 'dark';
33+
const base = defaultThemes[isDark ? 'dark' : 'light'];
34+
const scale = resolvedReduceMotion ? 0 : props.theme?.animation?.scale ?? 1;
3535

3636
return {
37-
...defaultThemeBase,
37+
...base,
3838
...props.theme,
39-
animation: {
40-
...props.theme?.animation,
41-
scale: resolvedReduceMotion ? 0 : userScale,
42-
},
39+
colors: { ...base.colors, ...props.theme?.colors },
40+
animation: { ...props.theme?.animation, scale },
4341
};
4442
}, [colorScheme, props.theme, resolvedReduceMotion]);
4543

src/core/__tests__/PaperProvider.test.tsx

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,15 @@ import * as React from 'react';
22
import {
33
Appearance,
44
AccessibilityInfo,
5+
Platform,
56
View,
67
ColorSchemeName,
78
} from 'react-native';
89

910
import { render, act } from '@testing-library/react-native';
1011

1112
import { useReduceMotion } from '../../theme/accessibility/ReduceMotionContext';
12-
import { LightTheme, DarkTheme } from '../../theme/schemes';
13+
import { DarkTheme, DynamicLightTheme, LightTheme } from '../../theme/schemes';
1314
import type { ThemeProp } from '../../types';
1415
import PaperProvider from '../PaperProvider';
1516
import { useTheme } from '../theming';
@@ -106,9 +107,12 @@ const createProvider = (theme?: ThemeProp) => {
106107
const ExtendedLightTheme = { ...LightTheme } as ThemeProp;
107108
const ExtendedDarkTheme = { ...DarkTheme } as ThemeProp;
108109

110+
const defaultPlatform = Platform.OS;
111+
109112
describe('PaperProvider', () => {
110113
beforeEach(() => {
111114
jest.resetModules();
115+
Platform.OS = defaultPlatform;
112116
});
113117

114118
it('handles theme change', async () => {
@@ -213,6 +217,11 @@ describe('PaperProvider', () => {
213217
).toStrictEqual(0);
214218
});
215219

220+
it('DynamicLightTheme falls back to LightTheme on non-Android platforms', () => {
221+
Platform.OS = 'ios';
222+
expect(DynamicLightTheme.colors).toStrictEqual(LightTheme.colors);
223+
});
224+
216225
it('should set Appearance listeners, if there is no theme', async () => {
217226
mockAppearance();
218227
const { getByTestId } = render(createProvider());

src/index.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ export {
44
useTheme,
55
withTheme,
66
ThemeProvider,
7-
DefaultTheme,
87
adaptNavigationTheme,
98
} from './core/theming';
109

src/theme/provider.tsx

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,7 @@ import type { ComponentType } from 'react';
33
import { $DeepPartial, createTheming } from '@callstack/react-theme-provider';
44

55
import { DarkTheme, LightTheme } from './schemes';
6-
import type { InternalTheme, Theme, NavigationTheme } from './types';
7-
8-
export const DefaultTheme = LightTheme;
6+
import type { Theme, NavigationTheme } from './types';
97

108
export const {
119
ThemeProvider,
@@ -18,11 +16,11 @@ export function useTheme<T = Theme>(overrides?: $DeepPartial<T>) {
1816
}
1917

2018
export const useInternalTheme = (
21-
themeOverrides: $DeepPartial<InternalTheme> | undefined
22-
) => useAppTheme<InternalTheme>(themeOverrides);
19+
themeOverrides: $DeepPartial<Theme> | undefined
20+
) => useAppTheme<Theme>(themeOverrides);
2321

24-
export const withInternalTheme = <Props extends { theme: InternalTheme }, C>(
25-
WrappedComponent: ComponentType<Props & { theme: InternalTheme }> & C
22+
export const withInternalTheme = <Props extends { theme: Theme }, C>(
23+
WrappedComponent: ComponentType<Props & { theme: Theme }> & C
2624
) => withTheme<Props, C>(WrappedComponent);
2725

2826
export const defaultThemes = {

0 commit comments

Comments
 (0)