SplitCloud - The double music player for SoundCloud

Could you introduce your app in a few sentences?

My name is Giulio Dellorbo, I’m a software developer based in London.
I’ve built SplitCloud app as a side project in my free time. The idea came from a problem that I encountered in several occasions.
During a long trip or on holiday somewhere, I would find myself having to share headphones to listen to music with my partner or with my sister because only one device had battery left or sometimes only a single pair of headphones was available.
The main issue with that is, you’d have to listen to the same song and find an agreement on what to play next. So I’ve had the idea to build a double music player to be able, when needed, to play two different tracks at the same time, splitting the audio on each side of your stereo headphones.
All using a single app on your iPhone or iPod touch. (Now also available for Android, July 2019)
To make the app useful in many situations, including using it on a device without any stored music, SplitCloud uses the streaming platform SoundCloud, giving you access to millions of tracks for all music tastes.
The app can be downloaded for free on the AppStore.

What made you decide to use/switch to React Native?

The choice of React Native as the app framework was made early in the development process.
Coming from a JavaScript and Frontend Developer background the idea of being able to use the familiar languages and tools (JavaScript, Flexbox, React components etc.. ) to make an app that looks and performs just like the ones written with the platform native toolkits was very tempting.

How did you transition to React Native?

As stated before, the app was built from scratch with React Native as the app framework. It surely helped to be comfortable with all the familiar tools in the JavaScript ecosystem.
Many of the great npm packages that are used in web development context can now be reused to build mobile apps.
Having familiarity with the structure of a React app based on a component architecture makes it fast to start in React Native, as all the tools and techniques can be used in both web and RN context.

Have your tried other cross platform technologies before using React Native?

In the past I’ve been using the PhoneGap/Cordova hybrid mobile framework but the results were always mixed in terms of performance and usability.
From a developer point of view it always felt like building a web app trying hard to get somewhere near the true native look and feel, living within a web sandbox, you would get bitten too often by performance issues and other technical limitations inherent to these kind of hybrid framework implementations.
I’ve also coded some Objective-C for native iOS app development and while the performance was great and the tooling and IDE support strong, the development speed was reduced, this was due to the un-intuitive way to layout a complex responsive UI, the need of recompiling the project to see the changes and the cryptic error messages that would come up sometimes during the compiling phase.
This is of course my point of view coming from a web background so it is overall subjective.
I’ve heard lots of good things about Swift and the new solutions to layout the UI on iOS native projects.

What has your experience been working with React Native in terms of app performance, have you noticed any impacts?

I’m pleased to say that I haven’t had any major performance issues working with React Native so far.
I think this is largely due to the different approach taken by the framework:
The JavaScript ends up communicating through a bridge with native code that runs on a different thread taking care of the UI updates, the animations, and all the other functionalities that can be handled with native code in a more performant and platform optimized way.
I think the key for performance is to understand how the native components work and what can be done to optimize the performance, e.g. when dealing with lists or grids or animations.
Then all the React best practices still apply so it is important to keep optimizing your components as you would in the web context.
As stated in the docs, on mobile, logging is not for free; make sure you remove all unnecessary logging as part of your production build.

How has adopting React Native affected developer productivity?

All in all adopting React Native as my mobile development framework greatly enhanced the productivity as I was able to reuse my web technology skills and only write the minimal bridging native code to get access to some native third-party libraries. I think it would have taken a considerable amount of extra time to build the same app if I couldn’t leverage all the tools and libraries already part of the JavaScript ecosystem.

Which tools, libraries and frameworks are part of your development process with React Native?

For the development of SplitCloud I’ve used the following tools and libraries:
Visual Studio Code
Redux Persist
React Native FS

What resources have you used to learn React Native? Books, tutorials, courses etc. Anything you can recommend?

I would recommend to read the official documentation on the website and to try to follow their initial tutorial. If you are new to React and web technologies, I would also recommend to read the official React docs to familiarize yourself with the core concepts of the framework.
Other than that I’ve read various online tutorials and blog posts when I wanted to figure out how to use a specific React Native component to achieve my goal.
There are also the mozilla MDN pages to learn more about the flexbox layout model that I found quite useful to understand how to use flexbox for building the app layout.

What are some things that you don’t like about React Native or that need to be improved?

I haven’t encountered many problems with React Native so far.
I had issues using npm links to work on dependencies as the React Native Packager was not able to bundle symlinked dependencies.
As a temporary workaround for this scenario I’m using a tool called [wml].(https://github.com/wix/wml)
I think I would like to see more native components and APIs ported to React Native so that the need to write bridging code for native APIs is reduced even further.
Other that that I find the developer experience for the update process for the framework itself could be improved,
it would be great to have an easier way to deal with updates of React Native.
Like any project there are some open bugs and issues that still need to be addressed but those will be fixed with the new versions of the framework.

Anything else you would like to mention?

I hope you find the app interesting, you can download SplitCloud for free on the AppStore. Please leave a positive review if you like it.
To find out more check the website www.splitcloud-app.com.
To keep updated of new updates and features you can follow our social accounts: