Making a dynamic progress bar in my first React Native app
I recently worked on my first ever mobile app, as part of my final group project at Makers, a 16-week coding bootcamp. We chose React Native as we’d heard a lot about it from other cohorts and also were keen to use a Javascript framework, the course prior to this was predominantly completed in Ruby. The idea behind the app is to encourage users to record something that they are grateful for each day and in doing so they are rewarded. Initially the idea for the reward was to have a plant which grew with each grateful thought added. We quickly realised this was a little over ambitious with our 10 day timeframe and no experience of React or React Native, we therefore adjusted our plans to make a progress bar instead. The progress bar would get closer to filling up with each grateful thought added.
As stated this was my first ever attempt at using React Native so I’m sure this is by no means the best way to go about it and is not meant as a tutorial. You’ll quickly see as you read on, when I started out how little I knew about how React Native worked. I’m writing this to consolidate in my mind what I learnt, reflect on our process and approach and help identify what I would like to learn next.
My team mate and I broke the building of the bar into small manageable steps. With both of us admitting that we had no idea how to do any of the next stages, we started off building the scaffolding of what the progress bar would look like, which we based somewhat on this article. We had two Styles which we rendered in two Views in our progress bar component:
With some playing around we knew it was the width of the filler that needed to change dynamically, and we wanted it to be dependent on the number of grateful thoughts stored in out database. Our next step was to figure out if it was possible to interpolate the value of width so that we could set it in some kind of function. We managed this by creating a constant CustomStyle, where we could set the filler’s width.
Our next step was to work out the logic we needed to turn the number of thoughts recorded in our database into a corresponding level of filled up progress bar (for want of a better term). We decided the most simple way to do this, considering our width was styled as a percentage, was for the progress bar to fill up by 10% for each thought added. When it reached 100%, the user would move up a ‘Gratitude Level’ and the progress bar would go back to the start. If the input of a new ‘thought’, meant the number of ‘thoughts’ stored in our database totalled 12, 22, 32, 502 (and so on) the filler of the bar would be at 20%, equally if the total was 3, 33, 133 (and so on), the bar would be at 30%. We initially managed this using the below code (I’ve included the console.logs we used, these helped us visualise whilst we were working out the logic).
Great, the progress bar looked as we wanted and we’d worked out the logic we needed, but it wasn’t yet updating as we wanted despite being connected to our database. This is where we realised we needed a deeper understanding of React Native, and more specifically the use of hooks and state.
As our app contained other components that did already use hooks we decided to refactor our progress bar into a class so as to make it easier to copy our previous process and also maintain consistency throughout our app. We’d created the other components using this tutorial, so though they functioned as intended we didn’t have too deep an understanding as to how at this stage.
Once we’d refactored to a class, I could tell we’d been on the right track with our constant ‘CustomStyle’, but instead of a constant we needed to use state to set the value of width.
We then rendered this in our View.
Finally we realised we needed to actually actually call our function getThoughtsLength so used the componentDidMount hook.
Yay, finally a progress bar working as we intended! You can see an example of the app and progress bar in action here.
Throughout our work I think we successfully broke down the process into manageable stages to work through. Even though initially the progress bar was just an idea that seemed more manageable than our original idea, we really didn’t know how it was going to work. However, we managed to identify each step that we needed to get closer to the final working progress bar. This meant we avoided feeling overwhelmed and also broadened our knowledge of React Native in a step by step way. I will definitely take this approach again in future. Moving forward, to improve my confidence I’m going to look further into setting state and props in React/React Native. I’m also going to look into using functions instead of classes for components.
