Swiftpack.co - tiepvuvan/Yoga-SwiftUI as Swift Package

Swiftpack.co is a collection of thousands of indexed Swift packages. Search packages.
See all packages published by tiepvuvan.
tiepvuvan/Yoga-SwiftUI v1.0.0
Bridging Yoga Flexbox and SwiftUI using Yoga layout engine
⭐️ 14
🕓 46 weeks ago
iOS macOS watchOS
.package(url: "https://github.com/tiepvuvan/Yoga-SwiftUI.git", from: "v1.0.0")

Yoga-SwiftUI

Yoga-SwiftUI is a powerful layout library for SwiftUI which brings Facebook's Yoga flexbox implementation to SwiftUI. It offers a simple API to apply flexbox-based layout in your SwiftUI apps.

Features

  • Support for iOS (16+), macOS (13+), watchOS (9+) using SwiftUI custom layout.
  • A thin wrapper around Yoga, a cross-platform layout library from Facebook, bringing flexbox to SwiftUI
  • Nesting of Flex views within one another to build complex layouts
  • Full compatibility with Figma's auto layout, empowering Figma plugin creators to generate flexbox code. It supports all properties including row gap and column gap in flexbox.
  • Supports a wide array of layout customization like justifyContent, alignItems, alignSelf, flexDirection, flexWrap, flexGrow, flexShrink and more

Usage

You can easily create a Flex container and add child views to it.

Flex(direction: .row, justifyContent: .center, alignItems: .center) {
    Text("Hello")
    Text("World")
}

In the above example, we create a Flex container with a row direction and center alignment for both axis. Inside it, we add two Text views.

Flex can be easily nested within one another to create complex layouts:

Flex {
    Flex(direction: .row) {
        Text("Row 1 Item 1")
        Text("Row 1 Item 2")
    }
    Flex(direction: .row) {
        Text("Row 2 Item 1")
        Text("Row 2 Item 2")
    }
}

In the above example, we have nested two Flex containers each with a row direction inside another Flex container.

The library also provides a set of modifiers to customize the layout of the SwiftUI views:

Text("Hello World")
    .flexGrow(1)
    .flexShrink(0)
    .justifyContent(.center)
    .alignItems(.flexStart)
    .alignSelf(.flexEnd)
    .flexDirection(.row)
    .flexWrap(.wrap)

In the above example, we use the modifiers provided by the library to customize the layout of a Text view.

Installation

Yoga-SwiftUI is available as a Swift Package Manager package. You can add it to your project from Xcode's "Swift Packages" option in the File menu.

.package(url: "https://github.com/tiepvuvan/Yoga-SwiftUI.git", from: "1.0.0")

Contributing

Contributions to Yoga-SwiftUI are welcomed. If you encounter any problem or have any suggestions, please open an issue or send a pull request.

License

Yoga-SwiftUI is open source software, available under the MIT license.

GitHub

link
Stars: 14
Last commit: 46 weeks ago
Advertisement: IndiePitcher.com - Cold Email Software for Startups

Release Notes

1.0.0
46 weeks ago

We are excited to announce the initial release of Yoga-SwiftUI, a powerful new tool for iOS development. This SwiftUI package provides a seamless integration of the Yoga flexbox engine into SwiftUI, paving the way for intuitive, dynamic, and highly customizable UI layouts.

Swiftpack is being maintained by Petr Pavlik | @ptrpavlik | @swiftpackco | API | Analytics