@react-navigation/elements 2.0.0-alpha.8 → 2.0.0-rc.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/lib/commonjs/Background.js +6 -7
- package/lib/commonjs/Background.js.map +1 -1
- package/lib/commonjs/Button.js +18 -20
- package/lib/commonjs/Button.js.map +1 -1
- package/lib/commonjs/Header/Header.js +16 -14
- package/lib/commonjs/Header/Header.js.map +1 -1
- package/lib/commonjs/Header/HeaderBackButton.js +41 -35
- package/lib/commonjs/Header/HeaderBackButton.js.map +1 -1
- package/lib/commonjs/Header/HeaderBackContext.js.map +1 -1
- package/lib/commonjs/Header/HeaderBackground.js +6 -7
- package/lib/commonjs/Header/HeaderBackground.js.map +1 -1
- package/lib/commonjs/Header/HeaderButton.js +15 -14
- package/lib/commonjs/Header/HeaderButton.js.map +1 -1
- package/lib/commonjs/Header/HeaderHeightContext.js.map +1 -1
- package/lib/commonjs/Header/HeaderShownContext.js.map +1 -1
- package/lib/commonjs/Header/HeaderTitle.js +7 -8
- package/lib/commonjs/Header/HeaderTitle.js.map +1 -1
- package/lib/commonjs/Header/getDefaultHeaderHeight.js +0 -2
- package/lib/commonjs/Header/getDefaultHeaderHeight.js.map +1 -1
- package/lib/commonjs/Header/getHeaderTitle.js.map +1 -1
- package/lib/commonjs/Header/useHeaderHeight.js +1 -1
- package/lib/commonjs/Header/useHeaderHeight.js.map +1 -1
- package/lib/commonjs/Label/Label.js +7 -8
- package/lib/commonjs/Label/Label.js.map +1 -1
- package/lib/commonjs/Label/getLabel.js.map +1 -1
- package/lib/commonjs/MaskedView.android.js.map +1 -1
- package/lib/commonjs/MaskedView.ios.js.map +1 -1
- package/lib/commonjs/MaskedView.js +3 -4
- package/lib/commonjs/MaskedView.js.map +1 -1
- package/lib/commonjs/MaskedViewNative.js +5 -6
- package/lib/commonjs/MaskedViewNative.js.map +1 -1
- package/lib/commonjs/MissingIcon.js +9 -7
- package/lib/commonjs/MissingIcon.js.map +1 -1
- package/lib/commonjs/PlatformPressable.js +15 -14
- package/lib/commonjs/PlatformPressable.js.map +1 -1
- package/lib/commonjs/ResourceSavingView.js +8 -9
- package/lib/commonjs/ResourceSavingView.js.map +1 -1
- package/lib/commonjs/SafeAreaProviderCompat.js +70 -6
- package/lib/commonjs/SafeAreaProviderCompat.js.map +1 -1
- package/lib/commonjs/Screen.js +3 -3
- package/lib/commonjs/Screen.js.map +1 -1
- package/lib/commonjs/Text.js +7 -7
- package/lib/commonjs/Text.js.map +1 -1
- package/lib/commonjs/getDefaultSidebarWidth.js +13 -16
- package/lib/commonjs/getDefaultSidebarWidth.js.map +1 -1
- package/lib/commonjs/getNamedContext.js +4 -4
- package/lib/commonjs/getNamedContext.js.map +1 -1
- package/lib/commonjs/index.js.map +1 -1
- package/lib/commonjs/types.js.map +1 -1
- package/lib/module/Background.js +5 -6
- package/lib/module/Background.js.map +1 -1
- package/lib/module/Button.js +16 -18
- package/lib/module/Button.js.map +1 -1
- package/lib/module/Header/Header.js +16 -13
- package/lib/module/Header/Header.js.map +1 -1
- package/lib/module/Header/HeaderBackButton.js +40 -34
- package/lib/module/Header/HeaderBackButton.js.map +1 -1
- package/lib/module/Header/HeaderBackContext.js.map +1 -1
- package/lib/module/Header/HeaderBackground.js +5 -6
- package/lib/module/Header/HeaderBackground.js.map +1 -1
- package/lib/module/Header/HeaderButton.js +14 -13
- package/lib/module/Header/HeaderButton.js.map +1 -1
- package/lib/module/Header/HeaderHeightContext.js.map +1 -1
- package/lib/module/Header/HeaderShownContext.js.map +1 -1
- package/lib/module/Header/HeaderTitle.js +6 -7
- package/lib/module/Header/HeaderTitle.js.map +1 -1
- package/lib/module/Header/getDefaultHeaderHeight.js +0 -2
- package/lib/module/Header/getDefaultHeaderHeight.js.map +1 -1
- package/lib/module/Header/getHeaderTitle.js.map +1 -1
- package/lib/module/Header/useHeaderHeight.js.map +1 -1
- package/lib/module/Label/Label.js +6 -7
- package/lib/module/Label/Label.js.map +1 -1
- package/lib/module/Label/getLabel.js.map +1 -1
- package/lib/module/MaskedView.android.js.map +1 -1
- package/lib/module/MaskedView.ios.js.map +1 -1
- package/lib/module/MaskedView.js +3 -4
- package/lib/module/MaskedView.js.map +1 -1
- package/lib/module/MaskedViewNative.js +4 -5
- package/lib/module/MaskedViewNative.js.map +1 -1
- package/lib/module/MissingIcon.js +7 -6
- package/lib/module/MissingIcon.js.map +1 -1
- package/lib/module/PlatformPressable.js +14 -13
- package/lib/module/PlatformPressable.js.map +1 -1
- package/lib/module/ResourceSavingView.js +7 -8
- package/lib/module/ResourceSavingView.js.map +1 -1
- package/lib/module/SafeAreaProviderCompat.js +70 -6
- package/lib/module/SafeAreaProviderCompat.js.map +1 -1
- package/lib/module/Screen.js +2 -2
- package/lib/module/Screen.js.map +1 -1
- package/lib/module/Text.js +7 -6
- package/lib/module/Text.js.map +1 -1
- package/lib/module/getDefaultSidebarWidth.js +13 -16
- package/lib/module/getDefaultSidebarWidth.js.map +1 -1
- package/lib/module/getNamedContext.js +3 -3
- package/lib/module/getNamedContext.js.map +1 -1
- package/lib/module/index.js.map +1 -1
- package/lib/module/types.js.map +1 -1
- package/lib/typescript/src/Header/Header.d.ts.map +1 -1
- package/lib/typescript/src/Header/HeaderBackButton.d.ts.map +1 -1
- package/lib/typescript/src/Header/HeaderBackContext.d.ts +0 -1
- package/lib/typescript/src/Header/HeaderBackContext.d.ts.map +1 -1
- package/lib/typescript/src/Header/HeaderHeightContext.d.ts +0 -1
- package/lib/typescript/src/Header/HeaderHeightContext.d.ts.map +1 -1
- package/lib/typescript/src/Header/HeaderShownContext.d.ts +0 -1
- package/lib/typescript/src/Header/HeaderShownContext.d.ts.map +1 -1
- package/lib/typescript/src/Header/getDefaultHeaderHeight.d.ts.map +1 -1
- package/lib/typescript/src/MissingIcon.d.ts.map +1 -1
- package/lib/typescript/src/PlatformPressable.d.ts.map +1 -1
- package/lib/typescript/src/SafeAreaProviderCompat.d.ts +2 -1
- package/lib/typescript/src/SafeAreaProviderCompat.d.ts.map +1 -1
- package/lib/typescript/src/Text.d.ts.map +1 -1
- package/lib/typescript/src/getDefaultSidebarWidth.d.ts +1 -2
- package/lib/typescript/src/getDefaultSidebarWidth.d.ts.map +1 -1
- package/lib/typescript/src/getNamedContext.d.ts.map +1 -1
- package/lib/typescript/src/types.d.ts +1 -1
- package/lib/typescript/src/types.d.ts.map +1 -1
- package/package.json +8 -8
- package/src/Header/Header.tsx +26 -13
- package/src/Header/HeaderBackButton.tsx +17 -15
- package/src/Header/HeaderButton.tsx +2 -0
- package/src/Header/getDefaultHeaderHeight.tsx +0 -2
- package/src/MissingIcon.tsx +2 -0
- package/src/PlatformPressable.tsx +7 -1
- package/src/SafeAreaProviderCompat.tsx +75 -0
- package/src/Screen.tsx +2 -2
- package/src/Text.tsx +2 -0
- package/src/getDefaultSidebarWidth.tsx +11 -18
- package/src/getNamedContext.tsx +4 -3
- package/src/types.tsx +1 -0
- package/lib/commonjs/assets/back-icon@1.5x.android.png +0 -0
- package/lib/commonjs/assets/back-icon@1.5x.ios.png +0 -0
- package/lib/module/assets/back-icon@1.5x.android.png +0 -0
- package/lib/module/assets/back-icon@1.5x.ios.png +0 -0
- package/src/assets/back-icon@1.5x.android.png +0 -0
- package/src/assets/back-icon@1.5x.ios.png +0 -0
package/lib/module/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["Background","Button","getDefaultSidebarWidth","getDefaultHeaderHeight","getHeaderTitle","Header","HeaderBackButton","HeaderBackContext","HeaderBackground","HeaderButton","HeaderHeightContext","HeaderShownContext","HeaderTitle","useHeaderHeight","getLabel","Label","MissingIcon","PlatformPressable","ResourceSavingView","SafeAreaProviderCompat","Screen","Text","Assets","require"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":"AAAA,SAASA,UAAU,QAAQ,cAAc;AACzC,SAASC,MAAM,QAAQ,UAAU;AACjC,SAASC,sBAAsB,QAAQ,0BAA0B;AACjE,SAASC,sBAAsB,QAAQ,iCAAiC;AACxE,SAASC,cAAc,QAAQ,yBAAyB;AACxD,SAASC,MAAM,QAAQ,iBAAiB;AACxC,SAASC,gBAAgB,QAAQ,2BAA2B;AAC5D,SAASC,iBAAiB,QAAQ,4BAA4B;AAC9D,SAASC,gBAAgB,QAAQ,2BAA2B;AAC5D,SAASC,YAAY,QAAQ,uBAAuB;AACpD,SAASC,mBAAmB,QAAQ,8BAA8B;AAClE,SAASC,kBAAkB,QAAQ,6BAA6B;AAChE,SAASC,WAAW,QAAQ,sBAAsB;AAClD,SAASC,eAAe,QAAQ,0BAA0B;AAC1D,SAASC,QAAQ,QAAQ,kBAAkB;AAC3C,SAASC,KAAK,QAAQ,eAAe;AACrC,SAASC,WAAW,QAAQ,eAAe;AAC3C,SAASC,iBAAiB,QAAQ,qBAAqB;AACvD,SAASC,kBAAkB,QAAQ,sBAAsB;AACzD,SAASC,sBAAsB,QAAQ,0BAA0B;AACjE,SAASC,MAAM,QAAQ,UAAU;AACjC,SAASC,IAAI,QAAQ,QAAQ;AAE7B,OAAO,MAAMC,MAAM,GAAG;AACpB;AACAC,OAAO,CAAC,wBAAwB,CAAC;AACjC;AACAA,OAAO,CAAC,6BAA6B,CAAC,CACvC;AAED,cAAc,SAAS"}
|
|
1
|
+
{"version":3,"names":["Background","Button","getDefaultSidebarWidth","getDefaultHeaderHeight","getHeaderTitle","Header","HeaderBackButton","HeaderBackContext","HeaderBackground","HeaderButton","HeaderHeightContext","HeaderShownContext","HeaderTitle","useHeaderHeight","getLabel","Label","MissingIcon","PlatformPressable","ResourceSavingView","SafeAreaProviderCompat","Screen","Text","Assets","require"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":"AAAA,SAASA,UAAU,QAAQ,cAAc;AACzC,SAASC,MAAM,QAAQ,UAAU;AACjC,SAASC,sBAAsB,QAAQ,0BAA0B;AACjE,SAASC,sBAAsB,QAAQ,iCAAiC;AACxE,SAASC,cAAc,QAAQ,yBAAyB;AACxD,SAASC,MAAM,QAAQ,iBAAiB;AACxC,SAASC,gBAAgB,QAAQ,2BAA2B;AAC5D,SAASC,iBAAiB,QAAQ,4BAA4B;AAC9D,SAASC,gBAAgB,QAAQ,2BAA2B;AAC5D,SAASC,YAAY,QAAQ,uBAAuB;AACpD,SAASC,mBAAmB,QAAQ,8BAA8B;AAClE,SAASC,kBAAkB,QAAQ,6BAA6B;AAChE,SAASC,WAAW,QAAQ,sBAAsB;AAClD,SAASC,eAAe,QAAQ,0BAA0B;AAC1D,SAASC,QAAQ,QAAQ,kBAAkB;AAC3C,SAASC,KAAK,QAAQ,eAAe;AACrC,SAASC,WAAW,QAAQ,eAAe;AAC3C,SAASC,iBAAiB,QAAQ,qBAAqB;AACvD,SAASC,kBAAkB,QAAQ,sBAAsB;AACzD,SAASC,sBAAsB,QAAQ,0BAA0B;AACjE,SAASC,MAAM,QAAQ,UAAU;AACjC,SAASC,IAAI,QAAQ,QAAQ;AAE7B,OAAO,MAAMC,MAAM,GAAG;AACpB;AACAC,OAAO,CAAC,wBAAwB,CAAC;AACjC;AACAA,OAAO,CAAC,6BAA6B,CAAC,CACvC;AAED,cAAc,SAAS","ignoreList":[]}
|
package/lib/module/types.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":[],"sourceRoot":"../../src","sources":["types.tsx"],"mappings":""}
|
|
1
|
+
{"version":3,"names":[],"sourceRoot":"../../src","sources":["types.tsx"],"mappings":"","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../../src/Header/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAa/B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../../src/Header/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAa/B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAStD,KAAK,KAAK,GAAG,aAAa,GAAG;IAC3B;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAkBF,wBAAgB,MAAM,CAAC,KAAK,EAAE,KAAK,qBA6PlC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HeaderBackButton.d.ts","sourceRoot":"","sources":["../../../../src/Header/HeaderBackButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AAGtD,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,gBAAgB,EAChB,SAAS,EACT,KAAK,EACL,UAAU,EACV,YAAoC,EACpC,aAAa,EACb,OAAO,EACP,UAAU,EACV,YAAY,EACZ,YAAY,EACZ,SAAS,EAAE,eAAe,EAC1B,WAAW,EACX,cAAuB,EACvB,kBAA6E,EAC7E,MAAM,EACN,KAAK,EACL,IAAI,GACL,EAAE,qBAAqB,
|
|
1
|
+
{"version":3,"file":"HeaderBackButton.d.ts","sourceRoot":"","sources":["../../../../src/Header/HeaderBackButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AAGtD,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,gBAAgB,EAChB,SAAS,EACT,KAAK,EACL,UAAU,EACV,YAAoC,EACpC,aAAa,EACb,OAAO,EACP,UAAU,EACV,YAAY,EACZ,YAAY,EACZ,SAAS,EAAE,eAAe,EAC1B,WAAW,EACX,cAAuB,EACvB,kBAA6E,EAC7E,MAAM,EACN,KAAK,EACL,IAAI,GACL,EAAE,qBAAqB,qBA2IvB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HeaderBackContext.d.ts","sourceRoot":"","sources":["../../../../src/Header/HeaderBackContext.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"HeaderBackContext.d.ts","sourceRoot":"","sources":["../../../../src/Header/HeaderBackContext.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB;WACnB,MAAM,GAAG,SAAS;UAAQ,MAAM,GAAG,SAAS;cACtB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HeaderHeightContext.d.ts","sourceRoot":"","sources":["../../../../src/Header/HeaderHeightContext.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"HeaderHeightContext.d.ts","sourceRoot":"","sources":["../../../../src/Header/HeaderHeightContext.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,mBAAmB,6CAG/B,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HeaderShownContext.d.ts","sourceRoot":"","sources":["../../../../src/Header/HeaderShownContext.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"HeaderShownContext.d.ts","sourceRoot":"","sources":["../../../../src/Header/HeaderShownContext.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,kBAAkB,kCAA+C,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"getDefaultHeaderHeight.d.ts","sourceRoot":"","sources":["../../../../src/Header/getDefaultHeaderHeight.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAEvC,wBAAgB,sBAAsB,CACpC,MAAM,EAAE,MAAM,EACd,iBAAiB,EAAE,OAAO,EAC1B,QAAQ,EAAE,MAAM,GACf,MAAM,
|
|
1
|
+
{"version":3,"file":"getDefaultHeaderHeight.d.ts","sourceRoot":"","sources":["../../../../src/Header/getDefaultHeaderHeight.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAEvC,wBAAgB,sBAAsB,CACpC,MAAM,EAAE,MAAM,EACd,iBAAiB,EAAE,OAAO,EAC1B,QAAQ,EAAE,MAAM,GACf,MAAM,CAkCR"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MissingIcon.d.ts","sourceRoot":"","sources":["../../../src/MissingIcon.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"MissingIcon.d.ts","sourceRoot":"","sources":["../../../src/MissingIcon.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,SAAS,EAAoB,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAEhF,KAAK,KAAK,GAAG;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,CAAC;AAEF,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,KAAK,qBAExD"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PlatformPressable.d.ts","sourceRoot":"","sources":["../../../src/PlatformPressable.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACL,QAAQ,EAKR,KAAK,cAAc,EACnB,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAEtB,MAAM,MAAM,KAAK,GAAG,IAAI,CAAC,cAAc,EAAE,OAAO,CAAC,GAAG;IAClD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,QAAQ,CAAC,iBAAiB,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC;IACzD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAQF;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,QAAQ,EACR,OAAO,EACP,SAAS,EACT,UAAU,EACV,cAAc,EACd,UAAU,EACV,YAAkB,EAClB,KAAK,EACL,GAAG,IAAI,EACR,EAAE,KAAK,
|
|
1
|
+
{"version":3,"file":"PlatformPressable.d.ts","sourceRoot":"","sources":["../../../src/PlatformPressable.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACL,QAAQ,EAKR,KAAK,cAAc,EACnB,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAEtB,MAAM,MAAM,KAAK,GAAG,IAAI,CAAC,cAAc,EAAE,OAAO,CAAC,GAAG;IAClD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,QAAQ,CAAC,iBAAiB,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC;IACzD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAQF;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,QAAQ,EACR,OAAO,EACP,SAAS,EACT,UAAU,EACV,cAAc,EACd,UAAU,EACV,YAAkB,EAClB,KAAK,EACL,GAAG,IAAI,EACR,EAAE,KAAK,qBA+EP"}
|
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { type StyleProp, type ViewStyle } from 'react-native';
|
|
3
|
+
import { type Metrics } from 'react-native-safe-area-context';
|
|
3
4
|
type Props = {
|
|
4
5
|
children: React.ReactNode;
|
|
5
6
|
style?: StyleProp<ViewStyle>;
|
|
6
7
|
};
|
|
7
8
|
export declare function SafeAreaProviderCompat({ children, style }: Props): React.JSX.Element;
|
|
8
9
|
export declare namespace SafeAreaProviderCompat {
|
|
9
|
-
var initialMetrics:
|
|
10
|
+
var initialMetrics: Metrics;
|
|
10
11
|
}
|
|
11
12
|
export {};
|
|
12
13
|
//# sourceMappingURL=SafeAreaProviderCompat.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SafeAreaProviderCompat.d.ts","sourceRoot":"","sources":["../../../src/SafeAreaProviderCompat.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAGL,KAAK,SAAS,EAGd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"SafeAreaProviderCompat.d.ts","sourceRoot":"","sources":["../../../src/SafeAreaProviderCompat.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAGL,KAAK,SAAS,EAGd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AACtB,OAAO,EAEL,KAAK,OAAO,EAIb,MAAM,gCAAgC,CAAC;AAExC,KAAK,KAAK,GAAG;IACX,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,CAAC;AAeF,wBAAgB,sBAAsB,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,KAAK,qBAuBhE;yBAvBe,sBAAsB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../src/Text.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../src/Text.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAsB,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAElE,wBAAgB,IAAI,CAAC,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,EAAE,SAAS,qBASjD"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"getDefaultSidebarWidth.d.ts","sourceRoot":"","sources":["../../../src/getDefaultSidebarWidth.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"getDefaultSidebarWidth.d.ts","sourceRoot":"","sources":["../../../src/getDefaultSidebarWidth.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,sBAAsB,cAAe;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,WAWlE,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"getNamedContext.d.ts","sourceRoot":"","sources":["../../../src/getNamedContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,CAAC,MAAM,CAAC;IAEb,IAAI,qCAAqC,EAAE,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC;CAC5E;
|
|
1
|
+
{"version":3,"file":"getNamedContext.d.ts","sourceRoot":"","sources":["../../../src/getNamedContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,CAAC,MAAM,CAAC;IAEb,IAAI,qCAAqC,EAAE,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC;CAC5E;AAMD,wBAAgB,eAAe,CAAC,CAAC,EAC/B,IAAI,EAAE,MAAM,EACZ,YAAY,EAAE,CAAC,GACd,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAalB"}
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
1
|
import type { Animated, LayoutChangeEvent, StyleProp, TextStyle, ViewStyle } from 'react-native';
|
|
3
2
|
export type Layout = {
|
|
4
3
|
width: number;
|
|
@@ -38,6 +37,7 @@ export type HeaderOptions = {
|
|
|
38
37
|
pressColor?: string;
|
|
39
38
|
pressOpacity?: number;
|
|
40
39
|
labelVisible?: boolean;
|
|
40
|
+
href?: undefined;
|
|
41
41
|
}) => React.ReactNode;
|
|
42
42
|
/**
|
|
43
43
|
* Whether a label is visible in the left button. Used to add extra padding.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@react-navigation/elements",
|
|
3
3
|
"description": "UI Components for React Navigation",
|
|
4
|
-
"version": "2.0.0-
|
|
4
|
+
"version": "2.0.0-rc.0",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react-native",
|
|
7
7
|
"react-navigation",
|
|
@@ -40,18 +40,18 @@
|
|
|
40
40
|
"color": "^4.2.3"
|
|
41
41
|
},
|
|
42
42
|
"devDependencies": {
|
|
43
|
-
"@react-native-masked-view/masked-view": "0.3.
|
|
44
|
-
"@react-navigation/native": "^7.0.0-
|
|
43
|
+
"@react-native-masked-view/masked-view": "0.3.1",
|
|
44
|
+
"@react-navigation/native": "^7.0.0-rc.0",
|
|
45
45
|
"@testing-library/react-native": "^12.4.3",
|
|
46
|
-
"@types/react": "~18.2.
|
|
46
|
+
"@types/react": "~18.2.79",
|
|
47
47
|
"del-cli": "^5.1.0",
|
|
48
48
|
"react": "18.2.0",
|
|
49
|
-
"react-native": "0.
|
|
49
|
+
"react-native": "0.74.2",
|
|
50
50
|
"react-native-builder-bob": "^0.23.2",
|
|
51
|
-
"typescript": "^5.
|
|
51
|
+
"typescript": "^5.5.2"
|
|
52
52
|
},
|
|
53
53
|
"peerDependencies": {
|
|
54
|
-
"@react-navigation/native": "^7.0.0-
|
|
54
|
+
"@react-navigation/native": "^7.0.0-rc.0",
|
|
55
55
|
"react": ">= 18.2.0",
|
|
56
56
|
"react-native": ">= 0.72.0",
|
|
57
57
|
"react-native-safe-area-context": ">= 4.0.0"
|
|
@@ -70,5 +70,5 @@
|
|
|
70
70
|
]
|
|
71
71
|
]
|
|
72
72
|
},
|
|
73
|
-
"gitHead": "
|
|
73
|
+
"gitHead": "2a1d67089eea2a3d87e38a870ccee35a79c55d7d"
|
|
74
74
|
}
|
package/src/Header/Header.tsx
CHANGED
|
@@ -17,6 +17,9 @@ import { HeaderBackground } from './HeaderBackground';
|
|
|
17
17
|
import { HeaderShownContext } from './HeaderShownContext';
|
|
18
18
|
import { HeaderTitle } from './HeaderTitle';
|
|
19
19
|
|
|
20
|
+
// Width of the screen in split layout on portrait mode on iPad Mini
|
|
21
|
+
const IPAD_MINI_MEDIUM_WIDTH = 414;
|
|
22
|
+
|
|
20
23
|
type Props = HeaderOptions & {
|
|
21
24
|
/**
|
|
22
25
|
* Whether the header is in a modal
|
|
@@ -54,10 +57,6 @@ export function Header(props: Props) {
|
|
|
54
57
|
|
|
55
58
|
const isParentHeaderShown = React.useContext(HeaderShownContext);
|
|
56
59
|
|
|
57
|
-
// On models with Dynamic Island the status bar height is smaller than the safe area top inset.
|
|
58
|
-
const hasDynamicIsland = Platform.OS === 'ios' && insets.top > 50;
|
|
59
|
-
const statusBarHeight = hasDynamicIsland ? insets.top - 5 : insets.top;
|
|
60
|
-
|
|
61
60
|
const {
|
|
62
61
|
layout = frame,
|
|
63
62
|
modal = false,
|
|
@@ -83,7 +82,7 @@ export function Header(props: Props) {
|
|
|
83
82
|
headerShadowVisible,
|
|
84
83
|
headerPressColor,
|
|
85
84
|
headerPressOpacity,
|
|
86
|
-
headerStatusBarHeight = isParentHeaderShown ? 0 :
|
|
85
|
+
headerStatusBarHeight = isParentHeaderShown ? 0 : insets.top,
|
|
87
86
|
} = props;
|
|
88
87
|
|
|
89
88
|
const defaultHeight = getDefaultHeaderHeight(
|
|
@@ -235,11 +234,19 @@ export function Header(props: Props) {
|
|
|
235
234
|
)}
|
|
236
235
|
</Animated.View>
|
|
237
236
|
<View pointerEvents="none" style={{ height: headerStatusBarHeight }} />
|
|
238
|
-
<View
|
|
237
|
+
<View
|
|
238
|
+
pointerEvents="box-none"
|
|
239
|
+
style={[
|
|
240
|
+
styles.content,
|
|
241
|
+
Platform.OS === 'ios' && frame.width >= IPAD_MINI_MEDIUM_WIDTH
|
|
242
|
+
? styles.large
|
|
243
|
+
: null,
|
|
244
|
+
]}
|
|
245
|
+
>
|
|
239
246
|
<Animated.View
|
|
240
247
|
pointerEvents="box-none"
|
|
241
248
|
style={[
|
|
242
|
-
styles.
|
|
249
|
+
styles.start,
|
|
243
250
|
headerTitleAlign === 'center' && styles.expand,
|
|
244
251
|
{ marginStart: insets.left },
|
|
245
252
|
leftContainerStyle,
|
|
@@ -261,14 +268,18 @@ export function Header(props: Props) {
|
|
|
261
268
|
? 80
|
|
262
269
|
: 32
|
|
263
270
|
: 16) +
|
|
271
|
+
(rightButton ? 16 : 0) +
|
|
264
272
|
Math.max(insets.left, insets.right)) *
|
|
265
273
|
2
|
|
266
274
|
: layout.width -
|
|
267
|
-
((leftButton ?
|
|
268
|
-
(rightButton ?
|
|
275
|
+
((leftButton ? 52 : 16) +
|
|
276
|
+
(rightButton ? 52 : 16) +
|
|
269
277
|
insets.left -
|
|
270
278
|
insets.right),
|
|
271
279
|
},
|
|
280
|
+
headerTitleAlign === 'left' && leftButton
|
|
281
|
+
? { marginStart: 4 }
|
|
282
|
+
: null,
|
|
272
283
|
titleContainerStyle,
|
|
273
284
|
]}
|
|
274
285
|
>
|
|
@@ -282,7 +293,7 @@ export function Header(props: Props) {
|
|
|
282
293
|
<Animated.View
|
|
283
294
|
pointerEvents="box-none"
|
|
284
295
|
style={[
|
|
285
|
-
styles.
|
|
296
|
+
styles.end,
|
|
286
297
|
styles.expand,
|
|
287
298
|
{ marginEnd: insets.right },
|
|
288
299
|
rightContainerStyle,
|
|
@@ -301,15 +312,17 @@ const styles = StyleSheet.create({
|
|
|
301
312
|
flexDirection: 'row',
|
|
302
313
|
alignItems: 'stretch',
|
|
303
314
|
},
|
|
315
|
+
large: {
|
|
316
|
+
marginHorizontal: 5,
|
|
317
|
+
},
|
|
304
318
|
title: {
|
|
305
|
-
marginHorizontal: 16,
|
|
306
319
|
justifyContent: 'center',
|
|
307
320
|
},
|
|
308
|
-
|
|
321
|
+
start: {
|
|
309
322
|
justifyContent: 'center',
|
|
310
323
|
alignItems: 'flex-start',
|
|
311
324
|
},
|
|
312
|
-
|
|
325
|
+
end: {
|
|
313
326
|
justifyContent: 'center',
|
|
314
327
|
alignItems: 'flex-end',
|
|
315
328
|
},
|
|
@@ -96,15 +96,7 @@ export function HeaderBackButton({
|
|
|
96
96
|
}
|
|
97
97
|
|
|
98
98
|
const labelElement = (
|
|
99
|
-
<View
|
|
100
|
-
style={
|
|
101
|
-
screenLayout
|
|
102
|
-
? // We make the button extend till the middle of the screen
|
|
103
|
-
// Otherwise it appears to cut off when translating
|
|
104
|
-
[styles.labelWrapper, { minWidth: screenLayout.width / 2 - 27 }]
|
|
105
|
-
: null
|
|
106
|
-
}
|
|
107
|
-
>
|
|
99
|
+
<View style={styles.labelWrapper}>
|
|
108
100
|
<Animated.Text
|
|
109
101
|
accessible={false}
|
|
110
102
|
onLayout={
|
|
@@ -135,7 +127,13 @@ export function HeaderBackButton({
|
|
|
135
127
|
return (
|
|
136
128
|
<MaskedView
|
|
137
129
|
maskElement={
|
|
138
|
-
<View
|
|
130
|
+
<View
|
|
131
|
+
style={[
|
|
132
|
+
styles.iconMaskContainer,
|
|
133
|
+
// Extend the mask to the center of the screen so that label isn't clipped during animation
|
|
134
|
+
screenLayout ? { minWidth: screenLayout.width / 2 - 27 } : null,
|
|
135
|
+
]}
|
|
136
|
+
>
|
|
139
137
|
<Image
|
|
140
138
|
source={require('../assets/back-icon-mask.png')}
|
|
141
139
|
resizeMode="contain"
|
|
@@ -198,14 +196,18 @@ const styles = StyleSheet.create({
|
|
|
198
196
|
// Otherwise it messes with the measurement of the label
|
|
199
197
|
flexDirection: 'row',
|
|
200
198
|
alignItems: 'flex-start',
|
|
199
|
+
...Platform.select({
|
|
200
|
+
ios: { marginEnd: 8 },
|
|
201
|
+
default: { marginEnd: 3 },
|
|
202
|
+
}),
|
|
201
203
|
},
|
|
202
204
|
icon: Platform.select({
|
|
203
205
|
ios: {
|
|
204
206
|
height: 21,
|
|
205
207
|
width: 13,
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
marginVertical:
|
|
208
|
+
marginStart: 8,
|
|
209
|
+
marginEnd: 22,
|
|
210
|
+
marginVertical: 8,
|
|
209
211
|
},
|
|
210
212
|
default: {
|
|
211
213
|
height: 24,
|
|
@@ -216,7 +218,7 @@ const styles = StyleSheet.create({
|
|
|
216
218
|
iconWithLabel:
|
|
217
219
|
Platform.OS === 'ios'
|
|
218
220
|
? {
|
|
219
|
-
|
|
221
|
+
marginEnd: 6,
|
|
220
222
|
}
|
|
221
223
|
: {},
|
|
222
224
|
iconMaskContainer: {
|
|
@@ -231,7 +233,7 @@ const styles = StyleSheet.create({
|
|
|
231
233
|
iconMask: {
|
|
232
234
|
height: 21,
|
|
233
235
|
width: 13,
|
|
234
|
-
|
|
236
|
+
marginStart: -14.5,
|
|
235
237
|
marginVertical: 12,
|
|
236
238
|
alignSelf: 'center',
|
|
237
239
|
},
|
package/src/MissingIcon.tsx
CHANGED
|
@@ -107,7 +107,13 @@ export function PlatformPressable({
|
|
|
107
107
|
}
|
|
108
108
|
: undefined
|
|
109
109
|
}
|
|
110
|
-
style={[
|
|
110
|
+
style={[
|
|
111
|
+
{
|
|
112
|
+
cursor: 'pointer', // Add hover effect on iPad and VisionOS
|
|
113
|
+
opacity: !ANDROID_SUPPORTS_RIPPLE ? opacity : 1,
|
|
114
|
+
},
|
|
115
|
+
style,
|
|
116
|
+
]}
|
|
111
117
|
{...rest}
|
|
112
118
|
/>
|
|
113
119
|
);
|
|
@@ -9,6 +9,8 @@ import {
|
|
|
9
9
|
} from 'react-native';
|
|
10
10
|
import {
|
|
11
11
|
initialWindowMetrics,
|
|
12
|
+
type Metrics,
|
|
13
|
+
SafeAreaFrameContext,
|
|
12
14
|
SafeAreaInsetsContext,
|
|
13
15
|
SafeAreaProvider,
|
|
14
16
|
} from 'react-native-safe-area-context';
|
|
@@ -41,6 +43,14 @@ export function SafeAreaProviderCompat({ children, style }: Props) {
|
|
|
41
43
|
return <View style={[styles.container, style]}>{children}</View>;
|
|
42
44
|
}
|
|
43
45
|
|
|
46
|
+
if (Platform.OS === 'web') {
|
|
47
|
+
children = (
|
|
48
|
+
<SafeAreaFrameProvider initialMetrics={initialMetrics}>
|
|
49
|
+
{children}
|
|
50
|
+
</SafeAreaFrameProvider>
|
|
51
|
+
);
|
|
52
|
+
}
|
|
53
|
+
|
|
44
54
|
return (
|
|
45
55
|
<SafeAreaProvider initialMetrics={initialMetrics} style={style}>
|
|
46
56
|
{children}
|
|
@@ -48,6 +58,71 @@ export function SafeAreaProviderCompat({ children, style }: Props) {
|
|
|
48
58
|
);
|
|
49
59
|
}
|
|
50
60
|
|
|
61
|
+
// FIXME: On the Web, the safe area frame value doesn't update on resize
|
|
62
|
+
// So we workaround this by measuring the frame on resize
|
|
63
|
+
const SafeAreaFrameProvider = ({
|
|
64
|
+
initialMetrics,
|
|
65
|
+
children,
|
|
66
|
+
}: {
|
|
67
|
+
initialMetrics: Metrics;
|
|
68
|
+
children: React.ReactNode;
|
|
69
|
+
}) => {
|
|
70
|
+
const element = React.useRef<HTMLDivElement>(null);
|
|
71
|
+
const [frame, setFrame] = React.useState(initialMetrics.frame);
|
|
72
|
+
|
|
73
|
+
React.useEffect(() => {
|
|
74
|
+
if (element.current == null) {
|
|
75
|
+
return;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
const rect = element.current.getBoundingClientRect();
|
|
79
|
+
|
|
80
|
+
setFrame({
|
|
81
|
+
x: rect.x,
|
|
82
|
+
y: rect.y,
|
|
83
|
+
width: rect.width,
|
|
84
|
+
height: rect.height,
|
|
85
|
+
});
|
|
86
|
+
|
|
87
|
+
let timeout: NodeJS.Timeout;
|
|
88
|
+
|
|
89
|
+
const observer = new ResizeObserver((entries) => {
|
|
90
|
+
const entry = entries[0];
|
|
91
|
+
|
|
92
|
+
if (entry) {
|
|
93
|
+
const { x, y, width, height } = entry.contentRect;
|
|
94
|
+
|
|
95
|
+
// Debounce the frame updates to avoid too many updates in a short time
|
|
96
|
+
clearTimeout(timeout);
|
|
97
|
+
timeout = setTimeout(() => {
|
|
98
|
+
setFrame({ x, y, width, height });
|
|
99
|
+
}, 100);
|
|
100
|
+
}
|
|
101
|
+
});
|
|
102
|
+
|
|
103
|
+
observer.observe(element.current);
|
|
104
|
+
|
|
105
|
+
return () => {
|
|
106
|
+
observer.disconnect();
|
|
107
|
+
clearTimeout(timeout);
|
|
108
|
+
};
|
|
109
|
+
}, []);
|
|
110
|
+
|
|
111
|
+
return (
|
|
112
|
+
<SafeAreaFrameContext.Provider value={frame}>
|
|
113
|
+
<div
|
|
114
|
+
ref={element}
|
|
115
|
+
style={{
|
|
116
|
+
...StyleSheet.absoluteFillObject,
|
|
117
|
+
pointerEvents: 'none',
|
|
118
|
+
visibility: 'hidden',
|
|
119
|
+
}}
|
|
120
|
+
/>
|
|
121
|
+
{children}
|
|
122
|
+
</SafeAreaFrameContext.Provider>
|
|
123
|
+
);
|
|
124
|
+
};
|
|
125
|
+
|
|
51
126
|
SafeAreaProviderCompat.initialMetrics = initialMetrics;
|
|
52
127
|
|
|
53
128
|
const styles = StyleSheet.create({
|
package/src/Screen.tsx
CHANGED
package/src/Text.tsx
CHANGED
|
@@ -1,22 +1,15 @@
|
|
|
1
|
-
|
|
1
|
+
const APPROX_APP_BAR_HEIGHT = 56;
|
|
2
|
+
const DEFAULT_DRAWER_WIDTH = 360;
|
|
2
3
|
|
|
3
|
-
export const getDefaultSidebarWidth = ({
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
width: number;
|
|
9
|
-
}) => {
|
|
10
|
-
/*
|
|
11
|
-
* Default sidebar width is screen width - header height
|
|
12
|
-
* with a max width of 280 on mobile and 320 on tablet
|
|
13
|
-
* https://material.io/components/navigation-drawer
|
|
4
|
+
export const getDefaultSidebarWidth = ({ width }: { width: number }) => {
|
|
5
|
+
/**
|
|
6
|
+
* Default sidebar width is 360dp
|
|
7
|
+
* On screens smaller than 320dp, ideally the drawer would collapse to a tab bar
|
|
8
|
+
* https://m3.material.io/components/navigation-drawer/specs
|
|
14
9
|
*/
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
const appBarHeight = Platform.OS === 'ios' ? (isLandscape ? 32 : 44) : 56;
|
|
19
|
-
const maxWidth = isTablet ? 320 : 280;
|
|
10
|
+
if (width - APPROX_APP_BAR_HEIGHT <= 360) {
|
|
11
|
+
return width - APPROX_APP_BAR_HEIGHT;
|
|
12
|
+
}
|
|
20
13
|
|
|
21
|
-
return
|
|
14
|
+
return DEFAULT_DRAWER_WIDTH;
|
|
22
15
|
};
|
package/src/getNamedContext.tsx
CHANGED
|
@@ -8,13 +8,14 @@ declare global {
|
|
|
8
8
|
}
|
|
9
9
|
|
|
10
10
|
// We use a global variable to keep our contexts so that we can reuse same contexts across packages
|
|
11
|
-
|
|
11
|
+
globalThis[contexts] =
|
|
12
|
+
globalThis[contexts] ?? new Map<string, React.Context<any>>();
|
|
12
13
|
|
|
13
14
|
export function getNamedContext<T>(
|
|
14
15
|
name: string,
|
|
15
16
|
initialValue: T
|
|
16
17
|
): React.Context<T> {
|
|
17
|
-
let context =
|
|
18
|
+
let context = globalThis[contexts].get(name);
|
|
18
19
|
|
|
19
20
|
if (context) {
|
|
20
21
|
return context;
|
|
@@ -23,7 +24,7 @@ export function getNamedContext<T>(
|
|
|
23
24
|
context = React.createContext<T>(initialValue);
|
|
24
25
|
context.displayName = name;
|
|
25
26
|
|
|
26
|
-
|
|
27
|
+
globalThis[contexts].set(name, context);
|
|
27
28
|
|
|
28
29
|
return context;
|
|
29
30
|
}
|
package/src/types.tsx
CHANGED
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|