App.js for react navigation sticky header

App.js

import * as React from "react";
import { NavigationContainer } from "@react-navigation/native";
import { useTheme } from "react-native-paper";
import { Provider as PaperProvider } from "react-native-paper";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import SearchScreen from "./Search";

const Stack = createNativeStackNavigator();

const App = () => {
  const theme = useTheme();
  const { colors } = theme;
  return (
    <PaperProvider>
      <NavigationContainer>
        <Stack.Navigator
          headerMode="screen"
          screenOptions={{
            headerStyle: {
              backgroundColor: colors.surface,
            },
            headerTintColor: colors.text,
            headerTitleAlign: "center",
            safeAreaInsets: { top: 0, bottom: 0 },
          }}
        >
          <Stack.Screen name="Search" component={SearchScreen} />
        </Stack.Navigator>
      </NavigationContainer>
    </PaperProvider>
  );
};

export default App;