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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/elements",
   "description": "UI Components for React Navigation",
-  "version": "2.0.0-rc.20",
+  "version": "2.0.0-rc.21",
   "keywords": [
     "react-native",
     "react-navigation",
@@ -99,5 +99,5 @@
       ]
     ]
   },
-  "gitHead": "b32550a43d0e2b532cfe100d9cf17837184a636e"
+  "gitHead": "f1b77a90eee4444e990aa86d7feecffff85d020b"
 }

package/src/Header/Header.tsx

@@ -1,7 +1,8 @@
-import { useTheme } from '@react-navigation/native';
+import { useNavigation, useTheme } from '@react-navigation/native';
 import * as React from 'react';
 import {
   Animated,
+  type LayoutChangeEvent,
   Platform,
   StyleSheet,
   View,
@@ -12,9 +13,14 @@ import {
   useSafeAreaInsets,
 } from 'react-native-safe-area-context';
 
+import searchIcon from '../assets/search-icon.png';
 import type { HeaderOptions, Layout } from '../types';
 import { getDefaultHeaderHeight } from './getDefaultHeaderHeight';
+import { HeaderBackButton } from './HeaderBackButton';
 import { HeaderBackground } from './HeaderBackground';
+import { HeaderButton } from './HeaderButton';
+import { HeaderIcon } from './HeaderIcon';
+import { HeaderSearchBar } from './HeaderSearchBar';
 import { HeaderShownContext } from './HeaderShownContext';
 import { HeaderTitle } from './HeaderTitle';
 
@@ -22,6 +28,19 @@ import { HeaderTitle } from './HeaderTitle';
 const IPAD_MINI_MEDIUM_WIDTH = 414;
 
 type Props = HeaderOptions & {
+  /**
+   * Options for the back button.
+   */
+  back?: {
+    /**
+     * Title of the previous screen.
+     */
+    title: string | undefined;
+    /**
+     * The `href` to use for the anchor tag on web
+     */
+    href: string | undefined;
+  };
   /**
    * Whether the header is in a modal
    */
@@ -57,16 +76,40 @@ export function Header(props: Props) {
   const frame = useSafeAreaFrame();
   const { colors } = useTheme();
 
+  const navigation = useNavigation();
   const isParentHeaderShown = React.useContext(HeaderShownContext);
 
+  const [searchBarVisible, setSearchBarVisible] = React.useState(false);
+  const [titleLayout, setTitleLayout] = React.useState<Layout | undefined>(
+    undefined
+  );
+
+  const onTitleLayout = (e: LayoutChangeEvent) => {
+    const { height, width } = e.nativeEvent.layout;
+
+    setTitleLayout((titleLayout) => {
+      if (
+        titleLayout &&
+        height === titleLayout.height &&
+        width === titleLayout.width
+      ) {
+        return titleLayout;
+      }
+
+      return { height, width };
+    });
+  };
+
   const {
     // eslint-disable-next-line @eslint-react/no-unstable-default-props
     layout = frame,
     modal = false,
+    back,
     title,
     headerTitle: customTitle,
     headerTitleAlign = Platform.OS === 'ios' ? 'center' : 'left',
-    headerLeft,
+    headerLeft = back ? (props) => <HeaderBackButton {...props} /> : undefined,
+    headerSearchBarOptions,
     headerTransparent,
     headerTintColor,
     headerBackground,
@@ -77,6 +120,7 @@ export function Header(props: Props) {
     headerRightContainerStyle: rightContainerStyle,
     headerTitleContainerStyle: titleContainerStyle,
     headerBackButtonDisplayMode = Platform.OS === 'ios' ? 'default' : 'minimal',
+    headerBackTitleStyle,
     headerBackgroundContainerStyle: backgroundContainerStyle,
     headerStyle: customHeaderStyle,
     headerShadowVisible,
@@ -208,6 +252,13 @@ export function Header(props: Props) {
         pressColor: headerPressColor,
         pressOpacity: headerPressOpacity,
         displayMode: headerBackButtonDisplayMode,
+        titleLayout,
+        screenLayout: layout,
+        canGoBack: Boolean(back),
+        onPress: back ? navigation.goBack : undefined,
+        label: back?.title,
+        labelStyle: headerBackTitleStyle,
+        href: back?.href,
       })
     : null;
 
@@ -216,6 +267,7 @@ export function Header(props: Props) {
         tintColor: iconTintColor,
         pressColor: headerPressColor,
         pressOpacity: headerPressOpacity,
+        canGoBack: Boolean(back),
       })
     : null;
 
@@ -262,53 +314,88 @@ export function Header(props: Props) {
         >
           {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
-                      ? headerBackButtonDisplayMode !== 'minimal'
-                        ? 80
-                        : 32
-                      : 16) +
-                      (rightButton ? 16 : 0) +
-                      Math.max(insets.left, insets.right)) *
-                      2
-                  : layout.width -
-                    ((leftButton ? 52 : 16) +
-                      (rightButton ? 52 : 16) +
-                      insets.left -
-                      insets.right),
-            },
-            headerTitleAlign === 'left' && leftButton
-              ? { marginStart: 4 }
-              : { marginStart: 16 },
-            titleContainerStyle,
-          ]}
-        >
-          {headerTitle({
-            children: title,
-            allowFontScaling: titleAllowFontScaling,
-            tintColor: headerTintColor,
-            style: titleStyle,
-          })}
-        </Animated.View>
-        <Animated.View
-          pointerEvents="box-none"
-          style={[
-            styles.end,
-            styles.expand,
-            { marginEnd: insets.right },
-            rightContainerStyle,
-          ]}
-        >
-          {rightButton}
-        </Animated.View>
+        {Platform.OS === 'ios' || !searchBarVisible ? (
+          <>
+            <Animated.View
+              pointerEvents="box-none"
+              style={[
+                styles.title,
+                {
+                  // Avoid the title from going offscreen or overlapping buttons
+                  maxWidth:
+                    headerTitleAlign === 'center'
+                      ? layout.width -
+                        ((leftButton
+                          ? headerBackButtonDisplayMode !== 'minimal'
+                            ? 80
+                            : 32
+                          : 16) +
+                          (rightButton ? 16 : 0) +
+                          Math.max(insets.left, insets.right)) *
+                          2
+                      : layout.width -
+                        ((leftButton ? 52 : 16) +
+                          (rightButton ? 52 : 16) +
+                          insets.left -
+                          insets.right),
+                },
+                headerTitleAlign === 'left' && leftButton
+                  ? { marginStart: 4 }
+                  : { marginStart: 16 },
+                titleContainerStyle,
+              ]}
+            >
+              {headerTitle({
+                children: title,
+                allowFontScaling: titleAllowFontScaling,
+                tintColor: headerTintColor,
+                onLayout: onTitleLayout,
+                style: titleStyle,
+              })}
+            </Animated.View>
+            <Animated.View
+              pointerEvents="box-none"
+              style={[
+                styles.end,
+                styles.expand,
+                { marginEnd: insets.right },
+                rightContainerStyle,
+              ]}
+            >
+              {rightButton}
+              {headerSearchBarOptions ? (
+                <HeaderButton
+                  tintColor={iconTintColor}
+                  pressColor={headerPressColor}
+                  pressOpacity={headerPressOpacity}
+                  onPress={() => setSearchBarVisible(true)}
+                >
+                  <HeaderIcon
+                    style={
+                      Boolean(iconTintColor) && { tintColor: iconTintColor }
+                    }
+                    source={searchIcon}
+                  />
+                </HeaderButton>
+              ) : null}
+            </Animated.View>
+          </>
+        ) : null}
+        {Platform.OS === 'ios' || searchBarVisible ? (
+          <HeaderSearchBar
+            {...headerSearchBarOptions}
+            visible={searchBarVisible}
+            onClose={() => {
+              setSearchBarVisible(false);
+              headerSearchBarOptions?.onClose?.();
+            }}
+            style={[
+              Platform.OS === 'ios'
+                ? [StyleSheet.absoluteFill, { backgroundColor: colors.card }]
+                : !leftButton && { marginStart: 8 },
+            ]}
+          />
+        ) : null}
       </View>
     </Animated.View>
   );
@@ -327,12 +414,14 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
   },
   start: {
-    justifyContent: 'center',
-    alignItems: 'flex-start',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'flex-start',
   },
   end: {
-    justifyContent: 'center',
-    alignItems: 'flex-end',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
   },
   expand: {
     flexGrow: 1,

package/src/Header/HeaderBackButton.tsx

@@ -15,6 +15,7 @@ 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,
@@ -49,16 +50,13 @@ export function HeaderBackButton({
       return backImage({ tintColor: tintColor ?? colors.text });
     } else {
       return (
-        <Image
+        <HeaderIcon
           style={[
             styles.icon,
-            direction === 'rtl' && styles.flip,
             displayMode !== 'minimal' && styles.iconWithLabel,
             Boolean(tintColor) && { tintColor },
           ]}
-          resizeMode="contain"
           source={backIcon}
-          fadeDuration={0}
         />
       );
     }
@@ -72,7 +70,7 @@ export function HeaderBackButton({
     const availableSpace =
       titleLayout && screenLayout
         ? (screenLayout.width - titleLayout.width) / 2 -
-          (ICON_WIDTH + ICON_MARGIN_START)
+          (ICON_WIDTH + ICON_MARGIN)
         : null;
 
     const potentialLabelText =
@@ -192,10 +190,7 @@ export function HeaderBackButton({
 }
 
 const ICON_WIDTH = Platform.OS === 'ios' ? 13 : 24;
-const ICON_HEIGHT = Platform.OS === 'ios' ? 21 : 24;
-const ICON_MARGIN_START = Platform.OS === 'ios' ? 8 : 3;
 const ICON_MARGIN_END = Platform.OS === 'ios' ? 22 : 3;
-const ICON_MARGIN_VERTICAL = Platform.OS === 'ios' ? 8 : 3;
 
 const styles = StyleSheet.create({
   container: {
@@ -220,17 +215,11 @@ 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: {
-    height: ICON_HEIGHT,
     width: ICON_WIDTH,
-    marginStart: ICON_MARGIN_START,
     marginEnd: ICON_MARGIN_END,
-    marginVertical: ICON_MARGIN_VERTICAL,
   },
   iconWithLabel:
     Platform.OS === 'ios'

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/PlatformPressable.tsx

@@ -118,7 +118,12 @@ export function PlatformPressable({
       }
       style={[
         {
-          cursor: 'pointer', // Add hover effect on iPad and VisionOS
+          cursor:
+            Platform.OS === 'web' || Platform.OS === 'ios'
+              ? // Pointer cursor on web
+                // Hover effect on iPad and visionOS
+                'pointer'
+              : 'auto',
           opacity: !ANDROID_SUPPORTS_RIPPLE ? opacity : 1,
         },
         style,