The State of Neumorphic Design in React Native

Clayton Francis
Nov 26, 2020 · 4 min read
The State of Neumorphic Design in React Native
The State of Neumorphic Design in React Native
Photo by Charles Deluvio on Unsplash

Neumorphism is very much like Marmite; you either love it or hate it. The concept is so bold, it makes it difficult to be on the fence with. Personally, I hate Marmite but love neumorphic design! I know my screen is flat, but the idea of an inanimate object being represented in its 3d state just works for me, and it looks great too!

Origin

The design concept of Neumorphism is firmly rooted with Skeuomorphism - real-world representation - but with a minimalistic twist. Pressable interactions such as buttons are created with shadows and highlighting instead of colours, providing a minimal realistic look; to gain a feel for what is going on, pop over to https://neumorphism.io/#55b9f3 and have a play around. Skeuomorphism isn't dead and still has a place in graphical design, providing a familiar look and feel for the user, here is a perfect example.

Physical compressor, image from kmraudio.com

Image for post
Image for post

Skeuomorphic counterpart, image from waves.com

Here to Stay

I believe Neumorphism redefines intuitive UI and is here to stay (at least for a little while). Think about it, the only reason a filled or bordered rectangle with a word in the middle intuitively looks like a button is that we’ve become accustomed to it. Take a look at your keyboard, are your buttons inline with the surface, or can see shadows created by light? Now press any key and see what happens to the shadow around it… point made! With the release of Big Sur, even apple has jumped onboard.

Neumorphism with React Native

While JavaScript is famed for fatiguing developers with library overload - a trillion libraries that all do roughly the same thing - I’m feeling underwhelmed with the current Neumorphic options. But let us not dwell on that, time to take a look at what options we do have.

react-native-neomorph-shadows

This library comes with three components, Shadow, Neomorph, and NeomorphBlur; they don’t support flex, but it has two experimental components that do. It’s easy to use and fairly self-explanatory; install the packages, import the component, and add styles; zero boilerplate! I’ve played with this one and love it! But there is a catch, you can’t use it with Expo as Expo has deprecated react-native art.

https://github.com/tokkozhin/react-native-neomorph-shadows

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

react-native-neumorphic

If you’re an Expo user and the previous library excited you, it’s time to turn that frown upside down, because here’s one that you can use with Expo. It’s not the most popular library (3 weekly downloads at the time of writing), but if you just want to play with some design concepts, why not!

https://github.com/shaneboyar/react-native-neumorphic

What else?

Well, not much, really. But hey, if you love Neumorphic design, and want to use it in your next project, you could always do it yourself, after all, it’s just styling.

Examples

With all this talk of sexy minimal design, we need a ‘here’s one I made earlier’ example to make this article complete. And here’s a calculator using react-native-neomorph-shadows (that I made earlier) - see what I did there!

Image for post
Image for post
Image for post
Image for post

Conclusion

I think Neumorphism is amazing, although there aren't many options for React Native. We could chalk it up as a JavaScript anomaly, and move on. Or, I could have a rant, something like, "As a JavaScript developer, I never thought I'd say this, we need more libraries." But I prefer to see the silver lining, if all the major UI libraries suddenly incorporated Neumorphism, we'd start seeing it everywhere; and then it wouldn't be special anymore. For now (at least), it's a bold design concept, reserved for the brave souls who dare to challenge the status quo. In conclusion, my thought toward the status quo is, 'Challenge accepted!'

Image for post
Image for post

Weekly Webtips

Explore the world of web technologies through a series of tutorials

Sign up for 💌 Weekly Newsletter

By Weekly Webtips

Get the latest news on the world of web technologies with a series of tutorial Take a look

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Clayton Francis

Written by

Entrepreneur, TypeScript Developer, & CEO of my destiny

Weekly Webtips

Explore the world of web technologies through a series of tutorials

Clayton Francis

Written by

Entrepreneur, TypeScript Developer, & CEO of my destiny

Weekly Webtips

Explore the world of web technologies through a series of tutorials

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store