@react-navigation/elements 1.1.1

package/lib/typescript/src/MissingIcon.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { StyleProp, TextStyle } from 'react-native';
+declare type Props = {
+    color?: string;
+    size?: number;
+    style?: StyleProp<TextStyle>;
+};
+export default function MissingIcon({ color, size, style }: Props): JSX.Element;
+export {};

package/lib/typescript/src/PlatformPressable.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { Animated, PressableProps, StyleProp, ViewStyle } from 'react-native';
+export declare type Props = Omit<PressableProps, 'style'> & {
+    pressColor?: string;
+    pressOpacity?: number;
+    style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+    children: React.ReactNode;
+};
+/**
+ * PlatformPressable provides an abstraction on top of Pressable to handle platform differences.
+ */
+export default function PlatformPressable({ onPressIn, onPressOut, android_ripple, pressColor, pressOpacity, style, ...rest }: Props): JSX.Element;

package/lib/typescript/src/ResourceSavingView.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+declare type Props = {
+    visible: boolean;
+    children: React.ReactNode;
+    style?: StyleProp<ViewStyle>;
+};
+export default function ResourceSavingScene({ visible, children, style, ...rest }: Props): JSX.Element;
+export {};

package/lib/typescript/src/SafeAreaProviderCompat.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+declare type Props = {
+    children: React.ReactNode;
+    style?: StyleProp<ViewStyle>;
+};
+declare function SafeAreaProviderCompat({ children, style }: Props): JSX.Element;
+declare namespace SafeAreaProviderCompat {
+    var initialMetrics: import("react-native-safe-area-context").Metrics;
+}
+export default SafeAreaProviderCompat;

package/lib/typescript/src/Screen.d.ts

@@ -0,0 +1,17 @@
+import { NavigationProp, ParamListBase, RouteProp } from '@react-navigation/native';
+import * as React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+declare type Props = {
+    focused: boolean;
+    modal?: boolean;
+    navigation: NavigationProp<ParamListBase>;
+    route: RouteProp<ParamListBase>;
+    header: React.ReactNode;
+    headerShown?: boolean;
+    headerStatusBarHeight?: number;
+    headerTransparent?: boolean;
+    style?: StyleProp<ViewStyle>;
+    children: React.ReactNode;
+};
+export default function Screen(props: Props): JSX.Element;
+export {};

package/lib/typescript/src/getNamedContext.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+declare global {
+    var __react_navigation__elements_contexts: Map<string, React.Context<any>>;
+}
+export default function getNamedContext<T>(name: string, initialValue: T): React.Context<T>;

package/lib/typescript/src/index.d.ts

@@ -0,0 +1,18 @@
+export { default as Background } from './Background';
+export { default as getDefaultHeaderHeight } from './Header/getDefaultHeaderHeight';
+export { default as getHeaderTitle } from './Header/getHeaderTitle';
+export { default as Header } from './Header/Header';
+export { default as HeaderBackButton } from './Header/HeaderBackButton';
+export { default as HeaderBackContext } from './Header/HeaderBackContext';
+export { default as HeaderBackground } from './Header/HeaderBackground';
+export { default as HeaderHeightContext } from './Header/HeaderHeightContext';
+export { default as HeaderShownContext } from './Header/HeaderShownContext';
+export { default as HeaderTitle } from './Header/HeaderTitle';
+export { default as useHeaderHeight } from './Header/useHeaderHeight';
+export { default as MissingIcon } from './MissingIcon';
+export { default as PlatformPressable } from './PlatformPressable';
+export { default as ResourceSavingView } from './ResourceSavingView';
+export { default as SafeAreaProviderCompat } from './SafeAreaProviderCompat';
+export { default as Screen } from './Screen';
+export declare const Assets: any[];
+export * from './types';

package/lib/typescript/src/types.d.ts

@@ -0,0 +1,202 @@
+/// <reference types="react" />
+import type { Animated, LayoutChangeEvent, StyleProp, TextStyle, ViewStyle } from 'react-native';
+export declare type Layout = {
+    width: number;
+    height: number;
+};
+export declare type HeaderOptions = {
+    /**
+     * String or a function that returns a React Element to be used by the header.
+     * Defaults to screen `title` or route name.
+     *
+     * It receives `allowFontScaling`, `tintColor`, `style` and `children` in the options object as an argument.
+     * The title string is passed in `children`.
+     */
+    headerTitle?: string | ((props: HeaderTitleProps) => React.ReactNode);
+    /**
+     * How to align the the header title.
+     * Defaults to `center` on iOS and `left` on Android.
+     */
+    headerTitleAlign?: 'left' | 'center';
+    /**
+     * Style object for the title component.
+     */
+    headerTitleStyle?: Animated.WithAnimatedValue<StyleProp<TextStyle>>;
+    /**
+     * Style object for the container of the `headerTitle` element.
+     */
+    headerTitleContainerStyle?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+    /**
+     * Whether header title font should scale to respect Text Size accessibility settings. Defaults to `false`.
+     */
+    headerTitleAllowFontScaling?: boolean;
+    /**
+     * Function which returns a React Element to display on the left side of the header.
+     */
+    headerLeft?: (props: {
+        tintColor?: string;
+        pressColor?: string;
+        pressOpacity?: number;
+        labelVisible?: boolean;
+    }) => React.ReactNode;
+    /**
+     * Whether a label is visible in the left button. Used to add extra padding.
+     */
+    headerLeftLabelVisible?: boolean;
+    /**
+     * Style object for the container of the `headerLeft` element`.
+     */
+    headerLeftContainerStyle?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+    /**
+     * Function which returns a React Element to display on the right side of the header.
+     */
+    headerRight?: (props: {
+        tintColor?: string;
+        pressColor?: string;
+        pressOpacity?: number;
+    }) => React.ReactNode;
+    /**
+     * Style object for the container of the `headerRight` element.
+     */
+    headerRightContainerStyle?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+    /**
+     * Color for material ripple (Android >= 5.0 only).
+     */
+    headerPressColor?: string;
+    /**
+     * Color for material ripple (Android >= 5.0 only).
+     */
+    headerPressOpacity?: number;
+    /**
+     * Tint color for the header.
+     */
+    headerTintColor?: string;
+    /**
+     * Function which returns a React Element to render as the background of the header.
+     * This is useful for using backgrounds such as an image or a gradient.
+     * You can use this with `headerTransparent` to render a blur view, for example, to create a translucent header.
+     */
+    headerBackground?: (props: {
+        style: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+    }) => React.ReactNode;
+    /**
+     * Style object for the container of the `headerBackground` element.
+     */
+    headerBackgroundContainerStyle?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+    /**
+     * Defaults to `false`. If `true`, the header will not have a background unless you explicitly provide it with `headerBackground`.
+     * The header will also float over the screen so that it overlaps the content underneath.
+     * This is useful if you want to render a semi-transparent header or a blurred background.
+     */
+    headerTransparent?: boolean;
+    /**
+     * Style object for the header. You can specify a custom background color here, for example.
+     */
+    headerStyle?: StyleProp<ViewStyle>;
+    /**
+     * Extra padding to add at the top of header to account for translucent status bar.
+     * By default, it uses the top value from the safe area insets of the device.
+     * Pass 0 or a custom value to disable the default behaviour, and customize the height.
+     */
+    headerStatusBarHeight?: number;
+};
+export declare type HeaderTitleProps = {
+    /**
+     * The title text of the header.
+     */
+    children: string;
+    /**
+     * Whether title font should scale to respect Text Size accessibility settings.
+     */
+    allowFontScaling?: boolean;
+    /**
+     * Tint color for the header.
+     */
+    tintColor?: string;
+    /**
+     * Callback to trigger when the size of the title element changes.
+     */
+    onLayout?: (e: LayoutChangeEvent) => void;
+    /**
+     * Style object for the title element.
+     */
+    style?: Animated.WithAnimatedValue<StyleProp<TextStyle>>;
+};
+export declare type HeaderBackButtonProps = {
+    /**
+     * Whether the button is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Callback to call when the button is pressed.
+     */
+    onPress?: () => void;
+    /**
+     * Color for material ripple (Android >= 5.0 only).
+     */
+    pressColor?: string;
+    /**
+     * Opacity when the button is pressed, used when ripple is not supported.
+     */
+    pressOpacity?: number;
+    /**
+     * Function which returns a React Element to display custom image in header's back button.
+     */
+    backImage?: (props: {
+        tintColor: string;
+    }) => React.ReactNode;
+    /**
+     * Tint color for the header.
+     */
+    tintColor?: string;
+    /**
+     * Label text for the button. Usually the title of the previous screen.
+     * By default, this is only shown on iOS.
+     */
+    label?: string;
+    /**
+     * Label text to show when there isn't enough space for the full label.
+     */
+    truncatedLabel?: string;
+    /**
+     * Whether the label text is visible.
+     * Defaults to `true` on iOS and `false` on Android.
+     */
+    labelVisible?: boolean;
+    /**
+     * Style object for the label.
+     */
+    labelStyle?: Animated.WithAnimatedValue<StyleProp<TextStyle>>;
+    /**
+     * Whether label font should scale to respect Text Size accessibility settings.
+     */
+    allowFontScaling?: boolean;
+    /**
+     * Callback to trigger when the size of the label changes.
+     */
+    onLabelLayout?: (e: LayoutChangeEvent) => void;
+    /**
+     * Layout of the screen.
+     */
+    screenLayout?: Layout;
+    /**
+     * Layout of the title element in the header.
+     */
+    titleLayout?: Layout;
+    /**
+     * Whether it's possible to navigate back in stack.
+     */
+    canGoBack?: boolean;
+    /**
+     * Accessibility label for the button for screen readers.
+     */
+    accessibilityLabel?: string;
+    /**
+     * ID to locate this button in tests.
+     */
+    testID?: string;
+    /**
+     * Style object for the button.
+     */
+    style?: StyleProp<ViewStyle>;
+};

package/package.json

@@ -0,0 +1,72 @@
+{
+  "name": "@react-navigation/elements",
+  "description": "UI Components for React Navigation",
+  "version": "1.1.1",
+  "keywords": [
+    "react-native",
+    "react-navigation",
+    "ios",
+    "android"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/react-navigation/react-navigation.git",
+    "directory": "packages/elements"
+  },
+  "bugs": {
+    "url": "https://github.com/react-navigation/react-navigation/issues"
+  },
+  "homepage": "https://reactnavigation.org",
+  "main": "lib/commonjs/index.js",
+  "react-native": "src/index.tsx",
+  "source": "src/index.tsx",
+  "module": "lib/module/index.js",
+  "types": "lib/typescript/src/index.d.ts",
+  "files": [
+    "src",
+    "lib",
+    "!**/__tests__"
+  ],
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "prepare": "bob build",
+    "clean": "del lib"
+  },
+  "devDependencies": {
+    "@react-native-masked-view/masked-view": "^0.2.4",
+    "@react-navigation/native": "^6.0.3",
+    "@testing-library/react-native": "^7.2.0",
+    "@types/react": "^17.0.9",
+    "@types/react-native": "~0.64.9",
+    "del-cli": "^3.0.1",
+    "react": "~16.13.1",
+    "react-native": "~0.63.4",
+    "react-native-builder-bob": "^0.18.1",
+    "typescript": "^4.3.2"
+  },
+  "peerDependencies": {
+    "@react-navigation/native": "^6.0.0",
+    "react": "*",
+    "react-native": "*",
+    "react-native-safe-area-context": ">= 3.0.0"
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      "commonjs",
+      "module",
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  },
+  "gitHead": "38ac69f17ee314f96d3d4bcee02349fa4a02d422"
+}

package/src/Background.tsx

@@ -0,0 +1,18 @@
+import { useTheme } from '@react-navigation/native';
+import * as React from 'react';
+import { View, ViewProps } from 'react-native';
+
+type Props = ViewProps & {
+  children: React.ReactNode;
+};
+
+export default function Background({ style, ...rest }: Props) {
+  const { colors } = useTheme();
+
+  return (
+    <View
+      {...rest}
+      style={[{ flex: 1, backgroundColor: colors.background }, style]}
+    />
+  );
+}

package/src/Header/Header.tsx

@@ -0,0 +1,306 @@
+import * as React from 'react';
+import { Animated, Platform, StyleSheet, View, ViewStyle } from 'react-native';
+import {
+  useSafeAreaFrame,
+  useSafeAreaInsets,
+} from 'react-native-safe-area-context';
+
+import type { HeaderOptions, Layout } from '../types';
+import getDefaultHeaderHeight from './getDefaultHeaderHeight';
+import HeaderBackground from './HeaderBackground';
+import HeaderShownContext from './HeaderShownContext';
+import HeaderTitle from './HeaderTitle';
+
+type Props = HeaderOptions & {
+  /**
+   * Whether the header is in a modal
+   */
+  modal?: boolean;
+  /**
+   * Layout of the screen.
+   */
+  layout?: Layout;
+  /**
+   * Title text for the header.
+   */
+  title: string;
+};
+
+const warnIfHeaderStylesDefined = (styles: Record<string, any>) => {
+  Object.keys(styles).forEach((styleProp) => {
+    const value = styles[styleProp];
+
+    if (styleProp === 'position' && value === 'absolute') {
+      console.warn(
+        "position: 'absolute' is not supported on headerStyle. If you would like to render content under the header, use the 'headerTransparent' option."
+      );
+    } else if (value !== undefined) {
+      console.warn(
+        `${styleProp} was given a value of ${value}, this has no effect on headerStyle.`
+      );
+    }
+  });
+};
+
+export default function Header(props: Props) {
+  const insets = useSafeAreaInsets();
+  const frame = useSafeAreaFrame();
+
+  const isParentHeaderShown = React.useContext(HeaderShownContext);
+
+  const {
+    layout = frame,
+    modal = false,
+    title,
+    headerTitle: customTitle,
+    headerTitleAlign = Platform.select({
+      ios: 'center',
+      default: 'left',
+    }),
+    headerLeft,
+    headerLeftLabelVisible,
+    headerTransparent,
+    headerTintColor,
+    headerBackground,
+    headerRight,
+    headerTitleAllowFontScaling: titleAllowFontScaling,
+    headerTitleStyle: titleStyle,
+    headerLeftContainerStyle: leftContainerStyle,
+    headerRightContainerStyle: rightContainerStyle,
+    headerTitleContainerStyle: titleContainerStyle,
+    headerBackgroundContainerStyle: backgroundContainerStyle,
+    headerStyle: customHeaderStyle,
+    headerPressColor,
+    headerPressOpacity,
+    headerStatusBarHeight = isParentHeaderShown ? 0 : insets.top,
+  } = props;
+
+  const defaultHeight = getDefaultHeaderHeight(
+    layout,
+    modal,
+    headerStatusBarHeight
+  );
+
+  const {
+    height = defaultHeight,
+    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,
+    // @ts-expect-error: web support for shadow
+    boxShadow,
+    elevation,
+    shadowColor,
+    shadowOffset,
+    shadowOpacity,
+    shadowRadius,
+    opacity,
+    transform,
+    ...unsafeStyles
+  } = StyleSheet.flatten(customHeaderStyle || {}) as ViewStyle;
+
+  if (process.env.NODE_ENV !== 'production') {
+    warnIfHeaderStylesDefined(unsafeStyles);
+  }
+
+  const safeStyles: ViewStyle = {
+    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,
+    // @ts-expect-error: boxShadow is only for Web
+    boxShadow,
+    elevation,
+    shadowColor,
+    shadowOffset,
+    shadowOpacity,
+    shadowRadius,
+    opacity,
+    transform,
+  };
+
+  // Setting a property to undefined triggers default style
+  // So we need to filter them out
+  // Users can use `null` instead
+  for (const styleProp in safeStyles) {
+    // @ts-expect-error: typescript wrongly complains that styleProp cannot be used to index safeStyles
+    if (safeStyles[styleProp] === undefined) {
+      // @ts-expect-error
+      // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
+      delete safeStyles[styleProp];
+    }
+  }
+
+  const leftButton = headerLeft
+    ? headerLeft({
+        tintColor: headerTintColor,
+        pressColor: headerPressColor,
+        pressOpacity: headerPressOpacity,
+        labelVisible: headerLeftLabelVisible,
+      })
+    : null;
+
+  const rightButton = headerRight
+    ? headerRight({
+        tintColor: headerTintColor,
+        pressColor: headerPressColor,
+        pressOpacity: headerPressOpacity,
+      })
+    : null;
+
+  const headerTitle =
+    typeof customTitle !== 'function'
+      ? (props: React.ComponentProps<typeof HeaderTitle>) => (
+          <HeaderTitle {...props} />
+        )
+      : customTitle;
+
+  return (
+    <React.Fragment>
+      <Animated.View
+        pointerEvents="box-none"
+        style={[
+          StyleSheet.absoluteFill,
+          { zIndex: 0 },
+          backgroundContainerStyle,
+        ]}
+      >
+        {headerBackground ? (
+          headerBackground({ style: safeStyles })
+        ) : headerTransparent ? null : (
+          <HeaderBackground style={safeStyles} />
+        )}
+      </Animated.View>
+      <Animated.View
+        pointerEvents="box-none"
+        style={[{ height, minHeight, maxHeight, opacity, transform }]}
+      >
+        <View pointerEvents="none" style={{ height: headerStatusBarHeight }} />
+        <View pointerEvents="box-none" style={styles.content}>
+          <Animated.View
+            pointerEvents="box-none"
+            style={[
+              styles.left,
+              headerTitleAlign === 'center' && styles.expand,
+              { marginStart: insets.left },
+              leftContainerStyle,
+            ]}
+          >
+            {leftButton}
+          </Animated.View>
+          <Animated.View
+            pointerEvents="box-none"
+            style={[
+              styles.title,
+              {
+                // Avoid the title from going offscreen or overlapping buttons
+                maxWidth:
+                  headerTitleAlign === 'center'
+                    ? layout.width -
+                      ((leftButton
+                        ? headerLeftLabelVisible !== false
+                          ? 80
+                          : 32
+                        : 16) +
+                        Math.max(insets.left, insets.right)) *
+                        2
+                    : layout.width -
+                      ((leftButton ? 72 : 16) +
+                        (rightButton ? 72 : 16) +
+                        insets.left -
+                        insets.right),
+              },
+              titleContainerStyle,
+            ]}
+          >
+            {headerTitle({
+              children: title,
+              allowFontScaling: titleAllowFontScaling,
+              tintColor: headerTintColor,
+              style: titleStyle,
+            })}
+          </Animated.View>
+          <Animated.View
+            pointerEvents="box-none"
+            style={[
+              styles.right,
+              styles.expand,
+              { marginEnd: insets.right },
+              rightContainerStyle,
+            ]}
+          >
+            {rightButton}
+          </Animated.View>
+        </View>
+      </Animated.View>
+    </React.Fragment>
+  );
+}
+
+const styles = StyleSheet.create({
+  content: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'stretch',
+  },
+  title: {
+    marginHorizontal: 16,
+    justifyContent: 'center',
+  },
+  left: {
+    justifyContent: 'center',
+    alignItems: 'flex-start',
+  },
+  right: {
+    justifyContent: 'center',
+    alignItems: 'flex-end',
+  },
+  expand: {
+    flexGrow: 1,
+    flexBasis: 0,
+  },
+});