Last year rn-fetch-blob maintenance was discontinued, which prompted me to write react-native-blob-courier. My library focuses solely on the HTTP transfer part that rn-fetch-blob —and react-native-fetch-blob before that — provided. In this blogpost I will show you a few examples that should get you up and running with it in your own app in no time.
A little background
Don’t feel like reading about my life’s story? I don’t blame you! Jump straight to the Good Stuff.
In November 2020 all maintenance and development on rn-fetch-blob was ceased; very unfortunate for me, since it was my go-to library for React Native projects that require HTTP file transfer functionality. Several of these apps run in production and so I was in dire need of an alternative.
A little searching taught me that there are a few options out there, like react-native-fs, react-native-blob-downloader and Expo FileSystem. But those libraries either aren’t maintained actively enough for my liking, or they are overkill when you are just looking to add simple HTTP file transfers to your app.
“rn-fetch-blob was my go-to library for React Native projects that require HTTP file transfer functionality”
Seeing an opportunity for giving back to the community, I decided to roll my own library! Several file transfer libraries have come and gone over the years though, and maintainability seems to play a major factor in their demise every time. I want to break that cycle by:
- Focusing on just HTTP file transfers. Use another library for the file system access features rn-fetch-blob provides;
- Writing automated tests for all parts of the code — Kotlin, Swift and TypeScript — and making testing part of the ci pipeline from the get-go.
So now you know about the whys — which you and me both know is not what you came here for at all — let’s waste no more precious time and jump straight to the hows :)
“react-native-blob-courier new open source project no one has ever heard of”
The good stuff
If you are in a hurry and you just want to see a working app already, pretty please: suffer no longer and check out the example app that is part of the repository: https://github.com/edeckers/react-native-blob-courier/tree/develop/example. If you are more of a “I drink my coffee with a couple of gists” kind of person, just read ahead an indulge yourself!
Let’s kick this part off with setting some expectations:
- You are working in an empty CRA
- You have added the latest version of
react-native-blob-courierto your app
Fetching a file
Say you want to use this one particular file of your dreams in your app because it is beautiful. But it is also huge and it is hosted on some dude’s webserver. The objective is clear: we need to retrieve it. Efficiently. On Android. On iOS. Toute de suite!
People are just gonna love you for sharing your beautiful file with them; I can feel it!
Using the download manager on Android
I bet downloading your beautiful file from your React Native app was truly beyond your wildest dreams, but what if I tell you we can offer our Android friends even more? How about we let them use their fancy download manager?
That’s right, just add that line right there and we’re good to go! Enjoy, Android people :)
“I bet downloading your beautiful file from your React Native app was truly beyond your wildest dreams”
What about a download manager on iOS? Can we have it?
No!! iOS will not have the download manager!
It’s not that I don’t like the iOS folks, it’s just that they have no download manager in their pretty OS.
Uploading a file
I know how you feel. I’ve been there. You download all these files, and you download and you download… and you download some more. And then? Then you feel bad bad bad. You don’t want to just take, that’s not you! You want to give, and dammit, you have beautiful files too! Let’s make it happen then.
Boom. Just shared your love with the world. Doesn’t that feel amazing?
Measuring progress
When you are so excited by, and frankly eternally thankful for, working with all these magnificent files, it is easy to lose your head. For real. The suspense… it is killing you! We are in need of some management of the expectations! Maybe a progress indicator can be of some help, what do you think? Fasten your seatbelts, we are about to find out.
My my my, that just seems very right to me. I think I’d use that for some sweet progress bar updates!
Playing nicely with others
Lots of libraries out there, lots of opportunities out there. Wouldn’t it just be a wonderful time to be alive if we could leverage the power of multiple libraries to make some users very happy?
I guesstimate there are at least dozens of people out there who would like to download a picture and then see that picture show up on their camera roll: sounds like an excellent use case to me for demonstrating the combined power of @react-native-community/cameraroll and react-native-blob-courier.
I wasted zero effort on that and achieved maximum satisfaction. Just the way I like it.
Summary
This blogpost sheds some light on why react-native-blob-courier came to be: the leading React Native HTTP file transfer library — in my opinion— rn-fetch-blob ceased maintenance and development, and the alternatives did not meet my requirements for project activity and scope.
It also explains that react-native-blob-courier by design will focus strictly on HTTP file transfers. Other functionalities like file system access that are provided by rn-fetch-blob et al will never become part of it, in an effort keep the project maintainable. Automated testing of all code bases — Kotlin, Swift, TypeScript — during ci plays a big part in maintainability as well.
The rest of the post consists of some simple examples that cover most of the libraries functionality.
