Multido — Details of development

React Native, React Js experience in multiplatform development.

5 min readAug 10, 2017

Relating to my previous article, several people informed me that they would be curious about some details concerning development. I was planning to write a detailed article anyway, but this made me even more motivated.

Multido was an attempt to develop applications for main platforms with the same codebase via React Native, React Js and Electron frameworks.
You can read more about the idea here

Architecture

As I said before, the most convenient solution was to build the application around the React Native architecture.

When I had to make differences within a component, I often used forks to Platform.OS. There are three options in this system (web, ios, android), but unfortunately react-native-web doesn’t make a difference between running in browsers and in electron. It was relatively rarely that I needed to distinguish between browser and electron. Nevertheless, I will have to find a better way for this in the future.

On the other hand, there were some components which I had to handle completely differently, according to platforms. React Native provides a good possibility for separating operating systems upon import. For example if we want to use the same component on both systems, we will import Test.js
[ import Test from “./Test” ]. However, if we want to load different files per system, if there is a Test.ios.js, iOS will use this, if there is a Test.android.js, Android will use that. But since react-native-web doesn’t use these differences, I could distinguish between platforms at import level. I loaded Test.js for web and TestMobile.js for mobile, as necessary.

This solution is temporary in this case, so it might be a good idea to think about how to use it even more effectively.

Firebase

This is quite cool stuff! I recommend it to anyone who has not tried it, not just with React. The usability and parameterization of the database fully satisfied my present needs. I didn’t have to deal with the back-end side of authentication, this was just fantastic, and I got a complete solution for the whole process. However, the usability of the e-mail templates was really limited for understable reasons, so this demanded many extra hours of work. And unfortunately even so there remained some automated emails which cannot be modified, nevertheless Gmail shortens important information from them on mobile. It’s as if they weren’t both Google products.

List functions

In this case, I had to make fully separated modules for the user interface, because user habits and best practices are completely different on desktop and mobile.

On mobile

I didn’t find a complete module that would have solved all my problems, so I extended it with the required things. I had to decide if I would extend a swipable list to sortable or change a sortable list to swipable. I chose the latter. If we pull the row right, the delete button will appear, and if we pull the row left the sort handler appears and the full list becomes sortable. Moreover, we can use double tap to edit row content.

Desktop and Web

Here editing works with a double click, context-menu opens with right click. You can sort the list with normal drag-and-drop. Nevertheless, I had to extend the system with the possibility for the user to drop the task to another list or even to another date in the calendar. I was able to solve this by finding that, at the beginning of the move, the system detects areas that have a custom tag and measures their location and area. Then the system determines what to do with the row on the basis of the coordinates when the row is moved or released.

Animations

Of course, in most cases, as much as LayoutAnimation would have been obvious to use, I had to do without this possibility when I used common elements on Mobile and Desktop because this is only usable on mobile devices. So I chose the normal Animated tool which is a little bit more complicated, however it presents us with a lot more opportunities. According to my experience, spring type is only to be used if we don’t need callback, because in this case it runs very late after the animation is complete. At timing type, you should leave a small delay on Android, otherwise it can stutter the animation.

Also, when this development was made (at RN 0.43.2), the LayoutAnimation and the sortable list weren’t fully compatible on Android. It is possible, that this has changed since then, but in this version I had to turn off the LayoutAnimation so that some elements don’t disappear from the screen when we drag down a row fast. Interestingly, this problem never appeared on iOS.

Update issues

For a long time, everything was ok, for example, react native 0.40.0 could be smoothly updated to 0.43.2. However, in my latest attempt I got into a long update chain. And in the meantime I decided that the upgrade was not going to be worth it for now, so I decided to put the whole node_modules to the repository.

Conclusion

Finally or despite all this, I fell in love with React Native :)
I feel that these frameworks have lots of possibilities for multiplatform, crossplatform, and crossmobile development. I would like to develop a helper that will help to effectively separate the components when needed in build time, and one that can help to find systems, platforms, and sizes effectively in runtime.