NavigationView creates a black view to appear when using a textfield

[Nathan1258]

As shown:

ScreenRecording_07-01-2024.22-30-42_1.MP4

Clicking on a textfield will cause a black (or the colour you set config.backgroundColour as within the NavigationGlobalConfig) to appear and fill the entire view.

[FulcrumOne]

Hey @Nathan1258,

The problem should be solved in the "patch-1.1.1" branch. Could you please check it and let me know? Thanks!

[Nathan1258]

Hi @FulcrumOne,

I can confirm the problem has been solved - thank you for being so speedy! Nice to see my UI when entering text 🤣

Will return to stable branch now and wait for patch-1.1.1 to be merged!

[clbemre]

Hello @FulcrumOne , I have same problem, and up to date.
config.backgroundColour = .red

[FulcrumOne]

@clbemre,
Hey, I'll look at this at the weekend

PS. Could you paste here the code I can use to reproduce it? Thanks a million!

[clbemre]

@FulcrumOne Hey thank you, I noticed that also, drag gesture conflicts with scrollview and causes an wrong behavior.

Additionally maybe you can add view.navigationBackGesture(.dragEdges) 😀

[FulcrumOne]

@FulcrumOne Hey thank you, I noticed that also, drag gesture conflicts with scrollview and causes an wrong behavior.

Additionally maybe you can add view.navigationBackGesture(.dragEdges) 😀

There is such an option, I don't remember how it's called exactly but one of NavigationGlobalConfig 😉

[clbemre]

@FulcrumOne
I just saw view.navigationBackGesture(.drag). No (.dragEdges), i don't know :)

[FulcrumOne]

In a file "Public+NavigationGlobalConfig", there should be three attributes - backGesturePosition (the one that you're looking for), backGestureThreshold and backgroundColour. Could you confirm that in the version you use, all three attributes exist?

[clbemre]

@FulcrumOne
aa okey, i see. We have to configure global config. I thought we could adjust this on a per page basis sorry :)

[FulcrumOne]

@clbemre,

Do you think it would be better to add this option to every screen?

[clbemre]

No but I just want to override . And my main problem is not this. My problem in video :)

[FulcrumOne]

yeah, tomorrow or Saturday I'm returning to this library 😅

[jay-jay-lama]

Hello, @clbemre
Could you share a code that contains an issue with background color? It will help me to speed up the problem-solving process.

Also the issue with the offset for horizontal drag-gesture action has been resolved in the branch Patch-1.1.2. Feel free to give it a try and let us know if it doesn't work as expected.

[clbemre]

@jay-jay-lama Hello, my code like this in short.

 var body: some View {
        DefaultContainerView {
            VStack(spacing: 0) {
                navigationBarView
                    .padding(.horizontal, 20)
                ScrollView {
                    VStack(spacing: 20) {
                        Group {
                            nameTextField
                            surnameTextField
                            emailTextField
                        }
                    }
                        .padding(.top, 30)
                        .padding(.horizontal, 20)
                }.scrollDisabled(!isShownKeyboard)
            }.overlay(alignment: .bottom, content: { saveButtonView })
        }
            .keyboardToolbar(focusedField: $focusedField, currentVisibilityID: .toolbarVisibilityID)
            .onKeyboardAppear { self.isShownKeyboard = $0 > 0 }
            .animation(.smooth, value: isShownKeyboard)
            .onTap { focusedField = nil }
    }

also

struct DefaultContainerView<Content: View>: View {

    let content: Content

    init(@ViewBuilder content: () -> Content) {
        self.content = content()
    }

    var body: some View {
        ZStack {
            DefaultBackgroundView()

            content
        }
    }
}

[FulcrumOne]

@clbemre, both problems should be resolved in the newest version

[clbemre]

@FulcrumOne Thank you!

[clbemre]

@FulcrumOne It has solved. But just there is a little problem.

[FulcrumOne]

Oh, could you describe it, because I'm clearly blind and can't notice it 😅

[clbemre]

@FulcrumOne when it first opens on each screen there is a flicker for the first time when trying to scroll and then it works fine without flickering 😀

[FulcrumOne]

Oh, yeah, you're right. I'll check it, thanks

[clbemre]

@FulcrumOne I have tested without NavigationView plugin this page. When I remove the navigationview plugin from the page, I do not encounter this problem.

[jay-jay-lama]

@FulcrumOne It seems that I've noticed the same problem if I use native solution without our library.
Navigation bar has it's own observer of scrollView callbacks and it can be native problem.
And issue appears not only on first screen presenting but also during switching between the textfields and also just during ordinary scrolling. So it's random...
Need also your test to confirm the situation.

On the video the same problem with native solution.

RPReplay_Final1720958682.mov

[clbemre]

I unserstood. But i told you , When I remove the navigationview plugin from the page, I do not encounter this problem. :)

[clbemre]

removed video.
without NavigationView

[clbemre]

@FulcrumOne hey there is also a very little problem :)

removed video

with background

 var navigationConfig: NavigationGlobalConfig {
        var config = NavigationGlobalConfig()
        config.backgroundColour = .red
        config.backGesturePosition = .edge
        config.backGestureThreshold = 0.25
        return config
    }

[clbemre]

removed video.
without background

var navigationConfig: NavigationGlobalConfig {
        var config = NavigationGlobalConfig() 
        config.backGesturePosition = .edge
        config.backGestureThreshold = 0.25
        return config
    }

[FulcrumOne]

@clbemre, this is actually tricky one and I doubt I will be able to "fix it" - background color cannot be clear, otherwise you always see the view underneath. It's because the animation of the views involves modifying their offset (or scale / rotation).

If you really need to make the safe areas clear, I strongly recommend using .ignoresSafeArea modifier 😉

[clbemre]

@FulcrumOne I set the background color. Actually, I don't have a problem with this, I just said it so you know :)

I use .ignoresSafeArea when necessary. But I don't understand where you mean I should use it :)

[FulcrumOne]

Oh, I just thought about an use-case like putting a picture that is supposed to be behind a status bar / home indicator and someone may think that it can be resolved with clear background (someone actually asked me exactly this). So if it's not your question just please ignore it 😅

That previous problem I'll try to resolve later today. Thanks for reporting!

[clbemre]

@FulcrumOne Hey, hello again. How are you?
I have a little problem again :) I have tested without NavigationView. FYI :)

also it's block my keyboard toolbarview visibility.

Screen.Recording.2024-07-22.at.21.26.50.mov

[FulcrumOne]

hello again, @clbemre 😉

does this behaviour only occur with maps (and scrolling views partially)?
Could you please provide me with the code I can use to reproduce the above bug? Thanks!

[clbemre]

@FulcrumOne Hello again.
Also I have conflick drag gestures.

I have using this framework. https://github.com/ciaranrobrien/SwiftUIPageView but I got confilict with back gestures.

Screen.Recording.2024-07-28.at.16.59.33.mov

[clbemre]

My code like that; (i will delete later, sorry @FulcrumOne )

deleted code

[clbemre]

@FulcrumOne Hello, Did you check it?

[FulcrumOne]

hey @clbemre,

I've saved the code (so you can delete it), but currently I'm working on PopupView. Sorry, will return to this issue as soon as I finish the sprint for that library 😉

P.S. Soon the tasks should be done a bit faster, as we have expanded our team a bit 😉

[FulcrumOne]

Btw, if you use Discord, you can join our here: https://discord.com/invite/dT5V7nm5SC

It's not ready yet, but at least we could communicate more effectively with PMs 😅

[clbemre]

@FulcrumOne thank you, I don't have Discord now :) okey I'll be waiting. It is important to solve the problem but there is no rush. 😀

Best regards.

[clbemre]

@FulcrumOne
Hello again, how can apply opacity background ?
view.backgroundColour(Color.brandBlueColor.opacity(0.2)), doesn't work?

[clbemre]

@FulcrumOne Hello, I'm still waiting for this topic. 👀 :)

[FulcrumOne]

Hey @clbemre,

Are you sure it doesn't work? I just tried and here's the effect:

P.S. Sorry for not responding, but I'm busy with other libraries currently, and the next time window for this one will be mid-September ;)

[clbemre]

@FulcrumOne I have tried a few thinsg but I wasn't successful.

CompletedDialogView().push(with: .dissolve)

Global config

var navigationConfig: NavigationGlobalConfig {
        var config = NavigationGlobalConfig()
        config.backgroundColour = Color.viewBackgroundColor
        config.backGesturePosition = .edge
        config.backGestureThreshold = 0.25
        return config
    }

View Config

func configure(view: NavigationConfig) -> NavigationConfig {
        view.backgroundColour(Color.brandBlueColor.opacity(0.2))
}

// -> no background in contentView
 var body: some View {
        ZStack {
            contentView
                .padding(20)
        }.frame(maxWidth: .infinity, maxHeight: .infinity)
    }

[clbemre]

@FulcrumOne Hello again. Also I have conflick drag gestures.

I have using this framework. https://github.com/ciaranrobrien/SwiftUIPageView but I got confilict with back gestures.

Screen.Recording.2024-07-28.at.16.59.33.mov

@FulcrumOne Hello again, I'm still waiting to hear back from you.

[clbemre]

Hey @FulcrumOne When will you get back to me? We had suspended the project but we've brought it back to the agenda, I don't have much time to wait. (or I will have to change the navigation library.)

[FulcrumOne]

Hey @clbemre,

Unfortunately I'm busy with PopupView till the end of this month. The next on my list is CameraView, so I would advise you to change the library.

Sorry and have a nice day,
Tomasz

[clbemre]

hey @clbemre,

I've saved the code (so you can delete it), but currently I'm working on PopupView. Sorry, will return to this issue as soon as I finish the sprint for that library 😉

P.S. Soon the tasks should be done a bit faster, as we have expanded our team a bit 😉

You said this before. But it's been so long. thank you. have a nice day.

[clbemre]

Hello @FulcrumOne I found the source of the problem but I need your help to solve it. When I delete the code .padding(.bottom, getPadding(.bottom, item)) in this method, the up and down shaking in the video does not happen anymore, but deleting the code is not a solution, it may break something else.

func createItem(_ item: AnyNavigatableView) -> some View {
        item.body
            .padding(.top, getPadding(.top, item))
            .padding(.bottom, getPadding(.bottom, item))
            .padding(.leading, getPadding(.leading, item))
            .padding(.trailing, getPadding(.trailing, item))
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .background(getBackground(item).compositingGroup())
            .opacity(getOpacity(item))
            .scaleEffect(getScale(item))
            .offset(getOffset(item))
            .offset(x: getRotationTranslation(item))
            .rotation3DEffect(getRotationAngle(item), axis: getRotationAxis(), anchor: getRotationAnchor(item), perspective: getRotationPerspective())
            .compositingGroup()
            .disabled(gestureData.isActive)
    }

I tried it but I'm not sure. Maybe it can help you.

OLD:

func getPadding(_ edge: Edge.Set, _ item: AnyNavigatableView) -> CGFloat {
        guard let ignoredAreas = getConfig(item).ignoredSafeAreas,
            ignoredAreas.edges.isOne(of: .init(edge), .all)
            else { return screenManager.getSafeAreaValue(for: edge) }

        if ignoredAreas.regions.isOne(of: .keyboard, .all) && isKeyboardVisible { return 0 }
        if ignoredAreas.regions.isOne(of: .container, .all) && !isKeyboardVisible { return 0 }
        return screenManager.getSafeAreaValue(for: edge)
}

SOLUTION(im not sure):

func getPadding(_ edge: Edge.Set, _ item: AnyNavigatableView) -> CGFloat {
        let currentPadding = screenManager.getSafeAreaValue(for: edge)
        let keyboardPadding = keyboardManager.height > 0 ? 0 : currentPadding
        let containerPadding = isKeyboardVisible ? keyboardPadding : currentPadding

        guard let ignoredAreas = getConfig(item).ignoredSafeAreas,
              ignoredAreas.edges.isOne(of: .init(edge), .all)
        else { return containerPadding }

        return ignoredAreas.regions.isOne(of: .keyboard, .all) ? 0 : containerPadding
    }

Best Regards