I'm using the ionic framework for the first time to develop a hybrid app (version is up to date). Upon testing my current work with the provided DevApp, I cannot get the accessory bar to show above my iPhone keyboard by any means. I tried to install the https://ionicframework.com/docs/native/keyboard/, added it to my modules and in app.components.ts my constructor looks like this:
constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, keyboard : Keyboard) {
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();
keyboard.hideFormAccessoryBar(false);
});
}
There are no errors in the console, only the bar is not appearing. Is it only because of the DevApp, or am I doing another mistake?
If more information is required, I will be glad to provide it. Thanks in advance!
Related
I created an app with React-native. All pages I made are designed for portrait mode except 1 page. The page accessibility comes from a button onPress then navigates to the page, so I can't lock orientation on Xcode
I installed this package and I can run it on android perfectly
import Orientation from 'react-native-orientation';
When I tried it on IOS simulator on every page it can turns orientation to landscape.
I put this line in every pages componentdidmount but nothing changes.
componentDidMount() {
Orientation.lockToPortrait()
...
}
What should I do?
Hey again #masterAvatarr,
I believe that this is what you're looking for, if you need something else please explain it to me :) We can make it happen.
I made a simple example for you.
https://github.com/WrathChaos/react-native-portrait-locker-example
I use React Native Orientation Locker Library
The important parts are:
Make sure that you linked the library manually (check AppDelegate.m)
You need to make a logic for unlocking and lock the portrait mode depends on your use-case
Please take a look at HomeScreen and DetailScreen
import Orientation from "react-native-orientation-locker";
React.useEffect(() => {
const unsubscribe = navigation.addListener("focus", () => {
// The screen is focused
// Call any action
Orientation.unlockAllOrientations();
Orientation.lockToPortrait();
});
// Return the function to unsubscribe from the event so it gets removed on unmount
return unsubscribe;
}, [navigation]);
Note: There is a little GIF Demo on the Github Repo
I've been trying to solve this particular bug for quite a while, but I haven't made any progress in fixing it.
Anyway, the bug basically is where when clicking on an input, the keyboard will cover the input until I start inputting numbers, at which point it'll scroll down correctly.. (Also, it suddenly loses its translucency and becomes solid... I'm not sure what's causing that either...)'
I've already uninstalled ionic-plugin-keyboard, and downgrading cordova-plugin-ionic-keyboard to version 2.0.5 didn't fix the issue for me (I'm currently running v2.2.0). I'm also running the latest version of cordova-plugin-ionic-webview (v4.1.2)
Here's an imgur link showing the bug in action
Thank you!
Unstable for IOS 13
"cordova-plugin-ionic-keyboard" KeyboardResize feature is unstable for IOS 13.
Issue is still open on git with no proper solution.
View not resizing on iOS
I am using it in both Android and IOS so i had to came up with a workaround in my code(not a good one btw but works so i am putting it here).
Step 1: Set resizing to none in for config.xml
<preference name="KeyboardResize" value="false" />
Step 2: Add an empty div just above your footer with display set to none.
<div class="keyboardFix" style="display:none"></div>
Step 3: Now set the height of .keyboardFix class equal to keyboard height and make it visible just before keyboard using "keyboardWillShow" event.
window.addEventListener("keyboardWillShow", function (evt) {
if (rootParams.baseModel.cordovaDevice() && rootParams.baseModel.cordovaDevice() == 'IOS') {
$(".keyboardFix").height(evt.keyboardHeight * 0.9 );
$(".keyboardFix").css("display","block");
}
});
Step 4: Make is go away just before keyboard hides.
window.addEventListener("keyboardWillHide", function (evt) {
if (rootParams.baseModel.cordovaDevice() && rootParams.baseModel.cordovaDevice() == 'IOS'){
$(".keyboardFix").height(0);
$(".keyboardFix").css("display","none");
}
});
Note: If condition only required if you are using same UI for cross platform i.e. Android
I'm working on a NativeScript-Angular app for both Android and iOS but have hit a problem with standard back button navigation. I have resolved the issue for Android, but cannot find a solution for iOS.
The event is causing a problem when going back to a particular page where routing data is expected, resulting in the exception:
"Error: Currently in page back navigation - component should be reattached instead of activated".
My Android solution catches the back button event and cancels it, then calls the router to do the navigation.
ngOnInit() {
if (app.android) {
app.android.on(app.AndroidApplication.activityBackPressedEvent,
(args: any) => this.backEvent(args));
}
}
backEvent(args) {
args.cancel = true;
this.backToRegister(false);
}
backToRegister(accepted: boolean){
this.router.navigate(['/register',
this.registerParametersEntered.password,
this.registerParametersEntered.confirmPassword,
this.registerParametersEntered.code,
this.registerParametersEntered.email,
accepted]);
}
I want to do something similar with iOS, such as: -
if (app.ios) {
this.page.on('navigatingFrom', (data) => {
// TODO cancel the back button event
this.backToRegister(false);
})
}
I can't find a way of doing this for iOS - my research is leading me to the conclusion it is not possible to cancel the iOS back button - for example, see here.
Any ideas or alternative suggestions greatly appreciated!
You can't override the back button for iOS. See this SO question. You basically need to create a custom button, you can mimic the appearance of the back button on iOS and add your own event handler. That's how you'd do it in a native iOS app, and how you do it in NativeScript since the native controls are used via NativeScript.
The actionbar in nativescript can have a custom layout inside or you can just use an action-item and position it on the left for iOS, while also hiding the button on Android if you desire.
Another solution would be, instead of catching the back button event just to throw it away/disable it - to just clear the history after you are switching a page where there no "back" to go to.
this.router.navigate(['level1'], {
clearHistory: true
}
I'm just started working in Titanium. And now working on popover in titanium, using the following code.
var myPopover = Ti.UI.iPad.createPopover({ height: 150, width: 150 });
popover.add(view);
popover.show({ view: button });
My issue is when user touches outside of the popover the popover is dismissing (default behaviour), I don't want that.
In iOS there is a delegate method called: - (BOOL)popoverControllerShouldDismissPopover:(UIPopoverController *)popoverController . If we don't want to dismiss the popover when user touches outside just return NO, is there any way to do this in Titanium ?
I read the Titanium.UI.iPad.Popover documentataion, but couldn't find any such methods.
Please help me.
Thanks in advance.
Unfortunately without significant work yourself you won't be able to in the short-term.
Some tips:
Don't trust the api docs to have everything in. Instead either look through the SDK in Github or find the SDK on your system and search through the iOS (in the iPhone folder) classes for this method.
If you go to appcelerator's JIRA account, you can request this to be implemented. Go to the Q&A and make some noise about it to get other people to watch the JIRA issue so it is prioritised by Appcelerator.
You could write a module that extends the popover functionality, in fact with modules you can extend anything and create the javascript bridge yourself so you can access any properties or anything you want. There's guides for that on the Wiki..
Happy hunting ;)
I am implementing a webapp using jQuery Mobile and Phonegap. One thing I am missing, is the following: The App should scroll to the top when the statusbar is tapped.
I have already seen that using Objective C one has to indicate the view that has to scroll to top on tap. Is it possible to do something similar with Javascript/Phonegap?
Update for 22.9.2016
It's working fine
Plugin ID has changed, install it using:
cordova plugin add cordova-plugin-statusbar
Tested with cordova-6.3.1 cordova-ios-4.2.2 in the iOS 10.0 simulator and an iPhone 6s Plus running 9.3.5.
The official status-bar plugin has this feature.
https://github.com/apache/cordova-plugin-statusbar
Install:
cordova plugin add org.apache.cordova.statusbar
In your javascript:
window.addEventListener('statusTap', function() {
//scroll-up or do whatever you want
});
I wrote a plugin to solve this issue
https://github.com/j-mcnally/cordova-statusTap
you can register tap events on the status bar and handle this all in code. With an event listener.
if the content that you are displaying in the phonegap app is bigger then the bounds of the webview, the scroll happens automatically.
Otherwise - for example if you are just scrolling a div using -webkit-overflow-scrolling - you need to use the solution found here:
How to detect touches in status bar
In the scrollViewShouldScrollToTop you need to call
[theWebView stringByEvaluatingJavaScriptFromString:"should_scroll_to_top"];
should_scroll_to_top is a normal function in your js.