@react-native-ohos/elements 2.3.9-rc.1

package/src/Header/HeaderBackButton.tsx

@@ -0,0 +1,249 @@
+import { useLocale, useTheme } from '@react-navigation/native';
+import * as React from 'react';
+import {
+  Animated,
+  Image,
+  Platform,
+  type StyleProp,
+  StyleSheet,
+  type TextStyle,
+  View,
+} from 'react-native';
+
+import backIcon from '../assets/back-icon.png';
+import backIconMask from '../assets/back-icon-mask.png';
+import { MaskedView } from '../MaskedView';
+import type { HeaderBackButtonProps } from '../types';
+import { HeaderButton } from './HeaderButton';
+import { HeaderIcon, ICON_MARGIN } from './HeaderIcon';
+
+export function HeaderBackButton({
+  disabled,
+  allowFontScaling,
+  backImage,
+  label,
+  labelStyle,
+  displayMode = Platform.OS === 'ios' ? 'default' : 'minimal',
+  onLabelLayout,
+  onPress,
+  pressColor,
+  pressOpacity,
+  screenLayout,
+  tintColor,
+  titleLayout,
+  truncatedLabel = 'Back',
+  accessibilityLabel = label && label !== 'Back' ? `${label}, back` : 'Go back',
+  testID,
+  style,
+  href,
+}: HeaderBackButtonProps) {
+  const { colors, fonts } = useTheme();
+  const { direction } = useLocale();
+
+  const [labelWidth, setLabelWidth] = React.useState<number | null>(null);
+  const [truncatedLabelWidth, setTruncatedLabelWidth] = React.useState<
+    number | null
+  >(null);
+
+  const renderBackImage = () => {
+    if (backImage) {
+      return backImage({ tintColor: tintColor ?? colors.text });
+    } else {
+      return (
+        <HeaderIcon
+          source={backIcon}
+          tintColor={tintColor}
+          style={[
+            styles.icon,
+            displayMode !== 'minimal' && styles.iconWithLabel,
+          ]}
+        />
+      );
+    }
+  };
+
+  const renderLabel = () => {
+    if (displayMode === 'minimal') {
+      return null;
+    }
+
+    const availableSpace =
+      titleLayout && screenLayout
+        ? (screenLayout.width - titleLayout.width) / 2 -
+          (ICON_WIDTH + ICON_MARGIN)
+        : null;
+
+    const potentialLabelText =
+      displayMode === 'default' ? label : truncatedLabel;
+    const finalLabelText =
+      availableSpace && labelWidth && truncatedLabelWidth
+        ? availableSpace > labelWidth
+          ? potentialLabelText
+          : availableSpace > truncatedLabelWidth
+            ? truncatedLabel
+            : null
+        : potentialLabelText;
+
+    const commonStyle: Animated.WithAnimatedValue<StyleProp<TextStyle>> = [
+      fonts.regular,
+      styles.label,
+      labelStyle,
+    ];
+
+    const hiddenStyle: Animated.WithAnimatedValue<StyleProp<TextStyle>> = [
+      commonStyle,
+      {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        opacity: 0,
+      },
+    ];
+
+    const labelElement = (
+      <View style={styles.labelWrapper}>
+        {label && displayMode === 'default' ? (
+          <Animated.Text
+            style={hiddenStyle}
+            numberOfLines={1}
+            onLayout={(e) => setLabelWidth(e.nativeEvent.layout.width)}
+          >
+            {label}
+          </Animated.Text>
+        ) : null}
+        {truncatedLabel ? (
+          <Animated.Text
+            style={hiddenStyle}
+            numberOfLines={1}
+            onLayout={(e) => setTruncatedLabelWidth(e.nativeEvent.layout.width)}
+          >
+            {truncatedLabel}
+          </Animated.Text>
+        ) : null}
+        {finalLabelText ? (
+          <Animated.Text
+            accessible={false}
+            onLayout={onLabelLayout}
+            style={[tintColor ? { color: tintColor } : null, commonStyle]}
+            numberOfLines={1}
+            allowFontScaling={!!allowFontScaling}
+          >
+            {finalLabelText}
+          </Animated.Text>
+        ) : null}
+      </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,
+              // Extend the mask to the center of the screen so that label isn't clipped during animation
+              screenLayout ? { minWidth: screenLayout.width / 2 - 27 } : null,
+            ]}
+          >
+            <Image
+              source={backIconMask}
+              resizeMode="contain"
+              style={[styles.iconMask, direction === 'rtl' && styles.flip]}
+            />
+            <View style={styles.iconMaskFillerRect} />
+          </View>
+        }
+      >
+        {labelElement}
+      </MaskedView>
+    );
+  };
+
+  const handlePress = () => {
+    if (onPress) {
+      requestAnimationFrame(() => onPress());
+    }
+  };
+
+  return (
+    <HeaderButton
+      disabled={disabled}
+      href={href}
+      accessibilityLabel={accessibilityLabel}
+      testID={testID}
+      onPress={handlePress}
+      pressColor={pressColor}
+      pressOpacity={pressOpacity}
+      style={[styles.container, style]}
+    >
+      <React.Fragment>
+        {renderBackImage()}
+        {renderLabel()}
+      </React.Fragment>
+    </HeaderButton>
+  );
+}
+
+const ICON_WIDTH = Platform.OS === 'ios' ? 13 : 24;
+const ICON_MARGIN_END = Platform.OS === 'ios' ? 22 : 3;
+
+const styles = StyleSheet.create({
+  container: {
+    paddingHorizontal: 0,
+    minWidth: StyleSheet.hairlineWidth, // Avoid collapsing when title is long
+    ...Platform.select({
+      ios: null,
+      default: {
+        marginVertical: 3,
+        marginHorizontal: 11,
+      },
+    }),
+  },
+  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',
+    marginEnd: ICON_MARGIN,
+  },
+  icon: {
+    width: ICON_WIDTH,
+    marginEnd: ICON_MARGIN_END,
+  },
+  iconWithLabel:
+    Platform.OS === 'ios'
+      ? {
+          marginEnd: 6,
+        }
+      : {},
+  iconMaskContainer: {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'center',
+  },
+  iconMaskFillerRect: {
+    flex: 1,
+    backgroundColor: '#000',
+  },
+  iconMask: {
+    height: 21,
+    width: 13,
+    marginStart: -14.5,
+    marginVertical: 12,
+    alignSelf: 'center',
+  },
+  flip: {
+    transform: 'scaleX(-1)',
+  },
+});

package/src/Header/HeaderBackContext.tsx

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

package/src/Header/HeaderBackground.tsx

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

package/src/Header/HeaderButton.tsx

@@ -0,0 +1,55 @@
+import { Platform, StyleSheet } from 'react-native';
+
+import { PlatformPressable } from '../PlatformPressable';
+import type { HeaderButtonProps } from '../types';
+
+export function HeaderButton({
+  disabled,
+  onPress,
+  pressColor,
+  pressOpacity,
+  accessibilityLabel,
+  testID,
+  style,
+  href,
+  children,
+}: HeaderButtonProps) {
+  return (
+    <PlatformPressable
+      disabled={disabled}
+      href={href}
+      accessibilityLabel={accessibilityLabel}
+      testID={testID}
+      onPress={onPress}
+      pressColor={pressColor}
+      pressOpacity={pressOpacity}
+      android_ripple={androidRipple}
+      style={[styles.container, disabled && styles.disabled, style]}
+      hitSlop={Platform.select({
+        ios: undefined,
+        default: { top: 16, right: 16, bottom: 16, left: 16 },
+      })}
+    >
+      {children}
+    </PlatformPressable>
+  );
+}
+
+const androidRipple = {
+  borderless: true,
+  foreground: Platform.OS === 'android' && Platform.Version >= 23,
+  radius: 20,
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 8,
+    // Roundness for iPad hover effect
+    borderRadius: 10,
+  },
+  disabled: {
+    opacity: 0.5,
+  },
+});

package/src/Header/HeaderHeightContext.tsx

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

package/src/Header/HeaderIcon.tsx

@@ -0,0 +1,32 @@
+import { useLocale, useTheme } from '@react-navigation/native';
+import { Image, type ImageProps, Platform, StyleSheet } from 'react-native';
+
+export function HeaderIcon({ source, style, ...rest }: ImageProps) {
+  const { colors } = useTheme();
+  const { direction } = useLocale();
+
+  return (
+    <Image
+      source={source}
+      resizeMode="contain"
+      fadeDuration={0}
+      tintColor={colors.text}
+      style={[styles.icon, direction === 'rtl' && styles.flip, style]}
+      {...rest}
+    />
+  );
+}
+
+export const ICON_SIZE = Platform.OS === 'ios' ? 21 : 24;
+export const ICON_MARGIN = Platform.OS === 'ios' ? 8 : 3;
+
+const styles = StyleSheet.create({
+  icon: {
+    width: ICON_SIZE,
+    height: ICON_SIZE,
+    margin: ICON_MARGIN,
+  },
+  flip: {
+    transform: 'scaleX(-1)',
+  },
+});