Home

Awesome

logo

HotReload

Twitter URL Xamarin.Forms XAML/CSS hot reload / live reload Build status Sample Video you can find here: https://twitter.com/i/status/1124314311151607809

Sample GIF

Setup

Extension

Visual Studio for MAC

NOTE: Restart Visual Studio after installation (in case of menu didn't appear in toolbar).

Visual Studio for WINDOWS

NOTE: Restart Visual Studio after installation.

JetBrains Rider

Other IDE/TextEditors (eg. NotePad++ | Sublime | VS Code etc.)

Reloader

Base Setup

using Xamarin.Forms;

namespace YourNamespace
{
    public partial class App : Application
    {
        public App()
        {
            InitializeComponent();
#if DEBUG
            HotReloader.Current.Run(this); 
#endif
            MainPage = new NavigationPage(new MainPage());
        }
    }
}

IMPORTANT: i suggest to NOT use [Xaml.XamlCompilation(Xaml.XamlCompilationOptions.Compile)] with HotReload. It can cause errors. So, don't enable it for Debug or disable.

C# Elements reloading

alt text

NOTE: BindingContext will be copied automaticaly, but if your view constructor has any parameters, you will have to define a property object[] HotReloadCtorParams => new object[] { }:

[HotReloader.CSharpVisual]
public class CodeContentPage : ContentPage
{
    private Color _backColor;

    public CodeContentPage(Color backColor)
    {
        _backColor = backColor;
        BackgroundColor = backColor;
    }

    object[] HotReloadCtorParams => new object[] { _backColor }; //These arguments will be passed in case of reloading
}

Additional Setup / Troubleshooting

  1. If you want to disable HotReload for Release mode, follow instructions here https://github.com/AndreiMisiukevich/HotReload/issues/115#issuecomment-524545788

  2. Your device/simulator/emulator will be discovered automatically. (IMPORTANT: Make sure your PC/Mac and device/emulator are in the same local network.)

  3. If your device and PC/Laptop are in different subnets (or extension doesn't discover device), you should specify your Extension's IP during reloader setup

HotReloader.Current.Run(this, new HotReloader.Configuration
{
    //optionaly you may specify EXTENSION's IP (ExtensionIpAddress) 
    //in case your PC/laptop and device are in different subnets
    //e.g. Laptop - 10.10.102.16 AND Device - 10.10.9.12
    ExtensionIpAddress = IPAddress.Parse("10.10.102.16") // use your PC/Laptop IP
});
  1. Android Emulator IP autodiscovery: Windows: Make sure that adb (usually located in C:\Program Files (x86)\Android\android-sdk\platform-tools) is added to PATH enviromnet variable in other case you will have to forward ports yourself. It it isn't added. Add it then restart visual studio or Rider

BY DEFAULT EXTENSION TRIES TO FORWARD PORTS ITSELF (and you should skip this step) BUT in case it is not working you should forward the port yourself (here is example with DEVICE port 8000 (DeviceUrlPort default value).

adb forward tcp:8000 tcp:8000

keep in mind that HotReload may change your DEVICE's port (it's edge case and shouldn't happen, but just keep in mind that it's possible). So if adb forward doesn't help, open APPLICATION OUTPUT and look for $"### HOTRELOAD STARTED ON DEVICE's PORT: {devicePort} ###" And execute adb forward with that value. Also you can get selected port and device IP's there:

var info = HotReloader.Current.Run();
var port = info.SelectedDevicePort;
var addresses = info.IPAddresses;
  1. If you want to make any initialization of your element after reloading, you should define a method void OnHotReloaded (). It will be called each time when element's content (xaml/code) updated.
public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
    }

    void OnHotReloaded() // Add logic here
    {
        label.Text = "I'm loaded again";
    }
}
  1. ViewCell reloading: before starting app you MUST determine type of root view (e.g. StackLayout). It cannot be changed during app work (I mean, you still can change StackLayout props (e.g. BackgroundColor etc.), but you CANNOT change StackLayout to AbsoluteLayout e.g.).
<?xml version="1.0" encoding="UTF-8"?>
<ViewCell xmlns="http://xamarin.com/schemas/2014/forms" 
          x:Class="Xamarin.Forms.HotReload.Sample.Pages.Cells.ItemCell">
    <StackLayout>
    </StackLayout>
</ViewCell>
  1. Previewer properties: if you want to use xmlns:d="http://xamarin.com/schemas/2014/forms/design" during your work with HotReload, you can achieve it by two approaches
HotReloader.Current.Run(this, new HotReloader.Configuration
{
    PreviewerDefaultMode = HotReloader.PreviewerMode.On
});

<?xml version="1.0" encoding="UTF-8"?>
<?hotReload preview.on?>
<ContentPage>
...
</ContentPage>

Use <?hotReload preview.on?> to allow design properties and <?hotReload preview.off?> to forbid them.

Old Extensions (with mannual IP entering)

If you wish to enter device's IP mannualy, you may use these extensions (Make sure you disabled extensions autoupdate) https://github.com/AndreiMisiukevich/HotReload/tree/master/old_extension_packages

INFO

Collaborators

Are there any questions? just ask us =)

License

The MIT License (MIT) see License file

Contribution

Feel free to create issues and PRs 😃