Hot Reload not working for FlexLayout. Forced layout updates not pushed to Android.

[mikeysouthwell]

Description

App has to be reloaded to see FlexLayout changes.

I can change the background colour using hot reload, but any adjustments to the HorizontalOptions or VerticalOptions of the parent FlexLayout or it's child elements don't show with hot reload and the app has to be reloaded to see the changes or the BackgroundColor has to be changed to force the hot reload.

Steps to Reproduce

If you use the code below and try to change something such as the HorizontalOptions="Start" to HorizontalOptions="End" it won't show the change in the Android emulator for the second change. You have to force the refresh by changing the BackgroundColour.

<FlexLayout Direction="Row" BackgroundColor="Black" HeightRequest="48" AlignItems="Start" JustifyContent="Start" HorizontalOptions="Start" VerticalOptions="Start">
    <!-- Child FlexLayout on the left with a 24x24 pixel Rectangle inside -->
    <FlexLayout Direction="Row" AlignItems="Center" VerticalOptions="Start" JustifyContent="Start" BackgroundColor="LightBlue" FlexLayout.Basis="48" FlexLayout.Grow="1" Margin="6,0,0,0">
        <Rectangle WidthRequest="24" HeightRequest="24" Fill="Blue" />
    </FlexLayout>

    <!-- Child FlexLayout on the right with 3 FlexLayouts inside it -->
    <FlexLayout Direction="Row" VerticalOptions="Start" AlignItems="Start" JustifyContent="SpaceBetween" BackgroundColor="Grey" FlexLayout.Basis="144">
        <!-- Each of these FlexLayouts has a 24x24 pixel Rectangle inside -->
        <FlexLayout Direction="Row" AlignItems="Center" VerticalOptions="Start" JustifyContent="Center" BackgroundColor="Pink" FlexLayout.Basis="48">
            <Rectangle WidthRequest="24" HeightRequest="24" Fill="Red" />
        </FlexLayout>
        <FlexLayout Direction="Row" AlignItems="Center" VerticalOptions="Start" JustifyContent="Center" BackgroundColor="LightGreen" FlexLayout.Basis="48">
            <Rectangle WidthRequest="24" HeightRequest="24" Fill="Green" />
        </FlexLayout>
        <FlexLayout Direction="Row" AlignItems="Center" VerticalOptions="Start" JustifyContent="Center" BackgroundColor="LightYellow" FlexLayout.Basis="48">
            <Rectangle WidthRequest="24" HeightRequest="24" Fill="Yellow" />
        </FlexLayout>
    </FlexLayout>
</FlexLayout>

Link to public reproduction project repository

No response

Version with bug

8.0.3

Is this a regression from previous behavior?

Not sure, did not test other versions

Last version that worked well

Unknown/Other

Affected platforms

Android

Affected platform versions

34.0.43

Did you find any workaround?

No response

Relevant log output

No response

[drasticactions]

@mikeysouthwell The changes you're making via Hot Reload are being applied to the view (As in, the values are in the literal object and set), the issue is with FlexLayout on Android. It's not relaying out the view when you make programmatic changes to those child elements. If you force the view to update (rotate the device, resize the app window if on a tablet or WSA) it should show the correct value. You would see the same issues if you made programmatic changes to those elements outside of using the Hot Reload tooling.

So the bug to be fixed is forcing layout updates in FlexLayout on Android, the Hot Reload tooling itself is working correctly.

[mikeysouthwell]

Thanks for the prompt response drasticactions. I am using the Android Emulator (Pixel 5 API 33:5554). I am unable to force the view to update. I have tried zooming in using the magnifying glass on the emulators and resizing the emulator window to force it to update, but it doesn't make a difference. Is there another way to force the view to update? I'm using an emulator, not a physical Android device or WSA.

[ghost]

Hi @mikeysouthwell. We have added the "s/needs-repro" label to this issue, which indicates that we require steps and sample code to reproduce the issue before we can take further action. Please try to create a minimal sample project/solution or code samples which reproduce the issue, ideally as a GitHub repo that we can clone. See more details about creating repros here: https://github.com/dotnet/maui/blob/main/.github/repro.md

This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

[mikeysouthwell]

Hey MSFTBOT, if you use the code below and try to change something such as the HorizontalOptions="Start" to HorizontalOptions="End" it won't show the change in the Android emulator for the second change. You have to force the refresh by changing the BackgroundColour.

<FlexLayout Direction="Row" BackgroundColor="Black" HeightRequest="48" AlignItems="Start" JustifyContent="Start" HorizontalOptions="Start" VerticalOptions="Start">
    <!-- Child FlexLayout on the left with a 24x24 pixel Rectangle inside -->
    <FlexLayout Direction="Row" AlignItems="Center" VerticalOptions="Start" JustifyContent="Start" BackgroundColor="LightBlue" FlexLayout.Basis="48" FlexLayout.Grow="1" Margin="6,0,0,0">
        <Rectangle WidthRequest="24" HeightRequest="24" Fill="Blue" />
    </FlexLayout>

    <!-- Child FlexLayout on the right with 3 FlexLayouts inside it -->
    <FlexLayout Direction="Row" VerticalOptions="Start" AlignItems="Start" JustifyContent="SpaceBetween" BackgroundColor="Grey" FlexLayout.Basis="144">
        <!-- Each of these FlexLayouts has a 24x24 pixel Rectangle inside -->
        <FlexLayout Direction="Row" AlignItems="Center" VerticalOptions="Start" JustifyContent="Center" BackgroundColor="Pink" FlexLayout.Basis="48">
            <Rectangle WidthRequest="24" HeightRequest="24" Fill="Red" />
        </FlexLayout>
        <FlexLayout Direction="Row" AlignItems="Center" VerticalOptions="Start" JustifyContent="Center" BackgroundColor="LightGreen" FlexLayout.Basis="48">
            <Rectangle WidthRequest="24" HeightRequest="24" Fill="Green" />
        </FlexLayout>
        <FlexLayout Direction="Row" AlignItems="Center" VerticalOptions="Start" JustifyContent="Center" BackgroundColor="LightYellow" FlexLayout.Basis="48">
            <Rectangle WidthRequest="24" HeightRequest="24" Fill="Yellow" />
        </FlexLayout>
    </FlexLayout>
</FlexLayout>

[jaosnz-rep]

Verified this issue with Visual Studio 17.10.0 Preview 2 (8.0.14 & 8.0.3), can not repro it on Android platform.

[dotnet-policy-service]

Hi @mikeysouthwell. We have added the "s/try-latest-version" label to this issue, which indicates that we'd like you to try and reproduce this issue on the latest available public version. This can happen because we think that this issue was fixed in a version that has just been released, or the information provided by you indicates that you might be working with an older version.

You can install the latest version by installing the latest Visual Studio (Preview) with the .NET MAUI workload installed. If the issue still persists, please let us know with any additional details and ideally a reproduction project provided through a GitHub repository.

This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

[joegreen690]

I'm using Visual Studio Community 2022 v17.9.5 and this issue still exists. Hot Reloading is still buggy. Please do not close.