Learnn approached us because of our expertise and our role as the primary maintainers of the react-native-video library. They were hopeful that our deep knowledge of the library and experience in React Native could help them overcome these significant hurdles.
From our very first conversation, it was clear that the primary pain points were the app's instability and performance issues. However, we knew that diving straight into fixes without understanding the entire landscape could lead to temporary solutions rather than long-term stability. Thus, we proposed starting with a comprehensive audit.
Our audit process was diligent. We dug deep into Learnn’s codebase, which quickly revealed a significant amount of technical debt. This technical debt largely stems from the rapid development pace needed to launch the application in 2020. The code was complex and had common challenges such as extensive use of props drilling and setNativeProps. We also found a lot of legacy components that were no longer in use but still added to the complexity and potential debugging difficulties of the application.
Moreover, performance testing using Flashlight on Android devices highlighted specific bottlenecks. The video player, a crucial component of Learnn’s app, was a major source of performance issues. Every interaction with the player, especially switching videos, caused noticeable lags and unresponsiveness.
One of the most significant findings from our audit was that the crashes were primarily caused by the outdated react-native-music-control library, which was responsible for handling notification controls for audio and video playback in the background. This library had not been updated in years and was causing the app to crash frequently.
Our first step was to remove this unstable library. We then upgraded the react-native-video library from version 5.2.1 to 6.2.0, which included new features for notification controls. This upgrade wasn’t straightforward. It required managing static and dynamic dependencies carefully, particularly because some libraries were incompatible with the new setup, leading to a temporary removal of Flipper, a debugging tool. However, Learnn was using Reactotron, so this did not impact their debugging process significantly.
Implementing the new notification controls feature was another challenge. Although the initial setup went smoothly on both Android and iOS, we encountered several issues:
We quickly addressed these issues by contributing fixes directly to the react-native-video library and implementing patches in Learnn’s project to provide immediate stability. This proactive approach ensured that Learnn did not have to wait for the official release of the library updates.
Another critical issue we identified in collaboration with the client was the handling of notifications on iOS devices. Specifically, only the first notification would appear in the background, and subsequent notifications would fail to display when the next video didn't autoplay after the current one finished. This issue likely stemmed from a limitation in the react-native-video library, which requires using a single player component and simply updating the source when switching videos. However, the client's implementation worked differently. Instead of merely changing the video source, the entire player screen was being re-rendered, causing the audio session to be disrupted and leading iOS to suspend the app in the background.
This problem necessitated a thorough redesign of the video player, a task the client opted to handle themselves. They believed they were more familiar with the complex codebase, which required not only significant modifications but also an understanding of the business logic and custom features like video progress control. We offered our assistance as needed and provided a few helpful guidelines regarding the implementation requirements.
With the immediate crash issues under control, we have planned to turn our focus to performance improvements. The video player’s performance remains a significant concern. Our audit has already highlighted that the player re-renders the entire screen multiple times during video changes, which is highly inefficient.
One of the solutions we proposed was a complete rebuild of the video player, which we will implement in the near future. This involves:
Our commitment extends beyond addressing immediate issues. Recognizing the long-term benefits, we have planned a mission to clean up the codebase as the next step in our collaboration:
This step is scheduled for implementation soon and represents the next phase of our ongoing partnership with Learnn.
The results were transformative. The app's crashes related to notification controls were eliminated, and the overall performance saw a marked improvement. This not only stabilized the app but also led to a significant boost in user satisfaction and positive reviews.
Our partnership with Learnn went beyond solving immediate technical issues. By addressing underlying problems and planning for future enhancements such as reducing technical debt and improving performance, we set the stage for sustained app stability and performance. The success of this project underscores the value of thorough audits, proactive problem-solving, and deep technical expertise in delivering high-quality digital solutions. The next steps in our collaboration promise to further enhance the app's maintainability and efficiency, demonstrating our commitment to continuous improvement and long-term success.
{{cta}}
