The State of Neumorphic Design in React Native
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
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.
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!
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!'
