React Native App for learning Piano Major Scales

Today I would like to share, Piano Major Scales App, done by me ‘just for fun’ and as a ‘proof of concept’. If you want you can make it more real and interesting and take things to the next level.

Logic of this app is that there are 12 piano major scales. With every scale there are 8 Notes associated and every note has specific fingering. You can check this website to understand more about piano major scales.

The main challenge was to do the UI of the App and make it look like piano keys even without using any image. Rest of the code is quite simple. Lets check the code of the app.

There are two screen used, one for listing Major scales and another one for rendering relative notes and fingering. Below is the code for Major scale screen :

In the above code there is an array of Piano Major Scales and a json data of piano major scales with respective notes. Now, when the user taps any particular scale tab, he gets redirected to the notes screen with corresponding notes of the scale passed as navigation parameter.

Below is the code of Notes screen with piano UI :

In the above code I have created a map of major scale, notes and fingering using json data. When user taps a note, then respective fingering no shown. I dint have all the sounds for piano keys so i dint do the sound part, but, I have added a sample sound code just to show how sound can be implemented, if you have piano sound files. Its worth taking a look at how piano buttons are done with some illusion 🙂

Things to do

  1. Implement sound effect for all keys and use different sound effect on long press event.
  2. make the UI with 3d buttons.

If you are able to make this better please share your app. I would love to know your experience in comments.

Video of this article :