Wrong position of searchable component on first render

Hey all,

I found a weird behaviour with the searchable component. I created a custom bottom nav bar (because I have custom design in my app) to switch between screens.

On one screen I display a List component with the searchable component. Whenever I enter the search screen the first time, the searchable component is displayed at the bottom. This is wrong. It should be displayed at the top under the navigationTitle. When I enter the screen a second time, everything is correct.

This behaviour can be reproduced on all iOS 26 versions on the simulator and on a physical device with debug and release build. On iOS 18 everything works fine.

Steps to reproduce:

  1. Cold start of the app
  2. Click on Search TabBarIcon (searchable wrong location)
  3. Click on Home TabBarIcon
  4. Click on Search TabBarIcon (searchable correct location)

Simple code example:

import SwiftUI

struct ContentView: View {
    @State var selectedTab: Page = Page.main

    var body: some View {
        NavigationStack {
            ZStack {
                VStack {
                    switch selectedTab {
                    case .main:
                        MainView()
                    case .search:
                        SearchView()
                    }
                }

                VStack {
                    Spacer()

                    VStack(spacing: 0) {
                        HStack(spacing: 0) {
                            TabBarIcon(iconName: "house", selected: selectedTab == .main, displayName: "Home")
                                .onTapGesture {
                                    selectedTab = .main
                                }

                            TabBarIcon(iconName: "magnifyingglass", selected: selectedTab == .search, displayName: "Search")
                                .onTapGesture {
                                    selectedTab = .search
                                }
                        }
                        .frame(maxWidth: .infinity)
                        .frame(height: 55)
                        .background(Color.gray)
                    }
                    .ignoresSafeArea(.all, edges: .bottom)
                }
            }
        }
    }
}

struct TabBarIcon: View {
    let iconName: String
    let selected: Bool
    let displayName: String

    var body: some View {
        ZStack {
            VStack {
                Image(systemName: iconName)
                    .resizable()
                    .renderingMode(.template)
                    .aspectRatio(contentMode: .fit)
                    .foregroundColor(Color.black)
                    .frame(width:  22, height:  22)
            
                Text(displayName)
                    .font(Font.system(size: 10))
            }
        }
        .frame(maxWidth: .infinity)
    }
}

enum Page {
    case main
    case search
}

struct MainView: View {
    var body: some View {
        VStack {
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundStyle(.tint)
            Text("Hello, world!")
        }
        .padding()
        .navigationTitle("Home")
    }
}

struct SearchView: View {
    @State private var searchText = ""
    
    let items = [
        "Apple",
        "Banana",
        "Pear",
        "Strawberry",
        "Orange",
        "Peach",
        "Grape",
        "Mango"
    ]
    
    var filteredItems: [String] {
        if searchText.isEmpty {
            return items
        } else {
            return items.filter {
                $0.localizedCaseInsensitiveContains(searchText)
            }
        }
    }
    
    var body: some View {
        List(filteredItems, id: \.self) { item in
            Text(item)
        }
        .navigationTitle("Fruits")
        .searchable(text: $searchText, placement: .navigationBarDrawer(displayMode: .always), prompt: "Search")
    }
}

Mhm, if you change the preselected page to search, it will render everything correct.

@State var selectedTab: Page = Page.search

The problem still exists on iOS 26.3

I see the same with conditional views where the non-default view has a searchable modifier with navigationBarDrawer placement and on first render the searchbar appears on the bottom, navigating to that view the second time has the searchbar at the right place. (on latest 26.4 beta as well)

Wrong position of searchable component on first render
 
 
Q