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.

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.

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

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.