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")
    }
}
Wrong position of searchable component on first render
 
 
Q