@react-navigation/elements 1.1.1

package/src/Header/HeaderBackButton.tsx

@@ -0,0 +1,240 @@
+import { useTheme } from '@react-navigation/native';
+import * as React from 'react';
+import {
+  Animated,
+  I18nManager,
+  Image,
+  LayoutChangeEvent,
+  Platform,
+  StyleSheet,
+  View,
+} from 'react-native';
+
+import MaskedView from '../MaskedView';
+import PlatformPressable from '../PlatformPressable';
+import type { HeaderBackButtonProps } from '../types';
+
+export default function HeaderBackButton({
+  disabled,
+  allowFontScaling,
+  backImage,
+  label,
+  labelStyle,
+  labelVisible,
+  onLabelLayout,
+  onPress,
+  pressColor,
+  pressOpacity,
+  screenLayout,
+  tintColor: customTintColor,
+  titleLayout,
+  truncatedLabel = 'Back',
+  accessibilityLabel = label && label !== 'Back' ? `${label}, back` : 'Go back',
+  testID,
+  style,
+}: HeaderBackButtonProps) {
+  const { colors } = useTheme();
+
+  const [initialLabelWidth, setInitialLabelWidth] =
+    React.useState<undefined | number>(undefined);
+
+  const tintColor =
+    customTintColor !== undefined
+      ? customTintColor
+      : Platform.select({
+          ios: colors.primary,
+          default: colors.text,
+        });
+
+  const handleLabelLayout = (e: LayoutChangeEvent) => {
+    onLabelLayout?.(e);
+
+    setInitialLabelWidth(e.nativeEvent.layout.x + e.nativeEvent.layout.width);
+  };
+
+  const shouldTruncateLabel = () => {
+    return (
+      !label ||
+      (initialLabelWidth &&
+        titleLayout &&
+        screenLayout &&
+        (screenLayout.width - titleLayout.width) / 2 < initialLabelWidth + 26)
+    );
+  };
+
+  const renderBackImage = () => {
+    if (backImage) {
+      return backImage({ tintColor });
+    } else {
+      return (
+        <Image
+          style={[
+            styles.icon,
+            Boolean(labelVisible) && styles.iconWithLabel,
+            Boolean(tintColor) && { tintColor },
+          ]}
+          source={require('../assets/back-icon.png')}
+          fadeDuration={0}
+        />
+      );
+    }
+  };
+
+  const renderLabel = () => {
+    const leftLabelText = shouldTruncateLabel() ? truncatedLabel : label;
+
+    if (!labelVisible || leftLabelText === undefined) {
+      return null;
+    }
+
+    const labelElement = (
+      <View
+        style={
+          screenLayout
+            ? // We make the button extend till the middle of the screen
+              // Otherwise it appears to cut off when translating
+              [styles.labelWrapper, { minWidth: screenLayout.width / 2 - 27 }]
+            : null
+        }
+      >
+        <Animated.Text
+          accessible={false}
+          onLayout={
+            // This measurement is used to determine if we should truncate the label when it doesn't fit
+            // Only measure it when label is not truncated because we want the measurement of full label
+            leftLabelText === label ? handleLabelLayout : undefined
+          }
+          style={[
+            styles.label,
+            tintColor ? { color: tintColor } : null,
+            labelStyle,
+          ]}
+          numberOfLines={1}
+          allowFontScaling={!!allowFontScaling}
+        >
+          {leftLabelText}
+        </Animated.Text>
+      </View>
+    );
+
+    if (backImage || Platform.OS !== 'ios') {
+      // When a custom backimage is specified, we can't mask the label
+      // Otherwise there might be weird effect due to our mask not being the same as the image
+      return labelElement;
+    }
+
+    return (
+      <MaskedView
+        maskElement={
+          <View style={styles.iconMaskContainer}>
+            <Image
+              source={require('../assets/back-icon-mask.png')}
+              style={styles.iconMask}
+            />
+            <View style={styles.iconMaskFillerRect} />
+          </View>
+        }
+      >
+        {labelElement}
+      </MaskedView>
+    );
+  };
+
+  const handlePress = () => onPress && requestAnimationFrame(onPress);
+
+  return (
+    <PlatformPressable
+      disabled={disabled}
+      accessible
+      accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel}
+      testID={testID}
+      onPress={disabled ? undefined : handlePress}
+      pressColor={pressColor}
+      pressOpacity={pressOpacity}
+      android_ripple={{ borderless: true }}
+      style={[styles.container, disabled && styles.disabled, style]}
+      hitSlop={Platform.select({
+        ios: undefined,
+        default: { top: 16, right: 16, bottom: 16, left: 16 },
+      })}
+    >
+      <React.Fragment>
+        {renderBackImage()}
+        {renderLabel()}
+      </React.Fragment>
+    </PlatformPressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    minWidth: StyleSheet.hairlineWidth, // Avoid collapsing when title is long
+    ...Platform.select({
+      ios: null,
+      default: {
+        marginVertical: 3,
+        marginHorizontal: 11,
+      },
+    }),
+  },
+  disabled: {
+    opacity: 0.5,
+  },
+  label: {
+    fontSize: 17,
+    // Title and back label are a bit different width due to title being bold
+    // Adjusting the letterSpacing makes them coincide better
+    letterSpacing: 0.35,
+  },
+  labelWrapper: {
+    // These styles will make sure that the label doesn't fill the available space
+    // Otherwise it messes with the measurement of the label
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+  },
+  icon: Platform.select({
+    ios: {
+      height: 21,
+      width: 13,
+      marginLeft: 8,
+      marginRight: 22,
+      marginVertical: 12,
+      resizeMode: 'contain',
+      transform: [{ scaleX: I18nManager.isRTL ? -1 : 1 }],
+    },
+    default: {
+      height: 24,
+      width: 24,
+      margin: 3,
+      resizeMode: 'contain',
+      transform: [{ scaleX: I18nManager.isRTL ? -1 : 1 }],
+    },
+  }),
+  iconWithLabel:
+    Platform.OS === 'ios'
+      ? {
+          marginRight: 6,
+        }
+      : {},
+  iconMaskContainer: {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'center',
+  },
+  iconMaskFillerRect: {
+    flex: 1,
+    backgroundColor: '#000',
+  },
+  iconMask: {
+    height: 21,
+    width: 13,
+    marginLeft: -14.5,
+    marginVertical: 12,
+    alignSelf: 'center',
+    resizeMode: 'contain',
+    transform: [{ scaleX: I18nManager.isRTL ? -1 : 1 }],
+  },
+});

package/src/Header/HeaderBackContext.tsx

@@ -0,0 +1,8 @@
+import getNamedContext from '../getNamedContext';
+
+const HeaderBackContext = getNamedContext<{ title: string } | undefined>(
+  'HeaderBackContext',
+  undefined
+);
+
+export default HeaderBackContext;

package/src/Header/HeaderBackground.tsx

@@ -0,0 +1,56 @@
+import { useTheme } from '@react-navigation/native';
+import * as React from 'react';
+import {
+  Animated,
+  Platform,
+  StyleProp,
+  StyleSheet,
+  ViewProps,
+  ViewStyle,
+} from 'react-native';
+
+type Props = ViewProps & {
+  style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+  children?: React.ReactNode;
+};
+
+export default function HeaderBackground({ style, ...rest }: Props) {
+  const { colors } = useTheme();
+
+  return (
+    <Animated.View
+      style={[
+        styles.container,
+        {
+          backgroundColor: colors.card,
+          borderBottomColor: colors.border,
+          shadowColor: colors.border,
+        },
+        style,
+      ]}
+      {...rest}
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    ...Platform.select({
+      android: {
+        elevation: 4,
+      },
+      ios: {
+        shadowOpacity: 0.85,
+        shadowRadius: 0,
+        shadowOffset: {
+          width: 0,
+          height: StyleSheet.hairlineWidth,
+        },
+      },
+      default: {
+        borderBottomWidth: StyleSheet.hairlineWidth,
+      },
+    }),
+  },
+});

package/src/Header/HeaderHeightContext.tsx

@@ -0,0 +1,8 @@
+import getNamedContext from '../getNamedContext';
+
+const HeaderHeightContext = getNamedContext<number | undefined>(
+  'HeaderHeightContext',
+  undefined
+);
+
+export default HeaderHeightContext;

package/src/Header/HeaderShownContext.tsx

@@ -0,0 +1,5 @@
+import getNamedContext from '../getNamedContext';
+
+const HeaderShownContext = getNamedContext('HeaderShownContext', false);
+
+export default HeaderShownContext;

package/src/Header/HeaderTitle.tsx

@@ -0,0 +1,52 @@
+import { useTheme } from '@react-navigation/native';
+import * as React from 'react';
+import {
+  Animated,
+  Platform,
+  StyleProp,
+  StyleSheet,
+  TextProps,
+  TextStyle,
+} from 'react-native';
+
+type Props = Omit<TextProps, 'style'> & {
+  tintColor?: string;
+  children?: string;
+  style?: Animated.WithAnimatedValue<StyleProp<TextStyle>>;
+};
+
+export default function HeaderTitle({ tintColor, style, ...rest }: Props) {
+  const { colors } = useTheme();
+
+  return (
+    <Animated.Text
+      accessibilityRole="header"
+      aria-level="1"
+      numberOfLines={1}
+      {...rest}
+      style={[
+        styles.title,
+        { color: tintColor === undefined ? colors.text : tintColor },
+        style,
+      ]}
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  title: Platform.select({
+    ios: {
+      fontSize: 17,
+      fontWeight: '600',
+    },
+    android: {
+      fontSize: 20,
+      fontFamily: 'sans-serif-medium',
+      fontWeight: 'normal',
+    },
+    default: {
+      fontSize: 18,
+      fontWeight: '500',
+    },
+  }),
+});

package/src/Header/getDefaultHeaderHeight.tsx

@@ -0,0 +1,39 @@
+import { Platform } from 'react-native';
+
+import type { Layout } from '../types';
+
+export default function getDefaultHeaderHeight(
+  layout: Layout,
+  modalPresentation: boolean,
+  statusBarHeight: number
+): number {
+  let headerHeight;
+
+  const isLandscape = layout.width > layout.height;
+
+  if (Platform.OS === 'ios') {
+    if (Platform.isPad) {
+      if (modalPresentation) {
+        headerHeight = 56;
+      } else {
+        headerHeight = 50;
+      }
+    } else {
+      if (isLandscape) {
+        headerHeight = 32;
+      } else {
+        if (modalPresentation) {
+          headerHeight = 56;
+        } else {
+          headerHeight = 44;
+        }
+      }
+    }
+  } else if (Platform.OS === 'android') {
+    headerHeight = 56;
+  } else {
+    headerHeight = 64;
+  }
+
+  return headerHeight + statusBarHeight;
+}

package/src/Header/getHeaderTitle.tsx

@@ -0,0 +1,12 @@
+import type { HeaderOptions } from '../types';
+
+export default function getHeaderTitle(
+  options: { title?: string; headerTitle?: HeaderOptions['headerTitle'] },
+  fallback: string
+): string {
+  return typeof options.headerTitle === 'string'
+    ? options.headerTitle
+    : options.title !== undefined
+    ? options.title
+    : fallback;
+}

package/src/Header/useHeaderHeight.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+
+import HeaderHeightContext from './HeaderHeightContext';
+
+export default function useHeaderHeight() {
+  const height = React.useContext(HeaderHeightContext);
+
+  if (height === undefined) {
+    throw new Error(
+      "Couldn't find the header height. Are you inside a screen in a navigator with a header?"
+    );
+  }
+
+  return height;
+}

package/src/MaskedView.android.tsx

@@ -0,0 +1 @@
+export { default } from './MaskedViewNative';

package/src/MaskedView.ios.tsx

@@ -0,0 +1 @@
+export { default } from './MaskedViewNative';

package/src/MaskedView.tsx

@@ -0,0 +1,13 @@
+/**
+ * Use a stub for MaskedView on all Platforms that don't support it.
+ */
+import type * as React from 'react';
+
+type Props = {
+  maskElement: React.ReactElement;
+  children: React.ReactElement;
+};
+
+export default function MaskedView({ children }: Props) {
+  return children;
+}

package/src/MaskedViewNative.tsx

@@ -0,0 +1,33 @@
+/**
+ * The native MaskedView that we explicitly re-export for supported platforms: Android, iOS.
+ */
+import * as React from 'react';
+import { UIManager } from 'react-native';
+
+type MaskedViewType =
+  typeof import('@react-native-masked-view/masked-view').default;
+
+type Props = React.ComponentProps<MaskedViewType> & {
+  children: React.ReactElement;
+};
+
+let RNCMaskedView: MaskedViewType | undefined;
+
+try {
+  // Add try/catch to support usage even if it's not installed, since it's optional.
+  // Newer versions of Metro will handle it properly.
+  RNCMaskedView = require('@react-native-masked-view/masked-view').default;
+} catch (e) {
+  // Ignore
+}
+
+const isMaskedViewAvailable =
+  UIManager.getViewManagerConfig('RNCMaskedView') != null;
+
+export default function MaskedView({ children, ...rest }: Props) {
+  if (isMaskedViewAvailable && RNCMaskedView) {
+    return <RNCMaskedView {...rest}>{children}</RNCMaskedView>;
+  }
+
+  return children;
+}

package/src/MissingIcon.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { StyleProp, StyleSheet, Text, TextStyle } from 'react-native';
+
+type Props = {
+  color?: string;
+  size?: number;
+  style?: StyleProp<TextStyle>;
+};
+
+export default function MissingIcon({ color, size, style }: Props) {
+  return <Text style={[styles.icon, { color, fontSize: size }, style]}>⏷</Text>;
+}
+
+const styles = StyleSheet.create({
+  icon: {
+    backgroundColor: 'transparent',
+  },
+});

package/src/PlatformPressable.tsx

@@ -0,0 +1,86 @@
+import { useTheme } from '@react-navigation/native';
+import * as React from 'react';
+import {
+  Animated,
+  Easing,
+  GestureResponderEvent,
+  Platform,
+  Pressable,
+  PressableProps,
+  StyleProp,
+  ViewStyle,
+} from 'react-native';
+
+export type Props = Omit<PressableProps, 'style'> & {
+  pressColor?: string;
+  pressOpacity?: number;
+  style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+  children: React.ReactNode;
+};
+
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+
+const ANDROID_VERSION_LOLLIPOP = 21;
+const ANDROID_SUPPORTS_RIPPLE =
+  Platform.OS === 'android' && Platform.Version >= ANDROID_VERSION_LOLLIPOP;
+
+/**
+ * PlatformPressable provides an abstraction on top of Pressable to handle platform differences.
+ */
+export default function PlatformPressable({
+  onPressIn,
+  onPressOut,
+  android_ripple,
+  pressColor,
+  pressOpacity = 0.3,
+  style,
+  ...rest
+}: Props) {
+  const { dark } = useTheme();
+  const [opacity] = React.useState(() => new Animated.Value(1));
+
+  const animateTo = (toValue: number, duration: number) => {
+    if (ANDROID_SUPPORTS_RIPPLE) {
+      return;
+    }
+
+    Animated.timing(opacity, {
+      toValue,
+      duration,
+      easing: Easing.inOut(Easing.quad),
+      useNativeDriver: true,
+    }).start();
+  };
+
+  const handlePressIn = (e: GestureResponderEvent) => {
+    animateTo(pressOpacity, 0);
+    onPressIn?.(e);
+  };
+
+  const handlePressOut = (e: GestureResponderEvent) => {
+    animateTo(1, 200);
+    onPressOut?.(e);
+  };
+
+  return (
+    <AnimatedPressable
+      onPressIn={handlePressIn}
+      onPressOut={handlePressOut}
+      android_ripple={
+        ANDROID_SUPPORTS_RIPPLE
+          ? {
+              color:
+                pressColor !== undefined
+                  ? pressColor
+                  : dark
+                  ? 'rgba(255, 255, 255, .32)'
+                  : 'rgba(0, 0, 0, .32)',
+              ...android_ripple,
+            }
+          : undefined
+      }
+      style={[{ opacity: !ANDROID_SUPPORTS_RIPPLE ? opacity : 1 }, style]}
+      {...rest}
+    />
+  );
+}

package/src/ResourceSavingView.tsx

@@ -0,0 +1,70 @@
+import * as React from 'react';
+import { Platform, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
+
+type Props = {
+  visible: boolean;
+  children: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+};
+
+const FAR_FAR_AWAY = 30000; // this should be big enough to move the whole view out of its container
+
+export default function ResourceSavingScene({
+  visible,
+  children,
+  style,
+  ...rest
+}: Props) {
+  if (Platform.OS === 'web') {
+    return (
+      <View
+        // @ts-expect-error: hidden exists on web, but not in React Native
+        hidden={!visible}
+        style={[
+          { display: visible ? 'flex' : 'none' },
+          styles.container,
+          style,
+        ]}
+        pointerEvents={visible ? 'auto' : 'none'}
+        {...rest}
+      >
+        {children}
+      </View>
+    );
+  }
+
+  return (
+    <View
+      style={[styles.container, style]}
+      // box-none doesn't seem to work properly on Android
+      pointerEvents={visible ? 'auto' : 'none'}
+    >
+      <View
+        collapsable={false}
+        removeClippedSubviews={
+          // On iOS & macOS, set removeClippedSubviews to true only when not focused
+          // This is an workaround for a bug where the clipped view never re-appears
+          Platform.OS === 'ios' || Platform.OS === 'macos' ? !visible : true
+        }
+        pointerEvents={visible ? 'auto' : 'none'}
+        style={visible ? styles.attached : styles.detached}
+      >
+        {children}
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    overflow: 'hidden',
+  },
+  attached: {
+    flex: 1,
+  },
+  detached: {
+    flex: 1,
+    top: FAR_FAR_AWAY,
+  },
+});