Rotation Effect not working as expected inside a navigation view, but works as expected in any other view that is not in navigation view

Question

I want to add a shape to rotate around its axis and use it to create a background. In order to do this, I created a background view and decided to use that view on all my screens.

It seems that when I add the background view inside the navigation view it is anchored somewhere else other than the center. Can anyone please tell me how to achieve the expected result inside the navigation view?

However, when I give a rotation effect to an element it works as expected in all the views except in the views that contain a navigation view.

I cannot add a video here but adding drive links to better explain my problem.

Background View

Background View Video Link (Expected Result) : Background View

struct BackgroundView: View {
@State private var rotateBlob : Bool = false

var body: some View {
    
    GeometryReader { bounds in
    
    ZStack {
    Image("Inner Blob 1")
    .rotationEffect(.degrees(rotateBlob ? 360 : 0),anchor: .center)
            .animation(Animation.linear(duration: 3).repeatForever(autoreverses: false))
            .onAppear(perform: {
                self.rotateBlob = true
     })
}
    .frame(width: bounds.size.width)
        
    }
}}

Background View inside Navigation View (Unexpected Result) : Background View Inside Navigation View

struct RotationBug: View {
var body: some View {
    NavigationView{
        
        VStack{
            BackgroundView()
        }
        
        .navigationTitle("Profile")
    }
}
}

Does this answer your question https://stackoverflow.com/a/64566746/12299030? — Asperi, Sep 18 '21 at 10:56
Yes, had a kinda similar problem, I had to pass the value as a binding to solve it across navigation views. — Satya Prakash Sahu, Sep 18 '21 at 11:54

score 3 · Accepted Answer · answered Sep 18 '21 at 11:06

struct BackgroundView: View {
@State private var rotateDegree : CGFloat = 0

var body: some View {
    
    GeometryReader { bounds in
    
    ZStack {
    Image("Inner Blob 1")
    .rotationEffect(Angle(degrees: rotateDegree))
    .onAppear(perform: {
         withAnimation(Animation.linear(duration: 3).repeatForever(autoreverses: false)) {
             self.rotateDegree = 360
         }
     })
    .frame(width: bounds.size.width)
    }
}}

Rotation Effect not working as expected inside a navigation view, but works as expected in any other view that is not in navigation view

1 Answers1