I'm building a mobile application for iOS using Meteor and Cordova. I'm having trouble configuring the screen correctly when an input field is clicked on to enter information. The screen does not focus in on the input field until after something is typed on the keyboard, similar to this video: https://github.com/cjpearson/cordova-plugin-keyboard/issues/62
However, in addition to this issue, clicking in the input field renders the constraints all out of whack. (Closing the keyboard makes everything fine again)
Currently I am using cordova-plugin-keyboard. I have unsuccessfully tried cordova-plugin-ionic-keyboard and ionic-plugins-keyboard. In addition to the plugin I'm using, I also have these lines of code, in accordance with this suggestion:
document.addEventListener('deviceready', function() {
Keyboard.shrinkView(true)
window.addEventListener('keyboardDidShow', function () {
document.activeElement.scrollIntoView()
})
})
Any help at all would be greatly appreciated! This issue has been plaguing me for quite a while.
You may try the following - this worked for me.
run meteor add cordova:cordova-plugin-keyboard#1.2.0 command
check cordova-plugins containing this cordova-plugin-keyboard#1.2.0
include App.setPreference('KeyboardShrinksView', true); in Mobile-config
run meteor reset
run meteor run ios-device --port 4000 --verbose
check config.xml containing this
< preference name="KeyboardShrinksView" value="true"/>
Do not manually edit the /.meteor/local/cordova-build/config.xml file,
as it will be regenerated at every meteor run ios/android or meteor
build, hence you will lose all your modifications.
https://riptutorial.com/meteor/example/16152/configure-your-cordova-project--config-xml-
https://docs.meteor.com/api/mobile-config.html
let me know if this is working on your side too.
Related
I noticed that my buttons are not working on the IOS devices, it seems that the click event is not called. Everything is working perfectly on the windows, android, Linux. Since I don't have access to any mac I was trying to debug it on the browserStack, I am getting this error every time I am trying to click the button:
ERROR TypeError: undefined is not an object (evaluating 't.path[4]')
I might be completely wrong, but I think that it might be related with the SVG's rect that is inside of the button (I am using it as a progress bar), on the rect load event I am accessing it to find its length. Maby it is called "too early" so it cannot access the rect correctly. Previously I was using the ngAfterViewInit with the setTimeout inside to manage the same effect.
<rect
#rect
width="96"
height="96"
rx="8"
fill="none"
stroke-width="4"
[ngStyle]="{
'stroke-dasharray': strokeDasharray,
'stroke-dashoffset': strokeDashoffset
}"
(load)="getRectLength()"
/>
getRectLength() {
this.length = this.rect.nativeElement.getTotalLength();
this.strokeDasharray = this.length;
}
Code:
https://github.com/mateuszkornecki/chess-clock/tree/master/src
Live demo:
https://mateuszkornecki.github.io/chess-clock/settings
Steps to reproduce:
Simply click on one of the big buttons with the counter, after a click it should start counting.
I tested it on several IOS devices, it was not working on everyone regardless of the IOS version. That's my first project made with Angular so there is a chance that I've made a simple mistake. Any help will be appreciated!
I have found the source of the problem. I was trying to use the event.path array on the click event. It looks that it is not available on the Safari. I fixed the problem by using the event.composedPath instead of the event.path
References:
https://developer.mozilla.org/en-US/docs/Web/API/Event/composedPath
I have a trivial react component that only shows a button:
<Button onPress={() => console.log("test")} title="Button"/>
When I put this button into a project I created with react-native init, it works as expected.
However, I have an existing project into which I integrated React Native (0.51.0) manually (because it doesn't use cocoa pods; I followed this guide: https://medium.com/#joshyhargreaves/adding-react-native-to-existing-ios-project-without-cocoapods-6f1ee9106009).
The project seems to work fine: the UI loads, the button gives visual feedback when I tap it. But the buttons onPress event is not fired, so it does not log anything.
There are no errors or warnings (except Class RCTCxxModule was not exported, but it seems to be safe to ignore this).
I'm now out of ideas of what I could try or how I could debug this issue short of diving into Reacts touch handling code. Here's what I tried:
Made sure to only have one RCTRootView, and that it is created in the main thread.
Checked for any suspicious things happening in the remote debugger; everything looks normal (no exceptions thrown or warnings logged).
Tested a few other components that should fire events; for example, TouchableOpacity does not work either.
Logging something after a timeout does work, so it doesn't seem like anything is deallocated prematurely
Checking for errors reported by the metro bundler: it doesn't print anything
Any ideas on what I need to do to get my button to print "test" when I tap it?
I think you have not Debug JS Remotely option enabled. If you don't you have to open React Native Debug Menu Pressing (command / control) + D or shake your device if you are debugging with real device. Then just press Debug JS Remotely and it should appear in the Google Chrome. Then inspect and open the console. There it is!
This mite caused by date diff between the host (your computer) and the client (the mobile device)
You can check this by running adb shell "date" && date
to see if there is a diff.
If there is one go to your mobile device and toggle automatic date & time off and back on.
Then test time diff again as mentioned, if there is no more diff, tap events should work in debug mode
More details in the original git issue answer by - Alex Ciarlillo
I have a strange situation with a project for iOS.
Its created using browserify and React for Cordova and aimed at iOS.
We have built the project for iOS using Cordova commands without any issues. It runs with no xcode errors or Javascript errors either however none of the JS ui appears on screen. We just get a blank white screen with the system bar at the top. See attached screen shot.
So far we have found out that if you add HTML to the index.html in WWW folder it prints that fine so I assume its the JS.
When we run in a browser it works as well as building for Android.
We have no problems with anything other than iOS (simulator and device build).
hopefully someone can help me out here because I'm stumped. Please let me know what files you need to look at and I'll make them available.
Thanks in advance.
IMAGES
The error screen: http://www.voidapplications.co.uk/errorScreen.png
What we expect to be shown: http://www.voidapplications.co.uk/whatWeExpect.png
If you are using internationalization component that's because you need to use the Intl polyfill:
Intl.js and FT Polyfill Service
Intl.js polyfill was recently added to the Polyfill service, which is developed and maintained by a community of contributors led by a team at the Financial Times. It is available thru cdn.polyfill.io domain, which routes traffic through Fastly, which makes it available with global high availability and superb performance no matter where your users are.
To use the Intl polyfill thru the Polyfill service just add one script tag in your page before you load or parse your own JavaScript:
<script src="https://cdn.polyfill.io/v1/polyfill.min.jsfeatures=Intl.~locale.en"></script>
When specifying the features to use thru the polyfill service, you have to specify what locale, or locales to load along with the Intl polyfill for the page to function, in the example above we are specifying Intl.~locale.en, which means only en, but you could do something like this:
<script src="https://cdn.polyfill.io/v1/polyfill.min.js?features=Intl.~locale.fr,Intl.~locale.pt"></script>
note: the example above will load the polyfill with two locale data set, fr and pt.
This is by far the best option to use the Intl polyfill since it will only load the polyfill code and the corresponding locale data when it is really needed (e.g.: safari will get the code and patch the runtime while chrome will get an empty script tag).
source & other ways to include Intl polyfill: https://github.com/andyearnshaw/Intl.js#getting-started
You can debug the UIWebView in the simulator with Safari http://moduscreate.com/enable-remote-web-inspector-in-ios-6/. You'll probably see a big error message in the console, if not you will have access to the debugger so you can step through and sort it out.
I have had this issue in the past, it turned out to be unsupported javascript features. for example, setting default parameters in the function. I.e:
function test( myvalue=0 ) { /* ... */ };
I had to initialise the value inside the function instead. You could also try removing any ecma script 2016 features you may have implemented.
Trouble shooting this type of issue was painful. I created a minimal version of the smallest part of my product compiled and ran it on ios emulator, added another chunk of the product, rinse and repeat.
Im sure there's a better way to detect these issues, but I do not know it.
I'm working on an iOS app using Phonegap/ Cordova and jQuery Mobile.
I want to be able to refresh the data when the user pulls the page down (rubber band effect). I tried using iScroll 4 but it made scrolling my page slow.
I didn't find a phonegap plugin for this. I thought this was a pretty standard iOS feature so maybe I am missing something? Is there any easy way to listen to the pull down event using phonegap / cordova?
Thanks!
Adding this line into CDVViewController.m (Cordova 2.0 or later) is said to work but I've actually never tried it myself as I'm still using iScroll 4. Give it a shot and let me know how it worked for you.
[webView.scrollView setDecelerationRate:UIScrollViewDecelerationRateNormal];
Likewise, however somewhat irrelevant to this matter, the code snippet below is said to reduce the on click delay from 300 ms which is also something phonegap developers usually want. Neither this nor the line above has been properly tested but perhaps a good way to start off.
[webView.scrollView setDelaysContentTouches:NO];
I have a very interesting problem. I have a phone-gap application that I am building. It works fine when we run it in the android environment, or even when we open index.html in firefox. But when I try to run this on an iPad simulator in Xcode, it fails.
The application installs fine and displays the start up page correctly. The next thing my application requires is to open a job attached in the email. But as soon as we do that, thats when it starts failing. It does not display the body text. The header and the footer are displayed fine.
To me this does not look like any javascript error because I am able to run this code on other platforms. I think its got to do with some css I am using which might not be compatible with iOS. Also, I have this other problem that my code will not run on any version except phone gap-1.3.0. I am not sure if that has anything to do with this too.
Anyways, I would like to know your thoughts on this.
ok the offending code was found to be the following:
$.mobile.touchOverflowEnabled = true;
I just stumbled across this and I am not sure why its breaking my app. Anybody got any ideas.
After commenting this code out, my app worked fine.