@react-navigation/elements 1.1.1

package/src/SafeAreaProviderCompat.tsx

@@ -0,0 +1,61 @@
+import * as React from 'react';
+import {
+  Dimensions,
+  Platform,
+  StyleProp,
+  StyleSheet,
+  View,
+  ViewStyle,
+} from 'react-native';
+import {
+  initialWindowMetrics,
+  SafeAreaInsetsContext,
+  SafeAreaProvider,
+} from 'react-native-safe-area-context';
+
+type Props = {
+  children: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+};
+
+const { width = 0, height = 0 } = Dimensions.get('window');
+
+// To support SSR on web, we need to have empty insets for initial values
+// Otherwise there can be mismatch between SSR and client output
+// We also need to specify empty values to support tests environments
+const initialMetrics =
+  Platform.OS === 'web' || initialWindowMetrics == null
+    ? {
+        frame: { x: 0, y: 0, width, height },
+        insets: { top: 0, left: 0, right: 0, bottom: 0 },
+      }
+    : initialWindowMetrics;
+
+export default function SafeAreaProviderCompat({ children, style }: Props) {
+  return (
+    <SafeAreaInsetsContext.Consumer>
+      {(insets) => {
+        if (insets) {
+          // If we already have insets, don't wrap the stack in another safe area provider
+          // This avoids an issue with updates at the cost of potentially incorrect values
+          // https://github.com/react-navigation/react-navigation/issues/174
+          return <View style={[styles.container, style]}>{children}</View>;
+        }
+
+        return (
+          <SafeAreaProvider initialMetrics={initialMetrics} style={style}>
+            {children}
+          </SafeAreaProvider>
+        );
+      }}
+    </SafeAreaInsetsContext.Consumer>
+  );
+}
+
+SafeAreaProviderCompat.initialMetrics = initialMetrics;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+});

package/src/Screen.tsx

@@ -0,0 +1,109 @@
+import {
+  NavigationContext,
+  NavigationProp,
+  NavigationRouteContext,
+  ParamListBase,
+  RouteProp,
+} from '@react-navigation/native';
+import * as React from 'react';
+import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
+import {
+  useSafeAreaFrame,
+  useSafeAreaInsets,
+} from 'react-native-safe-area-context';
+
+import Background from './Background';
+import getDefaultHeaderHeight from './Header/getDefaultHeaderHeight';
+import HeaderHeightContext from './Header/HeaderHeightContext';
+import HeaderShownContext from './Header/HeaderShownContext';
+
+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) {
+  const dimensions = useSafeAreaFrame();
+  const insets = useSafeAreaInsets();
+
+  const isParentHeaderShown = React.useContext(HeaderShownContext);
+  const parentHeaderHeight = React.useContext(HeaderHeightContext);
+
+  const {
+    focused,
+    modal = false,
+    header,
+    headerShown = true,
+    headerTransparent,
+    headerStatusBarHeight = isParentHeaderShown ? 0 : insets.top,
+    navigation,
+    route,
+    children,
+    style,
+  } = props;
+
+  const [headerHeight, setHeaderHeight] = React.useState(() =>
+    getDefaultHeaderHeight(dimensions, modal, headerStatusBarHeight)
+  );
+
+  return (
+    <Background
+      accessibilityElementsHidden={!focused}
+      importantForAccessibility={focused ? 'auto' : 'no-hide-descendants'}
+      style={[styles.container, style]}
+    >
+      <View style={styles.content}>
+        <HeaderShownContext.Provider
+          value={isParentHeaderShown || headerShown !== false}
+        >
+          <HeaderHeightContext.Provider
+            value={headerShown ? headerHeight : parentHeaderHeight ?? 0}
+          >
+            {children}
+          </HeaderHeightContext.Provider>
+        </HeaderShownContext.Provider>
+      </View>
+      {headerShown ? (
+        <NavigationContext.Provider value={navigation}>
+          <NavigationRouteContext.Provider value={route}>
+            <View
+              onLayout={(e) => {
+                const { height } = e.nativeEvent.layout;
+
+                setHeaderHeight(height);
+              }}
+              style={headerTransparent ? styles.absolute : null}
+            >
+              {header}
+            </View>
+          </NavigationRouteContext.Provider>
+        </NavigationContext.Provider>
+      ) : null}
+    </Background>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexDirection: 'column-reverse',
+  },
+  // This is necessary to avoid applying 'column-reverse' to screen content
+  content: {
+    flex: 1,
+  },
+  absolute: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+  },
+});

package/src/getNamedContext.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+
+const contexts = '__react_navigation__elements_contexts';
+
+declare global {
+  var __react_navigation__elements_contexts: Map<string, React.Context<any>>;
+}
+
+// We use a global variable to keep our contexts so that we can reuse same contexts across packages
+global[contexts] = global[contexts] ?? new Map<string, React.Context<any>>();
+
+export default function getNamedContext<T>(
+  name: string,
+  initialValue: T
+): React.Context<T> {
+  let context = global[contexts].get(name);
+
+  if (context) {
+    return context;
+  }
+
+  context = React.createContext<T>(initialValue);
+  context.displayName = name;
+
+  global[contexts].set(name, context);
+
+  return context;
+}

package/src/index.tsx

@@ -0,0 +1,25 @@
+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 const Assets = [
+  // eslint-disable-next-line import/no-commonjs
+  require('./assets/back-icon.png'),
+  // eslint-disable-next-line import/no-commonjs
+  require('./assets/back-icon-mask.png'),
+];
+
+export * from './types';

package/src/types.tsx

@@ -0,0 +1,208 @@
+import type {
+  Animated,
+  LayoutChangeEvent,
+  StyleProp,
+  TextStyle,
+  ViewStyle,
+} from 'react-native';
+
+export type Layout = { width: number; height: number };
+
+export 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 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 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>;
+};