Building Course Assist Part 12: Setting up file download functionality and improving chat performance using FlashList.

Course Assist is a project that involves a lot of interaction, therefore users are going to expect processes in the app to be quick and easy. This is why it's important to optimize the performance of the app and ensure smooth functionality. Two key ways I've done this are by setting up file download functionality and improving chat performance. In this article, I'll walk you through how I went about adding these crucial features. Let's dive in!!🏊‍♀️

Setting up file download functionality📥

I initially set up file download functionality about a year ago. When I first did it I used an expo API called expo-linking. What expo-linking did was open a URL in the phone OS's preferred library. The Course Assist backend stores images in url form then when an image is received in the app the expo-linking API would open it in the browser and the image could be downloaded from there. Now although this got the job done it didn't do it the right way or at least the way I wanted😂. I wanted files to get stored directly into the phone folders. Unfortunately for me at that particular point in time for whatever reason I could not find a solution for downloading files like that🙄.

Fast forwarding to the present day. I decided to work on file downloads again and found an amazing tutorial posted just a few months ago that clearly explained how to go about downloading files directly to the phone's folders in React Native🤩. This solution involved using expo-file-system which provides access for files to be stored on your device and expo-sharing which enables the sharing of files directly with other compatible applications on your device. Expo-file-system downloads the file, converts it into the required format and asks your OS for permission to store the selected file, then expo sharing enables you to save the files in the devices' folders app. I followed the tutorial and quickly set up file download functionality without much resistance apart from the extra configuration that was required for Android devices🙄.

Improving chat functionality using FlashList🔧

Up till now chats in the Course Assist apps have used flatlist to render all the messages a user received. Now as the number of messages increases the performance of the flatlist decreases. It becomes incredibly slow😬. This is something we do not want in an app that has a lot of interaction between users. It took me a while to find a solution, I tried rendering the messages one at a time, pre-defining an item limit and even getting a 3rd party UI chat package, maybe then the performance would be better but nothing worked🥲. Until I came across an interesting package called FlashList.

FlashList is a React Native list package made by Shopify. This thing is like Flatlist on steroids💪🏾. I tried it out and it is amazing. It's simple to use and its performance does not change even with a lot of items to render. This is made possible by defining an item limit. After setting it up the performance of chats in the app significantly improved😄. With the performance now on point I've also decided to work a little on the UI just to get it up to standard which I'll write about in a different blog.

With more important improvements and features being added to Course Assist, I'm now even more confident of a successful project launch which I'm targeting for next week or the week after depending on how fast I can everything up and running. Stay tuned to the blog to find what improvements I'll be making next and when the project launch will be. Thanks for reading and see you in the next one.🙏