I am trying to fix a problem we are having with the keyboard on android. Due to react-native-gifted-chat, we have to use android:windowSoftInputMode="adjustResize" instead of adjustPan. The problem is, that the chat breaks without adjustResize and all the other stuff (e.g. some textfields in a form) break without adjustPan. I also tried adjustResize|adjustPan, adjustPan|adjustResize and tried to use KeyboardAvoidingView on the Form components, but nothing seems to work. Here is how it looks like when using adjustResize without any KeyboardAvoidingView. It creates some not-clickable grey area above the keyboard. Note that there is no way around adjustResize due to the chat...
Thanks in advance!
For anyone struggling with the same:
The package react-native-set-soft-input-mode allows you to change the softInputMode, e.g. for the chat, the following works fine:
useEffect(() => {
if (Platform.OS === 'android') {
SoftInputMode.set(SoftInputMode.ADJUST_RESIZE);
}
return () => {
if (Platform.OS === 'android') {
SoftInputMode.set(SoftInputMode.ADJUST_PAN);
}
};
}, []);
I currently have the $ionicPlatform event listener in my app.js. I know it's working in the test environment on the pc browser, but when I build the app and run it on my android device, the ionicPlatform.ready never actually runs/fires. Any ideas?
Here are some threads/questions posted, with some solutions that haven't worked for me.
https://github.com/driftyco/ionic/issues/1751
https://stackoverflow.com/questions/32421291/code-inside-ionic-platform-ready-not-getting-fired-up
app.js
var app = angular.module('who', ['ionic', 'ngCordova'])
.run(function($ionicPlatform, $rootScope, $cordovaDevice) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
// Don't remove this line unless you know what you are doing. It stops the viewport
// from snapping when text inputs are focused. Ionic handles this internally for
// a much nicer keyboard experience.
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
var push = new Ionic.Push({
"debug": true
});
push.register(function(token) {
console.log("Device token:",token.token);
});
console.log('reached end of ionic platform ready');
});
})
UPDATE 12/14/2015 # 5:24 AM - I have a view/activity that loads first, it renders the results from the $ionic.platform.ready listener. Upon loading the app, it renders nothing. What's interesting is this, after going to another view/activity, and then going back to the first view/activity, the result is then loaded/rendered. Any ideas?
UPDATE 12/14/2015 # 5:30 AM - I have tried ionic.Platform.ready, I have tried the document.addEventlistener 'deviceready'. None of them are working, and $ionicPlatform.ready gives me the least amount of problems, so I have defaulted to that.
I've decided to go with this workaround for now, unless someone can refactor this better for me.
The data retrieved in the $ionicPlatform.ready would not be rendered in the first activity loaded. I would usually have to navigate to at least 1 more activity and then go back to see the results. Now I know ionicFramework has it's own default splash activity that I don't want to override for this purpose (for now), so I added another view/state/activity that just serves as a buffer and immediately navigates to the results activity.
app loaded <- the ionic platform ready should be fired here, but it doesn't
ionic splash activity
buffer activity
result activity <- ionic platform ready finally fires up, weird.
Could just be my misunderstanding of Ionic's data synchronization, but this dirty fix seems to have solved it.
I try to disable back button on android device with "keyboard: false" but it not work.
$ionicModal.fromTemplateUrl('templates/login.html', {
scope: $scope,
keyboard: false
})
How to disable it.
Thank you.
ionicModal provides hardwareBackButtonClose option to set false for this behaviour.
$ionicModal.fromTemplateUrl('templates/login.html', {
scope: $scope,
hardwareBackButtonClose: false
})
Please see related documentation : http://ionicframework.com/docs/api/controller/ionicModal/
Another option could be: isShown() method as mentioned in the docs http://ionicframework.com/docs/api/controller/ionicModal/
You can go for something like this
if(!$scope.modal.isShown()){
navigator.app.exitApp();
} else{
//do nothing...
}
Check this thread: Disable hardware back button in Ionic application?
This should do it:
$ionicPlatform.registerBackButtonAction(function () {
if (condition) {
navigator.app.exitApp();
} else {
handle back action!
}
}, 100);
But I would advice against this unless you really need to. Breaking the expected model of operation very slightly hurts the entire platform.
i've tried in every way to call the requestWindowFeature method, first inside a page script (but raised a very nice error), second on app js, working inside application.launchEvent closure:
var application = require("application");
application.mainModule = "main-page";
application.cssFile = "./app.css";
application.on(application.launchEvent, function (args) {
if (args.android) {
// How to work with android activity in this closure?
}
});
application.start();
I was not able to get an android activity instance in order to hide the default title bar.
Assuming that the "launchEvent" event it is assimilable to "onCreate" event, is there a way to get the android activity in this context? Or is necessary to assume that it isn't the proper way in order to achieve the goal?
For the time being you can try this:
application.on(application.launchEvent, function (args) {
if (application.android) {
var activity = application.android.startActivity;
// Do something with activity...
}
});
Our next release will include Android Activity Events. Here is the pull request.
I would like to disable or override the Android Back button while I am navigating pages on the InAppBrowser. Can I add an event listener that can handle that?
EDIT:
Looking at the answer by #T_D below the solutions provided are the closest I could get to. It does not seem to be possible to override the button in InAppBrowser as all the PhoneGap tweaks stop working while navigating pages on this plugin. I was not able to find any other solution rather than modifying the API library. If there are any PhoneGap guys here and know something more, I 'll be glad to get some comment. Thanks.
The closest I got:
var ref = window.open('http://apache.org', '_blank', 'location=yes');
ref.addEventListener("backbutton", function () { })
According to the documentation the behaviour of the hardware back button can be configured now for the InAppBrowser:
hardwareback: set to yes to use the hardware back button to navigate backwards through the InAppBrowser's history. If there is no previous page, the InAppBrowser will close. The default value is yes, so you must set it to no if you want the back button to simply close the InAppBrowser.
Thanks to Kris Erickson.
So just update your InAppBrowser plugin if the backward navigation is the desired behaviour.
For more details see: https://github.com/apache/cordova-plugin-inappbrowser/pull/86
You can do it quite easily now (as of InAppBrowser version 0.3.3), but you will have to edit the Java files. Go to src/com/org/apache/corodova/inappbrowser directory and edit the InAppBrowserDialog.java:
Change
public void onBackPressed () {
if (this.inAppBrowser == null) {
this.dismiss();
} else {
// better to go through the in inAppBrowser
// because it does a clean up
this.inAppBrowser.closeDialog();
}
}
to
public void onBackPressed () {
if (this.inAppBrowser == null) {
this.dismiss();
} else {
if (this.inAppBrowser.canGoBack()) {
this.inAppBrowser.goBack();
} else {
this.inAppBrowser.closeDialog();
}
}
}
Then go to InAppBrowser and find the goBack function, change:
/**
* Checks to see if it is possible to go back one page in history, then does so.
*/
private void goBack() {
if (this.inAppWebView.canGoBack()) {
this.inAppWebView.goBack();
}
}
to
/**
* Checks to see if it is possible to go back one page in history, then does so.
*/
public void goBack() {
if (this.inAppWebView.canGoBack()) {
this.inAppWebView.goBack();
}
}
public boolean canGoBack() {
return this.inAppWebView.canGoBack();
}
And now the hardware back button will go back until there are no more backs to do. I really think this should be the default behavior in android since the Done button already closes the InAppBrowser window.
This worked for me in PhoneGap 2.7, help came from here, How do I disable Android Back button on one page and change to exit button on every other page
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
document.addEventListener("backbutton", function (e) {
e.preventDefault();
}, false );
}
I was having this same issue and finally got it to work, I'll post the answer here in case it helps someone.
This is the code I use:
window.new_window = window.open(url, '_blank', 'location=no');
window.new_window.addEventListener("exit", function () {
window.new_window.close();
});
So the key basically is to attach the exit event, which gets called when the back button of the device is tapped.
BTW, I used cordova.js, and build my apps locally using the Cordova CLI, I don't know if that makes any difference, I mention it just in case.
EDIT NOTE: As far as I know, it's not possible to override the back-button for the InAppBrowser in PhoneGap. But I did my best searching for possible solutions...
There's an eventListener to override back-button in PhoneGap -doesn't work for InAppBrowser-
function onDeviceReady(){
document.addEventListener("backbutton", onBackKeyDown, false);
}
Alternative eventListener to override back-button -the OP said this didn't work either-
var ref = window.open('http://www.stackoverflow.com', '_blank', 'location=yes');
ref.addEventListener("backbutton", function () {
//logic here
})
Overriding the Back-button in an Activity -this is plain java, obviously didn't work in PhoneGap-
#Override
public void onBackPressed()
{
//logic here
}
Conclusion:
Above solutions didn't work, following links (this answer, this one and a third one) didn't help either. So it's highly possible that overriding the back-button for the InAppBrowser in PhoneGap is not possible. If someone does come up with a solution or if things changed for a new PhoneGap version feel free to let us know...
EDIT:
Installing this plugin may take you to closest solution:
cordova plugin add org.apache.cordova.inappbrowse
What this plugin will do, in WP8, it will overlay back/forward/close button on InAppBrowser whenever you open any link/page in it.
See this image:
Use jQuery mobile:
$(document).on('backbutton',
function(e){
e.preventDefault();
// YOUR CODE GOES HERE
});
Running Cordova 5.1.1 and when i load pages in the inappbroswer i like having the back button work until the inappbrowser exits back to my index.html page because it's blank and just sits there. So i used the following code to fix this. It exits the app when it exits the inappbrowser.
window.open = cordova.InAppBrowser.open;
var ref = window.open(url, '_blank', 'location=no');
ref.addEventListener('exit', function () {
navigator.app.exitApp();
});
As far as I know it's not possible to override or detect the back button from inAppBrowser. When you press the back button, inAppBrowser will hide and return control to the Phonegap page. You can catch this with the focus event on the window, (using jQuery) like
var browser = window.open('http://example.com', '_blank', 'location=no');
$(window).on('focus', function() {
browser.show();
});
to reopen the browser. You could then use browser.executeScript() to signal the webapp loaded in the browser, if you like.
Inspired by this forum post.
I know this question has an answer already but I post my answer for those who any of these answers didn't work for them(such as myself):
so I have a multi page app for android and IOS and I am using cordova 5.x and I added the code below in every page except the page I needed InAppBrowser:
delete window.open;
and then for the rest of the pages I used:
document.addEventListener("backbutton", onBackKeyDown, false);
function onBackKeyDown(event) {
// your code for handling back button comes here
}
for handling back button
note that: delete window.open; base on the documentation
manually restore the default behaviour of 'window.open'
after that InAppBrowser plugin worked great and I handled back button in all pages correctly.
one last thing don't forget to add:<script type="text/javascript" charset="utf-8" src="cordova.js"></script> in pages you need to have InAppBrowser.
hope this help.