I built a React Native bottom sheet...with SwiftUI??

on the right you are looking at a react native view which is rendering a swift UI bottom sheet look at these interactions it's incredibly smooth and it's all done on the native side so the question is how does this work and how is this Swift UI sheet rendering children which come from react native it's actually quite easy so let's take a look at the code so we've got our react native app here and you can see that I have a popover component with a trigger and content just like rad Qi just like

you're used to and the question is what's going on under the hood and how is this opening a native view on iOS well when I click into pob over trigger you might be thinking there's some sort of props magic happening but actually it's just calling require native view so this is going straight to the native side so there are a few questions that emerge how does Swift know which component is the trigger which one's the content and what it should do again when I click open Swift UI sheet on the right and when I click open nested model it

knows it's nested it's all working and I'm rendering react native views inside of it so I can change this and get a fast refresh I can open nested modal and if I click into this again it's just another popover with another trigger inside the content and it all works perfectly in fact in here we actually have the built-in reactnative button which has no problem getting pressed so I can change this to sheet and that also has the fast refresh all right so how does it work well let's click into pop over trigger and again I can't get to my code here there's no no way to get to it

what I have to do is open up the Swift file so I'll open xcode and show you that now for what it's worth I don't have much experience at all with swift or Swift UI I am always just playing with it but I've never built a full app with it okay so here I have a swift UI view I've got my Boolean saying if it's showing the popover and then I have props which are the things that are getting passed from react native now at the moment the only prop that we're using is children and if you want to learn more about how these props get passed back and forth you can watch the video I released yesterday on YouTube where at the end I cover theas of Swift

UI and react native okay back to the code the first thing I'm doing is looping over each child and then I want to find the trigger child right the important thing is I want to know when something gets tapped the content gets opened like when I hit this open Swift UI sheet on the right it's opening this sheet okay so I have to have ontap gesture of the trigger but how do I know what the trigger is well I have this step which says if let trigger is child. viw so each child and children has has a

reference to the UI view so I'm saying if the child. view is popover trigger view then we use the child instance otherwise it's null meaning it'll just continue on to the next step okay now again there might be some cleaner way to do this in Swift but this worked for me so in that case I've gotten the trigger and that's being touched okay next I want to exclude the content from being rendered here because as you can see you see the open Swift UI sheet but if I go back to my react native code

here in popover content I have this component which is not getting rendered anywhere like you're not seeing open nested sheet button you only see that when I click this open so how do I do that so for that step in order to kind of keep this radic style approach instead of having any magic on the JavaScript side we're just identifying here I'm saying if the child. viw is popover content view you know nil or null otherwise it's the child so any child that's not the trigger gets rendered as normal any child that is the trigger gets rendered being tapped any

child that's rendered as the popover content well we're going to exclude that for now okay so on to the last step how do we actually get that content into the pop order well first I'm putting in a a little bit of basic logic I'm ignoring safe area and then in Swift UI you have this really neat do popover that you can just apply as a modifier you can control it with is presented so in the future we'll actually want to have the ability to control it from the JavaScript side you can send an arrow Edge I actually haven't gotten this working yet where I