@react-navigation/elements 2.0.0-rc.2 → 2.0.0-rc.21

package/src/Header/HeaderBackButton.tsx

@@ -3,15 +3,19 @@ import * as React from 'react';
 import {
   Animated,
   Image,
-  type LayoutChangeEvent,
   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,
@@ -19,13 +23,13 @@ export function HeaderBackButton({
   backImage,
   label,
   labelStyle,
-  labelVisible = Platform.OS === 'ios',
+  displayMode = Platform.OS === 'ios' ? 'default' : 'minimal',
   onLabelLayout,
   onPress,
   pressColor,
   pressOpacity,
   screenLayout,
-  tintColor: customTintColor,
+  tintColor,
   titleLayout,
   truncatedLabel = 'Back',
   accessibilityLabel = label && label !== 'Back' ? `${label}, back` : 'Go back',
@@ -36,85 +40,97 @@ export function HeaderBackButton({
   const { colors, fonts } = useTheme();
   const { direction } = useLocale();
 
-  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);
-
-    const { layout } = e.nativeEvent;
-
-    setInitialLabelWidth(
-      (direction === 'rtl' ? layout.y : layout.x) + layout.width
-    );
-  };
-
-  const shouldTruncateLabel = () => {
-    return (
-      !label ||
-      (initialLabelWidth &&
-        titleLayout &&
-        screenLayout &&
-        (screenLayout.width - titleLayout.width) / 2 < initialLabelWidth + 26)
-    );
-  };
+  const [labelWidth, setLabelWidth] = React.useState<number | null>(null);
+  const [truncatedLabelWidth, setTruncatedLabelWidth] = React.useState<
+    number | null
+  >(null);
 
   const renderBackImage = () => {
     if (backImage) {
-      return backImage({ tintColor });
+      return backImage({ tintColor: tintColor ?? colors.text });
     } else {
       return (
-        <Image
+        <HeaderIcon
           style={[
             styles.icon,
-            direction === 'rtl' && styles.flip,
-            Boolean(labelVisible) && styles.iconWithLabel,
+            displayMode !== 'minimal' && styles.iconWithLabel,
             Boolean(tintColor) && { tintColor },
           ]}
-          resizeMode="contain"
-          source={require('../assets/back-icon.png')}
-          fadeDuration={0}
+          source={backIcon}
         />
       );
     }
   };
 
   const renderLabel = () => {
-    const leftLabelText = shouldTruncateLabel() ? truncatedLabel : label;
-
-    if (!labelVisible || leftLabelText === undefined) {
+    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}>
-        <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={[
-            tintColor ? { color: tintColor } : null,
-            fonts.regular,
-            styles.label,
-            labelStyle,
-          ]}
-          numberOfLines={1}
-          allowFontScaling={!!allowFontScaling}
-        >
-          {leftLabelText}
-        </Animated.Text>
+        {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>
     );
 
@@ -135,7 +151,7 @@ export function HeaderBackButton({
             ]}
           >
             <Image
-              source={require('../assets/back-icon-mask.png')}
+              source={backIconMask}
               resizeMode="contain"
               style={[styles.iconMask, direction === 'rtl' && styles.flip]}
             />
@@ -173,6 +189,9 @@ export function HeaderBackButton({
   );
 }
 
+const ICON_WIDTH = Platform.OS === 'ios' ? 13 : 24;
+const ICON_MARGIN_END = Platform.OS === 'ios' ? 22 : 3;
+
 const styles = StyleSheet.create({
   container: {
     paddingHorizontal: 0,
@@ -196,25 +215,12 @@ const styles = StyleSheet.create({
     // Otherwise it messes with the measurement of the label
     flexDirection: 'row',
     alignItems: 'flex-start',
-    ...Platform.select({
-      ios: { marginEnd: 8 },
-      default: { marginEnd: 3 },
-    }),
+    marginEnd: ICON_MARGIN,
+  },
+  icon: {
+    width: ICON_WIDTH,
+    marginEnd: ICON_MARGIN_END,
   },
-  icon: Platform.select({
-    ios: {
-      height: 21,
-      width: 13,
-      marginStart: 8,
-      marginEnd: 22,
-      marginVertical: 8,
-    },
-    default: {
-      height: 24,
-      width: 24,
-      margin: 3,
-    },
-  }),
   iconWithLabel:
     Platform.OS === 'ios'
       ? {

package/src/Header/HeaderBackground.tsx

@@ -15,7 +15,7 @@ type Props = Omit<ViewProps, 'style'> & {
 };
 
 export function HeaderBackground({ style, ...rest }: Props) {
-  const { colors } = useTheme();
+  const { colors, dark } = useTheme();
 
   return (
     <Animated.View
@@ -24,7 +24,7 @@ export function HeaderBackground({ style, ...rest }: Props) {
         {
           backgroundColor: colors.card,
           borderBottomColor: colors.border,
-          shadowColor: colors.border,
+          shadowColor: dark ? 'rgba(255, 255, 255, 0.45)' : 'rgba(0, 0, 0, 1)',
         },
         style,
       ]}
@@ -41,7 +41,7 @@ const styles = StyleSheet.create({
         elevation: 4,
       },
       ios: {
-        shadowOpacity: 0.85,
+        shadowOpacity: 0.3,
         shadowRadius: 0,
         shadowOffset: {
           width: 0,

package/src/Header/HeaderButton.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { Platform, StyleSheet } from 'react-native';
 
 import { PlatformPressable } from '../PlatformPressable';

package/src/Header/HeaderIcon.tsx

@@ -0,0 +1,36 @@
+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}
+      style={[
+        styles.icon,
+        direction === 'rtl' && styles.flip,
+        { tintColor: colors.text },
+        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)',
+  },
+});

package/src/Header/HeaderSearchBar.tsx

@@ -0,0 +1,283 @@
+import { useNavigation, useTheme } from '@react-navigation/native';
+import Color from 'color';
+import * as React from 'react';
+import {
+  Animated,
+  Image,
+  Platform,
+  type StyleProp,
+  StyleSheet,
+  TextInput,
+  View,
+  type ViewStyle,
+} from 'react-native';
+
+import clearIcon from '../assets/clear-icon.png';
+import closeIcon from '../assets/close-icon.png';
+import searchIcon from '../assets/search-icon.png';
+import { PlatformPressable } from '../PlatformPressable';
+import { Text } from '../Text';
+import type { HeaderOptions } from '../types';
+import { HeaderButton } from './HeaderButton';
+import { HeaderIcon } from './HeaderIcon';
+
+type Props = HeaderOptions['headerSearchBarOptions'] & {
+  visible: boolean;
+  onClose: () => void;
+  style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+};
+
+const INPUT_TYPE_TO_MODE = {
+  text: 'text',
+  number: 'numeric',
+  phone: 'tel',
+  email: 'email',
+} as const;
+
+export function HeaderSearchBar({
+  visible,
+  inputType,
+  autoFocus = true,
+  placeholder = 'Search',
+  cancelButtonText = 'Cancel',
+  onChangeText,
+  onClose,
+  style,
+  ...rest
+}: Props) {
+  const navigation = useNavigation();
+  const { dark, colors, fonts } = useTheme();
+  const [value, setValue] = React.useState('');
+  const [rendered, setRendered] = React.useState(visible);
+  const [visibleAnim] = React.useState(
+    () => new Animated.Value(visible ? 1 : 0)
+  );
+  const [clearVisibleAnim] = React.useState(() => new Animated.Value(0));
+
+  const visibleValueRef = React.useRef(visible);
+  const clearVisibleValueRef = React.useRef(false);
+  const inputRef = React.useRef<TextInput>(null);
+
+  React.useEffect(() => {
+    // Avoid act warning in tests just by rendering header
+    if (visible === visibleValueRef.current) {
+      return;
+    }
+
+    Animated.timing(visibleAnim, {
+      toValue: visible ? 1 : 0,
+      duration: 100,
+      useNativeDriver: true,
+    }).start(({ finished }) => {
+      if (finished) {
+        setRendered(visible);
+        visibleValueRef.current = visible;
+      }
+    });
+
+    return () => {
+      visibleAnim.stopAnimation();
+    };
+  }, [visible, visibleAnim]);
+
+  const hasText = value !== '';
+
+  React.useEffect(() => {
+    if (clearVisibleValueRef.current === hasText) {
+      return;
+    }
+
+    Animated.timing(clearVisibleAnim, {
+      toValue: hasText ? 1 : 0,
+      duration: 100,
+      useNativeDriver: true,
+    }).start(({ finished }) => {
+      if (finished) {
+        clearVisibleValueRef.current = hasText;
+      }
+    });
+  }, [clearVisibleAnim, hasText]);
+
+  const onClear = React.useCallback(() => {
+    inputRef.current?.clear();
+    inputRef.current?.focus();
+    setValue('');
+    // FIXME: figure out how to create a SyntheticEvent
+    // @ts-expect-error: we don't have the native event here
+    onChangeText?.({ nativeEvent: { text: '' } });
+  }, [onChangeText]);
+
+  React.useEffect(
+    () =>
+      navigation?.addListener('blur', () => {
+        onClear();
+        onClose();
+      }),
+    [navigation, onClear, onClose]
+  );
+
+  if (!visible && !rendered) {
+    return null;
+  }
+
+  return (
+    <Animated.View
+      pointerEvents={visible ? 'auto' : 'none'}
+      accessibilityLiveRegion="polite"
+      accessibilityElementsHidden={!visible}
+      importantForAccessibility={visible ? 'auto' : 'no-hide-descendants'}
+      style={[styles.container, { opacity: visibleAnim }, style]}
+    >
+      <View style={styles.searchbarContainer}>
+        <HeaderIcon source={searchIcon} style={styles.inputSearchIcon} />
+        <TextInput
+          {...rest}
+          ref={inputRef}
+          onChange={onChangeText}
+          onChangeText={setValue}
+          autoFocus={autoFocus}
+          inputMode={INPUT_TYPE_TO_MODE[inputType ?? 'text']}
+          placeholder={placeholder}
+          placeholderTextColor={Color(colors.text).alpha(0.5).string()}
+          cursorColor={colors.primary}
+          selectionHandleColor={colors.primary}
+          selectionColor={Color(colors.primary).alpha(0.3).string()}
+          style={[
+            fonts.regular,
+            styles.searchbar,
+            {
+              backgroundColor: Platform.select({
+                ios: dark ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)',
+                default: 'transparent',
+              }),
+              color: colors.text,
+              borderBottomColor: colors.border,
+            },
+          ]}
+        />
+        {Platform.OS === 'ios' ? (
+          <PlatformPressable
+            onPress={onClear}
+            style={[
+              {
+                opacity: clearVisibleAnim,
+                transform: [{ scale: clearVisibleAnim }],
+              },
+              styles.clearButton,
+            ]}
+          >
+            <Image
+              source={clearIcon}
+              resizeMode="contain"
+              style={[styles.clearIcon, { tintColor: colors.text }]}
+            />
+          </PlatformPressable>
+        ) : null}
+      </View>
+      {Platform.OS !== 'ios' ? (
+        <HeaderButton
+          onPress={() => {
+            if (value) {
+              onClear();
+            } else {
+              onClose();
+            }
+          }}
+          style={styles.closeButton}
+        >
+          <HeaderIcon source={closeIcon} />
+        </HeaderButton>
+      ) : null}
+      {Platform.OS === 'ios' ? (
+        <PlatformPressable
+          onPress={() => {
+            onClear();
+            onClose();
+          }}
+          style={styles.cancelButton}
+        >
+          <Text
+            style={[
+              fonts.regular,
+              { color: colors.primary },
+              styles.cancelText,
+            ]}
+          >
+            {cancelButtonText}
+          </Text>
+        </PlatformPressable>
+      ) : null}
+    </Animated.View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'stretch',
+  },
+  inputSearchIcon: {
+    position: 'absolute',
+    opacity: 0.5,
+    left: Platform.select({ ios: 16, default: 4 }),
+    top: Platform.select({ ios: -1, default: 17 }),
+    ...Platform.select({
+      ios: {
+        height: 18,
+        width: 18,
+      },
+      default: {},
+    }),
+  },
+  closeButton: {
+    position: 'absolute',
+    opacity: 0.5,
+    right: Platform.select({ ios: 0, default: 8 }),
+    top: Platform.select({ ios: -2, default: 17 }),
+  },
+  clearButton: {
+    position: 'absolute',
+    right: 0,
+    top: -7,
+    bottom: 0,
+    justifyContent: 'center',
+    padding: 8,
+  },
+  clearIcon: {
+    height: 16,
+    width: 16,
+    opacity: 0.5,
+  },
+  cancelButton: {
+    alignSelf: 'center',
+    top: -4,
+  },
+  cancelText: {
+    fontSize: 17,
+    marginHorizontal: 12,
+  },
+  searchbarContainer: {
+    flex: 1,
+  },
+  searchbar: Platform.select({
+    ios: {
+      flex: 1,
+      fontSize: 17,
+      paddingHorizontal: 32,
+      marginLeft: 16,
+      marginTop: -2,
+      marginBottom: 5,
+      borderRadius: 8,
+    },
+    default: {
+      flex: 1,
+      fontSize: 18,
+      paddingHorizontal: 36,
+      marginRight: 8,
+      marginTop: 8,
+      marginBottom: 8,
+      borderBottomWidth: 1,
+    },
+  }),
+});

package/src/Header/HeaderTitle.tsx

@@ -1,5 +1,4 @@
 import { useTheme } from '@react-navigation/native';
-import * as React from 'react';
 import {
   Animated,
   Platform,

package/src/Label/Label.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import {
   type StyleProp,
   StyleSheet,

package/src/MissingIcon.tsx

@@ -1,7 +1,6 @@
-// TODO
-// @ts-expect-error: investigate why TypeScript errors here
-import * as React from 'react';
-import { type StyleProp, StyleSheet, Text, type TextStyle } from 'react-native';
+import { type StyleProp, StyleSheet, type TextStyle } from 'react-native';
+
+import { Text } from './Text';
 
 type Props = {
   color?: string;