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

package/src/Screen.tsx

@@ -70,17 +70,6 @@ export function Screen(props: Props) {
       // that we won't render unnecessary views due to the view flattening.
       collapsable={false}
     >
-      <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}>
@@ -90,13 +79,27 @@ export function Screen(props: Props) {
 
                 setHeaderHeight(height);
               }}
-              style={headerTransparent ? styles.absolute : null}
+              style={[
+                styles.header,
+                headerTransparent ? styles.absolute : null,
+              ]}
             >
               {header}
             </View>
           </NavigationRouteContext.Provider>
         </NavigationContext.Provider>
       ) : null}
+      <View style={styles.content}>
+        <HeaderShownContext.Provider
+          value={isParentHeaderShown || headerShown !== false}
+        >
+          <HeaderHeightContext.Provider
+            value={headerShown ? headerHeight : parentHeaderHeight ?? 0}
+          >
+            {children}
+          </HeaderHeightContext.Provider>
+        </HeaderShownContext.Provider>
+      </View>
     </Background>
   );
 }
@@ -104,12 +107,13 @@ export function Screen(props: Props) {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    flexDirection: 'column-reverse',
   },
-  // This is necessary to avoid applying 'column-reverse' to screen content
   content: {
     flex: 1,
   },
+  header: {
+    zIndex: 1,
+  },
   absolute: {
     position: 'absolute',
     top: 0,

package/src/index.tsx

@@ -1,5 +1,8 @@
 import backIcon from './assets/back-icon.png';
 import backIconMask from './assets/back-icon-mask.png';
+import clearIcon from './assets/clear-icon.png';
+import closeIcon from './assets/close-icon.png';
+import searchIcon from './assets/search-icon.png';
 
 export { Background } from './Background';
 export { Button } from './Button';
@@ -24,6 +27,12 @@ export { SafeAreaProviderCompat } from './SafeAreaProviderCompat';
 export { Screen } from './Screen';
 export { Text } from './Text';
 
-export const Assets = [backIcon, backIconMask];
+export const Assets = [
+  backIcon,
+  backIconMask,
+  searchIcon,
+  closeIcon,
+  clearIcon,
+];
 
 export * from './types';

package/src/types.tsx

@@ -2,6 +2,7 @@ import type {
   Animated,
   LayoutChangeEvent,
   StyleProp,
+  TextInputProps,
   TextStyle,
   ViewStyle,
 } from 'react-native';
@@ -10,6 +11,48 @@ export type HeaderBackButtonDisplayMode = 'default' | 'generic' | 'minimal';
 
 export type Layout = { width: number; height: number };
 
+type HeaderSearchBarOptions = {
+  /**
+   * The auto-capitalization behavior
+   */
+  autoCapitalize?: 'none' | 'words' | 'sentences' | 'characters';
+  /**
+   * Automatically focuses search input on mount
+   */
+  autoFocus?: boolean;
+  /**
+   * The text to be used instead of default `Cancel` button text
+   *
+   * @platform ios
+   */
+  cancelButtonText?: string;
+  /**
+   * Sets type of the input. Defaults to `text`.
+   */
+  inputType?: 'text' | 'phone' | 'number' | 'email';
+  /**
+   * A callback that gets called when search input has lost focus
+   */
+  onBlur?: TextInputProps['onBlur'];
+  /**
+   * A callback that gets called when the text changes.
+   * It receives the current text value of the search input.
+   */
+  onChangeText?: TextInputProps['onChange'];
+  /**
+   * A callback that gets called when search input is closed
+   */
+  onClose?: () => void;
+  /**
+   * A callback that gets called when search input has received focus
+   */
+  onFocus?: TextInputProps['onFocus'];
+  /**
+   * Text displayed when search field is empty
+   */
+  placeholder?: string;
+};
+
 export type HeaderOptions = {
   /**
    * String or a function that returns a React Element to be used by the header.
@@ -36,16 +79,21 @@ export type HeaderOptions = {
    * Whether header title font should scale to respect Text Size accessibility settings. Defaults to `false`.
    */
   headerTitleAllowFontScaling?: boolean;
+  /**
+   * Options to render a search bar.
+   */
+  headerSearchBarOptions?: HeaderSearchBarOptions;
   /**
    * Function which returns a React Element to display on the left side of the header.
    */
-  headerLeft?: (props: {
-    tintColor?: string;
-    pressColor?: string;
-    pressOpacity?: number;
-    displayMode?: HeaderBackButtonDisplayMode;
-    href?: undefined;
-  }) => React.ReactNode;
+  headerLeft?: (
+    props: HeaderBackButtonProps & {
+      /**
+       * Whether it's possible to navigate back.
+       */
+      canGoBack?: boolean;
+    }
+  ) => React.ReactNode;
   /**
    * How the back button displays icon and title.
    *
@@ -54,9 +102,18 @@ export type HeaderOptions = {
    * - "generic" – Displays one of the following depending on the available space: truncated title (e.g. 'Back') or no title (only icon).
    * - "minimal" – Always displays only the icon without a title.
    *
-   * Defaults to "default" on iOS, and "minimal" on Android.
+   * Defaults to "default" on iOS, and "minimal" on other platforms.
    */
   headerBackButtonDisplayMode?: HeaderBackButtonDisplayMode;
+  /**
+   * Style object for header back title. Supported properties:
+   * - fontFamily
+   * - fontSize
+   */
+  headerBackTitleStyle?: StyleProp<{
+    fontFamily?: string;
+    fontSize?: number;
+  }>;
   /**
    * Style object for the container of the `headerLeft` element`.
    */
@@ -68,6 +125,7 @@ export type HeaderOptions = {
     tintColor?: string;
     pressColor?: string;
     pressOpacity?: number;
+    canGoBack: boolean;
   }) => React.ReactNode;
   /**
    * Style object for the container of the `headerRight` element.