The decisions

I had just learned React. I was new to front-end development as well. React Native was the first choice. But it seemed to me that react-native apps don’t look beautiful out of the box. Styling react-native components seemed cumbersome and I’ve always sucked at designing UIs. I consider flutter. Flutter seemed a more ‘battery included’ framework and they promise better looking applications!

Finally gave up flutter considering the learning curve of dart, little support and JSX! JSX is cool, no? Then I saw Ignite. Something like a battery included version of react-native! But the encounter with ignite was no good. Tried to run a sample of ignite for several hours. Failed. And then ignite includes react-router , redux , redux-persist , redux-saga (what is even that?) and lots of other packages. I don’t need any of them. Not even redux. (Later realized that using redux could be a good idea though)

Now it was react-native with a UI library. Then got frustrated choosing a UI library. So, finally decided to build it with pure react-native.

Not so pure

When I started the project with create-react-native-app, I didn’t realise that it is not pure react-native, rather the set up is built on top of the Expo SDK. It was nice being able to run the app without installing Android SDK.

Learning Curves

I thought since I know react, I’ll have react-native almost for free. But that is not true, it’s not just using View instead of div and Text instead of p . Getting used to react-native takes some time.

Beef with JSX

I didn’t know before that, JSX doesn’t remove extra spaces like HTML parsers do.

Consider this code:

<View> <Text>Some text</Text> </View>

Notice the white spaces around the Text tag. I’d put them so that the code looks a bit better. But JSX thinks I literally want some space character inside the View around the Text . But in react-native string is only allowed inside Text tag. So I was getting a error with long Java stack trace. Googling the error message, I only found out that it is about invalid JSX. In GitHub and StackOverflow, there were hundreds of examples of invalid JSX caused by different reasons. But I was not doing any of them. All I noticed is that, it was happening when I wrap a list of components inside a View . Spent hours and found nothing. Then tried not to wrap them in View , didn’t work, cause I couldn’t style them.

Finally prettier saved me! When I prettified the code, I saw that the extra space was being wrapped like {' '} , I’ve seen that before. But never paid attention ¯\_(ツ)_/¯

AsycStorage

Sometimes the AsyncStorage was never resolving to anything, nor throwing any error. Didn’t find any solution online. Got suggestion to use redux-persist . How is that possible that in a mature project like react-native something import like AsyncStorage doesn’t work at all?

Console

The expo setup by default logs in the console. But not all logs were not being logged properly. And if I turned on Debug Js remotely , the expo app crashed immediately. For that too, I found no solutions. So, debugging the AsyncStorage problem got even harder.

After struggling for few days with these, I had to give up the expo setup.

Pure again

After all that, I started fresh project with react-native init , copied and refactored the code from old project. I thought I would have to configure Babel , Webpack and all the things manually. But luckily I didn’t have to. That was really easy. Configuring Android SDK was not that hard eitehr. I was getting icons with the expo sdk, now I had to install the react-native-vector-icons package.

And guess what, the AsyncStorage problem was just gone.

V8 and JavaScriptCore

I noticed that, sometimes the dates were not being displayed properly. Then I discovered that, it was working with remote debugging mode only. That is because the JS codes of react-native is executed in the JavaScriptCore engine normally. But in remote debugging mode, it’s executed in the V8 engine of chrome. And the JavaScriptCore engine doesn’t work well with dates. So the toLocaleDateString function was not working properly. Had to write my own version of that function.

The JS way of sorting things out

Then I noticed that sorting was not working on non remote debugging mode either. But this time found nothing online. So no one ever experienced sorting issues with JavascriptCore before? TF is happening?

Well, the problem was in the compare function. This is how I was sorting…

tags.sort((t1, t2) => t1.count < t2.count)

This is not the JavaScript way of sorting things. I knew it. But wrote this out of habit. This is the JS way…

tags.sort((t1, t2) => t1.count - t2.count)

So, V8 doesn’t mind the first way. But JavaScriptCore gets pissed off.

Google Drive API and multipart requests

After installing the react-native-google-signin and making it work with some efforts I thought it’s all done. Now use the drive rest api with the access token and backup/restore all the key value pairs.

The problem was with multipart/related requests. To upload a file with metadata to google drive, we have to use a multipart post request. In a multipart request, the request is divided in multiple parts. In this case, the first part is used to to send file metadata. A multipart requests looks like this…

POST https://www.googleapis.com/upload/drive/v3/files?uploadType=multipart HTTP/1.1

Authorization: Bearer [YOUR_AUTH_TOKEN]

Content-Type: multipart/related; boundary=foo_bar_baz

Content-Length: [NUMBER_OF_BYTES_IN_ENTIRE_REQUEST_BODY]



--foo_bar_baz

Content-Type: application/json; charset=UTF-8



{

"name": "myObject"

}



--foo_bar_baz

Content-Type: image/jpeg



[JPEG_DATA]

--foo_bar_baz--

Google has api clients to make this sort of requests easier. But since the JS client is based on NodeJS, couldn’t use it with react-native.

So, first I tried with a simple non multipart request. It worked. Then I tried to construct the body manually. It was not working. I kept on checking and rechecking the syntax. Where to put single newline and where to put double newlines etc. This was frustrating.

The syntax was correct the whole time. Only I was sending the main data text instead of the constructed body with the data text while sending the request!

That's all

As you’ve noticed this article is mainly about my idiocy while developing the app 😁 I hope you enjoyed reading the article and learned something.

Now install the app and give it a try. If you like it, please help it spread. Share and recommend to your friends and give a ★★★★★ on google play.

Get the app here.