production

React Native Case: Building a Custom Circle

React Native is an open-source mobile development tool introduced by Facebook that allows creating user-friendly apps for Android, iOS, Web and UWP. Although it is quite a popular technology, being a React Native developer is a challenging task. You often have to build custom components, and more frequently, you need to find/create non-standard control elements like the one we are going to consider in this article.

Over my experience at LITSLINK, I’ve worked for a variety of projects, developing different types of apps. If you ask me what the central element in a mobile app is, I’d definitely say the Tab Bar as it serves as a key interaction point between a user and software. As a rule, engineers use standard patterns and common practices, but this time, I wanted to create something new with similar functionality. I am here to provide you with a detailed guideline on how to build a Custom Circle element with the help of React Native.

If you want to run the Custom Circle element on your device, you can go to Expo or GitHub.

Drawing Circle

When I just started learning JavaScript in the early 2000s, it was increasingly popular to add various interactive elements on the web page, such as falling snow, different counters, dropdown lists, etc. At that time, the most challenging task for me was drawing a custom clock with hands. For this purpose, I found an optimal mathematical algorithm, which helped me to draw this element and make it run in alignment with the time. The solution itself looks pretty simple:

const x = Math.cos(Math.PI * 2 * angle / 360);

const y = Math.sin(Math.PI * 2 * angle / 360);

Variables x and y are the output coordinates of the point, and the “angle” stands for the degree of rotation. I went through all 360 degrees to draw a circle, creating a 1x1-pixel div with the necessary color for each degree. However, in this case, we will use this approach to get the icon into the circle.

Code to Build a Custom Circle | LITSLINK Blog

angleValue - the general degree of rotation

iconPosition - offset to the centre of a circle

iconsDegree - degree of the section

You can also use an alternative method — transform property styles. However, this step will rotate icons in the circle, which may change the representation of all the elements in the interface. 

How to create a custom circle element on React Native? | LITSLINK

User Interaction

To ensure a user interacts with our control element smoothly, we need to take care of the user journey and handle gestures. I expect the user to interact with the device at the bottom of the screen. For this reason, I’ve decided to focus on horizontal gestures only. 

All I needed to do is to wrap my control with PanGestureHandler.

onGestureEvent - responsible for sending an event about the movements on the component.

onHandlerStateChange - responsible for changing of the state (begin, end, etc.)

In the handler of on GestureEvent, I can track how a user goes from the starting point with the translationX property event.nativeEvent.translationX and converts it to degrees that I need to rotate the circle. When the rotation stops, I calculate the correct degree for the circle and animate to the correct position. 

Styling

As I mentioned before, I want my Custom Circle to be placed at the bottom of the screen. I’d like to move it there with absolute positioning to allow overlapping of the content on the screen. Also, I frequently use BlurView in mobile apps, so I’ve decided to add it to the background of the circle.

How to style custom elements in the circle? | LITSLINK

So, the user can manage screens with the custom circle with the help of horizontal moves. But this interaction looks like a natural response — just try it!

As usual, all sources are open and available on my GitHub repository. So, you can easily access them and try to build the same custom circle. If you have a request for a more complicated task, such as creating a mobile or web app, contact the LITSLINK team and we will get back to you shortly.



4.8(96%) 551 Votes

Share:

Read other interesting posts

Product design featured

Top Software Product Design Principles to Follow in 2020

If you’re reading this article, then you’re most likely to be interested in the best practices of software product design. But we have to break the...
Read more
What are software engineering best practices

What are Software Engineering Best Practices?

What are the best software engineering practices, and why do you need them? To answer this question, you might recall your first music lessons when...
Read more
Single page vs. multi page applications min

Single-Page vs Multi-Page Applications: Benefits, Drawbacks and Pitfalls

Web applications can be built in different ways – as single-page applications (SPA) and multi-page applications (MPA). If you are about to develop ...
Read more
Btn scroll top 4x2