Projects
Learnn
November 13, 2024
5 minute read
x
Learnn
Industry
Video Course Platform
Learnn, a leading video course platform in Italy, found themselves in a tough situation with their mobile application. The app, built using React Native and heavily reliant on the react-native-video library, was suffering from frequent crashes and poor performance, particularly on Android devices. These technical issues were not only hampering the user experience but also leading to a slew of negative reviews, threatening the platform's reputation and user retention.
Achievements
Enhanced user experience
Stabilized the app
Enhanced user experience
Improved notification controls
Technologies
React Native
react-native-video
Typescript
Flashlight
Reactotron
Flipper

The Initial Approach

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.

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.

Omar Diop
Technical Lead at Learnn.
We were initially overwhelmed by the extent of issues identified in the audit. However, TWG's detailed report and clear action plan gave us confidence. They didn't just highlight the problems but also explained the impact and proposed practical solutions.

Addressing Crashes and Notification Controls

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.

The Solution

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:

  • Notifications were empty on older Android systems. 
  • Audio playback stopped when the app went to the background on iOS devices.
  • Initial props for showNotificationControls set to true caused the notifications to hide.

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.

Omar Diop
Technical Lead at Learnn.
The speed at which TWG addressed and fixed the notification control issues was impressive. Their ability to patch the library directly saved us weeks of potential development time.

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.

Omar Diop
Technical Lead at Learnn.
The TWG team proposed to undertake the task themselves, but we chose to handle it in-house due to the business-specific logic and custom solutions we were already familiar with. However, the guidance and tips provided by TWG were invaluable and directed us towards the right solution.

Plans for the nearest future

Performance Enhancements

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:

  • Simplifying the player’s architecture to follow React’s best practices.
  • Reducing unnecessary re-renders by properly managing state and props.
  • Removing the over-reliance on setNativeProps and event emitters.

Reducing Technical Debt

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:

  • Duplicate Wrappers and Unused Components: We will remove these to reduce complexity.

This step is  scheduled for implementation soon and represents the next phase of our ongoing partnership with Learnn.

The Outcome

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.

Client Testimonial

Omar Diop
Technical Lead at Learnn.
Working with TWG has been a game-changer for our app. Their expertise in React Native and the react-native-video library was crucial to overcoming our challenges. The audit provided a clear, actionable plan, and their implementation was smooth and professional. We're thrilled with the results and look forward to continuing our collaboration.

Conclusion

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}}

Do you need help with developing react solutions?

Leave your contact info and we’ll be in touch with you shortly

Leave contact info

Our clients words

No items found.

See other cases

December 11, 2024
5 min read
Paginar
We helped Paginar unlock the business potential of visionOS by implementing Digital Rights Management (DRM) for immersive video streaming. This DRM integration enabled their key client, Laurel Canyon Live Inc., to protect high quality 4K, Dolby Vision, Dolby Atmos, immersive video streams essential for their unique, visionOS-targeted business model.
See case
November 20, 2024
5 min read
UcastMe
UcastMe's work makes a big difference for students and employers. From discovering part-time jobs offers, keeping track of work hours to competence assessment that helps students show their skills and language abilities. UcastMe is a superhero in the world of part-time jobs!
See case
October 17, 2024
5 min read
Comm.app
Tailoring our 'rn-emoji-keyboard' library to specific needs of Comm.app's chat app
See case