$ 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 bugflexGrow: 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.
❌ 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.
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.
Environment
I'm using
@nativescript/theme@2.2.1.Describe the bug
flexGrow: 1on aTextFieldin a FlexboxLayout is completely ignored when"~@nativescript/theme/core"is imported intoapp.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: 1is 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'sapp.cssis a fair comparison to the import in my web browser app'sapp.scsswith which I've directly experienced the problem.Anyway, here is the Playground in case you want to download the files, switch
app.csstoapp.scssand get the imports working: https://play.nativescript.org/?template=play-react&id=MbydOr&v=4For an actual repro, you may instead need to use my less-minimal repro: https://github.com/shirakaba/rns-browser/tree/ns-6-3
Expected behavior
flexGrow: 1should 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 withflexGrow, but withwidth.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.