DEV Community: Peng

PreCloud version 1.8.1: Improve navigation and the PayPal button

Peng — Sun, 18 Sep 2022 18:35:02 +0000

In this version, I made the app navigation not swipable, this way I find it more solid when switching between screens.

I also added a “Copy” item in the menu for each password.

There is one more secret. You may noticed the PayPal button on the settings screen if you are using Android. It wasn’t showing for iOS. Because apple only allows in app purchases for any kind of payment. If I show it, apple will reject my app.

What I did in this version is, the PayPal button will only show after 7 days after I submit a new version. Apple normally reviews each version within 2 days, so they won’t see the button while reviewing 🤐

I will change to 3 days in next version :)

And feel free to use this button 😆

Use PreCloudBlog as password to decrypt this blog:

PreCloud:wy4ECQMIoVsaaQScQn3gp2IFZ2nJMggQSBHcUocRQgW35AI6v7KXV5bhuIWjw0PB0sJBAUwpcXdMEt6ZvpsuSdaujSwPRs+ajP9CBVY2+t00zA7F7BMoVysS5ZeJa6bTmKt0Y09GXrmyVfL43tms0H6oc5IxOhfPjnCUeLGr1eO9SRmXH9ALvO2OVD6bUUImpy7Nj44RVLtgJJN7pYo6l9L5+DvFNFHMk5ChRkphv/Ko6GAAbXDW9Nf7MlVenFsm9VEO1qhlsQo4jejfiDgJQ3F2E8e0xFtTfSO1AEMqeX96EdNm7AiU8h0gKt690Pvgas54J9OShQ9nwmwwS5ZQknlF0YN11HbYbnnWmlfG2OIP6/gvyOD16wotG0jEoL+WCAP+mQ0ZMJOHiEQB2GTbQ32Gbr7LFX3xY3iUWSW2bblFxA7XJG48LFL0lyCwk4EBVJPS6wUeBOlh3oDWMqZEQOAYbSVI7W32sbXt6omfvUvKpyZjcnL3RXTFVy3rUpt1rRosQAK2SknMXvcj+Mvjf8BuindeTDsKMgXPf0SRLtswYc/Nvlw4KysiaY4Ytv8Dimwz95RgpXhz1wZ86OavTI9A3tQkRePQNd2WXaik7n3dez5U/0r3vq5E7icyAkJlGdGZ85aMF1DYzpUp9aoJZ8vAa7024mp05gM8xDOT1zmeoLXp/C/lhEK1ywfLaeAHXg3nQ57Rs4wf2QB37ysaHCMHW0RqnjLy6wnkaZcuh2sU4wKhL0Fn4nVxYkt9RUrfl6Bx6MsIsOsSI+6WZOloOVnFckkrDk609SZdyi7XAN4PNnGrP5aK08esDRJruuNOe3+YiOvlc62l0mjEaPKfCffCojbOKp7e3q59JkLGXtaKmoI3jOo8NQRQtiV38snh6jUhIwMpS/5v4AIat1ATfFczFVFNFXSP0sWgorszoo1js6A9S0nccLgy1n3Cz/K5c6PrM4UnBz+06e8rFhCKQciOmHaRpBxqCvQVNGIreMVbfoGOG2VzA/jOZ5TMQbJIsjD/ZuhF47p/qZ9tp9Qdhvc9sIeMegJqS9nAjAtUloEd9htJKye6i4/RVCFM4He4OevKUQ==

Download the new version: Play store or App store

How much does it cost to build an app

Peng — Thu, 08 Sep 2022 18:39:53 +0000

Let me show you how much it costs to build an app.

Recently I built an app called PreCloud: Encrypt before upload, with which you can encrypt texts and files, then you can upload the encrypted texts and files to wherever you want, making any cloud provider an encrypted storage. It's free and open source. Give it a try :)

The app is free and open sourced, but these are what I paid for:
Google developer account: 25$ one time;
Apple developer account: 99$ / year;
Domain name (peng.kiwi): 12$ / year;

And I need a Mac to build the iOS app, but I am using the Mac from work, so I wouldn't count this.
And of course, all the time I spent on this.

If you are interested, try the app, to protect your privacy.
Play store
App store

And you can also support me ❤️
https://paypal.me/penghuili/

How to use nodejs libs in react native?

Peng — Mon, 05 Sep 2022 20:41:08 +0000

React native is a different javascript running environment from browser and nodejs. If a library works in the browser or nodejs, it doesn't necessarily mean it will work in react native.

I used openpgpjs to do all the encryption and decryption. It works perfectly in the browser and nodejs, but not in react native :(

There is a react-native-openpgp, but it's not very popular and seems under heavy development still.

While I read the source code of the Filen app, I came across nodejs-mobile-react-native.

The project will build a nodejs into your app, then you can use almost all nodejs libraries in your react native app, it's very cool.

The nodejs part lives in a nodejs-assets folder, and it communicates with react native through events.

Very easy to setup, check their readme, or see how it works in my app.

Drawback:

It will make your app size much bigger. For a normal app, the apk or the iOS build can be 80+Mb. (The android aab file will be smaller though, 20+Mb). But it's so helpful, I accept it;
It only supports nodejs 12 for now. But they are looking to upgrade it to node 16;

And if you are interested, try my PreCloud app, to protect your privacy.
Play store: https://play.google.com/store/apps/details?id=com.precloud
App store: https://apps.apple.com/us/app/precloud/id1638793841

Like I said in the beginning, it's free, open source, and has no tracking and no server.

Internal and external storage in react native

Peng — Tue, 30 Aug 2022 20:39:18 +0000

I have been working with react native at work for 3 years, but I haven't touched the file system.

In this post I will share about managing files with react native.

Libraries used

react-native-document-picker: Pick files from phone;
react-native-fs: Manage files in the internal storage of your app, more on this later;
react-native-share: Share files to other apps;
react-native-file-viewer: View file in your app;

Two kinds of storage

1. Intertal storage

Every app has its own storage, that other apps don't have access to. For example this is the Cache folder of my app in Simulator:

/Users/penghui/Library/Developer/CoreSimulator/Devices/5BAEC586-2BA0-42A0-B615-926F1A4D59A0/data/Containers/Data/Application/EBB8401E-3B16-4A3E-98A1-D2DDC3900A90/Library/Caches

And this is the Documents folder:

/Users/penghui/Library/Developer/CoreSimulator/Devices/5BAEC586-2BA0-42A0-B615-926F1A4D59A0/data/Containers/Data/Application/EBB8401E-3B16-4A3E-98A1-D2DDC3900A90/Documents

There are other folders, but I am only instersted in these 2 for now. You can check the full list in the react-native-fs doc, with more explanation.

I think these are the places where Spotify saves your downloaded music and where Youtube saves your downloaded videos.

react-native-fs is the perfect tool to handle files in internal storage, you can check their doc to find the functions you need.

But like mentioned before, files in the internal storage can't be viewed by your phones Files app or Photos app, and you also can't just read files from external storage.

2. External storage

This is the normal storage you see on your phone, it's what you see in the Files app, both for iOS and Android.

Moving files around

1. From external to internal

react-native-fs is (almost) only for processing internal files. So before it can do something with the file, you need to move it from external storage.

For this we need react-native-document-picker.

We need the pick function, which will open the file picker. We can specify the copyTo param, it supports 2 values: cachesDirectory and documentDirectory, what it does is, after users pick a file / multiple files in the file picker, the picked file/files will be copied to the Caches or Documents folder of your app's internal storage. Ta-da.

Note: react-native-document-picker can pick all external files on Android (your images, files etc.), but on iOS, it can only pick files in the Files app, it can't pick images in the Photos app. You need to firstly "share" an image with the "Save to Files" option, then the image will be moved to Files, then you can pick it with react-native-document-picker.

If you need to pick images, there are some other libraries, I haven't tried them, but should be straightforward.

2. From internal to external

The file is moved to the internal storage, and you did some fancy processing (For me, I encrypt the file, see some code here), then you want to move the processed file to external storage.

Android

On Android, it's easy, react-native-fs can do the job (remember the "almost" in "react-native-fs is almost only for processing internal files"?) It has a DownloadDirectoryPath, which is only available on Android.

You can use the copyFile function:

  await RNFS.copyFile(internalFilePath, `RNFS.DownloadDirectoryPath/${fileName}`);

Then the file will be copied to the Download folder of the external storage. Done.

You can see some real code here.

iOS

But on iOS, I haven't found an easy way to move a file like that.

I ended up using react-native-share. It will open a share files bottom toolbox, then you can choose the "Save to Files" options to download it to the Files app.

react-native-share also works on Android of course.

And I mis-used the saveToFiles option :) The flag is only available for iOS. If it's false, and for example you are sharing an image, the opened share toolbox will have other options, like add the image to an album; But when saveToFiles is true, the toolbox will only show the "Save to Files" option.

So in my app, I have 2 icons under a file, one download icon, for which I set the saveToFiles flag to true, and one share icon, for which I set the saveToFiles flag to false.

There is actually another way I found in this answer, which is you set the UISupportsDocumentBrowser flag in the Info.plist to true, and you use react-native-fs to save files to the Documents folder of the internal storage, then the files will be accessible by the Files app, that's it!
I tried it, it works, but I don't like it, I feel I have less control.

If you know a better way to download files on iOS, please let me know!

Bonus: view internal files in your app

You can use the react-native-file-viewer lib to open internal files, like an image, a PDF file etc. It's very easy to use, have a try.

You can check all my app's code in github;

Like I said in the beginning, it's free, open source, and has no tracking and no server.