React Native Download JS Code from remote server - android

I am currently doing an R&D in React Native.
I have a requirement where I need to add some modules(Basically code) in the app.
It is impossible in native iOS app to do so.
In React native apps using tools like AppHub and CodePush, we can push builds to production app.
There is a library React Native Auto Updater for downloading latest js bundle but it is deprecated now.
Using the above tools, I need to push the build.
I have a scenario where I want the app to fetch and download the bundle kept on a remote server.
So, How can I download JS Code on making a rest API call from App and refresh the app as per the new JS code?
My concern is regarding download of JS Code.
I am clear on the Auto Update of apps part.
Thanks in advance.

Eureka!
I accomplished this by doing the following:
Create an offline jsbundle Refer this link
react-native bundle --platform android --dev false --entry-file
index.android.js --bundle-output
android/app/src/main/assets/index.android.bundle --assets-dest
android/app/src/main/res/
Create a Rest API for downloading js bundle. Refer this link
I have used SpringBoot. Make sure you add this to your API produces "text/javascript"
Download the jsbundle in your app, store and get the path of the bundle.
Reset the path of bundle for React native in AppDelegate.m [for iOS] and in ReactApplication class [for Android]

Try the react-native-dynamic-bundle package: https://github.com/mauritsd/react-native-dynamic-bundle
Also, you can download the bundle using react-native-fs:
import RNFS from 'react-native-fs'
export const download = async (fromUrl, bundleName) => {
return RNFS.downloadFile({
fromUrl,
toFile: RNFS.DocumentDirectoryPath + `/${bundleName}.bundle`,
}).promise
}
Regards, Juan

Related

Ionic Capacitor - how to play ringtone/alarm on Android device?

I would like to know if there is a way to play Android device ringtone/alarm using Ionic Capacitor (not Cordova)?
If it is possible, please provide me with a simple solution (include required npm packages and code).
If not, please tell me how to do it with a simple typescript - I do not want to do it with a Cordova.
Also, I do not want to use Capacitor Local Notifications. I want ringtone sound only.
Thank you for any help :))
Did you check that link ? https://ionicframework.com/docs/native/native-ringtones
You can install it using Capacitor.
npm install cordova-plugin-native-ringtones
npm install #ionic-native/native-ringtones
ionic cap sync
Save some .caf file in your assets repository and do the following :
import { NativeRingtones } from '#ionic-native/native-ringtones/ngx';
constructor(private ringtones: NativeRingtones) { }
...
this.ringtones.getRingtone().then((ringtones) => { console.log(ringtones); });
this.ringtones.playRingtone('assets/ringtones/sound_1.caf');
this.ringtones.stopRingtone('assets/ringtones/sound_1.caf');

Image in React Native Android

I have the following line of code in my sample demo app to display a static image from asset folder.It works fine but the image disappears when i load offline bundle(Production apk).
<Image source={require('./assets/image/sample.png')} style={{width: 400, height: 450 , padding:10}}/>
and my project structure looks like this:-
After i tried to bundle the app for offline apk using the below command:-
react-native bundle --platform android --dev false --entry-file index.js --bundle-output [path for bundle output] --assets-dest [assets-path for image files]
I have the following structure in draw able folder
The confusion here is why react native changes the image name when bundling in this way.And i am not able to see the image after offline bundle please guide me on this as i have googled enough but not able to understand the behaviour.
Should not the image source be
require('./assets/image/sample.png')
instead of
require('./assets/sample.png')

CodePush - Releasing an iOS bundle breaks Android and vice versa

Using react-native-code-push.
Whenever I release an iOS version (using code-push release-react ... ios), it breaks my Android code push. Next time I try to get an update I get the following error:
You attempted to set the key isPending with the value true on an
object that is meant to be immutable and has been frozen.
Then, if I release an Android version, it breaks my iOS, getting this error:
Update is invalid - A JS bundle file named "main.jsbundle" could not
be found within the downloaded contents. Please ensure that your app
is syncing with the correct deployment and that you are releasing your
CodePush updates using the exact same JS bundle file name that was
shipped with your app's binary.
It's very strange and the documentation doesn't say anything about collisions between the two platforms.
You need to setup an app for each platform
code-push app add [name]-ios
code-push app add [name]-android
i think the code-push release-react [app-name] [platform] ... the platform argument only tells the react-native bundler what entry file to use (index.ios.js or index.android.js) it doesnt work as "install only on ios"

cannot use cordova plugin to open files under ionic 2 and typescript

I am developing an android app based on ionic 2 using typescript.
I would like o open a PDF file inside my app with another app that is registered for the fyletype (e.g. Acrobat Reader).
Therefore i tried the two standard plugins:
https://github.com/disusered/cordova-open
https://github.com/pwlin/cordova-plugin-file-opener2
Although ive added both plugins via "ionic plugin add ..." and of course played around with several combination referencing to it
the result is always that they ere not found
cordova-open
var open = cordova.plugins.disusered.open;
Property 'disusered' does not exist on type 'CordovaPlugins'.
cordova-plugin-file-opener2
cordova.plugins.fileOpener2.open(
filePath,
fileMIMEType,
{
error : function(){ },
success : function(){ }
}
);
Property 'fileOpener2' does not exist on type 'CordovaPlugins'.
I am running the app on an emulator via ionic run android
Could you please give some hint how i can achieve to use one of these plugins?
Thank you very much
Shane

Phonegap 3 - Call Cordova methods in hosted application

I'm porting a Phonegap 2.7 application to Phonegap 3. The application is hosted, so phonegap loads an external url instead of a local html. This hosted webapp loads cordoba.js, however I'm unable to use plugins such as splashscreen and notifications from the hosted webapp:
navigator.splashscreen.hide();
// Uncaught TypeError: Cannot call method 'hide' of undefined
navigator.notification.vibrate(500);
// Uncaught TypeError: Cannot call method 'vibrate' of undefined
The hosted application required the same Cordova file that was included when I created the Phonegap 3 project. Why am I unable to use this API's? This worked fine on Phonegap 2.7.
UPDATE: Events are triggered correctly:
document.addEventListener('deviceready', callback, false);
callback is correctly called, so there is some kind of cordova interaction already. Problem seems plugins.
Call the plugin directly with cordova.exec. it goes like this:
cordova.exec(function(response){}, function(errorText){}, "PluginName", "method", []) ;
Cordova exec()!
I wonder if your cordova.js file just doesn't have the navigator.splashscreen object. In Cordova 3.0, all of the plugins were separated out, and the cordova.js file just became the bridge code. When the app runs, it loads all of the plugin .js files via ajax - see the cordova_plugins.js file in a built project. As it loads these files, Cordova will fix up the namespaces for you, so that navigator.splashscreen namespace actually maps to the splashscreen js code. I'm betting you are not loading this cordova_plugins.js file which means the clobbering isn't working.
It's still working because the bridge code works. When you use exec() you're just running the command that navigator.splashscreen.hide does: https://github.com/apache/cordova-plugin-splashscreen/blob/master/www/splashscreen.js#L26
If I were you, I'd try to rebuild the app the new Cordova 3.x way, with the cordova cli. That way you won't have to actually call the exec function manually which seems pretty brittle (the exec() probably won't change, but it seems like a pain looking up the exec calls for every plugin interaction you need.)
BTW I'm not sergio on irc, so feel free to give him the answer if he posts since he answered your question first. I'm just trying to explain why that happens and why it doens't work for you anymore - basically, 2.7 and 3.x are pretty different in terms of plugins.

Categories

Resources