skiptools / skiptools/skip-ui

NavigationStack layout shift

Open
#208 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug compose layout
Dominant language
Swift
Stars
330
Forks
76
Avg merge
3h 6m
Merged PRs (30d)
1

Description

The SkipUI NavigationStack has a janky layout shift when it first appears. This repros in the Skip Lite Showcase.

In the video below, watch it at 0.5 speed. (In Chrome, click the "..." menu to select Playback Speed). When selecting the Showcase tab, the Search bar appears and then scoots up a bit.

https://github.com/user-attachments/assets/721ac011-26ad-4d82-ae60-c11f7f638e09

You can also repro this in a trivial Skip app. I ran skip init --git-repo --appid=bundle.id nav-stack-layout-shift-repro NavStackLayoutShiftRepro and then replaced ContentView.swift with this:

import SwiftUI

struct ContentView: View {

    var body: some View {
        NavigationStack {
            VStack {
                Text("Hello, World!")
                Spacer()
            }
            .navigationTitle("Hello")
        }
    }
}

This simple app has two layout shifts. "Hello World" first appears at the very top of the screen, then scoots down to below where the nav bar would be, then scoots up again as the nav bar resizes smaller.

https://github.com/user-attachments/assets/071f1303-d37f-410d-8357-a665d2735c08

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the issue with the provided ContentView.swift in a trivial Skip app, then compare it with the Skip Lite Showcase NavigationStack. Trace the initial placement and resizing of the navigation bar and content; done means the first appearance has no visible layout shifts in both reproductions.

Written by the indexing model from the issue text.

Assessment

Tech stack
swift
Domain
mobile-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.