Is it Possible to Implement Beautiful UI using React Native Elements?
Published: May 2, 2022
7 min read
In this article, you'll learn:
1
🧰 Tools to Create an Engaging UI using React Native
2
📲 How to Add Fully Customizable Components in React Native
3
🖼️ Stormotion’s React Native UI Gallery
4
💡 Takeaways
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.
React Native UI design can be highly engaging with the right approach (image by Purrweb UI/UX Studio)
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 |
|---|---|
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. | |
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 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 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.
React Native UI can be created with multiple tools. Customizable UI components are also possible (image by Instabug Blog)
Apart from static components, simple as well as complex components with animations can significantly improve user engagement. React Native has an in-built library for implementing animations — React Native Animated. The biggest problem with it is that it doesn’t allow developers to conveniently set the communication between the native thread (where animations are created) and JavaScript thread (where the logic of the app gets set up).
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.
Tools like React Native UI Kitten allow adding customizable elements to component libraries in (react) native apps (image by Jacek Janiczak)
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.
Last but not least, there’s Lottie React Native that allows use of animations created with Adobe After Effects in React Native web and mobile apps.
🖼️ 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
If you're looking to design a fitness application, 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. As a result, we've developed a React Native workout app that not only boasts a user-friendly interface but also seamlessly integrates with a wide range of BLE-based equipment.
# 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.
💡 Takeaways
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!
Was it helpful?
Read also
Our clients say
![Stormotion client Pietro Saccomani, Founder from [object Object]](/static/40e913b6c17071a400d1a1c693a17319/1b3aa/pietro.webp)
They make the whole business work for us, and their improvements are fundamental to our operations. They’re reliable, honest, and willing to try new things that will help us. We appreciate how flexible and easygoing they are.
Pietro Saccomani, Founder
MobiLoud