@react-navigation/elements 1.1.2 → 1.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/lib/commonjs/Header/Header.js +8 -2
  2. package/lib/commonjs/Header/Header.js.map +1 -1
  3. package/lib/module/Header/Header.js +8 -2
  4. package/lib/module/Header/Header.js.map +1 -1
  5. package/lib/typescript/src/types.d.ts +17 -0
  6. package/package.json +3 -3
  7. package/src/Header/Header.tsx +12 -2
  8. package/src/types.tsx +17 -0
package/lib/commonjs/Header/Header.js CHANGED
@@ -63,6 +63,7 @@ function Header(props) {
63
63
  headerTitleContainerStyle: titleContainerStyle,
64
64
  headerBackgroundContainerStyle: backgroundContainerStyle,
65
65
  headerStyle: customHeaderStyle,
66
+ headerShadowVisible,
66
67
  headerPressColor,
67
68
  headerPressOpacity,
68
69
  headerStatusBarHeight = isParentHeaderShown ? 0 : insets.top
@@ -162,6 +163,11 @@ function Header(props) {
162
163
  }
163
164
  }
164
165
 
166
+ const backgroundStyle = [safeStyles, headerShadowVisible === false && {
167
+ elevation: 0,
168
+ shadowOpacity: 0,
169
+ borderBottomWidth: 0
170
+ }];
165
171
  const leftButton = headerLeft ? headerLeft({
166
172
  tintColor: headerTintColor,
167
173
  pressColor: headerPressColor,
@@ -180,9 +186,9 @@ function Header(props) {
180
186
  zIndex: 0
181
187
  }, backgroundContainerStyle]
182
188
  }, headerBackground ? headerBackground({
183
- style: safeStyles
189
+ style: backgroundStyle
184
190
  }) : headerTransparent ? null : /*#__PURE__*/React.createElement(_HeaderBackground.default, {
185
- style: safeStyles
191
+ style: backgroundStyle
186
192
  })), /*#__PURE__*/React.createElement(_reactNative.Animated.View, {
187
193
  pointerEvents: "box-none",
188
194
  style: [{
package/lib/commonjs/Header/Header.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["Header.tsx"],"names":["warnIfHeaderStylesDefined","styles","Object","keys","forEach","styleProp","value","console","warn","undefined","Header","props","insets","frame","isParentHeaderShown","React","useContext","HeaderShownContext","layout","modal","title","headerTitle","customTitle","headerTitleAlign","Platform","select","ios","default","headerLeft","headerLeftLabelVisible","headerTransparent","headerTintColor","headerBackground","headerRight","headerTitleAllowFontScaling","titleAllowFontScaling","headerTitleStyle","titleStyle","headerLeftContainerStyle","leftContainerStyle","headerRightContainerStyle","rightContainerStyle","headerTitleContainerStyle","titleContainerStyle","headerBackgroundContainerStyle","backgroundContainerStyle","headerStyle","customHeaderStyle","headerPressColor","headerPressOpacity","headerStatusBarHeight","top","defaultHeight","height","minHeight","maxHeight","backgroundColor","borderBottomColor","borderBottomEndRadius","borderBottomLeftRadius","borderBottomRightRadius","borderBottomStartRadius","borderBottomWidth","borderColor","borderEndColor","borderEndWidth","borderLeftColor","borderLeftWidth","borderRadius","borderRightColor","borderRightWidth","borderStartColor","borderStartWidth","borderStyle","borderTopColor","borderTopEndRadius","borderTopLeftRadius","borderTopRightRadius","borderTopStartRadius","borderTopWidth","borderWidth","boxShadow","elevation","shadowColor","shadowOffset","shadowOpacity","shadowRadius","opacity","transform","unsafeStyles","StyleSheet","flatten","process","env","NODE_ENV","safeStyles","leftButton","tintColor","pressColor","pressOpacity","labelVisible","rightButton","absoluteFill","zIndex","style","content","left","expand","marginStart","maxWidth","width","Math","max","right","children","allowFontScaling","marginEnd","create","flex","flexDirection","alignItems","marginHorizontal","justifyContent","flexGrow","flexBasis"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { Animated, Platform, StyleSheet, View, ViewStyle } from 'react-native';\nimport {\n useSafeAreaFrame,\n useSafeAreaInsets,\n} from 'react-native-safe-area-context';\n\nimport type { HeaderOptions, Layout } from '../types';\nimport getDefaultHeaderHeight from './getDefaultHeaderHeight';\nimport HeaderBackground from './HeaderBackground';\nimport HeaderShownContext from './HeaderShownContext';\nimport HeaderTitle from './HeaderTitle';\n\ntype Props = HeaderOptions & {\n /**\n * Whether the header is in a modal\n */\n modal?: boolean;\n /**\n * Layout of the screen.\n */\n layout?: Layout;\n /**\n * Title text for the header.\n */\n title: string;\n};\n\nconst warnIfHeaderStylesDefined = (styles: Record<string, any>) => {\n Object.keys(styles).forEach((styleProp) => {\n const value = styles[styleProp];\n\n if (styleProp === 'position' && value === 'absolute') {\n console.warn(\n \"position: 'absolute' is not supported on headerStyle. If you would like to render content under the header, use the 'headerTransparent' option.\"\n );\n } else if (value !== undefined) {\n console.warn(\n `${styleProp} was given a value of ${value}, this has no effect on headerStyle.`\n );\n }\n });\n};\n\nexport default function Header(props: Props) {\n const insets = useSafeAreaInsets();\n const frame = useSafeAreaFrame();\n\n const isParentHeaderShown = React.useContext(HeaderShownContext);\n\n const {\n layout = frame,\n modal = false,\n title,\n headerTitle: customTitle,\n headerTitleAlign = Platform.select({\n ios: 'center',\n default: 'left',\n }),\n headerLeft,\n headerLeftLabelVisible,\n headerTransparent,\n headerTintColor,\n headerBackground,\n headerRight,\n headerTitleAllowFontScaling: titleAllowFontScaling,\n headerTitleStyle: titleStyle,\n headerLeftContainerStyle: leftContainerStyle,\n headerRightContainerStyle: rightContainerStyle,\n headerTitleContainerStyle: titleContainerStyle,\n headerBackgroundContainerStyle: backgroundContainerStyle,\n headerStyle: customHeaderStyle,\n headerPressColor,\n headerPressOpacity,\n headerStatusBarHeight = isParentHeaderShown ? 0 : insets.top,\n } = props;\n\n const defaultHeight = getDefaultHeaderHeight(\n layout,\n modal,\n headerStatusBarHeight\n );\n\n const {\n height = defaultHeight,\n minHeight,\n maxHeight,\n backgroundColor,\n borderBottomColor,\n borderBottomEndRadius,\n borderBottomLeftRadius,\n borderBottomRightRadius,\n borderBottomStartRadius,\n borderBottomWidth,\n borderColor,\n borderEndColor,\n borderEndWidth,\n borderLeftColor,\n borderLeftWidth,\n borderRadius,\n borderRightColor,\n borderRightWidth,\n borderStartColor,\n borderStartWidth,\n borderStyle,\n borderTopColor,\n borderTopEndRadius,\n borderTopLeftRadius,\n borderTopRightRadius,\n borderTopStartRadius,\n borderTopWidth,\n borderWidth,\n // @ts-expect-error: web support for shadow\n boxShadow,\n elevation,\n shadowColor,\n shadowOffset,\n shadowOpacity,\n shadowRadius,\n opacity,\n transform,\n ...unsafeStyles\n } = StyleSheet.flatten(customHeaderStyle || {}) as ViewStyle;\n\n if (process.env.NODE_ENV !== 'production') {\n warnIfHeaderStylesDefined(unsafeStyles);\n }\n\n const safeStyles: ViewStyle = {\n backgroundColor,\n borderBottomColor,\n borderBottomEndRadius,\n borderBottomLeftRadius,\n borderBottomRightRadius,\n borderBottomStartRadius,\n borderBottomWidth,\n borderColor,\n borderEndColor,\n borderEndWidth,\n borderLeftColor,\n borderLeftWidth,\n borderRadius,\n borderRightColor,\n borderRightWidth,\n borderStartColor,\n borderStartWidth,\n borderStyle,\n borderTopColor,\n borderTopEndRadius,\n borderTopLeftRadius,\n borderTopRightRadius,\n borderTopStartRadius,\n borderTopWidth,\n borderWidth,\n // @ts-expect-error: boxShadow is only for Web\n boxShadow,\n elevation,\n shadowColor,\n shadowOffset,\n shadowOpacity,\n shadowRadius,\n opacity,\n transform,\n };\n\n // Setting a property to undefined triggers default style\n // So we need to filter them out\n // Users can use `null` instead\n for (const styleProp in safeStyles) {\n // @ts-expect-error: typescript wrongly complains that styleProp cannot be used to index safeStyles\n if (safeStyles[styleProp] === undefined) {\n // @ts-expect-error\n // eslint-disable-next-line @typescript-eslint/no-dynamic-delete\n delete safeStyles[styleProp];\n }\n }\n\n const leftButton = headerLeft\n ? headerLeft({\n tintColor: headerTintColor,\n pressColor: headerPressColor,\n pressOpacity: headerPressOpacity,\n labelVisible: headerLeftLabelVisible,\n })\n : null;\n\n const rightButton = headerRight\n ? headerRight({\n tintColor: headerTintColor,\n pressColor: headerPressColor,\n pressOpacity: headerPressOpacity,\n })\n : null;\n\n const headerTitle =\n typeof customTitle !== 'function'\n ? (props: React.ComponentProps<typeof HeaderTitle>) => (\n <HeaderTitle {...props} />\n )\n : customTitle;\n\n return (\n <React.Fragment>\n <Animated.View\n pointerEvents=\"box-none\"\n style={[\n StyleSheet.absoluteFill,\n { zIndex: 0 },\n backgroundContainerStyle,\n ]}\n >\n {headerBackground ? (\n headerBackground({ style: safeStyles })\n ) : headerTransparent ? null : (\n <HeaderBackground style={safeStyles} />\n )}\n </Animated.View>\n <Animated.View\n pointerEvents=\"box-none\"\n style={[{ height, minHeight, maxHeight, opacity, transform }]}\n >\n <View pointerEvents=\"none\" style={{ height: headerStatusBarHeight }} />\n <View pointerEvents=\"box-none\" style={styles.content}>\n <Animated.View\n pointerEvents=\"box-none\"\n style={[\n styles.left,\n headerTitleAlign === 'center' && styles.expand,\n { marginStart: insets.left },\n leftContainerStyle,\n ]}\n >\n {leftButton}\n </Animated.View>\n <Animated.View\n pointerEvents=\"box-none\"\n style={[\n styles.title,\n {\n // Avoid the title from going offscreen or overlapping buttons\n maxWidth:\n headerTitleAlign === 'center'\n ? layout.width -\n ((leftButton\n ? headerLeftLabelVisible !== false\n ? 80\n : 32\n : 16) +\n Math.max(insets.left, insets.right)) *\n 2\n : layout.width -\n ((leftButton ? 72 : 16) +\n (rightButton ? 72 : 16) +\n insets.left -\n insets.right),\n },\n titleContainerStyle,\n ]}\n >\n {headerTitle({\n children: title,\n allowFontScaling: titleAllowFontScaling,\n tintColor: headerTintColor,\n style: titleStyle,\n })}\n </Animated.View>\n <Animated.View\n pointerEvents=\"box-none\"\n style={[\n styles.right,\n styles.expand,\n { marginEnd: insets.right },\n rightContainerStyle,\n ]}\n >\n {rightButton}\n </Animated.View>\n </View>\n </Animated.View>\n </React.Fragment>\n );\n}\n\nconst styles = StyleSheet.create({\n content: {\n flex: 1,\n flexDirection: 'row',\n alignItems: 'stretch',\n },\n title: {\n marginHorizontal: 16,\n justifyContent: 'center',\n },\n left: {\n justifyContent: 'center',\n alignItems: 'flex-start',\n },\n right: {\n justifyContent: 'center',\n alignItems: 'flex-end',\n },\n expand: {\n flexGrow: 1,\n flexBasis: 0,\n },\n});\n"]}
1
+ {"version":3,"sources":["Header.tsx"],"names":["warnIfHeaderStylesDefined","styles","Object","keys","forEach","styleProp","value","console","warn","undefined","Header","props","insets","frame","isParentHeaderShown","React","useContext","HeaderShownContext","layout","modal","title","headerTitle","customTitle","headerTitleAlign","Platform","select","ios","default","headerLeft","headerLeftLabelVisible","headerTransparent","headerTintColor","headerBackground","headerRight","headerTitleAllowFontScaling","titleAllowFontScaling","headerTitleStyle","titleStyle","headerLeftContainerStyle","leftContainerStyle","headerRightContainerStyle","rightContainerStyle","headerTitleContainerStyle","titleContainerStyle","headerBackgroundContainerStyle","backgroundContainerStyle","headerStyle","customHeaderStyle","headerShadowVisible","headerPressColor","headerPressOpacity","headerStatusBarHeight","top","defaultHeight","height","minHeight","maxHeight","backgroundColor","borderBottomColor","borderBottomEndRadius","borderBottomLeftRadius","borderBottomRightRadius","borderBottomStartRadius","borderBottomWidth","borderColor","borderEndColor","borderEndWidth","borderLeftColor","borderLeftWidth","borderRadius","borderRightColor","borderRightWidth","borderStartColor","borderStartWidth","borderStyle","borderTopColor","borderTopEndRadius","borderTopLeftRadius","borderTopRightRadius","borderTopStartRadius","borderTopWidth","borderWidth","boxShadow","elevation","shadowColor","shadowOffset","shadowOpacity","shadowRadius","opacity","transform","unsafeStyles","StyleSheet","flatten","process","env","NODE_ENV","safeStyles","backgroundStyle","leftButton","tintColor","pressColor","pressOpacity","labelVisible","rightButton","absoluteFill","zIndex","style","content","left","expand","marginStart","maxWidth","width","Math","max","right","children","allowFontScaling","marginEnd","create","flex","flexDirection","alignItems","marginHorizontal","justifyContent","flexGrow","flexBasis"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { Animated, Platform, StyleSheet, View, ViewStyle } from 'react-native';\nimport {\n useSafeAreaFrame,\n useSafeAreaInsets,\n} from 'react-native-safe-area-context';\n\nimport type { HeaderOptions, Layout } from '../types';\nimport getDefaultHeaderHeight from './getDefaultHeaderHeight';\nimport HeaderBackground from './HeaderBackground';\nimport HeaderShownContext from './HeaderShownContext';\nimport HeaderTitle from './HeaderTitle';\n\ntype Props = HeaderOptions & {\n /**\n * Whether the header is in a modal\n */\n modal?: boolean;\n /**\n * Layout of the screen.\n */\n layout?: Layout;\n /**\n * Title text for the header.\n */\n title: string;\n};\n\nconst warnIfHeaderStylesDefined = (styles: Record<string, any>) => {\n Object.keys(styles).forEach((styleProp) => {\n const value = styles[styleProp];\n\n if (styleProp === 'position' && value === 'absolute') {\n console.warn(\n \"position: 'absolute' is not supported on headerStyle. If you would like to render content under the header, use the 'headerTransparent' option.\"\n );\n } else if (value !== undefined) {\n console.warn(\n `${styleProp} was given a value of ${value}, this has no effect on headerStyle.`\n );\n }\n });\n};\n\nexport default function Header(props: Props) {\n const insets = useSafeAreaInsets();\n const frame = useSafeAreaFrame();\n\n const isParentHeaderShown = React.useContext(HeaderShownContext);\n\n const {\n layout = frame,\n modal = false,\n title,\n headerTitle: customTitle,\n headerTitleAlign = Platform.select({\n ios: 'center',\n default: 'left',\n }),\n headerLeft,\n headerLeftLabelVisible,\n headerTransparent,\n headerTintColor,\n headerBackground,\n headerRight,\n headerTitleAllowFontScaling: titleAllowFontScaling,\n headerTitleStyle: titleStyle,\n headerLeftContainerStyle: leftContainerStyle,\n headerRightContainerStyle: rightContainerStyle,\n headerTitleContainerStyle: titleContainerStyle,\n headerBackgroundContainerStyle: backgroundContainerStyle,\n headerStyle: customHeaderStyle,\n headerShadowVisible,\n headerPressColor,\n headerPressOpacity,\n headerStatusBarHeight = isParentHeaderShown ? 0 : insets.top,\n } = props;\n\n const defaultHeight = getDefaultHeaderHeight(\n layout,\n modal,\n headerStatusBarHeight\n );\n\n const {\n height = defaultHeight,\n minHeight,\n maxHeight,\n backgroundColor,\n borderBottomColor,\n borderBottomEndRadius,\n borderBottomLeftRadius,\n borderBottomRightRadius,\n borderBottomStartRadius,\n borderBottomWidth,\n borderColor,\n borderEndColor,\n borderEndWidth,\n borderLeftColor,\n borderLeftWidth,\n borderRadius,\n borderRightColor,\n borderRightWidth,\n borderStartColor,\n borderStartWidth,\n borderStyle,\n borderTopColor,\n borderTopEndRadius,\n borderTopLeftRadius,\n borderTopRightRadius,\n borderTopStartRadius,\n borderTopWidth,\n borderWidth,\n // @ts-expect-error: web support for shadow\n boxShadow,\n elevation,\n shadowColor,\n shadowOffset,\n shadowOpacity,\n shadowRadius,\n opacity,\n transform,\n ...unsafeStyles\n } = StyleSheet.flatten(customHeaderStyle || {}) as ViewStyle;\n\n if (process.env.NODE_ENV !== 'production') {\n warnIfHeaderStylesDefined(unsafeStyles);\n }\n\n const safeStyles: ViewStyle = {\n backgroundColor,\n borderBottomColor,\n borderBottomEndRadius,\n borderBottomLeftRadius,\n borderBottomRightRadius,\n borderBottomStartRadius,\n borderBottomWidth,\n borderColor,\n borderEndColor,\n borderEndWidth,\n borderLeftColor,\n borderLeftWidth,\n borderRadius,\n borderRightColor,\n borderRightWidth,\n borderStartColor,\n borderStartWidth,\n borderStyle,\n borderTopColor,\n borderTopEndRadius,\n borderTopLeftRadius,\n borderTopRightRadius,\n borderTopStartRadius,\n borderTopWidth,\n borderWidth,\n // @ts-expect-error: boxShadow is only for Web\n boxShadow,\n elevation,\n shadowColor,\n shadowOffset,\n shadowOpacity,\n shadowRadius,\n opacity,\n transform,\n };\n\n // Setting a property to undefined triggers default style\n // So we need to filter them out\n // Users can use `null` instead\n for (const styleProp in safeStyles) {\n // @ts-expect-error: typescript wrongly complains that styleProp cannot be used to index safeStyles\n if (safeStyles[styleProp] === undefined) {\n // @ts-expect-error\n // eslint-disable-next-line @typescript-eslint/no-dynamic-delete\n delete safeStyles[styleProp];\n }\n }\n\n const backgroundStyle = [\n safeStyles,\n headerShadowVisible === false && {\n elevation: 0,\n shadowOpacity: 0,\n borderBottomWidth: 0,\n },\n ];\n\n const leftButton = headerLeft\n ? headerLeft({\n tintColor: headerTintColor,\n pressColor: headerPressColor,\n pressOpacity: headerPressOpacity,\n labelVisible: headerLeftLabelVisible,\n })\n : null;\n\n const rightButton = headerRight\n ? headerRight({\n tintColor: headerTintColor,\n pressColor: headerPressColor,\n pressOpacity: headerPressOpacity,\n })\n : null;\n\n const headerTitle =\n typeof customTitle !== 'function'\n ? (props: React.ComponentProps<typeof HeaderTitle>) => (\n <HeaderTitle {...props} />\n )\n : customTitle;\n\n return (\n <React.Fragment>\n <Animated.View\n pointerEvents=\"box-none\"\n style={[\n StyleSheet.absoluteFill,\n { zIndex: 0 },\n backgroundContainerStyle,\n ]}\n >\n {headerBackground ? (\n headerBackground({ style: backgroundStyle })\n ) : headerTransparent ? null : (\n <HeaderBackground style={backgroundStyle} />\n )}\n </Animated.View>\n <Animated.View\n pointerEvents=\"box-none\"\n style={[{ height, minHeight, maxHeight, opacity, transform }]}\n >\n <View pointerEvents=\"none\" style={{ height: headerStatusBarHeight }} />\n <View pointerEvents=\"box-none\" style={styles.content}>\n <Animated.View\n pointerEvents=\"box-none\"\n style={[\n styles.left,\n headerTitleAlign === 'center' && styles.expand,\n { marginStart: insets.left },\n leftContainerStyle,\n ]}\n >\n {leftButton}\n </Animated.View>\n <Animated.View\n pointerEvents=\"box-none\"\n style={[\n styles.title,\n {\n // Avoid the title from going offscreen or overlapping buttons\n maxWidth:\n headerTitleAlign === 'center'\n ? layout.width -\n ((leftButton\n ? headerLeftLabelVisible !== false\n ? 80\n : 32\n : 16) +\n Math.max(insets.left, insets.right)) *\n 2\n : layout.width -\n ((leftButton ? 72 : 16) +\n (rightButton ? 72 : 16) +\n insets.left -\n insets.right),\n },\n titleContainerStyle,\n ]}\n >\n {headerTitle({\n children: title,\n allowFontScaling: titleAllowFontScaling,\n tintColor: headerTintColor,\n style: titleStyle,\n })}\n </Animated.View>\n <Animated.View\n pointerEvents=\"box-none\"\n style={[\n styles.right,\n styles.expand,\n { marginEnd: insets.right },\n rightContainerStyle,\n ]}\n >\n {rightButton}\n </Animated.View>\n </View>\n </Animated.View>\n </React.Fragment>\n );\n}\n\nconst styles = StyleSheet.create({\n content: {\n flex: 1,\n flexDirection: 'row',\n alignItems: 'stretch',\n },\n title: {\n marginHorizontal: 16,\n justifyContent: 'center',\n },\n left: {\n justifyContent: 'center',\n alignItems: 'flex-start',\n },\n right: {\n justifyContent: 'center',\n alignItems: 'flex-end',\n },\n expand: {\n flexGrow: 1,\n flexBasis: 0,\n },\n});\n"]}
package/lib/module/Header/Header.js CHANGED
@@ -44,6 +44,7 @@ export default function Header(props) {
44
44
  headerTitleContainerStyle: titleContainerStyle,
45
45
  headerBackgroundContainerStyle: backgroundContainerStyle,
46
46
  headerStyle: customHeaderStyle,
47
+ headerShadowVisible,
47
48
  headerPressColor,
48
49
  headerPressOpacity,
49
50
  headerStatusBarHeight = isParentHeaderShown ? 0 : insets.top
@@ -142,6 +143,11 @@ export default function Header(props) {
142
143
  }
143
144
  }
144
145
 
146
+ const backgroundStyle = [safeStyles, headerShadowVisible === false && {
147
+ elevation: 0,
148
+ shadowOpacity: 0,
149
+ borderBottomWidth: 0
150
+ }];
145
151
  const leftButton = headerLeft ? headerLeft({
146
152
  tintColor: headerTintColor,
147
153
  pressColor: headerPressColor,
@@ -160,9 +166,9 @@ export default function Header(props) {
160
166
  zIndex: 0
161
167
  }, backgroundContainerStyle]
162
168
  }, headerBackground ? headerBackground({
163
- style: safeStyles
169
+ style: backgroundStyle
164
170
  }) : headerTransparent ? null : /*#__PURE__*/React.createElement(HeaderBackground, {
165
- style: safeStyles
171
+ style: backgroundStyle
166
172
  })), /*#__PURE__*/React.createElement(Animated.View, {
167
173
  pointerEvents: "box-none",
168
174
  style: [{
package/lib/module/Header/Header.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["Header.tsx"],"names":["React","Animated","Platform","StyleSheet","View","useSafeAreaFrame","useSafeAreaInsets","getDefaultHeaderHeight","HeaderBackground","HeaderShownContext","HeaderTitle","warnIfHeaderStylesDefined","styles","Object","keys","forEach","styleProp","value","console","warn","undefined","Header","props","insets","frame","isParentHeaderShown","useContext","layout","modal","title","headerTitle","customTitle","headerTitleAlign","select","ios","default","headerLeft","headerLeftLabelVisible","headerTransparent","headerTintColor","headerBackground","headerRight","headerTitleAllowFontScaling","titleAllowFontScaling","headerTitleStyle","titleStyle","headerLeftContainerStyle","leftContainerStyle","headerRightContainerStyle","rightContainerStyle","headerTitleContainerStyle","titleContainerStyle","headerBackgroundContainerStyle","backgroundContainerStyle","headerStyle","customHeaderStyle","headerPressColor","headerPressOpacity","headerStatusBarHeight","top","defaultHeight","height","minHeight","maxHeight","backgroundColor","borderBottomColor","borderBottomEndRadius","borderBottomLeftRadius","borderBottomRightRadius","borderBottomStartRadius","borderBottomWidth","borderColor","borderEndColor","borderEndWidth","borderLeftColor","borderLeftWidth","borderRadius","borderRightColor","borderRightWidth","borderStartColor","borderStartWidth","borderStyle","borderTopColor","borderTopEndRadius","borderTopLeftRadius","borderTopRightRadius","borderTopStartRadius","borderTopWidth","borderWidth","boxShadow","elevation","shadowColor","shadowOffset","shadowOpacity","shadowRadius","opacity","transform","unsafeStyles","flatten","process","env","NODE_ENV","safeStyles","leftButton","tintColor","pressColor","pressOpacity","labelVisible","rightButton","absoluteFill","zIndex","style","content","left","expand","marginStart","maxWidth","width","Math","max","right","children","allowFontScaling","marginEnd","create","flex","flexDirection","alignItems","marginHorizontal","justifyContent","flexGrow","flexBasis"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,QAAT,EAAmBC,QAAnB,EAA6BC,UAA7B,EAAyCC,IAAzC,QAAgE,cAAhE;AACA,SACEC,gBADF,EAEEC,iBAFF,QAGO,gCAHP;AAMA,OAAOC,sBAAP,MAAmC,0BAAnC;AACA,OAAOC,gBAAP,MAA6B,oBAA7B;AACA,OAAOC,kBAAP,MAA+B,sBAA/B;AACA,OAAOC,WAAP,MAAwB,eAAxB;;AAiBA,MAAMC,yBAAyB,GAAIC,MAAD,IAAiC;AACjEC,EAAAA,MAAM,CAACC,IAAP,CAAYF,MAAZ,EAAoBG,OAApB,CAA6BC,SAAD,IAAe;AACzC,UAAMC,KAAK,GAAGL,MAAM,CAACI,SAAD,CAApB;;AAEA,QAAIA,SAAS,KAAK,UAAd,IAA4BC,KAAK,KAAK,UAA1C,EAAsD;AACpDC,MAAAA,OAAO,CAACC,IAAR,CACE,iJADF;AAGD,KAJD,MAIO,IAAIF,KAAK,KAAKG,SAAd,EAAyB;AAC9BF,MAAAA,OAAO,CAACC,IAAR,CACG,GAAEH,SAAU,yBAAwBC,KAAM,sCAD7C;AAGD;AACF,GAZD;AAaD,CAdD;;AAgBA,eAAe,SAASI,MAAT,CAAgBC,KAAhB,EAA8B;AAC3C,QAAMC,MAAM,GAAGjB,iBAAiB,EAAhC;AACA,QAAMkB,KAAK,GAAGnB,gBAAgB,EAA9B;AAEA,QAAMoB,mBAAmB,GAAGzB,KAAK,CAAC0B,UAAN,CAAiBjB,kBAAjB,CAA5B;AAEA,QAAM;AACJkB,IAAAA,MAAM,GAAGH,KADL;AAEJI,IAAAA,KAAK,GAAG,KAFJ;AAGJC,IAAAA,KAHI;AAIJC,IAAAA,WAAW,EAAEC,WAJT;AAKJC,IAAAA,gBAAgB,GAAG9B,QAAQ,CAAC+B,MAAT,CAAgB;AACjCC,MAAAA,GAAG,EAAE,QAD4B;AAEjCC,MAAAA,OAAO,EAAE;AAFwB,KAAhB,CALf;AASJC,IAAAA,UATI;AAUJC,IAAAA,sBAVI;AAWJC,IAAAA,iBAXI;AAYJC,IAAAA,eAZI;AAaJC,IAAAA,gBAbI;AAcJC,IAAAA,WAdI;AAeJC,IAAAA,2BAA2B,EAAEC,qBAfzB;AAgBJC,IAAAA,gBAAgB,EAAEC,UAhBd;AAiBJC,IAAAA,wBAAwB,EAAEC,kBAjBtB;AAkBJC,IAAAA,yBAAyB,EAAEC,mBAlBvB;AAmBJC,IAAAA,yBAAyB,EAAEC,mBAnBvB;AAoBJC,IAAAA,8BAA8B,EAAEC,wBApB5B;AAqBJC,IAAAA,WAAW,EAAEC,iBArBT;AAsBJC,IAAAA,gBAtBI;AAuBJC,IAAAA,kBAvBI;AAwBJC,IAAAA,qBAAqB,GAAGjC,mBAAmB,GAAG,CAAH,GAAOF,MAAM,CAACoC;AAxBrD,MAyBFrC,KAzBJ;AA2BA,QAAMsC,aAAa,GAAGrD,sBAAsB,CAC1CoB,MAD0C,EAE1CC,KAF0C,EAG1C8B,qBAH0C,CAA5C;AAMA,QAAM;AACJG,IAAAA,MAAM,GAAGD,aADL;AAEJE,IAAAA,SAFI;AAGJC,IAAAA,SAHI;AAIJC,IAAAA,eAJI;AAKJC,IAAAA,iBALI;AAMJC,IAAAA,qBANI;AAOJC,IAAAA,sBAPI;AAQJC,IAAAA,uBARI;AASJC,IAAAA,uBATI;AAUJC,IAAAA,iBAVI;AAWJC,IAAAA,WAXI;AAYJC,IAAAA,cAZI;AAaJC,IAAAA,cAbI;AAcJC,IAAAA,eAdI;AAeJC,IAAAA,eAfI;AAgBJC,IAAAA,YAhBI;AAiBJC,IAAAA,gBAjBI;AAkBJC,IAAAA,gBAlBI;AAmBJC,IAAAA,gBAnBI;AAoBJC,IAAAA,gBApBI;AAqBJC,IAAAA,WArBI;AAsBJC,IAAAA,cAtBI;AAuBJC,IAAAA,kBAvBI;AAwBJC,IAAAA,mBAxBI;AAyBJC,IAAAA,oBAzBI;AA0BJC,IAAAA,oBA1BI;AA2BJC,IAAAA,cA3BI;AA4BJC,IAAAA,WA5BI;AA6BJ;AACAC,IAAAA,SA9BI;AA+BJC,IAAAA,SA/BI;AAgCJC,IAAAA,WAhCI;AAiCJC,IAAAA,YAjCI;AAkCJC,IAAAA,aAlCI;AAmCJC,IAAAA,YAnCI;AAoCJC,IAAAA,OApCI;AAqCJC,IAAAA,SArCI;AAsCJ,OAAGC;AAtCC,MAuCF9F,UAAU,CAAC+F,OAAX,CAAmB3C,iBAAiB,IAAI,EAAxC,CAvCJ;;AAyCA,MAAI4C,OAAO,CAACC,GAAR,CAAYC,QAAZ,KAAyB,YAA7B,EAA2C;AACzC1F,IAAAA,yBAAyB,CAACsF,YAAD,CAAzB;AACD;;AAED,QAAMK,UAAqB,GAAG;AAC5BtC,IAAAA,eAD4B;AAE5BC,IAAAA,iBAF4B;AAG5BC,IAAAA,qBAH4B;AAI5BC,IAAAA,sBAJ4B;AAK5BC,IAAAA,uBAL4B;AAM5BC,IAAAA,uBAN4B;AAO5BC,IAAAA,iBAP4B;AAQ5BC,IAAAA,WAR4B;AAS5BC,IAAAA,cAT4B;AAU5BC,IAAAA,cAV4B;AAW5BC,IAAAA,eAX4B;AAY5BC,IAAAA,eAZ4B;AAa5BC,IAAAA,YAb4B;AAc5BC,IAAAA,gBAd4B;AAe5BC,IAAAA,gBAf4B;AAgB5BC,IAAAA,gBAhB4B;AAiB5BC,IAAAA,gBAjB4B;AAkB5BC,IAAAA,WAlB4B;AAmB5BC,IAAAA,cAnB4B;AAoB5BC,IAAAA,kBApB4B;AAqB5BC,IAAAA,mBArB4B;AAsB5BC,IAAAA,oBAtB4B;AAuB5BC,IAAAA,oBAvB4B;AAwB5BC,IAAAA,cAxB4B;AAyB5BC,IAAAA,WAzB4B;AA0B5B;AACAC,IAAAA,SA3B4B;AA4B5BC,IAAAA,SA5B4B;AA6B5BC,IAAAA,WA7B4B;AA8B5BC,IAAAA,YA9B4B;AA+B5BC,IAAAA,aA/B4B;AAgC5BC,IAAAA,YAhC4B;AAiC5BC,IAAAA,OAjC4B;AAkC5BC,IAAAA;AAlC4B,GAA9B,CApF2C,CAyH3C;AACA;AACA;;AACA,OAAK,MAAMhF,SAAX,IAAwBsF,UAAxB,EAAoC;AAClC;AACA,QAAIA,UAAU,CAACtF,SAAD,CAAV,KAA0BI,SAA9B,EAAyC;AACvC;AACA;AACA,aAAOkF,UAAU,CAACtF,SAAD,CAAjB;AACD;AACF;;AAED,QAAMuF,UAAU,GAAGnE,UAAU,GACzBA,UAAU,CAAC;AACToE,IAAAA,SAAS,EAAEjE,eADF;AAETkE,IAAAA,UAAU,EAAEjD,gBAFH;AAGTkD,IAAAA,YAAY,EAAEjD,kBAHL;AAITkD,IAAAA,YAAY,EAAEtE;AAJL,GAAD,CADe,GAOzB,IAPJ;AASA,QAAMuE,WAAW,GAAGnE,WAAW,GAC3BA,WAAW,CAAC;AACV+D,IAAAA,SAAS,EAAEjE,eADD;AAEVkE,IAAAA,UAAU,EAAEjD,gBAFF;AAGVkD,IAAAA,YAAY,EAAEjD;AAHJ,GAAD,CADgB,GAM3B,IANJ;AAQA,QAAM3B,WAAW,GACf,OAAOC,WAAP,KAAuB,UAAvB,GACKT,KAAD,iBACE,oBAAC,WAAD,EAAiBA,KAAjB,CAFN,GAIIS,WALN;AAOA,sBACE,oBAAC,KAAD,CAAO,QAAP,qBACE,oBAAC,QAAD,CAAU,IAAV;AACE,IAAA,aAAa,EAAC,UADhB;AAEE,IAAA,KAAK,EAAE,CACL5B,UAAU,CAAC0G,YADN,EAEL;AAAEC,MAAAA,MAAM,EAAE;AAAV,KAFK,EAGLzD,wBAHK;AAFT,KAQGb,gBAAgB,GACfA,gBAAgB,CAAC;AAAEuE,IAAAA,KAAK,EAAET;AAAT,GAAD,CADD,GAEbhE,iBAAiB,GAAG,IAAH,gBACnB,oBAAC,gBAAD;AAAkB,IAAA,KAAK,EAAEgE;AAAzB,IAXJ,CADF,eAeE,oBAAC,QAAD,CAAU,IAAV;AACE,IAAA,aAAa,EAAC,UADhB;AAEE,IAAA,KAAK,EAAE,CAAC;AAAEzC,MAAAA,MAAF;AAAUC,MAAAA,SAAV;AAAqBC,MAAAA,SAArB;AAAgCgC,MAAAA,OAAhC;AAAyCC,MAAAA;AAAzC,KAAD;AAFT,kBAIE,oBAAC,IAAD;AAAM,IAAA,aAAa,EAAC,MAApB;AAA2B,IAAA,KAAK,EAAE;AAAEnC,MAAAA,MAAM,EAAEH;AAAV;AAAlC,IAJF,eAKE,oBAAC,IAAD;AAAM,IAAA,aAAa,EAAC,UAApB;AAA+B,IAAA,KAAK,EAAE9C,MAAM,CAACoG;AAA7C,kBACE,oBAAC,QAAD,CAAU,IAAV;AACE,IAAA,aAAa,EAAC,UADhB;AAEE,IAAA,KAAK,EAAE,CACLpG,MAAM,CAACqG,IADF,EAELjF,gBAAgB,KAAK,QAArB,IAAiCpB,MAAM,CAACsG,MAFnC,EAGL;AAAEC,MAAAA,WAAW,EAAE5F,MAAM,CAAC0F;AAAtB,KAHK,EAILlE,kBAJK;AAFT,KASGwD,UATH,CADF,eAYE,oBAAC,QAAD,CAAU,IAAV;AACE,IAAA,aAAa,EAAC,UADhB;AAEE,IAAA,KAAK,EAAE,CACL3F,MAAM,CAACiB,KADF,EAEL;AACE;AACAuF,MAAAA,QAAQ,EACNpF,gBAAgB,KAAK,QAArB,GACIL,MAAM,CAAC0F,KAAP,GACA,CAAC,CAACd,UAAU,GACRlE,sBAAsB,KAAK,KAA3B,GACE,EADF,GAEE,EAHM,GAIR,EAJH,IAKCiF,IAAI,CAACC,GAAL,CAAShG,MAAM,CAAC0F,IAAhB,EAAsB1F,MAAM,CAACiG,KAA7B,CALF,IAME,CARN,GASI7F,MAAM,CAAC0F,KAAP,IACC,CAACd,UAAU,GAAG,EAAH,GAAQ,EAAnB,KACEK,WAAW,GAAG,EAAH,GAAQ,EADrB,IAECrF,MAAM,CAAC0F,IAFR,GAGC1F,MAAM,CAACiG,KAJT;AAZR,KAFK,EAoBLrE,mBApBK;AAFT,KAyBGrB,WAAW,CAAC;AACX2F,IAAAA,QAAQ,EAAE5F,KADC;AAEX6F,IAAAA,gBAAgB,EAAE/E,qBAFP;AAGX6D,IAAAA,SAAS,EAAEjE,eAHA;AAIXwE,IAAAA,KAAK,EAAElE;AAJI,GAAD,CAzBd,CAZF,eA4CE,oBAAC,QAAD,CAAU,IAAV;AACE,IAAA,aAAa,EAAC,UADhB;AAEE,IAAA,KAAK,EAAE,CACLjC,MAAM,CAAC4G,KADF,EAEL5G,MAAM,CAACsG,MAFF,EAGL;AAAES,MAAAA,SAAS,EAAEpG,MAAM,CAACiG;AAApB,KAHK,EAILvE,mBAJK;AAFT,KASG2D,WATH,CA5CF,CALF,CAfF,CADF;AAgFD;AAED,MAAMhG,MAAM,GAAGT,UAAU,CAACyH,MAAX,CAAkB;AAC/BZ,EAAAA,OAAO,EAAE;AACPa,IAAAA,IAAI,EAAE,CADC;AAEPC,IAAAA,aAAa,EAAE,KAFR;AAGPC,IAAAA,UAAU,EAAE;AAHL,GADsB;AAM/BlG,EAAAA,KAAK,EAAE;AACLmG,IAAAA,gBAAgB,EAAE,EADb;AAELC,IAAAA,cAAc,EAAE;AAFX,GANwB;AAU/BhB,EAAAA,IAAI,EAAE;AACJgB,IAAAA,cAAc,EAAE,QADZ;AAEJF,IAAAA,UAAU,EAAE;AAFR,GAVyB;AAc/BP,EAAAA,KAAK,EAAE;AACLS,IAAAA,cAAc,EAAE,QADX;AAELF,IAAAA,UAAU,EAAE;AAFP,GAdwB;AAkB/Bb,EAAAA,MAAM,EAAE;AACNgB,IAAAA,QAAQ,EAAE,CADJ;AAENC,IAAAA,SAAS,EAAE;AAFL;AAlBuB,CAAlB,CAAf","sourcesContent":["import * as React from 'react';\nimport { Animated, Platform, StyleSheet, View, ViewStyle } from 'react-native';\nimport {\n useSafeAreaFrame,\n useSafeAreaInsets,\n} from 'react-native-safe-area-context';\n\nimport type { HeaderOptions, Layout } from '../types';\nimport getDefaultHeaderHeight from './getDefaultHeaderHeight';\nimport HeaderBackground from './HeaderBackground';\nimport HeaderShownContext from './HeaderShownContext';\nimport HeaderTitle from './HeaderTitle';\n\ntype Props = HeaderOptions & {\n /**\n * Whether the header is in a modal\n */\n modal?: boolean;\n /**\n * Layout of the screen.\n */\n layout?: Layout;\n /**\n * Title text for the header.\n */\n title: string;\n};\n\nconst warnIfHeaderStylesDefined = (styles: Record<string, any>) => {\n Object.keys(styles).forEach((styleProp) => {\n const value = styles[styleProp];\n\n if (styleProp === 'position' && value === 'absolute') {\n console.warn(\n \"position: 'absolute' is not supported on headerStyle. If you would like to render content under the header, use the 'headerTransparent' option.\"\n );\n } else if (value !== undefined) {\n console.warn(\n `${styleProp} was given a value of ${value}, this has no effect on headerStyle.`\n );\n }\n });\n};\n\nexport default function Header(props: Props) {\n const insets = useSafeAreaInsets();\n const frame = useSafeAreaFrame();\n\n const isParentHeaderShown = React.useContext(HeaderShownContext);\n\n const {\n layout = frame,\n modal = false,\n title,\n headerTitle: customTitle,\n headerTitleAlign = Platform.select({\n ios: 'center',\n default: 'left',\n }),\n headerLeft,\n headerLeftLabelVisible,\n headerTransparent,\n headerTintColor,\n headerBackground,\n headerRight,\n headerTitleAllowFontScaling: titleAllowFontScaling,\n headerTitleStyle: titleStyle,\n headerLeftContainerStyle: leftContainerStyle,\n headerRightContainerStyle: rightContainerStyle,\n headerTitleContainerStyle: titleContainerStyle,\n headerBackgroundContainerStyle: backgroundContainerStyle,\n headerStyle: customHeaderStyle,\n headerPressColor,\n headerPressOpacity,\n headerStatusBarHeight = isParentHeaderShown ? 0 : insets.top,\n } = props;\n\n const defaultHeight = getDefaultHeaderHeight(\n layout,\n modal,\n headerStatusBarHeight\n );\n\n const {\n height = defaultHeight,\n minHeight,\n maxHeight,\n backgroundColor,\n borderBottomColor,\n borderBottomEndRadius,\n borderBottomLeftRadius,\n borderBottomRightRadius,\n borderBottomStartRadius,\n borderBottomWidth,\n borderColor,\n borderEndColor,\n borderEndWidth,\n borderLeftColor,\n borderLeftWidth,\n borderRadius,\n borderRightColor,\n borderRightWidth,\n borderStartColor,\n borderStartWidth,\n borderStyle,\n borderTopColor,\n borderTopEndRadius,\n borderTopLeftRadius,\n borderTopRightRadius,\n borderTopStartRadius,\n borderTopWidth,\n borderWidth,\n // @ts-expect-error: web support for shadow\n boxShadow,\n elevation,\n shadowColor,\n shadowOffset,\n shadowOpacity,\n shadowRadius,\n opacity,\n transform,\n ...unsafeStyles\n } = StyleSheet.flatten(customHeaderStyle || {}) as ViewStyle;\n\n if (process.env.NODE_ENV !== 'production') {\n warnIfHeaderStylesDefined(unsafeStyles);\n }\n\n const safeStyles: ViewStyle = {\n backgroundColor,\n borderBottomColor,\n borderBottomEndRadius,\n borderBottomLeftRadius,\n borderBottomRightRadius,\n borderBottomStartRadius,\n borderBottomWidth,\n borderColor,\n borderEndColor,\n borderEndWidth,\n borderLeftColor,\n borderLeftWidth,\n borderRadius,\n borderRightColor,\n borderRightWidth,\n borderStartColor,\n borderStartWidth,\n borderStyle,\n borderTopColor,\n borderTopEndRadius,\n borderTopLeftRadius,\n borderTopRightRadius,\n borderTopStartRadius,\n borderTopWidth,\n borderWidth,\n // @ts-expect-error: boxShadow is only for Web\n boxShadow,\n elevation,\n shadowColor,\n shadowOffset,\n shadowOpacity,\n shadowRadius,\n opacity,\n transform,\n };\n\n // Setting a property to undefined triggers default style\n // So we need to filter them out\n // Users can use `null` instead\n for (const styleProp in safeStyles) {\n // @ts-expect-error: typescript wrongly complains that styleProp cannot be used to index safeStyles\n if (safeStyles[styleProp] === undefined) {\n // @ts-expect-error\n // eslint-disable-next-line @typescript-eslint/no-dynamic-delete\n delete safeStyles[styleProp];\n }\n }\n\n const leftButton = headerLeft\n ? headerLeft({\n tintColor: headerTintColor,\n pressColor: headerPressColor,\n pressOpacity: headerPressOpacity,\n labelVisible: headerLeftLabelVisible,\n })\n : null;\n\n const rightButton = headerRight\n ? headerRight({\n tintColor: headerTintColor,\n pressColor: headerPressColor,\n pressOpacity: headerPressOpacity,\n })\n : null;\n\n const headerTitle =\n typeof customTitle !== 'function'\n ? (props: React.ComponentProps<typeof HeaderTitle>) => (\n <HeaderTitle {...props} />\n )\n : customTitle;\n\n return (\n <React.Fragment>\n <Animated.View\n pointerEvents=\"box-none\"\n style={[\n StyleSheet.absoluteFill,\n { zIndex: 0 },\n backgroundContainerStyle,\n ]}\n >\n {headerBackground ? (\n headerBackground({ style: safeStyles })\n ) : headerTransparent ? null : (\n <HeaderBackground style={safeStyles} />\n )}\n </Animated.View>\n <Animated.View\n pointerEvents=\"box-none\"\n style={[{ height, minHeight, maxHeight, opacity, transform }]}\n >\n <View pointerEvents=\"none\" style={{ height: headerStatusBarHeight }} />\n <View pointerEvents=\"box-none\" style={styles.content}>\n <Animated.View\n pointerEvents=\"box-none\"\n style={[\n styles.left,\n headerTitleAlign === 'center' && styles.expand,\n { marginStart: insets.left },\n leftContainerStyle,\n ]}\n >\n {leftButton}\n </Animated.View>\n <Animated.View\n pointerEvents=\"box-none\"\n style={[\n styles.title,\n {\n // Avoid the title from going offscreen or overlapping buttons\n maxWidth:\n headerTitleAlign === 'center'\n ? layout.width -\n ((leftButton\n ? headerLeftLabelVisible !== false\n ? 80\n : 32\n : 16) +\n Math.max(insets.left, insets.right)) *\n 2\n : layout.width -\n ((leftButton ? 72 : 16) +\n (rightButton ? 72 : 16) +\n insets.left -\n insets.right),\n },\n titleContainerStyle,\n ]}\n >\n {headerTitle({\n children: title,\n allowFontScaling: titleAllowFontScaling,\n tintColor: headerTintColor,\n style: titleStyle,\n })}\n </Animated.View>\n <Animated.View\n pointerEvents=\"box-none\"\n style={[\n styles.right,\n styles.expand,\n { marginEnd: insets.right },\n rightContainerStyle,\n ]}\n >\n {rightButton}\n </Animated.View>\n </View>\n </Animated.View>\n </React.Fragment>\n );\n}\n\nconst styles = StyleSheet.create({\n content: {\n flex: 1,\n flexDirection: 'row',\n alignItems: 'stretch',\n },\n title: {\n marginHorizontal: 16,\n justifyContent: 'center',\n },\n left: {\n justifyContent: 'center',\n alignItems: 'flex-start',\n },\n right: {\n justifyContent: 'center',\n alignItems: 'flex-end',\n },\n expand: {\n flexGrow: 1,\n flexBasis: 0,\n },\n});\n"]}
1
+ {"version":3,"sources":["Header.tsx"],"names":["React","Animated","Platform","StyleSheet","View","useSafeAreaFrame","useSafeAreaInsets","getDefaultHeaderHeight","HeaderBackground","HeaderShownContext","HeaderTitle","warnIfHeaderStylesDefined","styles","Object","keys","forEach","styleProp","value","console","warn","undefined","Header","props","insets","frame","isParentHeaderShown","useContext","layout","modal","title","headerTitle","customTitle","headerTitleAlign","select","ios","default","headerLeft","headerLeftLabelVisible","headerTransparent","headerTintColor","headerBackground","headerRight","headerTitleAllowFontScaling","titleAllowFontScaling","headerTitleStyle","titleStyle","headerLeftContainerStyle","leftContainerStyle","headerRightContainerStyle","rightContainerStyle","headerTitleContainerStyle","titleContainerStyle","headerBackgroundContainerStyle","backgroundContainerStyle","headerStyle","customHeaderStyle","headerShadowVisible","headerPressColor","headerPressOpacity","headerStatusBarHeight","top","defaultHeight","height","minHeight","maxHeight","backgroundColor","borderBottomColor","borderBottomEndRadius","borderBottomLeftRadius","borderBottomRightRadius","borderBottomStartRadius","borderBottomWidth","borderColor","borderEndColor","borderEndWidth","borderLeftColor","borderLeftWidth","borderRadius","borderRightColor","borderRightWidth","borderStartColor","borderStartWidth","borderStyle","borderTopColor","borderTopEndRadius","borderTopLeftRadius","borderTopRightRadius","borderTopStartRadius","borderTopWidth","borderWidth","boxShadow","elevation","shadowColor","shadowOffset","shadowOpacity","shadowRadius","opacity","transform","unsafeStyles","flatten","process","env","NODE_ENV","safeStyles","backgroundStyle","leftButton","tintColor","pressColor","pressOpacity","labelVisible","rightButton","absoluteFill","zIndex","style","content","left","expand","marginStart","maxWidth","width","Math","max","right","children","allowFontScaling","marginEnd","create","flex","flexDirection","alignItems","marginHorizontal","justifyContent","flexGrow","flexBasis"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { Animated, Platform, StyleSheet, View, ViewStyle } from 'react-native';\nimport {\n useSafeAreaFrame,\n useSafeAreaInsets,\n} from 'react-native-safe-area-context';\n\nimport type { HeaderOptions, Layout } from '../types';\nimport getDefaultHeaderHeight from './getDefaultHeaderHeight';\nimport HeaderBackground from './HeaderBackground';\nimport HeaderShownContext from './HeaderShownContext';\nimport HeaderTitle from './HeaderTitle';\n\ntype Props = HeaderOptions & {\n /**\n * Whether the header is in a modal\n */\n modal?: boolean;\n /**\n * Layout of the screen.\n */\n layout?: Layout;\n /**\n * Title text for the header.\n */\n title: string;\n};\n\nconst warnIfHeaderStylesDefined = (styles: Record<string, any>) => {\n Object.keys(styles).forEach((styleProp) => {\n const value = styles[styleProp];\n\n if (styleProp === 'position' && value === 'absolute') {\n console.warn(\n \"position: 'absolute' is not supported on headerStyle. If you would like to render content under the header, use the 'headerTransparent' option.\"\n );\n } else if (value !== undefined) {\n console.warn(\n `${styleProp} was given a value of ${value}, this has no effect on headerStyle.`\n );\n }\n });\n};\n\nexport default function Header(props: Props) {\n const insets = useSafeAreaInsets();\n const frame = useSafeAreaFrame();\n\n const isParentHeaderShown = React.useContext(HeaderShownContext);\n\n const {\n layout = frame,\n modal = false,\n title,\n headerTitle: customTitle,\n headerTitleAlign = Platform.select({\n ios: 'center',\n default: 'left',\n }),\n headerLeft,\n headerLeftLabelVisible,\n headerTransparent,\n headerTintColor,\n headerBackground,\n headerRight,\n headerTitleAllowFontScaling: titleAllowFontScaling,\n headerTitleStyle: titleStyle,\n headerLeftContainerStyle: leftContainerStyle,\n headerRightContainerStyle: rightContainerStyle,\n headerTitleContainerStyle: titleContainerStyle,\n headerBackgroundContainerStyle: backgroundContainerStyle,\n headerStyle: customHeaderStyle,\n headerShadowVisible,\n headerPressColor,\n headerPressOpacity,\n headerStatusBarHeight = isParentHeaderShown ? 0 : insets.top,\n } = props;\n\n const defaultHeight = getDefaultHeaderHeight(\n layout,\n modal,\n headerStatusBarHeight\n );\n\n const {\n height = defaultHeight,\n minHeight,\n maxHeight,\n backgroundColor,\n borderBottomColor,\n borderBottomEndRadius,\n borderBottomLeftRadius,\n borderBottomRightRadius,\n borderBottomStartRadius,\n borderBottomWidth,\n borderColor,\n borderEndColor,\n borderEndWidth,\n borderLeftColor,\n borderLeftWidth,\n borderRadius,\n borderRightColor,\n borderRightWidth,\n borderStartColor,\n borderStartWidth,\n borderStyle,\n borderTopColor,\n borderTopEndRadius,\n borderTopLeftRadius,\n borderTopRightRadius,\n borderTopStartRadius,\n borderTopWidth,\n borderWidth,\n // @ts-expect-error: web support for shadow\n boxShadow,\n elevation,\n shadowColor,\n shadowOffset,\n shadowOpacity,\n shadowRadius,\n opacity,\n transform,\n ...unsafeStyles\n } = StyleSheet.flatten(customHeaderStyle || {}) as ViewStyle;\n\n if (process.env.NODE_ENV !== 'production') {\n warnIfHeaderStylesDefined(unsafeStyles);\n }\n\n const safeStyles: ViewStyle = {\n backgroundColor,\n borderBottomColor,\n borderBottomEndRadius,\n borderBottomLeftRadius,\n borderBottomRightRadius,\n borderBottomStartRadius,\n borderBottomWidth,\n borderColor,\n borderEndColor,\n borderEndWidth,\n borderLeftColor,\n borderLeftWidth,\n borderRadius,\n borderRightColor,\n borderRightWidth,\n borderStartColor,\n borderStartWidth,\n borderStyle,\n borderTopColor,\n borderTopEndRadius,\n borderTopLeftRadius,\n borderTopRightRadius,\n borderTopStartRadius,\n borderTopWidth,\n borderWidth,\n // @ts-expect-error: boxShadow is only for Web\n boxShadow,\n elevation,\n shadowColor,\n shadowOffset,\n shadowOpacity,\n shadowRadius,\n opacity,\n transform,\n };\n\n // Setting a property to undefined triggers default style\n // So we need to filter them out\n // Users can use `null` instead\n for (const styleProp in safeStyles) {\n // @ts-expect-error: typescript wrongly complains that styleProp cannot be used to index safeStyles\n if (safeStyles[styleProp] === undefined) {\n // @ts-expect-error\n // eslint-disable-next-line @typescript-eslint/no-dynamic-delete\n delete safeStyles[styleProp];\n }\n }\n\n const backgroundStyle = [\n safeStyles,\n headerShadowVisible === false && {\n elevation: 0,\n shadowOpacity: 0,\n borderBottomWidth: 0,\n },\n ];\n\n const leftButton = headerLeft\n ? headerLeft({\n tintColor: headerTintColor,\n pressColor: headerPressColor,\n pressOpacity: headerPressOpacity,\n labelVisible: headerLeftLabelVisible,\n })\n : null;\n\n const rightButton = headerRight\n ? headerRight({\n tintColor: headerTintColor,\n pressColor: headerPressColor,\n pressOpacity: headerPressOpacity,\n })\n : null;\n\n const headerTitle =\n typeof customTitle !== 'function'\n ? (props: React.ComponentProps<typeof HeaderTitle>) => (\n <HeaderTitle {...props} />\n )\n : customTitle;\n\n return (\n <React.Fragment>\n <Animated.View\n pointerEvents=\"box-none\"\n style={[\n StyleSheet.absoluteFill,\n { zIndex: 0 },\n backgroundContainerStyle,\n ]}\n >\n {headerBackground ? (\n headerBackground({ style: backgroundStyle })\n ) : headerTransparent ? null : (\n <HeaderBackground style={backgroundStyle} />\n )}\n </Animated.View>\n <Animated.View\n pointerEvents=\"box-none\"\n style={[{ height, minHeight, maxHeight, opacity, transform }]}\n >\n <View pointerEvents=\"none\" style={{ height: headerStatusBarHeight }} />\n <View pointerEvents=\"box-none\" style={styles.content}>\n <Animated.View\n pointerEvents=\"box-none\"\n style={[\n styles.left,\n headerTitleAlign === 'center' && styles.expand,\n { marginStart: insets.left },\n leftContainerStyle,\n ]}\n >\n {leftButton}\n </Animated.View>\n <Animated.View\n pointerEvents=\"box-none\"\n style={[\n styles.title,\n {\n // Avoid the title from going offscreen or overlapping buttons\n maxWidth:\n headerTitleAlign === 'center'\n ? layout.width -\n ((leftButton\n ? headerLeftLabelVisible !== false\n ? 80\n : 32\n : 16) +\n Math.max(insets.left, insets.right)) *\n 2\n : layout.width -\n ((leftButton ? 72 : 16) +\n (rightButton ? 72 : 16) +\n insets.left -\n insets.right),\n },\n titleContainerStyle,\n ]}\n >\n {headerTitle({\n children: title,\n allowFontScaling: titleAllowFontScaling,\n tintColor: headerTintColor,\n style: titleStyle,\n })}\n </Animated.View>\n <Animated.View\n pointerEvents=\"box-none\"\n style={[\n styles.right,\n styles.expand,\n { marginEnd: insets.right },\n rightContainerStyle,\n ]}\n >\n {rightButton}\n </Animated.View>\n </View>\n </Animated.View>\n </React.Fragment>\n );\n}\n\nconst styles = StyleSheet.create({\n content: {\n flex: 1,\n flexDirection: 'row',\n alignItems: 'stretch',\n },\n title: {\n marginHorizontal: 16,\n justifyContent: 'center',\n },\n left: {\n justifyContent: 'center',\n alignItems: 'flex-start',\n },\n right: {\n justifyContent: 'center',\n alignItems: 'flex-end',\n },\n expand: {\n flexGrow: 1,\n flexBasis: 0,\n },\n});\n"]}
package/lib/typescript/src/types.d.ts CHANGED
@@ -93,6 +93,23 @@ export declare type HeaderOptions = {
93
93
  * Style object for the header. You can specify a custom background color here, for example.
94
94
  */
95
95
  headerStyle?: StyleProp<ViewStyle>;
96
+ /**
97
+ * Whether to hide the elevation shadow (Android) or the bottom border (iOS) on the header.
98
+ *
99
+ * This is a short-hand for the following styles:
100
+ *
101
+ * ```js
102
+ * {
103
+ * elevation: 0,
104
+ * shadowOpacity: 0,
105
+ * borderBottomWidth: 0,
106
+ * }
107
+ * ```
108
+ *
109
+ * If the above styles are specified in `headerStyle` along with `headerShadowVisible: false`,
110
+ * then `headerShadowVisible: false` will take precedence.
111
+ */
112
+ headerShadowVisible?: boolean;
96
113
  /**
97
114
  * Extra padding to add at the top of header to account for translucent status bar.
98
115
  * By default, it uses the top value from the safe area insets of the device.
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": "1.1.2",
4
+ "version": "1.2.0",
5
5
  "keywords": [
6
6
  "react-native",
7
7
  "react-navigation",
@@ -38,7 +38,7 @@
38
38
  },
39
39
  "devDependencies": {
40
40
  "@react-native-masked-view/masked-view": "^0.2.4",
41
- "@react-navigation/native": "^6.0.4",
41
+ "@react-navigation/native": "^6.0.5",
42
42
  "@testing-library/react-native": "^7.2.0",
43
43
  "@types/react": "^17.0.9",
44
44
  "@types/react-native": "~0.64.9",
@@ -68,5 +68,5 @@
68
68
  ]
69
69
  ]
70
70
  },
71
- "gitHead": "6a19be7dae997fc23ac9475040a17fb2db4ebd52"
71
+ "gitHead": "66a007b0649e443b528e6875df292563d0ed426c"
72
72
  }
package/src/Header/Header.tsx CHANGED
@@ -70,6 +70,7 @@ export default function Header(props: Props) {
70
70
  headerTitleContainerStyle: titleContainerStyle,
71
71
  headerBackgroundContainerStyle: backgroundContainerStyle,
72
72
  headerStyle: customHeaderStyle,
73
+ headerShadowVisible,
73
74
  headerPressColor,
74
75
  headerPressOpacity,
75
76
  headerStatusBarHeight = isParentHeaderShown ? 0 : insets.top,
@@ -175,6 +176,15 @@ export default function Header(props: Props) {
175
176
  }
176
177
  }
177
178
 
179
+ const backgroundStyle = [
180
+ safeStyles,
181
+ headerShadowVisible === false && {
182
+ elevation: 0,
183
+ shadowOpacity: 0,
184
+ borderBottomWidth: 0,
185
+ },
186
+ ];
187
+
178
188
  const leftButton = headerLeft
179
189
  ? headerLeft({
180
190
  tintColor: headerTintColor,
@@ -210,9 +220,9 @@ export default function Header(props: Props) {
210
220
  ]}
211
221
  >
212
222
  {headerBackground ? (
213
- headerBackground({ style: safeStyles })
223
+ headerBackground({ style: backgroundStyle })
214
224
  ) : headerTransparent ? null : (
215
- <HeaderBackground style={safeStyles} />
225
+ <HeaderBackground style={backgroundStyle} />
216
226
  )}
217
227
  </Animated.View>
218
228
  <Animated.View
package/src/types.tsx CHANGED
@@ -99,6 +99,23 @@ export type HeaderOptions = {
99
99
  * Style object for the header. You can specify a custom background color here, for example.
100
100
  */
101
101
  headerStyle?: StyleProp<ViewStyle>;
102
+ /**
103
+ * Whether to hide the elevation shadow (Android) or the bottom border (iOS) on the header.
104
+ *
105
+ * This is a short-hand for the following styles:
106
+ *
107
+ * ```js
108
+ * {
109
+ * elevation: 0,
110
+ * shadowOpacity: 0,
111
+ * borderBottomWidth: 0,
112
+ * }
113
+ * ```
114
+ *
115
+ * If the above styles are specified in `headerStyle` along with `headerShadowVisible: false`,
116
+ * then `headerShadowVisible: false` will take precedence.
117
+ */
118
+ headerShadowVisible?: boolean;
102
119
  /**
103
120
  * Extra padding to add at the top of header to account for translucent status bar.
104
121
  * By default, it uses the top value from the safe area insets of the device.