Skip to main content
Version: 4.0

Component Injection

There are two ways to inject Mealz components into the host app:

  1. SwiftUI (preferred as nothing has to be changed on the component itself, except styling adjustments)
  2. UIKit

For the sake of the example, we will inject a component showing a recipe card in the host app. In Mealz, recipe cards can either be "fixed" (= fetched by on a predefined ID) or "suggested" (= fetched based on the user navigation context)

However, using UIKit, it can get a bit more complicated. We need to wrap the view in a UIHostingController & set the bounds. This will need to be done on all of our views in a swiftUI view.

import UIKit
import SwiftUI
import MealziOSSDK
import MealzUIiOSSDK
import MealzNaviOSSDK

class YourViewController: UIViewController {

   let standaloneRecipeCard = MealzStandaloneRecipeCardUIKit(recipeId: "15434")

   override func viewDidLoad() {
        super.viewDidLoad()
       
        // Add the recipe card as a child view controller
        view.addSubview(standaloneRecipeCard.view)
        
        standaloneRecipeCard.view.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            standaloneRecipeCard.view.topAnchor.constraint(equalTo: view.topAnchor, constant: 10),
            standaloneRecipeCard.view.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 10),
            standaloneRecipeCard.view.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -10),
            standaloneRecipeCard.view.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: -10),
            standaloneRecipeCard.view.heightAnchor.constraint(equalToConstant: CGFloat(300)) // Adjust the height as needed
        ])
    }
}