Publishing app for production React Native - android

I have been developing an app using React Native (detached from expo) but I fail to understand few things when it comes to publish the app for production.
From what I understand my native code which for example lives inside .apk( when building from android studio) and the javascript code which is running somewhere on the cloud are collaborating to each other so the app function properly, so basically you have two things to take care.
When I use expo publish command I can see that something is being uploaded somewhere (my javascript code along with assets) probably into amazon cloud service, I don't understand the idea behind this, what if one day those amazon links are not available, what would happen with my app? would it stop working?
I would really appreciate if someone can explain how this thing really works, is it possible that I don't rely on those bundleUrl that I see from the manifest after app published, I mean can I have those running into my server so I have full control of it, if so how much work this will raise?
Also what if one day Expo is un available so the service is shutdown, this things are wondering me.

You can confirm here: https://facebook.github.io/react-native/docs/signed-apk-android.html#content that your Javascript code is for real within your apk file.

Related

Ionic Capacitor Firebase Phone Number Authentication Problems

For anyone who is trying to authenticate via firebase phone number using ionic, this post is for you.
I spent weeks trying to solve this problem for my own app, and have moved on to using email because solving the phone number problem was taking too much time, but I am making this post to save you from wasting your time on red herrings.
The Issue:
Phone number can only be used when attached to a url, so if you are making an ionic application through a website, phone number auth via firebase will work, however, if you are trying to do it on mobile it won't work because firebase requires a url attached and there are no urls in mobile apps of course (firebase).
Option 1: Plugins
So, the easiest option would be to look around for third-party plugins to implement phone number auth on. I believe there is a Cordova plugin for this, (cordova-plugin-firebase-authentication), however that library is not compatible with Capacitor (compatable plugins).
There are a few other plugins that I tried to implement without much success. Notably, the (capacitor-firebase-auth plugin). It claims that phone auth works for ios and android, however, the actual method for doing that seems very complicated and follows a different path using .p8 codes that I was unable to follow-through with (confusion). And this plugin has some major limitations.
Option 2: In-App-Browsers
Since option one doesn't seem very feasible right now, the second option is to put code up on a website for phone number authentication and then open a browser within your app to authenticate. I spent a ton of time trying to get this method to work to no avail. It seems possible theoretically, but in practice, it is a mess. The biggest problem with this method is that what you want is to be able to run the signInWithPhoneNumber(phoneNumber, appVerifier) on your mobile app, because then your app treats users that have signed in through phone number like any other user and it makes general authentication much easier downstream in your application. However, in order to do that you need a verified appVerifier, which is of the class firebase.auth.RecaptchaVerifier. The firebase.auth.RecaptchaVerifier is supposed run .render() to initiate the recaptcha provlem and then run .verify() to verify a token that is given after the user does the recaptcha (documentation). I have tried to run .render() on a website and then .verify() on a mobile app, passing the token between the two. I am not sure why this doesn't work, it could just be a problem with my setup, but after trying for over a week on this method, I gave up on trying to get it to work. The token I pass just doesn't confirm. I don't know how these two functions work under the hood, there may be some identification system for each unique instance of firebase.auth.RecaptchaVerifier that is invalidating this method, I really don't know.
If you want to take a stab at this method, I recommend using the cordova plugin (it is compatible on capacitor projects) instead of an iframe or the capacitor browser plugin for in-app-browser to the website because it is easier to use and there is better functionality for passing data between the app and the website.
Option 3: Implementing Manually on IOS and Android
I haven't tried out this method, however, theoretically, you could go into your android studio and Xcode projects to actually write swift and java code following the firebase instructions for firebase phone auth (android tutorial) (ios tutorial). This would probably work, but I am not sure how you would notify your ionic project to defer to the swift and java files when authenticating.
Please let me know if there are any methods that have worked for you or any solutions to the roadblocks I have encountered, this is what I've tried so far!
I am the OP. After doing more work I finally got the phone auth system to work using capacitor-firebase-auth (https://github.com/baumblatt/capacitor-firebase-auth). I also created a git repo showing my code example and how to use it: https://github.com/Darrow8/capacitor-phone-test
In my previous attempt, I was running into issues with getting cfaSignInPhone to work but after more tweaking, it worked. Another major issue was getting firebase.auth().signInWithCredential to work. It turns out I had to combine the aformentioned capacitor-firebase-auth library with #angular/fire https://www.npmjs.com/package/#angular/fire
You can simply use cordova-plugin-firebase-authentication its compatible with capacitor, it works for me.
https://ionicframework.com/docs/native/firebase-authentication

React native app with downloadable plugins?

I wanted to make an app with react native that acts as a hub for different services or plugins. Each plugin can be downloaded, incorporated into the app and executed. I've seen solutions like codepush that allow you to change the code of the app, but I think it only allows you to change the whole code of your app, and not change it based on the services that you have downloaded.
I would really appreciate some help or guidance through this, since I'm not even sure it can be done.
Thanks in advance

How to generate a standalone signed APK from react native application, with detached expo?

We are building a mobile application in React Native, with the support of Expo. After some time we decided to detach the expo to use other native benefits along with expo. It supports both the platforms, Android and IOS
I was able to detach our application successfully from the expo, using the instructions mentioned here. We have got android and ios folder with us and everything is working fine.
Now, we want to generate a standalone signed APK from the application. I am referring this for the steps. It does produce the APK but, somehow, its not working after installation on the device. Post install, if I try to open the app it gives error screen with the message,
could not load the app
Sharing the screenshot below
I am not sure what I am doing wrong
Before coming to StackOverflow's Aks Question stage, I did follow many post/questions but seems like unfortunately, they ain't helping me.
here are few,
https://facebook.github.io/react-native/docs/signed-apk-android.html
How can I generate an apk that can run without server with react-native?
[this does not use expo..]
https://github.com/expo/expo/issues/212 [this guy plays with emotion...
he said he was able to resolve the issue but, he ain't willing to share
the solution]
https://forums.expo.io/t/could-not-load-app-signed-apk-in-app-store-internal-testing-detached-app/9855
and many more...
How can I resolve this issue? Any suggestions/pointers would be highly appreciated.
Okay, after spending a couple of more hours I got the root cause of the issue. It was a minor one but, there are high chances to happen while development.
Actually, our application was containing two expo accounts in it. This happened mistakenly while development. Having the unique expo account in the application did solve my issue.

Ionic app not looking the same in Android Device as in Desktop Browser

I'm really new to ionic/AngularJS/Cordova app development so I'm facing some issues that someone with quite better comprehension on the subject than me could easily fix.
I successfully installed all the components needed to start developing with the already mentioned frameworks.
After installation, I started playing a little bit with some examples and managed to create a really simple app that just had a side menu.
When I was testing my really simple app using ionic serve command, the app launched in my browser (as it should) and worked they way I was expecting to.
My problem comes when I type the ionic run android command.
The app gets built and everything and after that it gets installed in my Android Virtual Device, which later launches the app with no errors.
But the thing is that the app running in my AVD doesn't look the same as in my browser. It looks as if some styles were missing or something.
I know it might be something really easy to fix that I'm just missing.
Thanks in advance. :)
Ionic framework renders the UI layout based on the platform the app is run to provide close to native look and feel. This is as per the design of the framework. If you want to control the rendering, i.e., to have the same look and feel across all platforms, you can make use of the $ionicConfigProvider service in your app and make appropriate changes. http://ionicframework.com/docs/api/provider/$ionicConfigProvider/
Also to get a feel of how the UI looks in iOS and Android side by side you can use the below command
ionic serve --lab
Read this http://ionicframework.com/docs/cli/test.html for more options on ionic cli

Titanium and Testflight won't work together

Here's the case:
I'm building an app and distributing it for beta-testers through Testflightapp.com.
Testflight provides a useful SDK, from which you can detect the user's interactions in the app.
The problem is, that although I've implemented the SDK as every tutorial/guide/forum-thread says, I'm not recieving any data..
Here's the data from the file running the testflight sdk. I've tried both the com.0x82.testflight-sdk-module from Titanium's own module-site and the NappTestflight-module (https://github.com/viezel/NappTestFlight).
What am I doing wrong?
(I've tried changing the guid of the app to the app-token and running it with normal guid)
Thanks !
I use this module to talk with TestFlight.
Setup was simple, and it is free. You need to check inside your App on TestFLight to get the correct id.

Categories

Resources