Material Design 2.0 in React Native with React Native Paper (opens in new tab)

(callstack.github.io)

88 pointssatya1647y ago14 comments

14 comments

If I ever invent a new physical actual material or structure, I'm going to call it "syntax error" or "for loop". Then when people complain over the Internet that their syntax error is leaking water, I finally get my revenge!

sudhirj7y ago

If you make something physical, you should call it “abstraction”, and wait for people to complain that it leaks.

snaky7y ago

The funny thing is modern material and structural design is going to be quite compute-intensive field, and we aren't talking about molecular modeling.

This paper[1] would give you some very practical examples, and if you are interested enough, I'd recommend [2] for overview of the current state of the affairs.

[1] https://hal.inria.fr/hal-01697103/

[2] https://homes.cs.washington.edu/~adriana/website/aschulz_the...

serguzest7y ago

Material Design makes more sense in mobile apps. It meant for extremely simple UX/UI which mobile apps are naturally fit for. Thanks for the great work!

inline ask-HN : Do you guys really prefer it for complicated web apps ? Do you think it provides better user experience ? is everything flat and chromeless better on eyes when there is so much stuff on screen?

TheAceOfHearts7y ago

I hate it for web apps. Material design is designed primarily for simpler interfaces with a small screen and imprecise inputs, yet I use most web apps from my desktop or laptop where I have a large screen and very precise input methods. You cannot consolidate the two.

I'm not a fan of material design for mobile applications either. I find the animations obnoxious and annoying. It has also been my experience that mobile applications tend to have incredibly low information density and they require jumping through tons of hoops to perform even simple tasks. If I have the choice of installing a mobile app or using its website I always use the website.

snaky7y ago

Exactly.

By the way, we used to have a very precise input method on mobile - the stylus. In the times of Windows Mobile (original Windows Mobile, not renamed Windows Phone) with resisitive screens. The information density of those 240x320 3" screens is hard to achieve even today - google 'SPB Diary' for examples. Combined with stylus, multi-level menus and physical QWERTY keyboards (with shortcuts!) that were the very efficient machines actually.

Maybe recent revival of stylus, thanks to iPad Pro will tend to abandon the 'huge control elements' UI paradigm.

Samsung with their S-Pen on Note models would have a really value-adding and interesting stylus-oriented UI (as an option) instead of awful TouchWiz for years, but they never did it.

jrs957y ago

Web apps need to be usable on mobile devices as well. So you can't use a design that is built with the assumption of precise mouse input without having a separate one for mobile. You can totally consolidate the two though, you're just making a trade off. The desktop interface won't be quite as good, but you have less work to do to support different devices.

jrs957y ago

I like it. It can be done well on web. Check out Google Cloud console as an example.

Plus, it's a good match for a responsive design that needs to be able to scale from a mobile to a desktop experience and everything in between.

1 more reply

munchbunny7y ago

I don't really like it for non-mobile apps, but it's also a fast and easy "UI kit," so I use it for side projects because it lets me get the app out faster. That said, I'll often do things like adjusting padding to make the layout more compact when you're expected to have a mouse.

satya164OP7y ago

We just released React Native Paper 2.0

- Material Design 2.0

- Accessibility improvements

- RTL Support

‍️- New components

Check it out and don't forget to give us a star!

1 more reply

ipsum27y ago

From what I can tell from a Google search, Google has never released material design 2.0. What does it mean to have material design 2.0 incorporated here?

zwliew7y ago

It's an unofficial term for the updated material design guidelines, revealed at Google I/O this year.

davnicwil7y ago

I much prefer the text inputs in the new style.

Does anyone know of any good implementations in regular React of this newer style (2.0)?

material-ui seems to only implement the previous style: https://material-ui.com/demos/text-fields/

vikeri7y ago

Great work!

j / k navigate · click thread line to collapse

14 comments

vlehto7y ago

sudhirj7y ago

If you make something physical, you should call it “abstraction”, and wait for people to complain that it leaks.

snaky7y ago

The funny thing is modern material and structural design is going to be quite compute-intensive field, and we aren't talking about molecular modeling.

This paper[1] would give you some very practical examples, and if you are interested enough, I'd recommend [2] for overview of the current state of the affairs.

[1] https://hal.inria.fr/hal-01697103/

[2] https://homes.cs.washington.edu/~adriana/website/aschulz_the...

serguzest7y ago

Material Design makes more sense in mobile apps. It meant for extremely simple UX/UI which mobile apps are naturally fit for. Thanks for the great work!

TheAceOfHearts7y ago

snaky7y ago

Exactly.

Maybe recent revival of stylus, thanks to iPad Pro will tend to abandon the 'huge control elements' UI paradigm.

Samsung with their S-Pen on Note models would have a really value-adding and interesting stylus-oriented UI (as an option) instead of awful TouchWiz for years, but they never did it.

jrs957y ago

I like it. It can be done well on web. Check out Google Cloud console as an example.

Plus, it's a good match for a responsive design that needs to be able to scale from a mobile to a desktop experience and everything in between.

1 more reply

munchbunny7y ago

satya164OP7y ago

We just released React Native Paper 2.0

- Material Design 2.0

- Accessibility improvements

- RTL Support

‍️- New components

Check it out and don't forget to give us a star!

1 more reply

ipsum27y ago

From what I can tell from a Google search, Google has never released material design 2.0. What does it mean to have material design 2.0 incorporated here?

zwliew7y ago

It's an unofficial term for the updated material design guidelines, revealed at Google I/O this year.

davnicwil7y ago

I much prefer the text inputs in the new style.

Does anyone know of any good implementations in regular React of this newer style (2.0)?

material-ui seems to only implement the previous style: https://material-ui.com/demos/text-fields/

vikeri7y ago

Great work!

j / k navigate · click thread line to collapse