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 1×1-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.
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.
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.
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.
