Is it Possible to Implement Beautiful UI using React Native Elements?
In the development industry, there’s quite a big misconception that it’s not really possible to create an appealing UI design using React Native framework. But in fact, it has nothing to do with the actual capabilities of React Native component libraries.
Our team has been using this framework for quite a while now and we were able to satisfy all UI requests from our clients using React Native UI Kits (or offer a decent alternative). So, in this article, we’ll talk about the tools that we’re using to create unique UI elements, share some tricks on how to add сustom elements that aren’t initially supported by React Native, and share some UI projects that Stormotion has developed over the years.
🧰 Tools to Create an Engaging UI using React Native
To begin with, let’s talk about what tools you can use to implement static UI elements into a React Native application. One of the most popular ones are:
|React Native UI libraries||Description|
|React Native Elements||This library has quite a wide range of UI possibilities, but its main advantage is that users don’t have to set up UI elements but just customize their design using in-built tools.|
|Native Base||This component library allows you to use it with any other native third-party library out-of-the-box and provides dozens of customizable UI templates/elements.|
|React Native Vector Icons||React Native Vector Icons is developed specifically for implementing icons. They’re surely customizable but the creators of the library offer quite an extensive out-of-the-box set of React Native UI icons. You can take a look at the list here|
|React Native UI Kitten||React Native UI Kitten also provides a wide range of customizable React Native elements. However, UI Kitten has a specific Unique Selling Point — they provide users with sets of components that are styled similarly to help with consistency.|
When deciding on what library you should go for to create the most suitable React Native UI component, make sure that you talk to somebody with enough technical knowledge to consult you regarding your specific use case.
To be more specific, if you need to know an animation’s state (let’s say how far a user scrolled down) in the JS thread, React Native Animated library significantly limits the opportunities because of the lack of convenience in threads connection.
Luckily, there’s a much better option for implementing animations in React Native, which is called React Native Reanimated. We won’t go into technical details, but it’s generally one of the best solutions on the market that allows developers to create practically anything (surely, with enough expertise and critical thinking).
William Candillon is a developer and a YouTuber who has a whole series on creating stunning animations in React Native. Here’s the playlist.
📲 How to Add Fully Customizable Components in React Native
In case out-of-the-box libraries don’t have UI components you find suitable for your application, or maybe you’d like to have the logo of your business somewhere in the app, React Native allows adding customly created elements and customizable icons.
For that matter, one of the main tools in web and mobile app development is React-Native-SVG. With this library, you can create numerous static UI components. To animate them in your React Native app, you can simply use the Reanimated library from the previous section.
Apart from the SVG library, there’s also a new one called React Native Skia. It allows developers and designers to create amazing UI. It’s greatest benefit is that you don’t have to animate static UI components with a third-party solution — Skia also allows animating such objects.
🖼️ Stormotion’s React Native UI Gallery
As a development company with a lot of experience in React Native, we’ve had quite a lot of projects that we’ve designed using React Native tools. In this section, we’ll talk about a couple of them and share the results with you!
We will also be sharing some new UI design tools for web and mobile app development using React Native.
# 1: SportPlus
SportPlus is a fitness app that is built around the concept of workouts: the app connects to a fitness device via Bluetooth Low Energy technology, and then the user can manage the device’s characteristics (such as the speed of a treadmill etc.) via the app, or use one of the prerecorded workouts that set up the characteristics automatically.
For this project, we’ve created the Workout Screen with 2 main animated React Native elements — the circle and the graph.
The circle and the graph were built using React-Native-Svg and Reanimated. The first tool allowed us to make these elements an actual circle. Then, we used the second to animate the circle with running time.
# 2: BackSeatGames
Our next project that, unfortunately, never got to see the world because the owners decided so, was BackSeatGames app. The app was supposed to have swiping mechanics and offer mobile games from while on the road (for passengers, of course).
A swipe to the right means a new game, a swipe to the left — the previous one. Additionally, there are various animations depending on the action — clicking the “Like” button, zooming out the swiping screen, etc.
To create these swipings, we used React-Native-Snap-Carousel UI toolkit. The side menu with zooming out effect, that you can activate via a swipe or by clicking the button, was created using Reanimated. Take a look at the 3D effect and the smoothness here. Despite all rumors, we were able to reach such using React Native.
# 3: CheckMyBus
CheckMyBus is an app that helps people find the best bus deals. It looks for both routes and departure times according to your request. Additionally, you can set up other filters like price.
So, there are several interesting animations here. First, when you press the textbox to type in destination, everything except for the textbox gets shadowed. Additionally, we’ve created gradients for the transport list (the green line).
We’ve also animated text coloring for scrolling through the dates of departure and return. The yellow dot lets users know what they’re currently at.
All animations were created using React Native! 🚀
# 4: Track Holodomor History
Track Holodomor History is a museum/interactive exhibition app developed for the Holodomor Museum specifically. It has quite a lot of interesting features like pre-built Holodomor history routes based on Google Maps. There’s also some hidden content that appears only if you’re located within 400 meters from the location.
This app has an engaging carousel animation — the pictures move with different speed depending whether or not there’s any text. We’ve also synchronized Google Maps with the lower blocks using React-Native-Maps. For the lists, we’ve used regular FlatList from React-Native.
Another UI element worth attention is the moving blue line changing the color of the text while switching between several options (changing the language, for example).
# 5: Asha
Asha is a food delivery app with swiping mechanics that allows users to diversify their eating habits and find new culinary gems.
In this app, the Tinder-Like mechanic works as follows: a user swipes left — they like the dish, right means dislike. There’s also animation that takes users down the screen to see more details on the dish. In this case, the picture gets smaller and the hidden text pops up smoothly.
All these animations were created using React-Native-Reanimated. Additionally, we used Adobe for the fireworks that arise when swiping left. Then, we used React-Native-Lottie and implemented it in the Asha app without any issues.
In this article, we’ve talked about several tools to build engaging UI design and shown multiple real-life examples of how it can be done. Hopefully, we were able to break the stereotype that React Native isn’t the right tool for UI.
If you have any questions left or need any help with designing your app, feel free to reach out. We’d be happy to help you!