If I remove the status bar, every time I open the keyboard (
or a notification arrives) there is a bug.
App.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.StatusBar) {
StatusBar.hide();
}
});
});
Any suggestion? Thank you!
Updated:
Actually, there is a fix for cordova-plugin-statusbar that has been committed on github and should land in version 2.1.4+ (i.e. you don't need an additional plugin like my original answer stated). To get the latest cordova-plugin-statusbar now, type
cordova plugin add https://github.com/apache/cordova-plugin-statusbar.git
The statusbar should now stay hidden when interacting with inputs, keyboard etc.
Original Answer:
I fixed it with the plugin cordova-plugin-fullscreen
cordova plugin add cordova-plugin-fullscreen
Then, after deviceready:
StatusBar.hide();
if (typeof AndroidFullScreen !== 'undefined') { // Fullscreen plugin exists ?
function errorFunction(error) { console.error(error); }
AndroidFullScreen.isSupported(AndroidFullScreen.immersiveMode, errorFunction);
}
ImmersiveMode keeps it hidden while interacting with inputs, keyboard etc.
Note: as per the cordova-plugin-fullscreen docs, this method is only supported on Android 4.4+. There is also a 'lean mode' for Android 4.0+, but this shows the status bar while interacting (not ideal)
Related
ionic 3, when I use keyboard, all pages going up when I back. How can i solve this issue. If nav push it s okay but when i nav pop it s happen.
keyboard mode on
https://i.stack.imgur.com/yRypd.png
first page
https://i.stack.imgur.com/x8LzM.png
this one is when i back second page to first one
https://i.stack.imgur.com/8B23H.png
this is my app.module for this issue
IonicModule.forRoot(MyApp,{
scrollPadding:false,
scrollAssist:false})
ionic version : 3.10.0,
cordova version : 7.0.1,
node version : 6.11.3,
platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
statusBar.styleDefault();
splashScreen.hide();
this.keyboard.disableScroll(true);
});
}
I'm running into the error: "ProgressBarAndroid is deprecated. Use ActivityIndicator instead" but when I go to the docs, it doesn't look like it's actually deprecated.
I'm using
react-native-cli: 2.0.1
react-native: 0.40.0
Here's my current related code:
import React from 'react';
import { ProgressViewIOS, ProgressBarAndroid, Platform } from 'react-native';
export default function ProgressBar(props) {
if(Platform.OS === 'ios'){
return (
<ProgressViewIOS
progress={props.progress}
style={{height: 3}}
progressViewStyle={'bar'}
progressTintColor={props.progressTintColor}
/>
)
}else if(Platform.OS === 'android'){
return <ProgressBarAndroid styleAttr="Horizontal" progress={props.progress} />
}else{
console.log('NO PROGRESS')
return null
}
}
Even though I specify styleAttr="Horizontal" (which I believe should set indeterminate as false) my progress bar in android is indeterminate (it just keeps moving). This is not the same functionality I see on iOS. iOS works as expected.
Another error says "You are manually calling a React.PropType validation function for indeterminate prop on ProgressBarAndroid, however as you see in my code that is not the case. I also don't believe there is a third party doing this as the project is small and I haven't seen this error until I implemented as shown above:
Any help appreciated.
If it's warning you that it's deprecated why not just use the API its suggesting? What use case do you have that you feel it's necessary to use ProgressViewIOS over the component that it's being replaced by? (Especially since ActivityIndciator works on both iOS and Android)
To answer your question it may not be deprecated in the docs, but it is warning you that it has been deprecated in favor of the new API. You can continue to use it if you wish, but you won't get any updates and it may be removed in future versions.
I am having some issues with Ionic on Android. I think the problem occurred when I updated the Ionic version for my app. Problem is that the status bar doesn't overlay the webview. I have tried setting the StatusBarOverlaysWebView preference to true in config.xml and I've tried calling the different methods of the global StatusBar object with no success. I can control the status bar's background color and visibility, but I can't get it to overlay the webview. This is what it looks like right now
Unfortunately, the StatusBarOverlaysWebView method in cordova-plugin-statusbar is only supported by the iOS platform:
StatusBar.overlaysWebView
On iOS 7, make the statusbar overlay or not overlay the WebView.
StatusBar.overlaysWebView(true);
Description
On iOS 7, set to false to make the statusbar appear like iOS 6. Set the style and background color to suit using the other functions.
Supported Platforms
iOS
Here are some other methods. Check the link below (but it doesn't seem to work anymore)
http://www.martinadamko.sk/posts/translucent-bar-android-278
Or
How about this?
The easiest way to do this is as follows:
/* ionic 2 app.ts */
import { Component } from '#angular/core';
import { Platform, ionicBootstrap } from 'ionic-angular';
import { StatusBar } from 'ionic-native';
#Component({
template: '<ion-nav [root]="rootPage"></ion-nav>',
})
export class App {
private rootPage: any;
constructor(private platform: Platform) {
this.rootPage = LandingPage;
platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
StatusBar.styleDefault();
// Status bar theme for android
if (platform.is('android')) {
StatusBar.styleLightContent();
StatusBar.backgroundColorByHexString('#c42626');
}
});
}
}
The result is like:
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 have an iOS/Android app built on cordova 2.6 and jqm 1.3. I need to open a link to an external website after the user clicks on a button. The code I am using is:
var ref = window.open('http://google.com','_self','location=yes');
ref.addEventListener('loadstart',function(event) {
console.log('load started');
});
ref.addEventListener('loadstop',function(event) {
console.log('load stopped');
});
ref.addEventListener('loaderror',function(event) {
console.log('load error = ' + JSON.stringify(event));
});
On iOS everything performs like I would expect. A new browser window opens with the google website loaded. But I cannot get anything to to load in Android. When I click on the button, nothing happens. I have put in console statements before and after the window.open, so I know the code is at least being executed.
My config.xml should be wide open for white listed sites:
<access origin=".*"/>;
I have tested on a Nexus 7 (android 4.2) and an android 2.2 emulator with the same results on both.
Does anyone know why window.open would not be firing correctly on android?
It looked like it was a problem with 2.6 loading plugins on Android. I upgraded to 2.7 and everything started to work.
Perhaps it's a solution to use the ChildBrowser plugin? This gives you a bit more control over the operation itself, while still preserving platform compatibility between iOS and Android.
In most cases, I use something like the following snippet to use the childbrowser to display an external page.
function openBrowser(url) {
// determine if the childbrowser plugin is available
var useChildBrowser = ('plugins' in window && window.plugins.childBrowser);
if (useChildBrowser) {
popup = window.plugins.childBrowser;
popup.showWebPage(url, { showLocationBar: false, showAddress: false });
} else {
popup = window.open(url, 'Share', "['width=600px', 'height=400px', 'resizable=0', 'fullscreen=yes']");
}
}
Note that this falls back to using window.open if the ChildBrowser plugin isn't available, so you won't break anything else with this. Could be worth a shot, perhaps?