bmcmahen / react-meets-swiftui

common react design patterns implemented in swiftui

React Meets SwiftUI

I'm looking to learn SwiftUI over the coming weeks and will be using this repository to record various common React design patterns implemented in SwiftUI. If you're a React developer interested in learning Swift UI, this might be a good place for you to start. You can also read the introductory blog post below.

An Introduction to SwiftUI for React Developers

Examples

• Managing State
• Using Context
• Using Children
• Mounting and Unmounting Callbacks
• Emulating CloneElement
• Redux (Binding to External Stores)
• Button Variants
• API Requests
• Conditional Rendering with Optional Values
• Basic Layouts

Todo

• Async Image (loading from URL)
• Responsive layouts
• Firebase
• Packages
• Gestures
• Animation

react-meets-swiftui's Issues

Redux (Binding to an External Store) @ObjectBinding

Hiya, and thanks for the amazing resource for react devs!

My understanding on this is still a little vague but i think using @EnvironmentObject instead of @ObjectBinding is a little closer to a redux setup seeing as with @EnvironmentObject you can directly access a central source of truth/store from nested views without prop drilling.

Children example: using a Group?

👋 Hey there! Really cool repo. I've already learned a lot from the 3 examples you've put together.

I'm still super new to Swift, but one idea I had for this example – and you may have already thought of this – is to update content to expect a Group instead of a Text. That way, you can return whatever you'd like by wrapping it in the Group.

(Note: I haven't tested this code, so it might not compile. Also, this general approach might not even be sound. And there is likely a better way altogether!)

import SwiftUI

struct Page : View {
    var body: some View {
        Layout() {
+            Group {
                Text("This is the page content")
+            }
        }
    }
}

struct Layout : View {

-   var content: () -> Text
+   var content: () -> Group

    var body: some View {
        VStack {
            Text("This is the layout")
            content()
        }
    }
}

componentDidMount / componentWillUnmount

Let's say that we have a View that needs to fetch data on the server, but only on the initial mount. How do we handle this with SwiftUI?

Children: Using ViewBuilder?

I've also been looking into how to do children, and started reading up on ViewBuilder:

https://developer.apple.com/documentation/swiftui/viewbuilder

It seems like this might be helpful, but struggling to grok it. Thought I would mention it in case it helps

This is so helpful!