ReactorUI
  • What's ReactorUI for Xamarin
  • Guide
    • Setting up
    • Hello World Sample
    • Components
      • Component Lifecycle
      • Component Properties
      • Component with children
      • Navigation
      • Component Context
      • Reference to native controls
      • Animation
  • Native Tree and Visual Tree
    • Custom visual nodes
    • Custom Pages
  • Migrating from MVVM model
  • Integrating DI Containers
  • Hot reload troubleshooting
  • Styling and theming
  • Sample with SkiaSharp
Powered by GitBook
On this page

Was this helpful?

  1. Guide
  2. Components

Component Properties

When creating a component you almost always need to pass props (or parameters/property values) in order to customize its appear or behavior. In ReactorUI you can use plain properties.

Take for example this component that implement an activity indicator with a label:

public class BusyComponent : RxComponent
{
    private string _message;
    private bool _isBusy;

    public BusyComponent Message(string message)
    {
        _message = message;
        return this;
    }

    public BusyComponent IsBusy(bool isBusy)
    {
        _isBusy = isBusy;
        return this;
    }

    public override VisualNode Render()
    {
        return new RxStackLayout()
        {
            new RxActivityIndicator()
                .IsRunning(_isBusy),
            new RxLabel()
                .Text(_message)
        };
    }
}

and this is how we can use it in a page:

public class BusyPageState : IState
{
    public bool IsBusy { get; set; }
}

public class BusyPageComponent : RxComponent<BusyPageState>
{
    protected override void OnMounted()
    {
        SetState(_ => _.IsBusy = true);

        //OnMounted is called on UI Thread, move the slow code to a background thread
        Task.Run(async () =>
        {
            //Simulate lenghty work
            await Task.Delay(3000);

            SetState(_ => _.IsBusy = false);
        });

        base.OnMounted();
    }

    public override VisualNode Render()
    {
        return new RxContentPage()
        {
            State.IsBusy ?
            new BusyComponent()
                .Message("Loading")
                .IsBusy(true)
            :
            RenderPage()
        };
    }

    private VisualNode RenderPage()
        => new RxLabel("Done!")
                .VCenter()
                .HCenter();
}
PreviousComponent LifecycleNextComponent with children

Last updated 5 years ago

Was this helpful?

NOTE: If you need to set properties of components hosted in a different page you should use a Props object (see )

Navigation