On Android, Landscape-Mode works like a charm, but on IOs I've found following issue:
Mobile-Device is in Landscape-Mode:
I click on an Image (Touchable-Opacity set the state modalShow
The Landscape-Mode will be switched to Portrait-Mode, after that the Modal appears
If I close the Modal, the App switch back to Landscape-Mode.
Any Idea, why this only happend on Iphone, but working well on Android?
You have to add this (or only some of them like you're needs) to your Modal, which encapsulate the Image-Zoom Component:
supportedOrientations={
[
'portrait',
'portrait-upside-down',
'landscape',
'landscape-left',
'landscape-right'
]
}
Consider using a library to manage the screen rotation https://github.com/yamill/react-native-orientation
Related
The problem is when I tap with Detox, the button is not tapped. However it can be tapped if I just click at it.
version of Detox: 16.8.2,
version of React Native: 0.57.1
Solved.
This happened because I used device.openURL({url: 'https://...' }) previously to open the app from a deep link.
Instead, it worked after opening a new instance of the app with a deep link in argument: device.launchApp({newInstance: true, url: 'https://...' });
After this, the interaction can be performed.
It looks like a bug with the method device.openURL()
I downloaded the IncludeExternalPages project from the getting started site. In the main.js for iPhone I can see what the WL.TabBar should display:
function wlEnvInit(){
wlCommonInit();
WL.TabBar.init();
WL.TabBar.addItem("WLtab1", function () {tabClicked(1); } ,"Home",{
image: "tabButton:Favorites"
});
WL.TabBar.addItem("WLtab2", function () {tabClicked(2); } ,"Client",{
image: "tabButton:Search"
});
WL.TabBar.addItem("WLtab3", function () {tabClicked(3); } ,"IBM",{
image: "tabButton:More"
});
WL.TabBar.setVisible(true);
WL.TabBar.setSelectedItem("WLtab1");
tabClicked(1);
}
However, when executing this code in a simulator the labels are Favorite, Search, and More instead of Home, Client, and IBM. I made no modifications to the project, just built it and ran on the iOS simulator. This was using WL6.2 with the 9/4 update (latest).
Any ideas why the titles are defaulting to iOS instead of what is specified in the code?
When using the "built-in" OS icons (Favorites, More, Search, ...) the tab item's title will default to that of the icon instead of the label in the code.
To change that, provide your own Favorites icon, for example, and then the "Home" label will be used.
WL.App.close is deprecated. I know that this is not supported for iOS. But why is it deprecated for Android as well? At the moment, it is still functioning fine, even on 6.2, but since it is deprecated, what is the alternative/substitute for this?
In Android as well, this is not the recommended approach. You should let the user quit the app, and this is done by manually bringing up the "applications view" and swiping the app in order to quit it.
Can be corroborated by these answers by Googlers:
http://android.nextapp.com/site/fx/doc/exit
Additionally, there are these approaches:
Close application and launch home screen on Android
https://groups.google.com/forum/#!topic/android-developers/Y96KnN_6RqM
You could write a Cordova plug-in that will force-quit the app and trigger it by overriding whatever you'd like (like the Back button), or create a dedicated Quit button, etc.
In MobileFirst 7.0, this method seems to be deprecated in both iOS and Android, but when I call this "deprecated" method in Android, it really works.
I think overriding Android's back button might be a best practice in Android webapp as back button may cause strange page navigating issues (if you use UI frameworks like JQM). This is what I done in WL's main.js.
WL.App.overrideBackButton(backFunc);
function backFunc(){
WL.SimpleDialog.show(
"Alert",
"Sure to quit the app ?",
[ {text : 'Cancel', handler: function() {
}},
{text : 'Yes', handler: function() {
if(WL.Client.getEnvironment() == WL.Environment.ANDROID) {
WL.App.close();
}
}}]
);
}
I just updated my Sencha Touch to Sencha Touch 2.0.1 and my home screen icon is no longer working. Previously I could inspect my code and see the correct <link> tags generated by Sencha. I no longer see these tags. I have my home screen icon set up with the following code:
Ext.application({
name: 'example',
phoneIcon: '/example/resources/icons/app_icons/114x114.png',
I have also tried changing "phoneIcon" to "icon", and I have also tried using an object after "icon" instead of a string. Any ideas?
The icon property works fine for me:
Example application: http://www.senchafiddle.com/#f15tv
With Sencha Touch, i want to use some of the icons in the directory resources/themes/images/default/pictos/ for iconCls in my footer navigation. But from what I've read, it says I need to set up a ruby on rails server just to compile the right stylesheets and javascript files to use them?
I don't have the least bit knowledge of how to set up my own servers or set up my own RoR server. Is there anyway else to do this? I just want 3 icons from that directory...setting up a whole server seems a bit overkill.
Yes, you need to install Ruby and RubyGems (only if you're on Windows because they are pre bundled on Mac)
Then you just need to open the right scss file in touch/resources/sass (depending on what them you're using) and to add the following line to it :
#include pictos-iconmask(PICTOS_NAME);
Finally you need to open a terminal in that folder and to execute the following command :
compass compile // Run it every time you change something in the .scss
or
compass watch // Will automatically recompile every time you save
More information about Sencha-Touch Theming here
I used the following CSS
/* TV icon for Videos */
/* USED IN SENCHA TOUCH V2*/
.x-tab .x-button-icon.tv,.x-button .x-button-icon.x-icon-mask.tv{-webkit-mask-image:url(/resources/themes/images/default/pictos/TV.png)}
Actually... to be perfectly honest, I didn't map my CSS to the image, but rather converted the image to Base64 and embedded it in the CSS. The reason for this was that I only needed 4 of the icons and I didn't want to move them all around every time.
/* TV icon for Videos */
/* USED IN SENCHA TOUCH V2*/
.x-tab .x-button-icon.tv,.x-button .x-button-icon.x-icon-mask.tv{-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAFmUlEQVRoBe2aX6hURRzH75p/qCjLMLKk7CoZEgmikHjLSxbqWz30B6SXzF6ieujPg0FFfzB66KUSfO4hJAqKKDSp25USi6hESCoKUyr6Z4lalnn7fJadbTxnz+7Zc3fv3T34gw8zZ87Mb+Y7c87MnNmtjI2NDbRrlUplJmVugfNhKxzAT/uOKJjXqLNC3rlwOxyCV6nSsD2zne1CDY/A76DIj2AIzmjXT978+q7VMUponYfhybzl43xTKFjE5lNoeq3gMsLNsJRBKOqv5iod1HwurtVxbS3HVMKL07lzpMTq88ZxuwI+hRNgj8t+WAfT8vpplU9f4CP8DYR6rNO6V7Qq3+h+249zcEKFy2EX/AuhMb8S3wAzQr6ioT7ADtRn8H+S+GewvLDfogUthw3CCMQjfZTrTTCrqG/KOhnq4wgEsdYxAvOL+q22eTyFqw4GBhbQiNfgHwiN+5P4Fpjdrn/KzILn4S8I/vT9Bixo118yf+FHOnZEQ84CJ67jEBpp+DpcEudtFifvXLDzYh/61PfMZmXz3uuIYCvDHJlH4RjEDd7JdcvHkDy+HtsTZX1SnoHCr0eyIzomuCbaWfU++A1i0a7VVyYrD9fcWwi7E2Vc5++HcU+AoZ5qG+OLTsVp5M3gUuKsGoTvMz1ZB2lrYW+UzzKWvQs6tsSFejs6wsGpIbYGvoZY9Hdc3xDyEV8JpoVOMa/r+eqQp9Nh1wTXRF9N4z+MBCnsF3gYHoIfIYg13AVLOi0y9tdVwTXRVyBC0fFIOxlJEOu9z2Fh3LhuxCu1Rg2wZz2TCt2j+lXSSVPMHHgBboSkf0W/A/fC9zAFOmn6P4FOO3hgKkKnEw6DjXEd7HSFuKzuxAwV75dPbKZpj4Ed3mnT/wF0voXoEZ3fCgchPF5lDb9C4xpHcwiKfWpRsI9skLauVXA33tte7Ae1TsvzzpzogdbnaWeuZjZz9AUetsFP4HudnF1JmhCz7nNhNSwZb41Zgj/GsZuDUWa2MIuOt67C5Zlh7ewt8BzcBD6ehSyr4Jt429sLYlVFOxzlg+Bafhhic0D2w+OwEq6BjeD+PGVZI/wlOY+kck9ugqJtk0dKwRTrq3c37KZfqvd4ID7h+l14Cq6H+sDWIyTG5q4kdhzfm8x4sr3uyxW1K4i1ccSdaD3oexYcvLolHdRv9EHEY5898AECHf1TjKS/SXD0345v9LNgR/EH8Owry7znQULd+lmw889cOLuuJh3xrM08detnwR4nLYbhupoowsTl15/r9qoo+f/ZK07so/hM2vog4objNnM9g+ulsB4G43tZy1Kcp5fjfmougq2I3E64E1xhroNVcDmcYv0uWDHuwi6EdeDhocupW9GGVgbBQZjCm01g1XxlEuzy4yN9HIbgIkhZP8/SsZg/uNgMfljcAU/DIUhZGQS7y/oZXmZ3dRLcbLwP+yBlZRDsu3seDDNTeyjpzD0P5kPKyvIOX4CyjTAPPLC4E5y5U1YWwY7yHHggpTCRUIZHOiGp+eVpwc37p//vnh7h/h/D5grKMksfQ+YO8GdZ12G3lf4XNLW9LINgd1r+sL4J/J+IS9RV4PdwKQWjq/oz7FG2lYofY7fl8a2krEyTliPb0sokuKVYM5RJcOpsulEPZAnOVbiRw0lKU0dyAm74iCczhfZ66pfVGSHPZISeVyUHQ2GzYT2T1SuEYZa+lHjKsgRfRk4PsT0u6RVTiMeyjdp8Dun31CDItqxRvI0ii+ixrPvZHrt3x5PIDaC4wtaot3Tmov0ivIRo/zDmSDd8J0jvtlnvIKyHZeBOqrBlCdahP2O4Y2m4gJthAk3RzdqauymtnNib4+rR3C2ZoIy+oz6uvfjjd6e7QI3HFTwK/sex7HYAgTt8XL8FBftl4Ulfq8ecLH1lfjq+B0/Atv8AOeLFDQ1OlmYAAAAASUVORK5CYII=);}
Now, when you're creating your TabPanel you want do do something along these lines.
Ext.create('Ext.TabPanel', {
fullscreen: true,
tabBar: {
docked: 'bottom',
layout: {
pack: 'center'
}
},
items: [{
title: 'Video',
iconCls: 'tv' // the icon class string is appended to the CSS
// '.x-icon-mask.[iconCls string]'
// in this case
// '.x-icon-mask.tv'
// as seen in the CSS above
}]
});
EDIT
Looking over my old Sencha Touch V1 code base (as per your comment below) you will want to use the following CSS for Sencha Touch V1
/* TV icon for Videos */
/* USED IN SENCHA TOUCH V1*/
.x-tab img.tv,.x-button img.x-icon-mask.tv{-webkit-mask-image:url('/resources/themes/images/default/pictos/TV.png');}