In some places I wanted to give users lots of options but didn’t feel I had the space to do it. Two awesome tools that helped me immensely in this regard were segment controls and action sheets. In the MyWorkouts screen I used a segment control to give users access to the workouts in their history, library, and uploads and an action sheet to manage those workouts.

I used Algolia for the app’s search engine. Whenever a user or workout is created in the app, a firebase function syncs the firestore database with the Algolia database which allowed me to add custom filters that made searching easy and fast. Algolia requires careful attention to the data structures that are indexed, and I learned how to use the Algolia dashboard as I modified the metadata of my workouts and users so that my app would stay functional.

When the create-workout flow I wanted a way to show the user what they had built so far and also quickly give them a way to add exercises to a workout. To do this, I decided to automatically scroll down a list of exercises every time the user added a new one and present them the option to add another exercise in the middle of the screen. I used a reference to the flat-list and a function that fired every time an exercise was added to scroll down with animation.

One of the challenges I faced early on was sharing content between screens. Because of the way React Stack Navigator stacks screens when navigating back and forth, a screen’s content can’t normally be updated by another screen. To solve this, I passed callbacks with references to state variables to React navigation and used the callback in a modal screen to update the state in the previous screen. Elsewhere in my app I used firebase listeners to automatically refresh a screen once the database had been updated.