Simulate a black hole for React Native app?
Recently, I had the opportunity to work on a international project as a programmer leaded by Álvaro García-Minguillán. One of the features the application required in its user interface was a bubble picker selector similar to that of the Apple Music app.
However, despite React Native offering a wide range of possibilities for app development, when searching for solutions online, I found only a few options, and the ones available are outdated for the latest version of React Native.
So, what were my options? I spent some time studying 3D frequently. During this period, I learned certain important concepts, such as ‘collisions’ and ‘gravity’, which helped me identify in the reference user interface.
Also you can read:
If I tried to implement an animation, I knew it would be a defined movement. I didn’t need an animation, but a ‘simulation’. Was implementing a physics engine the only solution for an ui app?
It seems so… yes. So, I dedicated some time to research what available options existed, especially those compatible with the new React Native version. After searching, I came across Matter.js, which, from its documentation, provided the features I needed for the behavior of the bubbles.
So, having chosen the physics engine, it was now a matter of how to program the behavior of the bubbles. It’s important that gravity is centered on the screen and that the bubbles do not overlap. Each bubble must have a repulsion force and a defined margin.
So, with the limited time available to solve the problem, I came across a rather curious implementation of Matter.js that resembled the behavior of the bubbles I needed: simulating a black hole. In this example, there was an object exerting an attractive force to pull other objects towards it.
And also i found this interesting example
So, simulating the behavior of a black hole for an ui application? ‘It must be a joke,’ I thought. However, it was one of the few examples I could find online. So, I took some of the code and, with the help of the Matter.js documentation, managed to give it a somewhat similar look to the Apple Music app selector. The result could be useful for those who encounter a similar challenge in the future.
It’s funny how developers try to find solutions. This React Native project is available on my Patreon.
🪙 You can buy my projects and support me on:
