Skip to content

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

Open

Description

@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

image

✅ 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

image

❌ 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.

Activity

  1. self-assigned this
    on Jan 11, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions