react-native-platform-components 1.0.0 → 1.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +29 -45
- package/android/build.gradle +1 -1
- package/android/src/main/java/com/platformcomponents/PCDatePickerView.kt +46 -2
- package/android/src/main/java/com/platformcomponents/PCNativeTheme.kt +174 -0
- package/android/src/main/java/com/platformcomponents/PCNativeThemeModule.kt +42 -0
- package/android/src/main/java/com/platformcomponents/PCSegmentedControlView.kt +34 -1
- package/android/src/main/java/com/platformcomponents/PCSelectionMenuView.kt +14 -0
- package/android/src/main/java/com/platformcomponents/PCThemeSupport.kt +40 -5
- package/android/src/main/java/com/platformcomponents/PlatformComponentsPackage.kt +22 -5
- package/android/src/main/res/values/styles.xml +131 -0
- package/ios/PCNativeTheme.swift +56 -0
- package/ios/PCNativeThemeModule.mm +36 -0
- package/lib/commonjs/NativePlatformComponentsTheme.js +10 -0
- package/lib/commonjs/NativePlatformComponentsTheme.js.map +1 -0
- package/lib/commonjs/NativeTheme.js +51 -0
- package/lib/commonjs/NativeTheme.js.map +1 -0
- package/lib/commonjs/index.js +11 -0
- package/lib/commonjs/index.js.map +1 -1
- package/lib/commonjs/index.web.js +10 -1
- package/lib/commonjs/index.web.js.map +1 -1
- package/lib/module/NativePlatformComponentsTheme.js +7 -0
- package/lib/module/NativePlatformComponentsTheme.js.map +1 -0
- package/lib/module/NativeTheme.js +45 -0
- package/lib/module/NativeTheme.js.map +1 -0
- package/lib/module/index.js +1 -0
- package/lib/module/index.js.map +1 -1
- package/lib/module/index.web.js +7 -0
- package/lib/module/index.web.js.map +1 -1
- package/lib/typescript/commonjs/docs/docusaurus.config.d.ts.map +1 -1
- package/lib/typescript/commonjs/src/NativePlatformComponentsTheme.d.ts +11 -0
- package/lib/typescript/commonjs/src/NativePlatformComponentsTheme.d.ts.map +1 -0
- package/lib/typescript/commonjs/src/NativeTheme.d.ts +30 -0
- package/lib/typescript/commonjs/src/NativeTheme.d.ts.map +1 -0
- package/lib/typescript/commonjs/src/index.d.ts +1 -0
- package/lib/typescript/commonjs/src/index.d.ts.map +1 -1
- package/lib/typescript/commonjs/src/index.web.d.ts +8 -1
- package/lib/typescript/commonjs/src/index.web.d.ts.map +1 -1
- package/lib/typescript/module/docs/docusaurus.config.d.ts.map +1 -1
- package/lib/typescript/module/src/NativePlatformComponentsTheme.d.ts +11 -0
- package/lib/typescript/module/src/NativePlatformComponentsTheme.d.ts.map +1 -0
- package/lib/typescript/module/src/NativeTheme.d.ts +30 -0
- package/lib/typescript/module/src/NativeTheme.d.ts.map +1 -0
- package/lib/typescript/module/src/index.d.ts +1 -0
- package/lib/typescript/module/src/index.d.ts.map +1 -1
- package/lib/typescript/module/src/index.web.d.ts +8 -1
- package/lib/typescript/module/src/index.web.d.ts.map +1 -1
- package/package.json +5 -2
- package/src/NativePlatformComponentsTheme.ts +13 -0
- package/src/NativeTheme.ts +53 -0
- package/src/index.tsx +1 -0
- package/src/index.web.tsx +17 -1
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { type ColorValue } from 'react-native';
|
|
2
|
+
/**
|
|
3
|
+
* The part of an app theme that is applied to the native platform theme. A
|
|
4
|
+
* React Navigation theme has this shape, so it can be passed as is.
|
|
5
|
+
*/
|
|
6
|
+
export type NativeTheme = {
|
|
7
|
+
colors: {
|
|
8
|
+
/**
|
|
9
|
+
* Brand color. Android generates a Material 3 color scheme from it for
|
|
10
|
+
* light and dark mode (Android 13+); iOS uses it as the tint color.
|
|
11
|
+
*/
|
|
12
|
+
primary: ColorValue;
|
|
13
|
+
};
|
|
14
|
+
};
|
|
15
|
+
/**
|
|
16
|
+
* Applies the theme's brand color to the native platform theme, app-wide:
|
|
17
|
+
* these components and other native views that use the theme colors (the
|
|
18
|
+
* window tint color on iOS, the Material theme on Android). Pass `null` to
|
|
19
|
+
* restore the app's own theme colors.
|
|
20
|
+
*
|
|
21
|
+
* Light and dark mode follow the native appearance; use
|
|
22
|
+
* `Appearance.setColorScheme` to change it from JavaScript.
|
|
23
|
+
*/
|
|
24
|
+
export declare function setNativeTheme(theme: NativeTheme | null): void;
|
|
25
|
+
/**
|
|
26
|
+
* Keeps the native platform theme's brand color in sync with `theme`. Call it
|
|
27
|
+
* once, near the root of the app. See {@link setNativeTheme}.
|
|
28
|
+
*/
|
|
29
|
+
export declare function useNativeTheme(theme: NativeTheme | null | undefined): void;
|
|
30
|
+
//# sourceMappingURL=NativeTheme.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"NativeTheme.d.ts","sourceRoot":"","sources":["../../../../src/NativeTheme.ts"],"names":[],"mappings":"AAEA,OAAO,EAAgB,KAAK,UAAU,EAAE,MAAM,cAAc,CAAC;AAI7D;;;GAGG;AACH,MAAM,MAAM,WAAW,GAAG;IACxB,MAAM,EAAE;QACN;;;WAGG;QACH,OAAO,EAAE,UAAU,CAAC;KACrB,CAAC;CACH,CAAC;AAMF;;;;;;;;GAQG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,WAAW,GAAG,IAAI,GAAG,IAAI,CAE9D;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,GAAG,IAAI,CAW1E"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,iBAAc,CAAC;AAC7B,cAAc,oBAAiB,CAAC;AAChC,cAAc,kBAAe,CAAC;AAC9B,cAAc,uBAAoB,CAAC;AACnC,cAAc,kBAAe,CAAC;AAC9B,cAAc,kBAAe,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,iBAAc,CAAC;AAC7B,cAAc,oBAAiB,CAAC;AAChC,cAAc,kBAAe,CAAC;AAC9B,cAAc,uBAAoB,CAAC;AACnC,cAAc,kBAAe,CAAC;AAC9B,cAAc,kBAAe,CAAC;AAC9B,cAAc,kBAAe,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { ReactNode } from 'react';
|
|
3
|
-
import type { StyleProp, ViewStyle, ViewProps } from 'react-native';
|
|
3
|
+
import type { ColorValue, StyleProp, ViewStyle, ViewProps } from 'react-native';
|
|
4
4
|
export type Visible = 'open' | 'closed';
|
|
5
5
|
export type Presentation = 'modal' | 'embedded';
|
|
6
6
|
export type AndroidMaterialMode = 'system' | 'm3';
|
|
@@ -124,4 +124,11 @@ export interface LiquidGlassProps extends ViewProps {
|
|
|
124
124
|
}
|
|
125
125
|
export declare const LiquidGlass: ({ children, }: LiquidGlassProps) => React.ReactElement | null;
|
|
126
126
|
export declare const isLiquidGlassSupported = false;
|
|
127
|
+
export type NativeTheme = {
|
|
128
|
+
colors: {
|
|
129
|
+
primary: ColorValue;
|
|
130
|
+
};
|
|
131
|
+
};
|
|
132
|
+
export declare const setNativeTheme: (_theme: NativeTheme | null) => void;
|
|
133
|
+
export declare const useNativeTheme: (_theme: NativeTheme | null | undefined) => void;
|
|
127
134
|
//# sourceMappingURL=index.web.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.web.d.ts","sourceRoot":"","sources":["../../../../src/index.web.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"index.web.d.ts","sourceRoot":"","sources":["../../../../src/index.web.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-native-platform-components",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.2.0",
|
|
4
4
|
"description": "Native UI components for React Native that are native on Android too: DatePicker, ContextMenu, SelectionMenu, SegmentedControl (Material 3) and LiquidGlass (iOS 26). Fabric, typed, Expo config plugin.",
|
|
5
5
|
"main": "./lib/commonjs/index.js",
|
|
6
6
|
"module": "./lib/module/index.js",
|
|
@@ -188,12 +188,15 @@
|
|
|
188
188
|
},
|
|
189
189
|
"codegenConfig": {
|
|
190
190
|
"name": "PlatformComponentsViewSpec",
|
|
191
|
-
"type": "
|
|
191
|
+
"type": "all",
|
|
192
192
|
"jsSrcsDir": "src",
|
|
193
193
|
"android": {
|
|
194
194
|
"javaPackageName": "com.platformcomponents"
|
|
195
195
|
},
|
|
196
196
|
"ios": {
|
|
197
|
+
"modulesProvider": {
|
|
198
|
+
"PlatformComponentsTheme": "PCNativeThemeModule"
|
|
199
|
+
},
|
|
197
200
|
"componentProvider": {
|
|
198
201
|
"PCSelectionMenu": "PCSelectionMenu",
|
|
199
202
|
"PCDatePicker": "PCDatePicker",
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
// NativePlatformComponentsTheme.ts
|
|
2
|
+
import type { CodegenTypes, TurboModule } from 'react-native';
|
|
3
|
+
import { TurboModuleRegistry } from 'react-native';
|
|
4
|
+
|
|
5
|
+
export interface Spec extends TurboModule {
|
|
6
|
+
/**
|
|
7
|
+
* `{ primary }`, where `primary` is a color from `processColor`. An empty
|
|
8
|
+
* object restores the app's own theme colors.
|
|
9
|
+
*/
|
|
10
|
+
setTheme(theme: CodegenTypes.UnsafeObject): void;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
export default TurboModuleRegistry.get<Spec>('PlatformComponentsTheme');
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
// NativeTheme.ts
|
|
2
|
+
import { useLayoutEffect } from 'react';
|
|
3
|
+
import { processColor, type ColorValue } from 'react-native';
|
|
4
|
+
|
|
5
|
+
import NativePlatformComponentsTheme from './NativePlatformComponentsTheme';
|
|
6
|
+
|
|
7
|
+
/**
|
|
8
|
+
* The part of an app theme that is applied to the native platform theme. A
|
|
9
|
+
* React Navigation theme has this shape, so it can be passed as is.
|
|
10
|
+
*/
|
|
11
|
+
export type NativeTheme = {
|
|
12
|
+
colors: {
|
|
13
|
+
/**
|
|
14
|
+
* Brand color. Android generates a Material 3 color scheme from it for
|
|
15
|
+
* light and dark mode (Android 13+); iOS uses it as the tint color.
|
|
16
|
+
*/
|
|
17
|
+
primary: ColorValue;
|
|
18
|
+
};
|
|
19
|
+
};
|
|
20
|
+
|
|
21
|
+
function applyProcessedPrimary(primary: unknown): void {
|
|
22
|
+
NativePlatformComponentsTheme?.setTheme(primary == null ? {} : { primary });
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
/**
|
|
26
|
+
* Applies the theme's brand color to the native platform theme, app-wide:
|
|
27
|
+
* these components and other native views that use the theme colors (the
|
|
28
|
+
* window tint color on iOS, the Material theme on Android). Pass `null` to
|
|
29
|
+
* restore the app's own theme colors.
|
|
30
|
+
*
|
|
31
|
+
* Light and dark mode follow the native appearance; use
|
|
32
|
+
* `Appearance.setColorScheme` to change it from JavaScript.
|
|
33
|
+
*/
|
|
34
|
+
export function setNativeTheme(theme: NativeTheme | null): void {
|
|
35
|
+
applyProcessedPrimary(theme ? processColor(theme.colors.primary) : null);
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
/**
|
|
39
|
+
* Keeps the native platform theme's brand color in sync with `theme`. Call it
|
|
40
|
+
* once, near the root of the app. See {@link setNativeTheme}.
|
|
41
|
+
*/
|
|
42
|
+
export function useNativeTheme(theme: NativeTheme | null | undefined): void {
|
|
43
|
+
// Processed colors are numbers or plain objects (PlatformColor,
|
|
44
|
+
// DynamicColorIOS); compare them by value so a theme object recreated on
|
|
45
|
+
// every render does not re-apply the same color.
|
|
46
|
+
const primary = JSON.stringify(
|
|
47
|
+
theme ? (processColor(theme.colors.primary) ?? null) : null
|
|
48
|
+
);
|
|
49
|
+
|
|
50
|
+
useLayoutEffect(() => {
|
|
51
|
+
applyProcessedPrimary(JSON.parse(primary));
|
|
52
|
+
}, [primary]);
|
|
53
|
+
}
|
package/src/index.tsx
CHANGED
package/src/index.web.tsx
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
|
|
6
6
|
import React from 'react';
|
|
7
7
|
import type { ReactNode } from 'react';
|
|
8
|
-
import type { StyleProp, ViewStyle, ViewProps } from 'react-native';
|
|
8
|
+
import type { ColorValue, StyleProp, ViewStyle, ViewProps } from 'react-native';
|
|
9
9
|
|
|
10
10
|
// ============================================================================
|
|
11
11
|
// Shared Types (duplicated to avoid importing from files with native deps)
|
|
@@ -182,3 +182,19 @@ export const LiquidGlass = ({
|
|
|
182
182
|
};
|
|
183
183
|
|
|
184
184
|
export const isLiquidGlassSupported = false;
|
|
185
|
+
|
|
186
|
+
// ============================================================================
|
|
187
|
+
// Native theme
|
|
188
|
+
// ============================================================================
|
|
189
|
+
|
|
190
|
+
export type NativeTheme = {
|
|
191
|
+
colors: {
|
|
192
|
+
primary: ColorValue;
|
|
193
|
+
};
|
|
194
|
+
};
|
|
195
|
+
|
|
196
|
+
export const setNativeTheme = (_theme: NativeTheme | null): void => {};
|
|
197
|
+
|
|
198
|
+
export const useNativeTheme = (
|
|
199
|
+
_theme: NativeTheme | null | undefined
|
|
200
|
+
): void => {};
|