SwiftUI How to trigger action inside View when view appers / dissapears? - swiftui

Question

I have recently started dabbling in swiftUI. One of the thing that I have noticed is that now we have option to add modifier on View: .onAppear and .onDisappear, and trigger some action. But what I want to do is somewhat different, I want to trigger action inside the View when View appears / disappears.
For example I have video player and every time inside List view scrolls from the screen, I want to pause video (Video is embedded inside my view). And vice versa I want video to start playing. All logic for video playing / pausing is inside the view.
So how can I trigger action when view appears / disappears?
Here is my code example:
struct ContentView: View {
var body: some View {
VStack {
List(0..<14) { item in
VideoPreviewView(videoURLString: largeVideos[item])
.frame(height: 375)
.background(Color.red)
.onAppear {
// play video
}
.onDisappear {
// stop video
}
}
}
}
}
Now how do I pass VideoPreviewView these actions, player is inside the VideoPreviewView?

Answer 1

In order to run onAppear logic, when a child view appears you simply attach the .onAppear function inside the child views body.
struct VideoPreviewView: View {
let videoURLString: String
var body: some View {
Text("VideoPreviewView")
.onAppear {
playVideo()
}
.onDisappear {
stopVideo()
}
}
private func playVideo() {
print("Start playing \(videoURLString)")
}
private func stopVideo() {
print("Stop playing \(videoURLString)")
}
}
struct ContentView: View {
let videoUrls = ["1","2","3", "4","5", "6", "7"]
var body: some View {
VStack {
List(videoUrls, id: \.self) { urlString in
LazyVStack {
VideoPreviewView(videoURLString: urlString)
.frame(height: 375)
.background(Color.red)
}
}
}
}
}
Which yields the following output in the console:
Start playing 1
Start playing 2
Start playing 3
Start playing 4
Start playing 5
Start playing 6
Start playing 7
Stop playing 4
Stop playing 5
Stop playing 6
Stop playing 7
All onAppear methods of the child views are called, and right after the the onDisappear methods of the non-visible child views are called.
You can find a discussion on whats happening here: https://www.hackingwithswift.com/forums/swiftui/onappear-something-i-don-t-understand/1978
If you use a ScrollView + ForEach + LazyVStack (this one is important) combination, you get the following output:
struct ContentView: View {
let videoUrls = ["1","2","3", "4","5", "6", "7"]
var body: some View {
ScrollView {
ForEach(videoUrls, id: \.self) { urlString in
LazyVStack {
VideoPreviewView(videoURLString: urlString)
.frame(height: 375)
.background(Color.red)
}
}
}
}
}
Start playing 3
Start playing 2
Start playing 1
Now only the visible ChildViews are called. If you scroll down you shoudl see your desired output in the console. This should be applicable for your use case.
All code was tested and run with Xcode 12.4 and iOS 14.4