Building a React Native app for Toby !
Why and how I did an app for an existing bookmark manager.
I like bookmarks! It is a powerful tool to keep and organise source of knowledge, news, articles, etc. I recently find out about Toby, and really liked the approach they took (tabs, session, teams, etc..). But a mobile app was strongly missing, so I decided to make them one !
After spending sometimes on our startup Nowmad.io (read more here https://medium.com/nowmad/from-project-to-start-up-and-back-a48369691a6f) I took some days break and dove into this exercise !
This article describes the few steps I went through during the dev process.
Playstore (Available now !): https://play.google.com/store/apps/details?id=com.toby
AppStore: In process of validation
Sources: https://github.com/julienr2/toby
Disclaimer: I’m not related in any way to Toby. I speak in my name only and developed this app as an exercise. I don’t intend to fraud or take over Toby, but on the contrary enhance their experience to use it more easily on various platforms, while learning new concepts.
Why developing Toby Unofficial ?
4 years ago already, my cousin and I were working on a side project called Bookmark-it. The main idea: bookmark it, managed it and share it. Too few free time and lots of competitors in this field, stopped the project 1–2 years after. But we remained interested and always aware of new ways of bookmarking and managing the source of knowledge a link represents.
I recently found Refresh, a very nice design study rethinking browsers and integrating more deeply the bookmark concept in it. Later I got interested in Toby, tackling the problem in a very similar way.
I liked their approached and started using it more regularly. However a big pain point remained, the lack of a mobile app.
At the time of Bookmark-it, our main priority was to make the app available through as many devices as possible. We went right away for a Webapp, a WebExtension (Chrome and Firefox), and planed the development of a mobile and desktop (Electron) app.
One year after Toby’s blog article about a soon-to-come mobile app, nothing was online yet.. So I did it myself !
Setting up the product
The minimum scope was clear to me:
- Being able to access my bookmarks from my phone
- Easily add new bookmark, particularly from mobile browser or other app
- Available on IOS and Android
Full stack engineer, previous experience with Nowmad.io, time constrain, and cross platform… The choice was obvious for me, to go for React Native.
The first part was quite straightforward, and didn’t represent much a challenge. I got heavily inspired by Toby’s design and identity and set up a basic app to login/signup and access my bookmarks quickly.
Came the second part a bit more tricky for an intermediate in Java and complete beginner in Objective C…
Sharing is caring
It was crucial in my opinion, to be able to bookmark easily from mobile. No “copy the link, open the app, add bookmark, paste, validate, back to browser” and repeat for every links..
The advantages of bookmarking, are usually fighting strongly with the time it takes, the organisation it implies later, the difficulty to find back the bookmark, or even the memory of having it bookmarked..
So it has to be simple !
Luckily both platforms let you share data between apps with ease ! “Share Intent” on Android, “Share Extension”on IOS, both are a great way to send information to an app without leaving the first one.
I won’t go through both in detail, but I’ll do a quick overview and let you check the open source code if you decide to implement it in your app ! (https://github.com/julienr2/toby)
Share Intent (Android)
I started digging into native code and set up my solution until I found this already well done library https://github.com/alinz/react-native-share-extension.
However implementing it first by myself was definitely not time wasted since the installation of app still require to go into native code, and being conscious of how it works helps to chose the way to want to make it works.
Yes… There are different ways ! Basically you can either
- add a new
<intent>in the already existing<activity>in your AndroidManifest — This way you app will open as it would when you click launcher and pass the data shared by the first app - create a new
<activity>in your AndroidManifest — This way you can trigger a new registered component sharing the same base code of your app but different design
Once you make your choices, you’re all set ! Handle the data sent by ShareExtension library and you’re good to go !
I chose the second option, but registered the same app, just passing an argument along the App component to be able to identify further down the screens, if the app was triggered by share or launcher actions. This in order to keep the same “redirect to login if not authenticated” behavior in both parts.
Share Extension (IOS)
Pfiouf already one platform done ! Almost there ? Not exactly…
Even if we are working with React Native here, the Share behavior is really different from one platform to the other, which mean harder to abstract to make it work right away on both platforms…
Luckily Patrick Smith did a good job describing the setup here https://www.promptworks.com/blog/building-ios-app-extensions-with-react-native.
So following his steps and getting to understand a bit more the concepts behind IOS development, I got it working 🙌
Huray ! Done ! Finish ! I was thinking… Until I realised: if the two apps (the main app and the “shared” app) share the same code, to the eyes of IOS they are however two different apps ! Which means they don’t share the same “database” on the device…
So imagine you, launching the app, logging in, and accessing your bookmarks. You would later go to your browser, click “share” on you current page and expect to bookmark right away your page through the app ? Instead you would end up back to the login page since the token is not persisted !… No database sharing between two different apps…
Fortunately Apple is one step ahead and do let you share database between two apps thanks to App Groups ! Even better, a lib already exists to simplify the setup of these App Groups https://github.com/KjellConnelly/react-native-shared-group-preferences (you’ll have to get an Apple Developer Account at this point).
App Groups let you “share data in a centralized location on the user’s device” which is exactly what we needed to get the main app and the “shared” app synchronized !
After adjusting the code I finally got Toby (unofficial) working on both platforms 🎉
Conclusion
It has been quite a work to get there and I met probably more difficulties than I expected, but it got me to dig deeper into the native part, and to start putting a feet into XCode and IOS dev (probably just a toe actually).
I now face the copycats policies of App Store preventing me from publishing the app, but hopefully I’ll manage it somehow…
In the meantime, I hope this experience can help you develop something similar for your app, or can help you accessing and add bookmarks from/to you Toby account ! I’d be glad to hear what extensions you’ve built or get any feedbacks about your experience with Toby for mobile 🤩
It definitely helped me to get familiar with new concepts and hopefully I apply those on Nowmad.io soon !
