Material Design 2.0 in React Native with React Native Paper

Material Design 2.0 in React Native with React Native Paper(callstack.github.io)

88 points by satya164 7 years ago | 14 comments

vlehto 7 years ago |

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!

sudhirj 7 years ago | |

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

snaky 7 years 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...

serguzest 7 years 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?

TheAceOfHearts 7 years 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.

snaky 7 years 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.

jrs95 7 years 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.

jrs95 7 years 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.

munchbunny 7 years 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.

satya164 7 years 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!

ipsum2 7 years 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?

zwliew 7 years ago | |

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

davnicwil 7 years 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/

vikeri 7 years ago |

Great work!