Here, you’ll find how to make Beagle’s usage configuration for iOS projects.

How to display a “Hello Beagle!” screen

After you installed Beagle on your project, we’ll show how to render a screen and display your first “Hello Beagle!".

Currently, there are two types of approaches to render screens with Beagle: remote and declarative.

Remote Renderization

Main approach used on Beagle because it’s based on server-driven UI concept. It allows you to build layouts dynamically, consuming the informations provided by a BFF through a remote URL.

Declarative Renderization

Even if it’s an alternative not based on server-driven UI, this renderization is a way you can locally state componentes with Swift language. With this, you can use a local component directly or through a JSON that represents it, simulating a response from BFF.

For this example, you will render a screen with declarative way, which means that all the processes will be done locally because, on this way, you’ll know a little bit about Beagle and, in a few steps, test if your installation worked.

Step 1: Create a class (MyBeagleScreen)

Create a class and name it as you wish. Here, we’ll call it MyBeagleScreen.

The class will have only one method responsible to build a Screen.

import Beagle

class MyBeagleScreen {
    static func make() -> Screen {
        return Screen(
            child: Container(
                children: [
                    Text("Hello Beagle!")
                    justifyContent: .center,
                    alignItems: .center,
                    grow: 1

Step 2: Instantiate BeagleScreenViewController

Now it’s time to display your first screen built using Beagle, and to do so you must:

Instantiate a BeagleScreenViewController with declarative type that will receive a MyBeagleScreen.

let beagleViewController = Beagle.screen(

Once you made it, you just have to present it as you wish.

present(beagleViewController, animated: true, completion: nil)

Step 3: Run the application

Now, run your application and, if everything works well, you will see a screen like this:

Next steps

On this section, you saw how to create your first declarative screen using Beagle, on your simplest way, without entering on the server-driven UI concept.

👉To understand more about how to configure Beagle and use it applying server-driven UI, check out how to create an iOS project from scratch.