NativeScript Theme Core irreversibly kills full-width styling on TextField components

[shirakaba]

Environment

I'm using @nativescript/[email protected].

$ tns info
✔ Getting NativeScript components versions information...
✔ Component nativescript has 6.3.0 version and is up to date.
✔ Component tns-core-modules has 6.3.2 version and is up to date.
✔ Component tns-android has 6.3.0 version and is up to date.
✔ Component tns-ios has 6.3.0 version and is up to date.

Describe the bug
flexGrow: 1 on a TextField in a FlexboxLayout is completely ignored when "~@nativescript/theme/core" is imported into app.scss.

Desired appearance

✅ Above: Without theme core, the orange-highlighted TextField shows the desired behaviour of growing to fill the space in the URL bar.

Playground repro: https://play.nativescript.org/?template=play-react&id=MbydOr&v=3

Appearance when Theme Core is imported

❌ Above: With theme core, the orange-highlighted TextField cannot grow to fill the space in the URL bar.

I have tried to minimally reproduce this in the Playground, but failed, as flexGrow: 1 is actually working there – however, I get an error when trying to import @import "~@nativescript/theme/core"; so I'm not sure whether the @import '~@nativescript/theme/css/core.css'; in the Playground's app.css is a fair comparison to the import in my web browser app's app.scss with which I've directly experienced the problem.

Anyway, here is the Playground in case you want to download the files, switch app.css to app.scss and get the imports working: https://play.nativescript.org/?template=play-react&id=MbydOr&v=4

For an actual repro, you may instead need to use my less-minimal repro: https://github.com/shirakaba/rns-browser/tree/ns-6-3

git clone https://github.com/shirakaba/rns-browser.git
cd rns-browser
git checkout ns-6-3
npm install
tns run ios

• In the latest commit, the TextField is in a working state (as I am not importing NativeScript Theme Core).
• Now compare to the previous commit (hot module reload will happily update the app as the CSS import is removed!), whereupon I import NativeScript Theme Core and the TextField width styling breaks.

Expected behavior

flexGrow: 1 should be respected on TextFields when NativeScript Theme Core is imported, as there is no other way to achieve its behaviour.

Additional context

I also tried swapping the FlexboxLayout for a GridLayout and putting the TextField in a column with * width, but it was similarly broken. So it's not exclusively an interaction with flexGrow, but with width.

Additional concerns

I just noticed that the four-squares icon also disappeared from the Footer when NativeScript Theme Core was applied..! That will need investigating too, but I haven't looked into it yet.