expo-router 7.0.0-canary-20251216-6e1f9a7 → 7.0.0-canary-20251223-b83b31e
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/android/build.gradle +2 -2
- package/build/color/index.d.ts +44 -0
- package/build/color/index.d.ts.map +1 -1
- package/build/color/index.js +69 -5
- package/build/color/index.js.map +1 -1
- package/build/exports.d.ts +1 -0
- package/build/exports.d.ts.map +1 -1
- package/build/exports.js +3 -1
- package/build/exports.js.map +1 -1
- package/build/layouts/StackClient.d.ts +3 -3
- package/build/layouts/stack-utils/StackHeaderButton.d.ts +77 -2
- package/build/layouts/stack-utils/StackHeaderButton.d.ts.map +1 -1
- package/build/layouts/stack-utils/StackHeaderButton.js +3 -0
- package/build/layouts/stack-utils/StackHeaderButton.js.map +1 -1
- package/build/layouts/stack-utils/StackHeaderComponent.d.ts +84 -1
- package/build/layouts/stack-utils/StackHeaderComponent.d.ts.map +1 -1
- package/build/layouts/stack-utils/StackHeaderComponent.js +54 -1
- package/build/layouts/stack-utils/StackHeaderComponent.js.map +1 -1
- package/build/layouts/stack-utils/StackHeaderLeftRight.d.ts +107 -3
- package/build/layouts/stack-utils/StackHeaderLeftRight.d.ts.map +1 -1
- package/build/layouts/stack-utils/StackHeaderLeftRight.js +108 -13
- package/build/layouts/stack-utils/StackHeaderLeftRight.js.map +1 -1
- package/build/layouts/stack-utils/StackHeaderMenu.d.ts +83 -7
- package/build/layouts/stack-utils/StackHeaderMenu.d.ts.map +1 -1
- package/build/layouts/stack-utils/StackHeaderMenu.js +14 -4
- package/build/layouts/stack-utils/StackHeaderMenu.js.map +1 -1
- package/build/layouts/stack-utils/StackHeaderSpacer.d.ts +7 -1
- package/build/layouts/stack-utils/StackHeaderSpacer.d.ts.map +1 -1
- package/build/layouts/stack-utils/StackHeaderSpacer.js +5 -2
- package/build/layouts/stack-utils/StackHeaderSpacer.js.map +1 -1
- package/build/layouts/stack-utils/{StackHeaderItem.d.ts → StackHeaderView.d.ts} +18 -5
- package/build/layouts/stack-utils/StackHeaderView.d.ts.map +1 -0
- package/build/layouts/stack-utils/{StackHeaderItem.js → StackHeaderView.js} +14 -10
- package/build/layouts/stack-utils/StackHeaderView.js.map +1 -0
- package/build/layouts/stack-utils/index.d.ts +5 -5
- package/build/layouts/stack-utils/index.d.ts.map +1 -1
- package/build/layouts/stack-utils/index.js +4 -4
- package/build/layouts/stack-utils/index.js.map +1 -1
- package/build/layouts/stack-utils/shared.d.ts +4 -42
- package/build/layouts/stack-utils/shared.d.ts.map +1 -1
- package/build/layouts/stack-utils/shared.js +3 -22
- package/build/layouts/stack-utils/shared.js.map +1 -1
- package/build/link/ExpoLink.d.ts.map +1 -1
- package/build/link/ExpoLink.js +1 -8
- package/build/link/ExpoLink.js.map +1 -1
- package/build/link/elements.d.ts +36 -13
- package/build/link/elements.d.ts.map +1 -1
- package/build/link/elements.js +14 -5
- package/build/link/elements.js.map +1 -1
- package/build/link/preview/native.d.ts +12 -1
- package/build/link/preview/native.d.ts.map +1 -1
- package/build/link/preview/native.js.map +1 -1
- package/build/navigationEvents/index.d.ts +36 -0
- package/build/navigationEvents/index.d.ts.map +1 -0
- package/build/navigationEvents/index.js +53 -0
- package/build/navigationEvents/index.js.map +1 -0
- package/build/toolbar/elements.d.ts +325 -16
- package/build/toolbar/elements.d.ts.map +1 -1
- package/build/toolbar/elements.js +130 -12
- package/build/toolbar/elements.js.map +1 -1
- package/build/toolbar/index.d.ts +38 -6
- package/build/toolbar/index.d.ts.map +1 -1
- package/build/toolbar/index.js +36 -1
- package/build/toolbar/index.js.map +1 -1
- package/build/toolbar/native.ios.d.ts.map +1 -1
- package/build/toolbar/native.ios.js.map +1 -1
- package/build/toolbar/native.types.d.ts +6 -5
- package/build/toolbar/native.types.d.ts.map +1 -1
- package/build/toolbar/native.types.js.map +1 -1
- package/build/useScreens.d.ts.map +1 -1
- package/build/useScreens.js +50 -0
- package/build/useScreens.js.map +1 -1
- package/build/utils/font.d.ts +9 -0
- package/build/utils/font.d.ts.map +1 -0
- package/build/utils/font.js +20 -0
- package/build/utils/font.js.map +1 -0
- package/expo-module.config.json +1 -1
- package/ios/LinkPreview/LinkPreviewNativeActionView.swift +105 -24
- package/ios/LinkPreview/LinkPreviewNativeModule.swift +35 -8
- package/ios/LinkPreview/LinkPreviewNativeNavigation.swift +16 -20
- package/ios/LinkPreview/LinkPreviewNativePreviewView.swift +1 -8
- package/ios/LinkPreview/LinkPreviewNativeView.swift +48 -50
- package/ios/LinkPreview/LinkZoomTransition.swift +8 -10
- package/ios/RouterViewWithLogger.swift +5 -0
- package/ios/Toolbar/RouterFontUtils.swift +50 -0
- package/ios/Toolbar/RouterToolbarHostView.swift +41 -17
- package/ios/Toolbar/RouterToolbarItemView.swift +30 -13
- package/ios/Toolbar/RouterToolbarModule.swift +28 -0
- package/local-maven-repo/expo/modules/router/expo.modules.router/7.0.0-canary-20251223-b83b31e/expo.modules.router-7.0.0-canary-20251223-b83b31e.aar +0 -0
- package/local-maven-repo/expo/modules/router/expo.modules.router/7.0.0-canary-20251223-b83b31e/expo.modules.router-7.0.0-canary-20251223-b83b31e.aar.md5 +1 -0
- package/local-maven-repo/expo/modules/router/expo.modules.router/7.0.0-canary-20251223-b83b31e/expo.modules.router-7.0.0-canary-20251223-b83b31e.aar.sha1 +1 -0
- package/local-maven-repo/expo/modules/router/expo.modules.router/7.0.0-canary-20251223-b83b31e/expo.modules.router-7.0.0-canary-20251223-b83b31e.aar.sha256 +1 -0
- package/local-maven-repo/expo/modules/router/expo.modules.router/7.0.0-canary-20251223-b83b31e/expo.modules.router-7.0.0-canary-20251223-b83b31e.aar.sha512 +1 -0
- package/local-maven-repo/expo/modules/router/expo.modules.router/{7.0.0-canary-20251216-6e1f9a7/expo.modules.router-7.0.0-canary-20251216-6e1f9a7.module → 7.0.0-canary-20251223-b83b31e/expo.modules.router-7.0.0-canary-20251223-b83b31e.module} +17 -17
- package/local-maven-repo/expo/modules/router/expo.modules.router/7.0.0-canary-20251223-b83b31e/expo.modules.router-7.0.0-canary-20251223-b83b31e.module.md5 +1 -0
- package/local-maven-repo/expo/modules/router/expo.modules.router/7.0.0-canary-20251223-b83b31e/expo.modules.router-7.0.0-canary-20251223-b83b31e.module.sha1 +1 -0
- package/local-maven-repo/expo/modules/router/expo.modules.router/7.0.0-canary-20251223-b83b31e/expo.modules.router-7.0.0-canary-20251223-b83b31e.module.sha256 +1 -0
- package/local-maven-repo/expo/modules/router/expo.modules.router/7.0.0-canary-20251223-b83b31e/expo.modules.router-7.0.0-canary-20251223-b83b31e.module.sha512 +1 -0
- package/local-maven-repo/expo/modules/router/expo.modules.router/{7.0.0-canary-20251216-6e1f9a7/expo.modules.router-7.0.0-canary-20251216-6e1f9a7.pom → 7.0.0-canary-20251223-b83b31e/expo.modules.router-7.0.0-canary-20251223-b83b31e.pom} +1 -1
- package/local-maven-repo/expo/modules/router/expo.modules.router/7.0.0-canary-20251223-b83b31e/expo.modules.router-7.0.0-canary-20251223-b83b31e.pom.md5 +1 -0
- package/local-maven-repo/expo/modules/router/expo.modules.router/7.0.0-canary-20251223-b83b31e/expo.modules.router-7.0.0-canary-20251223-b83b31e.pom.sha1 +1 -0
- package/local-maven-repo/expo/modules/router/expo.modules.router/7.0.0-canary-20251223-b83b31e/expo.modules.router-7.0.0-canary-20251223-b83b31e.pom.sha256 +1 -0
- package/local-maven-repo/expo/modules/router/expo.modules.router/7.0.0-canary-20251223-b83b31e/expo.modules.router-7.0.0-canary-20251223-b83b31e.pom.sha512 +1 -0
- package/local-maven-repo/expo/modules/router/expo.modules.router/maven-metadata.xml +4 -4
- package/local-maven-repo/expo/modules/router/expo.modules.router/maven-metadata.xml.md5 +1 -1
- package/local-maven-repo/expo/modules/router/expo.modules.router/maven-metadata.xml.sha1 +1 -1
- package/local-maven-repo/expo/modules/router/expo.modules.router/maven-metadata.xml.sha256 +1 -1
- package/local-maven-repo/expo/modules/router/expo.modules.router/maven-metadata.xml.sha512 +1 -1
- package/package.json +10 -10
- package/build/layouts/stack-utils/StackHeaderItem.d.ts.map +0 -1
- package/build/layouts/stack-utils/StackHeaderItem.js.map +0 -1
- package/local-maven-repo/expo/modules/router/expo.modules.router/7.0.0-canary-20251216-6e1f9a7/expo.modules.router-7.0.0-canary-20251216-6e1f9a7.aar +0 -0
- package/local-maven-repo/expo/modules/router/expo.modules.router/7.0.0-canary-20251216-6e1f9a7/expo.modules.router-7.0.0-canary-20251216-6e1f9a7.aar.md5 +0 -1
- package/local-maven-repo/expo/modules/router/expo.modules.router/7.0.0-canary-20251216-6e1f9a7/expo.modules.router-7.0.0-canary-20251216-6e1f9a7.aar.sha1 +0 -1
- package/local-maven-repo/expo/modules/router/expo.modules.router/7.0.0-canary-20251216-6e1f9a7/expo.modules.router-7.0.0-canary-20251216-6e1f9a7.aar.sha256 +0 -1
- package/local-maven-repo/expo/modules/router/expo.modules.router/7.0.0-canary-20251216-6e1f9a7/expo.modules.router-7.0.0-canary-20251216-6e1f9a7.aar.sha512 +0 -1
- package/local-maven-repo/expo/modules/router/expo.modules.router/7.0.0-canary-20251216-6e1f9a7/expo.modules.router-7.0.0-canary-20251216-6e1f9a7.module.md5 +0 -1
- package/local-maven-repo/expo/modules/router/expo.modules.router/7.0.0-canary-20251216-6e1f9a7/expo.modules.router-7.0.0-canary-20251216-6e1f9a7.module.sha1 +0 -1
- package/local-maven-repo/expo/modules/router/expo.modules.router/7.0.0-canary-20251216-6e1f9a7/expo.modules.router-7.0.0-canary-20251216-6e1f9a7.module.sha256 +0 -1
- package/local-maven-repo/expo/modules/router/expo.modules.router/7.0.0-canary-20251216-6e1f9a7/expo.modules.router-7.0.0-canary-20251216-6e1f9a7.module.sha512 +0 -1
- package/local-maven-repo/expo/modules/router/expo.modules.router/7.0.0-canary-20251216-6e1f9a7/expo.modules.router-7.0.0-canary-20251216-6e1f9a7.pom.md5 +0 -1
- package/local-maven-repo/expo/modules/router/expo.modules.router/7.0.0-canary-20251216-6e1f9a7/expo.modules.router-7.0.0-canary-20251216-6e1f9a7.pom.sha1 +0 -1
- package/local-maven-repo/expo/modules/router/expo.modules.router/7.0.0-canary-20251216-6e1f9a7/expo.modules.router-7.0.0-canary-20251216-6e1f9a7.pom.sha256 +0 -1
- package/local-maven-repo/expo/modules/router/expo.modules.router/7.0.0-canary-20251216-6e1f9a7/expo.modules.router-7.0.0-canary-20251216-6e1f9a7.pom.sha512 +0 -1
- /package/local-maven-repo/expo/modules/router/expo.modules.router/{7.0.0-canary-20251216-6e1f9a7/expo.modules.router-7.0.0-canary-20251216-6e1f9a7-sources.jar → 7.0.0-canary-20251223-b83b31e/expo.modules.router-7.0.0-canary-20251223-b83b31e-sources.jar} +0 -0
- /package/local-maven-repo/expo/modules/router/expo.modules.router/{7.0.0-canary-20251216-6e1f9a7/expo.modules.router-7.0.0-canary-20251216-6e1f9a7-sources.jar.md5 → 7.0.0-canary-20251223-b83b31e/expo.modules.router-7.0.0-canary-20251223-b83b31e-sources.jar.md5} +0 -0
- /package/local-maven-repo/expo/modules/router/expo.modules.router/{7.0.0-canary-20251216-6e1f9a7/expo.modules.router-7.0.0-canary-20251216-6e1f9a7-sources.jar.sha1 → 7.0.0-canary-20251223-b83b31e/expo.modules.router-7.0.0-canary-20251223-b83b31e-sources.jar.sha1} +0 -0
- /package/local-maven-repo/expo/modules/router/expo.modules.router/{7.0.0-canary-20251216-6e1f9a7/expo.modules.router-7.0.0-canary-20251216-6e1f9a7-sources.jar.sha256 → 7.0.0-canary-20251223-b83b31e/expo.modules.router-7.0.0-canary-20251223-b83b31e-sources.jar.sha256} +0 -0
- /package/local-maven-repo/expo/modules/router/expo.modules.router/{7.0.0-canary-20251216-6e1f9a7/expo.modules.router-7.0.0-canary-20251216-6e1f9a7-sources.jar.sha512 → 7.0.0-canary-20251223-b83b31e/expo.modules.router-7.0.0-canary-20251223-b83b31e-sources.jar.sha512} +0 -0
package/android/build.gradle
CHANGED
|
@@ -4,13 +4,13 @@ plugins {
|
|
|
4
4
|
}
|
|
5
5
|
|
|
6
6
|
group = 'expo.modules.router'
|
|
7
|
-
version = '7.0.0-canary-
|
|
7
|
+
version = '7.0.0-canary-20251223-b83b31e'
|
|
8
8
|
|
|
9
9
|
android {
|
|
10
10
|
namespace "expo.modules.router"
|
|
11
11
|
defaultConfig {
|
|
12
12
|
versionCode 1
|
|
13
|
-
versionName "7.0.0-canary-
|
|
13
|
+
versionName "7.0.0-canary-20251223-b83b31e"
|
|
14
14
|
}
|
|
15
15
|
lintOptions {
|
|
16
16
|
abortOnError false
|
package/build/color/index.d.ts
CHANGED
|
@@ -31,5 +31,49 @@ export interface ColorType {
|
|
|
31
31
|
dynamic: AndroidDynamicMaterialColor;
|
|
32
32
|
};
|
|
33
33
|
}
|
|
34
|
+
/**
|
|
35
|
+
* Color utility to access platform-specific colors easily.
|
|
36
|
+
*
|
|
37
|
+
* On **Android**, it provides access to:
|
|
38
|
+
* - System colors, as a type-safe wrapper over `PlatformColor`. For example, `Color.android.background`.
|
|
39
|
+
* - Attribute colors, as a type-safe wrapper over `PlatformColor`. For example, `Color.android.attr.colorPrimary`.
|
|
40
|
+
* - [Material Design 3 static colors](https://m3.material.io/styles/color/static/baseline). For example, `Color.android.material.primary`.
|
|
41
|
+
* - [Material Design 3 dynamic colors](https://m3.material.io/styles/color/dynamic/user-generated-source). For example, `Color.android.dynamic.primary`.
|
|
42
|
+
*
|
|
43
|
+
* On **iOS**, it is a type-safe wrapper over `PlatformColor`, providing access to system colors. For example, `Color.ios.label`.
|
|
44
|
+
*
|
|
45
|
+
* > **Note**: To ensure the colors align with the system theme on Android, make sure they are used within a component that responds to theme changes, such as by using the `useColorScheme` hook from React Native.
|
|
46
|
+
*
|
|
47
|
+
* @example
|
|
48
|
+
* ```tsx
|
|
49
|
+
* import { Color } from 'expo-router';
|
|
50
|
+
*
|
|
51
|
+
* Color.ios.label; // Access iOS system color
|
|
52
|
+
* Color.android.background; // Access Android system color
|
|
53
|
+
* Color.android.attr.colorPrimary; // Access Android attribute color
|
|
54
|
+
* Color.android.material.primary; // Access Android Material Design 3 static color
|
|
55
|
+
* Color.android.dynamic.primary; // Access Android Material Design 3 dynamic color
|
|
56
|
+
* ```
|
|
57
|
+
*
|
|
58
|
+
* @example
|
|
59
|
+
* ```tsx
|
|
60
|
+
* import { Color } from 'expo-router';
|
|
61
|
+
* import { View, Text, useColorScheme } from 'react-native';
|
|
62
|
+
*
|
|
63
|
+
* export default function MyComponent() {
|
|
64
|
+
* useColorScheme(); // Ensure the app responds to system theme changes
|
|
65
|
+
* return (
|
|
66
|
+
* <View style={{ flex: 1, backgroundColor: Color.android.dynamic.primary }}>
|
|
67
|
+
* <Text style={{ color: Color.android.dynamic.onPrimary }}>
|
|
68
|
+
* Hello, World!
|
|
69
|
+
* </Text>
|
|
70
|
+
* </View>
|
|
71
|
+
* );
|
|
72
|
+
* }
|
|
73
|
+
* ```
|
|
74
|
+
*
|
|
75
|
+
* @platform android
|
|
76
|
+
* @platform ios
|
|
77
|
+
*/
|
|
34
78
|
export declare const Color: ColorType;
|
|
35
79
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/color/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,UAAU,EAAE,MAAM,cAAc,CAAC;AAE9D,OAAO,KAAK,EACV,oBAAoB,EACpB,oBAAoB,EACpB,qBAAqB,EACrB,qBAAqB,EACrB,qBAAqB,EACrB,qBAAqB,EACrB,qBAAqB,EACtB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,KAAK,EACV,oBAAoB,EACpB,qBAAqB,EACrB,qBAAqB,EACrB,qBAAqB,EACrB,qBAAqB,EACrB,sBAAsB,EACvB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,yBAAyB,CAAC;AAC/E,OAAO,KAAK,EAAE,8BAA8B,EAAE,MAAM,0BAA0B,CAAC;AAC/E,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAGhD,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,aAAa,CAAC;AAE5B,MAAM,MAAM,gBAAgB,GAAG,oBAAoB,GACjD,qBAAqB,GACrB,qBAAqB,GACrB,qBAAqB,GACrB,qBAAqB,GACrB,sBAAsB,GAAG;IACvB,CAAC,GAAG,EAAE,MAAM,GAAG,UAAU,CAAC;CAC3B,CAAC;AAEJ,MAAM,MAAM,oBAAoB,GAAG,oBAAoB,GACrD,oBAAoB,GACpB,qBAAqB,GACrB,qBAAqB,GACrB,qBAAqB,GACrB,qBAAqB,GACrB,qBAAqB,GAAG;IACtB,CAAC,GAAG,EAAE,MAAM,GAAG,UAAU,CAAC;CAC3B,CAAC;AAEJ,MAAM,MAAM,oBAAoB,GAAG,8BAA8B,GAAG;IAClE,CAAC,GAAG,EAAE,MAAM,GAAG,UAAU,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,2BAA2B,GAAG,+BAA+B,GAAG;IAC1E,CAAC,GAAG,EAAE,MAAM,GAAG,UAAU,CAAC;CAC3B,CAAC;AAEF,MAAM,WAAW,SAAS;IACxB,GAAG,EAAE,YAAY,GAAG;QAClB,CAAC,GAAG,EAAE,MAAM,GAAG,UAAU,CAAC;KAC3B,CAAC;IACF,OAAO,EAAE,gBAAgB,GAAG;QAC1B,IAAI,EAAE,oBAAoB,CAAC;QAC3B,QAAQ,EAAE,oBAAoB,CAAC;QAC/B,OAAO,EAAE,2BAA2B,CAAC;KACtC,CAAC;CACH;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/color/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,UAAU,EAAE,MAAM,cAAc,CAAC;AAE9D,OAAO,KAAK,EACV,oBAAoB,EACpB,oBAAoB,EACpB,qBAAqB,EACrB,qBAAqB,EACrB,qBAAqB,EACrB,qBAAqB,EACrB,qBAAqB,EACtB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,KAAK,EACV,oBAAoB,EACpB,qBAAqB,EACrB,qBAAqB,EACrB,qBAAqB,EACrB,qBAAqB,EACrB,sBAAsB,EACvB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,yBAAyB,CAAC;AAC/E,OAAO,KAAK,EAAE,8BAA8B,EAAE,MAAM,0BAA0B,CAAC;AAC/E,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAGhD,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,aAAa,CAAC;AAE5B,MAAM,MAAM,gBAAgB,GAAG,oBAAoB,GACjD,qBAAqB,GACrB,qBAAqB,GACrB,qBAAqB,GACrB,qBAAqB,GACrB,sBAAsB,GAAG;IACvB,CAAC,GAAG,EAAE,MAAM,GAAG,UAAU,CAAC;CAC3B,CAAC;AAEJ,MAAM,MAAM,oBAAoB,GAAG,oBAAoB,GACrD,oBAAoB,GACpB,qBAAqB,GACrB,qBAAqB,GACrB,qBAAqB,GACrB,qBAAqB,GACrB,qBAAqB,GAAG;IACtB,CAAC,GAAG,EAAE,MAAM,GAAG,UAAU,CAAC;CAC3B,CAAC;AAEJ,MAAM,MAAM,oBAAoB,GAAG,8BAA8B,GAAG;IAClE,CAAC,GAAG,EAAE,MAAM,GAAG,UAAU,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,2BAA2B,GAAG,+BAA+B,GAAG;IAC1E,CAAC,GAAG,EAAE,MAAM,GAAG,UAAU,CAAC;CAC3B,CAAC;AAEF,MAAM,WAAW,SAAS;IACxB,GAAG,EAAE,YAAY,GAAG;QAClB,CAAC,GAAG,EAAE,MAAM,GAAG,UAAU,CAAC;KAC3B,CAAC;IACF,OAAO,EAAE,gBAAgB,GAAG;QAC1B,IAAI,EAAE,oBAAoB,CAAC;QAC3B,QAAQ,EAAE,oBAAoB,CAAC;QAC/B,OAAO,EAAE,2BAA2B,CAAC;KACtC,CAAC;CACH;AA8ED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AACH,eAAO,MAAM,KAAK,EAAE,SAOnB,CAAC"}
|
package/build/color/index.js
CHANGED
|
@@ -24,22 +24,38 @@ __exportStar(require("./android.material.types"), exports);
|
|
|
24
24
|
__exportStar(require("./ios.types"), exports);
|
|
25
25
|
const iosColor = new Proxy({}, {
|
|
26
26
|
get(_, prop) {
|
|
27
|
-
|
|
27
|
+
if (process.env.EXPO_OS === 'ios') {
|
|
28
|
+
return (0, react_native_1.PlatformColor)(prop);
|
|
29
|
+
}
|
|
30
|
+
console.warn(`Color.ios.${prop} is not available on ${process.env.EXPO_OS}. Consider using a different color for this platform.`);
|
|
31
|
+
return null;
|
|
28
32
|
},
|
|
29
33
|
});
|
|
30
34
|
const androidAttrColor = new Proxy({}, {
|
|
31
35
|
get(_, prop) {
|
|
32
|
-
|
|
36
|
+
if (process.env.EXPO_OS === 'android') {
|
|
37
|
+
return (0, react_native_1.PlatformColor)('?attr/' + prop);
|
|
38
|
+
}
|
|
39
|
+
console.warn(`Color.android.attr.${prop} is not available on ${process.env.EXPO_OS}. Consider using a different color for this platform.`);
|
|
40
|
+
return null;
|
|
33
41
|
},
|
|
34
42
|
});
|
|
35
43
|
const androidMaterialColor = new Proxy({}, {
|
|
36
44
|
get(_, prop) {
|
|
37
|
-
|
|
45
|
+
if (process.env.EXPO_OS === 'android') {
|
|
46
|
+
return (0, materialColor_1.Material3Color)(prop);
|
|
47
|
+
}
|
|
48
|
+
console.warn(`Color.android.material.${prop} is not available on ${process.env.EXPO_OS}. Consider using a different color for this platform.`);
|
|
49
|
+
return null;
|
|
38
50
|
},
|
|
39
51
|
});
|
|
40
52
|
const androidDynamicColor = new Proxy({}, {
|
|
41
53
|
get(_, prop) {
|
|
42
|
-
|
|
54
|
+
if (process.env.EXPO_OS === 'android') {
|
|
55
|
+
return (0, materialColor_1.Material3DynamicColor)(prop);
|
|
56
|
+
}
|
|
57
|
+
console.warn(`Color.android.dynamic.${prop} is not available on ${process.env.EXPO_OS}. Consider using a different color for this platform.`);
|
|
58
|
+
return null;
|
|
43
59
|
},
|
|
44
60
|
});
|
|
45
61
|
const androidColor = new Proxy({
|
|
@@ -57,9 +73,57 @@ const androidColor = new Proxy({
|
|
|
57
73
|
if (prop in target) {
|
|
58
74
|
return target[prop];
|
|
59
75
|
}
|
|
60
|
-
|
|
76
|
+
if (process.env.EXPO_OS === 'android') {
|
|
77
|
+
return (0, react_native_1.PlatformColor)('@android:color/' + prop);
|
|
78
|
+
}
|
|
79
|
+
console.warn(`Color.android.${prop} is not available on ${process.env.EXPO_OS}. Consider using a different color for this platform.`);
|
|
80
|
+
return null;
|
|
61
81
|
},
|
|
62
82
|
});
|
|
83
|
+
/**
|
|
84
|
+
* Color utility to access platform-specific colors easily.
|
|
85
|
+
*
|
|
86
|
+
* On **Android**, it provides access to:
|
|
87
|
+
* - System colors, as a type-safe wrapper over `PlatformColor`. For example, `Color.android.background`.
|
|
88
|
+
* - Attribute colors, as a type-safe wrapper over `PlatformColor`. For example, `Color.android.attr.colorPrimary`.
|
|
89
|
+
* - [Material Design 3 static colors](https://m3.material.io/styles/color/static/baseline). For example, `Color.android.material.primary`.
|
|
90
|
+
* - [Material Design 3 dynamic colors](https://m3.material.io/styles/color/dynamic/user-generated-source). For example, `Color.android.dynamic.primary`.
|
|
91
|
+
*
|
|
92
|
+
* On **iOS**, it is a type-safe wrapper over `PlatformColor`, providing access to system colors. For example, `Color.ios.label`.
|
|
93
|
+
*
|
|
94
|
+
* > **Note**: To ensure the colors align with the system theme on Android, make sure they are used within a component that responds to theme changes, such as by using the `useColorScheme` hook from React Native.
|
|
95
|
+
*
|
|
96
|
+
* @example
|
|
97
|
+
* ```tsx
|
|
98
|
+
* import { Color } from 'expo-router';
|
|
99
|
+
*
|
|
100
|
+
* Color.ios.label; // Access iOS system color
|
|
101
|
+
* Color.android.background; // Access Android system color
|
|
102
|
+
* Color.android.attr.colorPrimary; // Access Android attribute color
|
|
103
|
+
* Color.android.material.primary; // Access Android Material Design 3 static color
|
|
104
|
+
* Color.android.dynamic.primary; // Access Android Material Design 3 dynamic color
|
|
105
|
+
* ```
|
|
106
|
+
*
|
|
107
|
+
* @example
|
|
108
|
+
* ```tsx
|
|
109
|
+
* import { Color } from 'expo-router';
|
|
110
|
+
* import { View, Text, useColorScheme } from 'react-native';
|
|
111
|
+
*
|
|
112
|
+
* export default function MyComponent() {
|
|
113
|
+
* useColorScheme(); // Ensure the app responds to system theme changes
|
|
114
|
+
* return (
|
|
115
|
+
* <View style={{ flex: 1, backgroundColor: Color.android.dynamic.primary }}>
|
|
116
|
+
* <Text style={{ color: Color.android.dynamic.onPrimary }}>
|
|
117
|
+
* Hello, World!
|
|
118
|
+
* </Text>
|
|
119
|
+
* </View>
|
|
120
|
+
* );
|
|
121
|
+
* }
|
|
122
|
+
* ```
|
|
123
|
+
*
|
|
124
|
+
* @platform android
|
|
125
|
+
* @platform ios
|
|
126
|
+
*/
|
|
63
127
|
exports.Color = {
|
|
64
128
|
get ios() {
|
|
65
129
|
return iosColor;
|
package/build/color/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/color/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,+CAA8D;AAsB9D,mDAAwE;AAExE,wDAAsC;AACtC,uDAAqC;AACrC,0DAAwC;AACxC,2DAAyC;AACzC,8CAA4B;AAwC5B,MAAM,QAAQ,GAAG,IAAI,KAAK,CAAC,EAAsB,EAAE;IACjD,GAAG,CAAC,CAAC,EAAE,IAAY;QACjB,OAAO,IAAA,4BAAa,EAAC,IAAI,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/color/index.ts"],"names":[],"mappings":"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","sourcesContent":["import { PlatformColor, type ColorValue } from 'react-native';\n\nimport type {\n AndroidColorAttrSDK1,\n AndroidColorAttrSDK5,\n AndroidColorAttrSDK14,\n AndroidColorAttrSDK21,\n AndroidColorAttrSDK23,\n AndroidColorAttrSDK25,\n AndroidColorAttrSDK26,\n} from './android.attr.types';\nimport type {\n AndroidBaseColorSDK1,\n AndroidBaseColorSDK14,\n AndroidBaseColorSDK31,\n AndroidBaseColorSDK34,\n AndroidBaseColorSDK35,\n AndroidDeprecatedColor,\n} from './android.color.types';\nimport type { AndroidDynamicMaterialColorType } from './android.dynamic.types';\nimport type { AndroidStaticMaterialColorType } from './android.material.types';\nimport type { IOSBaseColor } from './ios.types';\nimport { Material3Color, Material3DynamicColor } from './materialColor';\n\nexport * from './android.color.types';\nexport * from './android.attr.types';\nexport * from './android.dynamic.types';\nexport * from './android.material.types';\nexport * from './ios.types';\n\nexport type AndroidBaseColor = AndroidBaseColorSDK1 &\n AndroidBaseColorSDK14 &\n AndroidBaseColorSDK31 &\n AndroidBaseColorSDK34 &\n AndroidBaseColorSDK35 &\n AndroidDeprecatedColor & {\n [key: string]: ColorValue;\n };\n\nexport type AndroidBaseColorAttr = AndroidColorAttrSDK1 &\n AndroidColorAttrSDK5 &\n AndroidColorAttrSDK14 &\n AndroidColorAttrSDK21 &\n AndroidColorAttrSDK23 &\n AndroidColorAttrSDK25 &\n AndroidColorAttrSDK26 & {\n [key: string]: ColorValue;\n };\n\nexport type AndroidMaterialColor = AndroidStaticMaterialColorType & {\n [key: string]: ColorValue;\n};\n\nexport type AndroidDynamicMaterialColor = AndroidDynamicMaterialColorType & {\n [key: string]: ColorValue;\n};\n\nexport interface ColorType {\n ios: IOSBaseColor & {\n [key: string]: ColorValue;\n };\n android: AndroidBaseColor & {\n attr: AndroidBaseColorAttr;\n material: AndroidMaterialColor;\n dynamic: AndroidDynamicMaterialColor;\n };\n}\n\nconst iosColor = new Proxy({} as ColorType['ios'], {\n get(_, prop: string) {\n if (process.env.EXPO_OS === 'ios') {\n return PlatformColor(prop);\n }\n console.warn(\n `Color.ios.${prop} is not available on ${process.env.EXPO_OS}. Consider using a different color for this platform.`\n );\n return null;\n },\n});\n\nconst androidAttrColor = new Proxy({} as ColorType['android']['attr'], {\n get(_, prop: string) {\n if (process.env.EXPO_OS === 'android') {\n return PlatformColor('?attr/' + prop);\n }\n console.warn(\n `Color.android.attr.${prop} is not available on ${process.env.EXPO_OS}. Consider using a different color for this platform.`\n );\n return null;\n },\n});\n\nconst androidMaterialColor = new Proxy({} as ColorType['android']['material'], {\n get(_, prop: string) {\n if (process.env.EXPO_OS === 'android') {\n return Material3Color(prop);\n }\n console.warn(\n `Color.android.material.${prop} is not available on ${process.env.EXPO_OS}. Consider using a different color for this platform.`\n );\n return null;\n },\n});\n\nconst androidDynamicColor = new Proxy({} as ColorType['android']['dynamic'], {\n get(_, prop: string) {\n if (process.env.EXPO_OS === 'android') {\n return Material3DynamicColor(prop);\n }\n console.warn(\n `Color.android.dynamic.${prop} is not available on ${process.env.EXPO_OS}. Consider using a different color for this platform.`\n );\n return null;\n },\n});\n\nconst androidColor = new Proxy(\n {\n get attr() {\n return androidAttrColor;\n },\n get material() {\n return androidMaterialColor;\n },\n get dynamic() {\n return androidDynamicColor;\n },\n } as ColorType['android'],\n {\n get(target, prop: string) {\n if (prop in target) {\n return target[prop];\n }\n if (process.env.EXPO_OS === 'android') {\n return PlatformColor('@android:color/' + prop);\n }\n console.warn(\n `Color.android.${prop} is not available on ${process.env.EXPO_OS}. Consider using a different color for this platform.`\n );\n return null;\n },\n }\n);\n\n/**\n * Color utility to access platform-specific colors easily.\n *\n * On **Android**, it provides access to:\n * - System colors, as a type-safe wrapper over `PlatformColor`. For example, `Color.android.background`.\n * - Attribute colors, as a type-safe wrapper over `PlatformColor`. For example, `Color.android.attr.colorPrimary`.\n * - [Material Design 3 static colors](https://m3.material.io/styles/color/static/baseline). For example, `Color.android.material.primary`.\n * - [Material Design 3 dynamic colors](https://m3.material.io/styles/color/dynamic/user-generated-source). For example, `Color.android.dynamic.primary`.\n *\n * On **iOS**, it is a type-safe wrapper over `PlatformColor`, providing access to system colors. For example, `Color.ios.label`.\n *\n * > **Note**: To ensure the colors align with the system theme on Android, make sure they are used within a component that responds to theme changes, such as by using the `useColorScheme` hook from React Native.\n *\n * @example\n * ```tsx\n * import { Color } from 'expo-router';\n *\n * Color.ios.label; // Access iOS system color\n * Color.android.background; // Access Android system color\n * Color.android.attr.colorPrimary; // Access Android attribute color\n * Color.android.material.primary; // Access Android Material Design 3 static color\n * Color.android.dynamic.primary; // Access Android Material Design 3 dynamic color\n * ```\n *\n * @example\n * ```tsx\n * import { Color } from 'expo-router';\n * import { View, Text, useColorScheme } from 'react-native';\n *\n * export default function MyComponent() {\n * useColorScheme(); // Ensure the app responds to system theme changes\n * return (\n * <View style={{ flex: 1, backgroundColor: Color.android.dynamic.primary }}>\n * <Text style={{ color: Color.android.dynamic.onPrimary }}>\n * Hello, World!\n * </Text>\n * </View>\n * );\n * }\n * ```\n *\n * @platform android\n * @platform ios\n */\nexport const Color: ColorType = {\n get ios() {\n return iosColor;\n },\n get android() {\n return androidColor;\n },\n};\n"]}
|
package/build/exports.d.ts
CHANGED
|
@@ -26,4 +26,5 @@ export type * from './types';
|
|
|
26
26
|
export * from './color';
|
|
27
27
|
export { Badge, BadgeProps, Icon, IconProps, Label, LabelProps, VectorIcon, VectorIconProps, } from './primitives';
|
|
28
28
|
export * from './layouts/stack-utils';
|
|
29
|
+
export { unstable_navigationEvents } from './navigationEvents';
|
|
29
30
|
//# sourceMappingURL=exports.d.ts.map
|
package/build/exports.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"exports.d.ts","sourceRoot":"","sources":["../src/exports.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAEpD,OAAO,EACL,SAAS,EACT,qBAAqB,EACrB,WAAW,EACX,yBAAyB,EACzB,qBAAqB,EACrB,oBAAoB,EACpB,WAAW,EACX,iBAAiB,EACjB,sBAAsB,EACtB,aAAa,GACd,MAAM,SAAS,CAAC;AAEjB,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAElD,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,OAAO,EAAE,YAAY,EAAE,MAAM,oCAAoC,CAAC;AAElE,OAAO,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAChE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;AAG3B,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAC7D,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,YAAY,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAGhD;;GAEG;AACH,OAAO,KAAK,YAAY,MAAM,gBAAgB,CAAC;AAG/C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClE,YAAY,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAE3D,YAAY,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACtD,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAEpD,mBAAmB,SAAS,CAAC;AAE7B,cAAc,SAAS,CAAC;AAExB,OAAO,EACL,KAAK,EACL,UAAU,EACV,IAAI,EACJ,SAAS,EACT,KAAK,EACL,UAAU,EACV,UAAU,EACV,eAAe,GAChB,MAAM,cAAc,CAAC;AAEtB,cAAc,uBAAuB,CAAC"}
|
|
1
|
+
{"version":3,"file":"exports.d.ts","sourceRoot":"","sources":["../src/exports.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAEpD,OAAO,EACL,SAAS,EACT,qBAAqB,EACrB,WAAW,EACX,yBAAyB,EACzB,qBAAqB,EACrB,oBAAoB,EACpB,WAAW,EACX,iBAAiB,EACjB,sBAAsB,EACtB,aAAa,GACd,MAAM,SAAS,CAAC;AAEjB,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAElD,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,OAAO,EAAE,YAAY,EAAE,MAAM,oCAAoC,CAAC;AAElE,OAAO,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAChE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;AAG3B,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAC7D,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,YAAY,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAGhD;;GAEG;AACH,OAAO,KAAK,YAAY,MAAM,gBAAgB,CAAC;AAG/C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClE,YAAY,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAE3D,YAAY,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACtD,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAEpD,mBAAmB,SAAS,CAAC;AAE7B,cAAc,SAAS,CAAC;AAExB,OAAO,EACL,KAAK,EACL,UAAU,EACV,IAAI,EACJ,SAAS,EACT,KAAK,EACL,UAAU,EACV,UAAU,EACV,eAAe,GAChB,MAAM,cAAc,CAAC;AAEtB,cAAc,uBAAuB,CAAC;AAEtC,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC"}
|
package/build/exports.js
CHANGED
|
@@ -36,7 +36,7 @@ var __importStar = (this && this.__importStar) || (function () {
|
|
|
36
36
|
};
|
|
37
37
|
})();
|
|
38
38
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
39
|
-
exports.VectorIcon = exports.Label = exports.Icon = exports.Badge = exports.useFocusEffect = exports.useNavigation = exports.SplashScreen = exports.ErrorBoundary = exports.useSitemap = exports.Sitemap = exports.Unmatched = exports.ExpoRoot = exports.Slot = exports.Navigator = exports.withLayoutContext = exports.useIsPreview = exports.router = exports.useLoaderData = exports.useRootNavigationState = exports.useRootNavigation = exports.useSegments = exports.useLocalSearchParams = exports.useGlobalSearchParams = exports.useNavigationContainerRef = exports.usePathname = exports.useUnstableGlobalHref = exports.useRouter = void 0;
|
|
39
|
+
exports.unstable_navigationEvents = exports.VectorIcon = exports.Label = exports.Icon = exports.Badge = exports.useFocusEffect = exports.useNavigation = exports.SplashScreen = exports.ErrorBoundary = exports.useSitemap = exports.Sitemap = exports.Unmatched = exports.ExpoRoot = exports.Slot = exports.Navigator = exports.withLayoutContext = exports.useIsPreview = exports.router = exports.useLoaderData = exports.useRootNavigationState = exports.useRootNavigation = exports.useSegments = exports.useLocalSearchParams = exports.useGlobalSearchParams = exports.useNavigationContainerRef = exports.usePathname = exports.useUnstableGlobalHref = exports.useRouter = void 0;
|
|
40
40
|
// Expo Router API
|
|
41
41
|
const Navigator_1 = require("./views/Navigator");
|
|
42
42
|
Object.defineProperty(exports, "Navigator", { enumerable: true, get: function () { return Navigator_1.Navigator; } });
|
|
@@ -88,4 +88,6 @@ Object.defineProperty(exports, "Icon", { enumerable: true, get: function () { re
|
|
|
88
88
|
Object.defineProperty(exports, "Label", { enumerable: true, get: function () { return primitives_1.Label; } });
|
|
89
89
|
Object.defineProperty(exports, "VectorIcon", { enumerable: true, get: function () { return primitives_1.VectorIcon; } });
|
|
90
90
|
__exportStar(require("./layouts/stack-utils"), exports);
|
|
91
|
+
var navigationEvents_1 = require("./navigationEvents");
|
|
92
|
+
Object.defineProperty(exports, "unstable_navigationEvents", { enumerable: true, get: function () { return navigationEvents_1.unstable_navigationEvents; } });
|
|
91
93
|
//# sourceMappingURL=exports.js.map
|
package/build/exports.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"exports.js","sourceRoot":"","sources":["../src/exports.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,kBAAkB;AAClB,iDAAoD;AAsB3C,0FAtBA,qBAAS,OAsBA;AAAE,qFAtBA,gBAAI,OAsBA;AApBxB,iCAWiB;AAVf,kGAAA,SAAS,OAAA;AACT,8GAAA,qBAAqB,OAAA;AACrB,oGAAA,WAAW,OAAA;AACX,kHAAA,yBAAyB,OAAA;AACzB,8GAAA,qBAAqB,OAAA;AACrB,6GAAA,oBAAoB,OAAA;AACpB,oGAAA,WAAW,OAAA;AACX,0GAAA,iBAAiB,OAAA;AACjB,+GAAA,sBAAsB,OAAA;AACtB,sGAAA,aAAa,OAAA;AAGf,mDAAkD;AAAzC,wGAAA,MAAM,OAAA;AAEf,8CAA4B;AAC5B,kDAAgC;AAChC,0EAAkE;AAAzD,mHAAA,YAAY,OAAA;AAErB,iEAAgE;AAAvD,sHAAA,iBAAiB,OAAA;AAG1B,oBAAoB;AACpB,uCAAsC;AAA7B,oGAAA,QAAQ,OAAA;AACjB,+CAA8C;AAArC,sGAAA,SAAS,OAAA;AAClB,2CAA0C;AAAjC,kGAAA,OAAO,OAAA;AAChB,iDAA6D;AAApD,wGAAA,UAAU,OAAA;AAEnB,uDAAsD;AAA7C,8GAAA,aAAa,OAAA;AAGtB,WAAW;AACX;;GAEG;AACH,+DAA+C;AAE/C,mBAAmB;AACnB,iDAAgD;AAAvC,8GAAA,aAAa,OAAA;AACtB,mDAAkE;AAAzD,gHAAA,cAAc,OAAA;AAQvB,0CAAwB;AAExB,2CASsB;AARpB,mGAAA,KAAK,OAAA;AAEL,kGAAA,IAAI,OAAA;AAEJ,mGAAA,KAAK,OAAA;AAEL,wGAAA,UAAU,OAAA;AAIZ,wDAAsC","sourcesContent":["// Expo Router API\nimport { Navigator, Slot } from './views/Navigator';\n\nexport {\n useRouter,\n useUnstableGlobalHref,\n usePathname,\n useNavigationContainerRef,\n useGlobalSearchParams,\n useLocalSearchParams,\n useSegments,\n useRootNavigation,\n useRootNavigationState,\n useLoaderData,\n} from './hooks';\n\nexport { router, Router } from './imperative-api';\n\nexport * from './link/Link';\nexport * from './link/elements';\nexport { useIsPreview } from './link/preview/PreviewRouteContext';\n\nexport { withLayoutContext } from './layouts/withLayoutContext';\nexport { Navigator, Slot };\n\n// Expo Router Views\nexport { ExpoRoot } from './ExpoRoot';\nexport { Unmatched } from './views/Unmatched';\nexport { Sitemap } from './views/Sitemap';\nexport { useSitemap, SitemapType } from './views/useSitemap';\nexport { ErrorBoundaryProps } from './views/Try';\nexport { ErrorBoundary } from './views/ErrorBoundary';\nexport type { ScreenProps } from './useScreens';\n\n// Platform\n/**\n * @hidden\n */\nexport * as SplashScreen from './views/Splash';\n\n// React Navigation\nexport { useNavigation } from './useNavigation';\nexport { useFocusEffect, EffectCallback } from './useFocusEffect';\nexport type { ResultState } from './fork/getStateFromPath';\n\nexport type { RedirectConfig } from './getRoutesCore';\nexport type { SingularOptions } from './useScreens';\n\nexport type * from './types';\n\nexport * from './color';\n\nexport {\n Badge,\n BadgeProps,\n Icon,\n IconProps,\n Label,\n LabelProps,\n VectorIcon,\n VectorIconProps,\n} from './primitives';\n\nexport * from './layouts/stack-utils';\n"]}
|
|
1
|
+
{"version":3,"file":"exports.js","sourceRoot":"","sources":["../src/exports.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,kBAAkB;AAClB,iDAAoD;AAsB3C,0FAtBA,qBAAS,OAsBA;AAAE,qFAtBA,gBAAI,OAsBA;AApBxB,iCAWiB;AAVf,kGAAA,SAAS,OAAA;AACT,8GAAA,qBAAqB,OAAA;AACrB,oGAAA,WAAW,OAAA;AACX,kHAAA,yBAAyB,OAAA;AACzB,8GAAA,qBAAqB,OAAA;AACrB,6GAAA,oBAAoB,OAAA;AACpB,oGAAA,WAAW,OAAA;AACX,0GAAA,iBAAiB,OAAA;AACjB,+GAAA,sBAAsB,OAAA;AACtB,sGAAA,aAAa,OAAA;AAGf,mDAAkD;AAAzC,wGAAA,MAAM,OAAA;AAEf,8CAA4B;AAC5B,kDAAgC;AAChC,0EAAkE;AAAzD,mHAAA,YAAY,OAAA;AAErB,iEAAgE;AAAvD,sHAAA,iBAAiB,OAAA;AAG1B,oBAAoB;AACpB,uCAAsC;AAA7B,oGAAA,QAAQ,OAAA;AACjB,+CAA8C;AAArC,sGAAA,SAAS,OAAA;AAClB,2CAA0C;AAAjC,kGAAA,OAAO,OAAA;AAChB,iDAA6D;AAApD,wGAAA,UAAU,OAAA;AAEnB,uDAAsD;AAA7C,8GAAA,aAAa,OAAA;AAGtB,WAAW;AACX;;GAEG;AACH,+DAA+C;AAE/C,mBAAmB;AACnB,iDAAgD;AAAvC,8GAAA,aAAa,OAAA;AACtB,mDAAkE;AAAzD,gHAAA,cAAc,OAAA;AAQvB,0CAAwB;AAExB,2CASsB;AARpB,mGAAA,KAAK,OAAA;AAEL,kGAAA,IAAI,OAAA;AAEJ,mGAAA,KAAK,OAAA;AAEL,wGAAA,UAAU,OAAA;AAIZ,wDAAsC;AAEtC,uDAA+D;AAAtD,6HAAA,yBAAyB,OAAA","sourcesContent":["// Expo Router API\nimport { Navigator, Slot } from './views/Navigator';\n\nexport {\n useRouter,\n useUnstableGlobalHref,\n usePathname,\n useNavigationContainerRef,\n useGlobalSearchParams,\n useLocalSearchParams,\n useSegments,\n useRootNavigation,\n useRootNavigationState,\n useLoaderData,\n} from './hooks';\n\nexport { router, Router } from './imperative-api';\n\nexport * from './link/Link';\nexport * from './link/elements';\nexport { useIsPreview } from './link/preview/PreviewRouteContext';\n\nexport { withLayoutContext } from './layouts/withLayoutContext';\nexport { Navigator, Slot };\n\n// Expo Router Views\nexport { ExpoRoot } from './ExpoRoot';\nexport { Unmatched } from './views/Unmatched';\nexport { Sitemap } from './views/Sitemap';\nexport { useSitemap, SitemapType } from './views/useSitemap';\nexport { ErrorBoundaryProps } from './views/Try';\nexport { ErrorBoundary } from './views/ErrorBoundary';\nexport type { ScreenProps } from './useScreens';\n\n// Platform\n/**\n * @hidden\n */\nexport * as SplashScreen from './views/Splash';\n\n// React Navigation\nexport { useNavigation } from './useNavigation';\nexport { useFocusEffect, EffectCallback } from './useFocusEffect';\nexport type { ResultState } from './fork/getStateFromPath';\n\nexport type { RedirectConfig } from './getRoutesCore';\nexport type { SingularOptions } from './useScreens';\n\nexport type * from './types';\n\nexport * from './color';\n\nexport {\n Badge,\n BadgeProps,\n Icon,\n IconProps,\n Label,\n LabelProps,\n VectorIcon,\n VectorIconProps,\n} from './primitives';\n\nexport * from './layouts/stack-utils';\n\nexport { unstable_navigationEvents } from './navigationEvents';\n"]}
|
|
@@ -154,8 +154,8 @@ declare const Stack: ((props: ComponentProps<typeof RNStack>) => React.JSX.Eleme
|
|
|
154
154
|
Screen: typeof StackScreen;
|
|
155
155
|
Protected: React.FunctionComponent<ProtectedProps>;
|
|
156
156
|
Header: typeof import("./stack-utils/StackHeaderComponent").StackHeaderComponent & {
|
|
157
|
-
Left:
|
|
158
|
-
Right:
|
|
157
|
+
Left: React.FC<import("./stack-utils").StackHeaderLeftProps>;
|
|
158
|
+
Right: React.FC<import("./stack-utils").StackHeaderRightProps>;
|
|
159
159
|
BackButton: typeof import("./stack-utils").StackHeaderBackButton;
|
|
160
160
|
Title: typeof import("./stack-utils").StackHeaderTitle;
|
|
161
161
|
SearchBar: typeof import("./stack-utils").StackHeaderSearchBar;
|
|
@@ -165,7 +165,7 @@ declare const Stack: ((props: ComponentProps<typeof RNStack>) => React.JSX.Eleme
|
|
|
165
165
|
Icon: React.FC<import("./stack-utils").StackHeaderIconProps>;
|
|
166
166
|
Menu: React.FC<import("./stack-utils").StackHeaderMenuProps>;
|
|
167
167
|
MenuAction: React.FC<import("./stack-utils").StackHeaderMenuActionProps>;
|
|
168
|
-
|
|
168
|
+
View: React.FC<import("./stack-utils").StackHeaderViewProps>;
|
|
169
169
|
Spacer: React.FC<import("./stack-utils").StackHeaderSpacerProps>;
|
|
170
170
|
};
|
|
171
171
|
};
|
|
@@ -1,8 +1,83 @@
|
|
|
1
1
|
import type { NativeStackHeaderItemButton } from '@react-navigation/native-stack';
|
|
2
|
+
import type { ReactNode } from 'react';
|
|
2
3
|
import { type StackHeaderItemSharedProps } from './shared';
|
|
3
|
-
export interface StackHeaderButtonProps
|
|
4
|
+
export interface StackHeaderButtonProps {
|
|
5
|
+
accessibilityLabel?: string;
|
|
6
|
+
accessibilityHint?: string;
|
|
7
|
+
/**
|
|
8
|
+
* There are two ways to specify the content of the header item:
|
|
9
|
+
*
|
|
10
|
+
* @example
|
|
11
|
+
* ```tsx
|
|
12
|
+
* import { Stack } from 'expo-router';
|
|
13
|
+
*
|
|
14
|
+
* ...
|
|
15
|
+
* <Stack.Header.Button icon="star.fill">As text passed as children</Stack.Header.Button>
|
|
16
|
+
* ```
|
|
17
|
+
*
|
|
18
|
+
* @example
|
|
19
|
+
* ```tsx
|
|
20
|
+
* import { Stack } from 'expo-router';
|
|
21
|
+
*
|
|
22
|
+
* ...
|
|
23
|
+
* <Stack.Header.Button>
|
|
24
|
+
* <Stack.Header.Icon sf="star.fill" />
|
|
25
|
+
* <Stack.Header.Label>As components</Stack.Header.Label>
|
|
26
|
+
* <Stack.Header.Badge>3</Stack.Header.Badge>
|
|
27
|
+
* </Stack.Header.Button>
|
|
28
|
+
* ```
|
|
29
|
+
*
|
|
30
|
+
* **Note**: When icon is used, the label will not be shown and will be used for accessibility purposes only.
|
|
31
|
+
*/
|
|
32
|
+
children?: ReactNode;
|
|
33
|
+
disabled?: boolean;
|
|
34
|
+
/**
|
|
35
|
+
* Whether the button should be hidden.
|
|
36
|
+
*
|
|
37
|
+
* @default false
|
|
38
|
+
*/
|
|
39
|
+
hidden?: boolean;
|
|
40
|
+
/**
|
|
41
|
+
* Whether to hide the shared background.
|
|
42
|
+
*
|
|
43
|
+
* @see [Official Apple documentation](https://developer.apple.com/documentation/uikit/uibarbuttonitem/hidessharedbackground) for more information.
|
|
44
|
+
*
|
|
45
|
+
* @platform iOS 26+
|
|
46
|
+
*/
|
|
47
|
+
hidesSharedBackground?: boolean;
|
|
48
|
+
/**
|
|
49
|
+
* Icon to display in the button.
|
|
50
|
+
*
|
|
51
|
+
* Can be a string representing an SFSymbol or an image source.
|
|
52
|
+
*/
|
|
53
|
+
icon?: StackHeaderItemSharedProps['icon'];
|
|
4
54
|
onPress?: () => void;
|
|
55
|
+
/**
|
|
56
|
+
* Whether to separate the background of this item from other header items.
|
|
57
|
+
*
|
|
58
|
+
* @default false
|
|
59
|
+
*/
|
|
60
|
+
separateBackground?: boolean;
|
|
61
|
+
/**
|
|
62
|
+
* Whether the button is in a selected state
|
|
63
|
+
*
|
|
64
|
+
* @see [Apple documentation](https://developer.apple.com/documentation/uikit/uibarbuttonitem/isselected) for more information.
|
|
65
|
+
*/
|
|
5
66
|
selected?: boolean;
|
|
67
|
+
/**
|
|
68
|
+
* Style for the label of the header item.
|
|
69
|
+
*/
|
|
70
|
+
style?: StackHeaderItemSharedProps['style'];
|
|
71
|
+
/**
|
|
72
|
+
* The tint color to apply to the button item
|
|
73
|
+
*
|
|
74
|
+
* @see [Apple documentation](https://developer.apple.com/documentation/uikit/uibarbuttonitem/tintcolor) for more information.
|
|
75
|
+
*/
|
|
76
|
+
tintColor?: StackHeaderItemSharedProps['tintColor'];
|
|
77
|
+
/**
|
|
78
|
+
* @default 'plain'
|
|
79
|
+
*/
|
|
80
|
+
variant?: StackHeaderItemSharedProps['variant'];
|
|
6
81
|
}
|
|
7
82
|
/**
|
|
8
83
|
* A header button used inside `Stack.Header.Left` or `Stack.Header.Right`.
|
|
@@ -35,5 +110,5 @@ export interface StackHeaderButtonProps extends StackHeaderItemSharedProps {
|
|
|
35
110
|
* @platform ios
|
|
36
111
|
*/
|
|
37
112
|
export declare const StackHeaderButton: React.FC<StackHeaderButtonProps>;
|
|
38
|
-
export declare function convertStackHeaderButtonPropsToRNHeaderItem(props: StackHeaderButtonProps): NativeStackHeaderItemButton;
|
|
113
|
+
export declare function convertStackHeaderButtonPropsToRNHeaderItem(props: StackHeaderButtonProps): NativeStackHeaderItemButton | undefined;
|
|
39
114
|
//# sourceMappingURL=StackHeaderButton.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StackHeaderButton.d.ts","sourceRoot":"","sources":["../../../src/layouts/stack-utils/StackHeaderButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,gCAAgC,CAAC;
|
|
1
|
+
{"version":3,"file":"StackHeaderButton.d.ts","sourceRoot":"","sources":["../../../src/layouts/stack-utils/StackHeaderButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,gCAAgC,CAAC;AAClF,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAEL,KAAK,0BAA0B,EAChC,MAAM,UAAU,CAAC;AAElB,MAAM,WAAW,sBAAsB;IACrC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;;;;;;;;;;;;;;;;;;;;;;;OAwBG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;;;;OAMG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC;;;;OAIG;IACH,IAAI,CAAC,EAAE,0BAA0B,CAAC,MAAM,CAAC,CAAC;IAC1C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,0BAA0B,CAAC,OAAO,CAAC,CAAC;IAC5C;;;;OAIG;IACH,SAAS,CAAC,EAAE,0BAA0B,CAAC,WAAW,CAAC,CAAC;IACpD;;OAEG;IACH,OAAO,CAAC,EAAE,0BAA0B,CAAC,SAAS,CAAC,CAAC;CACjD;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAAc,CAAC;AAE9E,wBAAgB,2CAA2C,CACzD,KAAK,EAAE,sBAAsB,GAC5B,2BAA2B,GAAG,SAAS,CAUzC"}
|
|
@@ -36,6 +36,9 @@ const shared_1 = require("./shared");
|
|
|
36
36
|
const StackHeaderButton = () => null;
|
|
37
37
|
exports.StackHeaderButton = StackHeaderButton;
|
|
38
38
|
function convertStackHeaderButtonPropsToRNHeaderItem(props) {
|
|
39
|
+
if (props.hidden) {
|
|
40
|
+
return undefined;
|
|
41
|
+
}
|
|
39
42
|
return {
|
|
40
43
|
...(0, shared_1.convertStackHeaderSharedPropsToRNSharedHeaderItem)(props),
|
|
41
44
|
type: 'button',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StackHeaderButton.js","sourceRoot":"","sources":["../../../src/layouts/stack-utils/StackHeaderButton.tsx"],"names":[],"mappings":";;;
|
|
1
|
+
{"version":3,"file":"StackHeaderButton.js","sourceRoot":"","sources":["../../../src/layouts/stack-utils/StackHeaderButton.tsx"],"names":[],"mappings":";;;AAuHA,kGAYC;AAhID,qCAGkB;AAiFlB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACI,MAAM,iBAAiB,GAAqC,GAAG,EAAE,CAAC,IAAI,CAAC;AAAjE,QAAA,iBAAiB,qBAAgD;AAE9E,SAAgB,2CAA2C,CACzD,KAA6B;IAE7B,IAAI,KAAK,CAAC,MAAM,EAAE,CAAC;QACjB,OAAO,SAAS,CAAC;IACnB,CAAC;IACD,OAAO;QACL,GAAG,IAAA,0DAAiD,EAAC,KAAK,CAAC;QAC3D,IAAI,EAAE,QAAQ;QACd,OAAO,EAAE,KAAK,CAAC,OAAO,IAAI,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC;QACpC,QAAQ,EAAE,CAAC,CAAC,KAAK,CAAC,QAAQ;KAC3B,CAAC;AACJ,CAAC","sourcesContent":["import type { NativeStackHeaderItemButton } from '@react-navigation/native-stack';\nimport type { ReactNode } from 'react';\n\nimport {\n convertStackHeaderSharedPropsToRNSharedHeaderItem,\n type StackHeaderItemSharedProps,\n} from './shared';\n\nexport interface StackHeaderButtonProps {\n accessibilityLabel?: string;\n accessibilityHint?: string;\n /**\n * There are two ways to specify the content of the header item:\n *\n * @example\n * ```tsx\n * import { Stack } from 'expo-router';\n *\n * ...\n * <Stack.Header.Button icon=\"star.fill\">As text passed as children</Stack.Header.Button>\n * ```\n *\n * @example\n * ```tsx\n * import { Stack } from 'expo-router';\n *\n * ...\n * <Stack.Header.Button>\n * <Stack.Header.Icon sf=\"star.fill\" />\n * <Stack.Header.Label>As components</Stack.Header.Label>\n * <Stack.Header.Badge>3</Stack.Header.Badge>\n * </Stack.Header.Button>\n * ```\n *\n * **Note**: When icon is used, the label will not be shown and will be used for accessibility purposes only.\n */\n children?: ReactNode;\n disabled?: boolean;\n /**\n * Whether the button should be hidden.\n *\n * @default false\n */\n hidden?: boolean;\n /**\n * Whether to hide the shared background.\n *\n * @see [Official Apple documentation](https://developer.apple.com/documentation/uikit/uibarbuttonitem/hidessharedbackground) for more information.\n *\n * @platform iOS 26+\n */\n hidesSharedBackground?: boolean;\n /**\n * Icon to display in the button.\n *\n * Can be a string representing an SFSymbol or an image source.\n */\n icon?: StackHeaderItemSharedProps['icon'];\n onPress?: () => void;\n /**\n * Whether to separate the background of this item from other header items.\n *\n * @default false\n */\n separateBackground?: boolean;\n /**\n * Whether the button is in a selected state\n *\n * @see [Apple documentation](https://developer.apple.com/documentation/uikit/uibarbuttonitem/isselected) for more information.\n */\n selected?: boolean;\n /**\n * Style for the label of the header item.\n */\n style?: StackHeaderItemSharedProps['style'];\n /**\n * The tint color to apply to the button item\n *\n * @see [Apple documentation](https://developer.apple.com/documentation/uikit/uibarbuttonitem/tintcolor) for more information.\n */\n tintColor?: StackHeaderItemSharedProps['tintColor'];\n /**\n * @default 'plain'\n */\n variant?: StackHeaderItemSharedProps['variant'];\n}\n\n/**\n * A header button used inside `Stack.Header.Left` or `Stack.Header.Right`.\n *\n * @example\n * ```tsx\n * import { Stack } from 'expo-router';\n *\n * export default function Screen() {\n * return (\n * <>\n * <ScreenContent />\n * <Stack.Screen>\n * <Stack.Header>\n * <Stack.Header.Left>\n * <Stack.Header.Button tintColor=\"blue\" icon=\"arrow.left.circle\" onPress={() => alert('Left pressed')} />\n * <Stack.Header.Button style={{ color: 'green' }} onPress={() => alert('2 pressed')}>\n * <Stack.Header.Label>2</Stack.Header.Label>\n * </Stack.Header.Button>\n * </Stack.Header.Left>\n * </Stack.Header>\n * </Stack.Screen>\n * </>\n * );\n * }\n * ```\n *\n * @see [Human Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines/toolbars) for more information about navigation bar items on iOS.\n *\n * @platform ios\n */\nexport const StackHeaderButton: React.FC<StackHeaderButtonProps> = () => null;\n\nexport function convertStackHeaderButtonPropsToRNHeaderItem(\n props: StackHeaderButtonProps\n): NativeStackHeaderItemButton | undefined {\n if (props.hidden) {\n return undefined;\n }\n return {\n ...convertStackHeaderSharedPropsToRNSharedHeaderItem(props),\n type: 'button',\n onPress: props.onPress ?? (() => {}),\n selected: !!props.selected,\n };\n}\n"]}
|
|
@@ -3,20 +3,103 @@ import { type ReactNode } from 'react';
|
|
|
3
3
|
import { type ColorValue, type StyleProp } from 'react-native';
|
|
4
4
|
import type { ScreenStackHeaderConfigProps } from 'react-native-screens';
|
|
5
5
|
export interface StackHeaderProps {
|
|
6
|
+
/**
|
|
7
|
+
* Child elements to compose the header. Can include Stack.Header.Title, Stack.Header.Left,
|
|
8
|
+
* Stack.Header.Right, Stack.Header.BackButton, and Stack.Header.SearchBar components.
|
|
9
|
+
*/
|
|
6
10
|
children?: ReactNode;
|
|
11
|
+
/**
|
|
12
|
+
* Whether to hide the header completely. When set to `true`, the header will not be rendered.
|
|
13
|
+
*
|
|
14
|
+
* @default false
|
|
15
|
+
*/
|
|
7
16
|
hidden?: boolean;
|
|
17
|
+
/**
|
|
18
|
+
* When `true`, renders children as a custom header component, replacing the default header entirely.
|
|
19
|
+
* Use this to implement fully custom header layouts.
|
|
20
|
+
*
|
|
21
|
+
* @default false
|
|
22
|
+
*/
|
|
8
23
|
asChild?: boolean;
|
|
24
|
+
/**
|
|
25
|
+
* The blur effect to apply to the header background on iOS.
|
|
26
|
+
* Common values include 'regular', 'prominent', 'systemMaterial', etc.
|
|
27
|
+
*
|
|
28
|
+
* @platform ios
|
|
29
|
+
*/
|
|
9
30
|
blurEffect?: ScreenStackHeaderConfigProps['blurEffect'];
|
|
31
|
+
/**
|
|
32
|
+
* Style properties for the standard-sized header.
|
|
33
|
+
* - `color`: Tint color for header elements (similar to tintColor in React Navigation)
|
|
34
|
+
* - `backgroundColor`: Background color of the header
|
|
35
|
+
* - `shadowColor`: Set to 'transparent' to hide the header shadow/border
|
|
36
|
+
*/
|
|
10
37
|
style?: StyleProp<{
|
|
11
38
|
color?: ColorValue;
|
|
12
39
|
backgroundColor?: ScreenStackHeaderConfigProps['backgroundColor'];
|
|
13
40
|
shadowColor?: undefined | 'transparent';
|
|
14
41
|
}>;
|
|
42
|
+
/**
|
|
43
|
+
* Style properties for the large title header (iOS).
|
|
44
|
+
* - `backgroundColor`: Background color of the large title header
|
|
45
|
+
* - `shadowColor`: Set to 'transparent' to hide the large title shadow/border
|
|
46
|
+
*
|
|
47
|
+
* @platform ios
|
|
48
|
+
*/
|
|
15
49
|
largeStyle?: StyleProp<{
|
|
16
50
|
backgroundColor?: ScreenStackHeaderConfigProps['largeTitleBackgroundColor'];
|
|
17
51
|
shadowColor?: undefined | 'transparent';
|
|
18
52
|
}>;
|
|
19
53
|
}
|
|
20
|
-
|
|
54
|
+
/**
|
|
55
|
+
* The component used to configure the whole stack header.
|
|
56
|
+
*
|
|
57
|
+
* When used inside a screen, it allows you to customize the header dynamically by composing
|
|
58
|
+
* header subcomponents (title, left/right areas, back button, search bar, etc.).
|
|
59
|
+
*
|
|
60
|
+
* ```tsx
|
|
61
|
+
* import { Stack } from 'expo-router';
|
|
62
|
+
*
|
|
63
|
+
* export default function Page() {
|
|
64
|
+
* return (
|
|
65
|
+
* <>
|
|
66
|
+
* <Stack.Header>
|
|
67
|
+
* <Stack.Header.Title>Page title</Stack.Header.Title>
|
|
68
|
+
* <Stack.Header.Left>
|
|
69
|
+
* <Stack.Header.Button onPress={() => alert('Left pressed')} />
|
|
70
|
+
* </Stack.Header.Left>
|
|
71
|
+
* <Stack.Header.Right>
|
|
72
|
+
* <Stack.Header.Button onPress={() => alert('Right pressed')} />
|
|
73
|
+
* </Stack.Header.Right>
|
|
74
|
+
* </Stack.Header>
|
|
75
|
+
* <ScreenContent />
|
|
76
|
+
* </>
|
|
77
|
+
* );
|
|
78
|
+
* }
|
|
79
|
+
* ```
|
|
80
|
+
*
|
|
81
|
+
* When used inside a layout, it needs to be wrapped in `Stack.Screen` to take effect.
|
|
82
|
+
*
|
|
83
|
+
* Example (inside a layout):
|
|
84
|
+
* ```tsx
|
|
85
|
+
* import { Stack } from 'expo-router';
|
|
86
|
+
*
|
|
87
|
+
* export default function Layout() {
|
|
88
|
+
* return (
|
|
89
|
+
* <Stack>
|
|
90
|
+
* <Stack.Screen name="index">
|
|
91
|
+
* <Stack.Header>
|
|
92
|
+
* <Stack.Header.Title>Layout title</Stack.Header.Title>
|
|
93
|
+
* <Stack.Header.Right>
|
|
94
|
+
* <Stack.Header.Button onPress={() => alert('Right pressed')} />
|
|
95
|
+
* </Stack.Header.Right>
|
|
96
|
+
* </Stack.Header>
|
|
97
|
+
* </Stack.Screen>
|
|
98
|
+
* </Stack>
|
|
99
|
+
* );
|
|
100
|
+
* }
|
|
101
|
+
* ```
|
|
102
|
+
*/
|
|
103
|
+
export declare function StackHeaderComponent(props: StackHeaderProps): import("react").JSX.Element;
|
|
21
104
|
export declare function appendStackHeaderPropsToOptions(options: NativeStackNavigationOptions, props: StackHeaderProps): NativeStackNavigationOptions;
|
|
22
105
|
//# sourceMappingURL=StackHeaderComponent.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StackHeaderComponent.d.ts","sourceRoot":"","sources":["../../../src/layouts/stack-utils/StackHeaderComponent.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,4BAA4B,EAAE,MAAM,gCAAgC,CAAC;AAC9E,OAAO,
|
|
1
|
+
{"version":3,"file":"StackHeaderComponent.d.ts","sourceRoot":"","sources":["../../../src/layouts/stack-utils/StackHeaderComponent.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,4BAA4B,EAAE,MAAM,gCAAgC,CAAC;AAC9E,OAAO,EAAqC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC1E,OAAO,EAAc,KAAK,UAAU,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAC3E,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,sBAAsB,CAAC;AAoBzE,MAAM,WAAW,gBAAgB;IAC/B;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,4BAA4B,CAAC,YAAY,CAAC,CAAC;IACxD;;;;;OAKG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;QAChB,KAAK,CAAC,EAAE,UAAU,CAAC;QACnB,eAAe,CAAC,EAAE,4BAA4B,CAAC,iBAAiB,CAAC,CAAC;QAClE,WAAW,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC;KACzC,CAAC,CAAC;IACH;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;QACrB,eAAe,CAAC,EAAE,4BAA4B,CAAC,2BAA2B,CAAC,CAAC;QAC5E,WAAW,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC;KACzC,CAAC,CAAC;CACJ;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgDG;AACH,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,gBAAgB,+BAK3D;AAED,wBAAgB,+BAA+B,CAC7C,OAAO,EAAE,4BAA4B,EACrC,KAAK,EAAE,gBAAgB,GACtB,4BAA4B,CAqD9B"}
|
|
@@ -9,8 +9,61 @@ const StackHeaderLeftRight_1 = require("./StackHeaderLeftRight");
|
|
|
9
9
|
const StackHeaderSearchBar_1 = require("./StackHeaderSearchBar");
|
|
10
10
|
const StackHeaderTitle_1 = require("./StackHeaderTitle");
|
|
11
11
|
const children_1 = require("../../utils/children");
|
|
12
|
+
const Screen_1 = require("../../views/Screen");
|
|
13
|
+
/**
|
|
14
|
+
* The component used to configure the whole stack header.
|
|
15
|
+
*
|
|
16
|
+
* When used inside a screen, it allows you to customize the header dynamically by composing
|
|
17
|
+
* header subcomponents (title, left/right areas, back button, search bar, etc.).
|
|
18
|
+
*
|
|
19
|
+
* ```tsx
|
|
20
|
+
* import { Stack } from 'expo-router';
|
|
21
|
+
*
|
|
22
|
+
* export default function Page() {
|
|
23
|
+
* return (
|
|
24
|
+
* <>
|
|
25
|
+
* <Stack.Header>
|
|
26
|
+
* <Stack.Header.Title>Page title</Stack.Header.Title>
|
|
27
|
+
* <Stack.Header.Left>
|
|
28
|
+
* <Stack.Header.Button onPress={() => alert('Left pressed')} />
|
|
29
|
+
* </Stack.Header.Left>
|
|
30
|
+
* <Stack.Header.Right>
|
|
31
|
+
* <Stack.Header.Button onPress={() => alert('Right pressed')} />
|
|
32
|
+
* </Stack.Header.Right>
|
|
33
|
+
* </Stack.Header>
|
|
34
|
+
* <ScreenContent />
|
|
35
|
+
* </>
|
|
36
|
+
* );
|
|
37
|
+
* }
|
|
38
|
+
* ```
|
|
39
|
+
*
|
|
40
|
+
* When used inside a layout, it needs to be wrapped in `Stack.Screen` to take effect.
|
|
41
|
+
*
|
|
42
|
+
* Example (inside a layout):
|
|
43
|
+
* ```tsx
|
|
44
|
+
* import { Stack } from 'expo-router';
|
|
45
|
+
*
|
|
46
|
+
* export default function Layout() {
|
|
47
|
+
* return (
|
|
48
|
+
* <Stack>
|
|
49
|
+
* <Stack.Screen name="index">
|
|
50
|
+
* <Stack.Header>
|
|
51
|
+
* <Stack.Header.Title>Layout title</Stack.Header.Title>
|
|
52
|
+
* <Stack.Header.Right>
|
|
53
|
+
* <Stack.Header.Button onPress={() => alert('Right pressed')} />
|
|
54
|
+
* </Stack.Header.Right>
|
|
55
|
+
* </Stack.Header>
|
|
56
|
+
* </Stack.Screen>
|
|
57
|
+
* </Stack>
|
|
58
|
+
* );
|
|
59
|
+
* }
|
|
60
|
+
* ```
|
|
61
|
+
*/
|
|
12
62
|
function StackHeaderComponent(props) {
|
|
13
|
-
|
|
63
|
+
// This component will only render when used inside a page
|
|
64
|
+
// but only if it is not wrapped in Stack.Screen
|
|
65
|
+
const updatedOptions = (0, react_1.useMemo)(() => appendStackHeaderPropsToOptions({}, props), [props]);
|
|
66
|
+
return <Screen_1.Screen options={updatedOptions}/>;
|
|
14
67
|
}
|
|
15
68
|
function appendStackHeaderPropsToOptions(options, props) {
|
|
16
69
|
const flattenedStyle = react_native_1.StyleSheet.flatten(props.style);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StackHeaderComponent.js","sourceRoot":"","sources":["../../../src/layouts/stack-utils/StackHeaderComponent.tsx"],"names":[],"mappings":";;
|
|
1
|
+
{"version":3,"file":"StackHeaderComponent.js","sourceRoot":"","sources":["../../../src/layouts/stack-utils/StackHeaderComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["import { NativeStackNavigationOptions } from '@react-navigation/native-stack';\nimport { Children, isValidElement, useMemo, type ReactNode } from 'react';\nimport { StyleSheet, type ColorValue, type StyleProp } from 'react-native';\nimport type { ScreenStackHeaderConfigProps } from 'react-native-screens';\n\nimport {\n appendStackHeaderBackButtonPropsToOptions,\n StackHeaderBackButton,\n} from './StackHeaderBackButton';\nimport {\n appendStackHeaderLeftPropsToOptions,\n appendStackHeaderRightPropsToOptions,\n StackHeaderLeft,\n StackHeaderRight,\n} from './StackHeaderLeftRight';\nimport {\n appendStackHeaderSearchBarPropsToOptions,\n StackHeaderSearchBar,\n} from './StackHeaderSearchBar';\nimport { appendStackHeaderTitlePropsToOptions, StackHeaderTitle } from './StackHeaderTitle';\nimport { isChildOfType } from '../../utils/children';\nimport { Screen } from '../../views/Screen';\n\nexport interface StackHeaderProps {\n /**\n * Child elements to compose the header. Can include Stack.Header.Title, Stack.Header.Left,\n * Stack.Header.Right, Stack.Header.BackButton, and Stack.Header.SearchBar components.\n */\n children?: ReactNode;\n /**\n * Whether to hide the header completely. When set to `true`, the header will not be rendered.\n *\n * @default false\n */\n hidden?: boolean;\n /**\n * When `true`, renders children as a custom header component, replacing the default header entirely.\n * Use this to implement fully custom header layouts.\n *\n * @default false\n */\n asChild?: boolean;\n /**\n * The blur effect to apply to the header background on iOS.\n * Common values include 'regular', 'prominent', 'systemMaterial', etc.\n *\n * @platform ios\n */\n blurEffect?: ScreenStackHeaderConfigProps['blurEffect'];\n /**\n * Style properties for the standard-sized header.\n * - `color`: Tint color for header elements (similar to tintColor in React Navigation)\n * - `backgroundColor`: Background color of the header\n * - `shadowColor`: Set to 'transparent' to hide the header shadow/border\n */\n style?: StyleProp<{\n color?: ColorValue; // tintColor from ReactNavigation\n backgroundColor?: ScreenStackHeaderConfigProps['backgroundColor'];\n shadowColor?: undefined | 'transparent';\n }>;\n /**\n * Style properties for the large title header (iOS).\n * - `backgroundColor`: Background color of the large title header\n * - `shadowColor`: Set to 'transparent' to hide the large title shadow/border\n *\n * @platform ios\n */\n largeStyle?: StyleProp<{\n backgroundColor?: ScreenStackHeaderConfigProps['largeTitleBackgroundColor'];\n shadowColor?: undefined | 'transparent';\n }>;\n}\n\n/**\n * The component used to configure the whole stack header.\n *\n * When used inside a screen, it allows you to customize the header dynamically by composing\n * header subcomponents (title, left/right areas, back button, search bar, etc.).\n *\n * ```tsx\n * import { Stack } from 'expo-router';\n *\n * export default function Page() {\n * return (\n * <>\n * <Stack.Header>\n * <Stack.Header.Title>Page title</Stack.Header.Title>\n * <Stack.Header.Left>\n * <Stack.Header.Button onPress={() => alert('Left pressed')} />\n * </Stack.Header.Left>\n * <Stack.Header.Right>\n * <Stack.Header.Button onPress={() => alert('Right pressed')} />\n * </Stack.Header.Right>\n * </Stack.Header>\n * <ScreenContent />\n * </>\n * );\n * }\n * ```\n *\n * When used inside a layout, it needs to be wrapped in `Stack.Screen` to take effect.\n *\n * Example (inside a layout):\n * ```tsx\n * import { Stack } from 'expo-router';\n *\n * export default function Layout() {\n * return (\n * <Stack>\n * <Stack.Screen name=\"index\">\n * <Stack.Header>\n * <Stack.Header.Title>Layout title</Stack.Header.Title>\n * <Stack.Header.Right>\n * <Stack.Header.Button onPress={() => alert('Right pressed')} />\n * </Stack.Header.Right>\n * </Stack.Header>\n * </Stack.Screen>\n * </Stack>\n * );\n * }\n * ```\n */\nexport function StackHeaderComponent(props: StackHeaderProps) {\n // This component will only render when used inside a page\n // but only if it is not wrapped in Stack.Screen\n const updatedOptions = useMemo(() => appendStackHeaderPropsToOptions({}, props), [props]);\n return <Screen options={updatedOptions} />;\n}\n\nexport function appendStackHeaderPropsToOptions(\n options: NativeStackNavigationOptions,\n props: StackHeaderProps\n): NativeStackNavigationOptions {\n const flattenedStyle = StyleSheet.flatten(props.style);\n const flattenedLargeStyle = StyleSheet.flatten(props.largeStyle);\n\n if (props.hidden) {\n return { ...options, headerShown: false };\n }\n\n if (props.asChild) {\n return { ...options, header: () => props.children };\n }\n\n let updatedOptions: NativeStackNavigationOptions = {\n ...options,\n headerShown: !props.hidden,\n headerBlurEffect: props.blurEffect,\n headerStyle: {\n backgroundColor: flattenedStyle?.backgroundColor as string | undefined,\n },\n headerLargeStyle: {\n backgroundColor: flattenedLargeStyle?.backgroundColor as string | undefined,\n },\n headerShadowVisible: flattenedStyle?.shadowColor !== 'transparent',\n headerLargeTitleShadowVisible: flattenedLargeStyle?.shadowColor !== 'transparent',\n };\n\n function appendChildOptions(child: React.ReactElement, options: NativeStackNavigationOptions) {\n let updatedOptions = options;\n if (isChildOfType(child, StackHeaderTitle)) {\n updatedOptions = appendStackHeaderTitlePropsToOptions(updatedOptions, child.props);\n } else if (isChildOfType(child, StackHeaderLeft)) {\n updatedOptions = appendStackHeaderLeftPropsToOptions(updatedOptions, child.props);\n } else if (isChildOfType(child, StackHeaderRight)) {\n updatedOptions = appendStackHeaderRightPropsToOptions(updatedOptions, child.props);\n } else if (isChildOfType(child, StackHeaderBackButton)) {\n updatedOptions = appendStackHeaderBackButtonPropsToOptions(updatedOptions, child.props);\n } else if (isChildOfType(child, StackHeaderSearchBar)) {\n updatedOptions = appendStackHeaderSearchBarPropsToOptions(updatedOptions, child.props);\n } else {\n console.warn(\n `Warning: Unknown child element passed to Stack.Header: ${(child.type as { name: string }).name ?? child.type}`\n );\n }\n return updatedOptions;\n }\n\n Children.forEach(props.children, (child) => {\n if (isValidElement(child)) {\n updatedOptions = appendChildOptions(child, updatedOptions);\n }\n });\n\n return updatedOptions;\n}\n"]}
|