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%) 553 Votes

Share:

Read other interesting posts

Arkit featured

A New Release of iPad Pro and ARKit 3.5 from Apple: What’s so Revolutionary Behind?

Modern digitized reality is much more boundless than you might think. Whenever you feel bored and want to add a bit of magic to your working routin...
Top saas trends featured

Top 10 SaaS Trends in 2020

Once upon a time, people didn’t know that instead of on-premise installations, they could use SaaS products. Thanks to the efforts of hardworking d...
Top 5 vr apps  02

Top 5 VR Apps based on Unity You Should Definitely Check in 2O2O

With the advent of VR technologies, the world will never be the same. Just don your headset and enjoy the atmosphere of virtual reality without lea...
Btn scroll top 4x2