When i try to build my app to simulator running iPhone X there's an odd spaces on top and bottom of the screen as shown in the image. It's supposed to be full screen. Any idea how i can fix this? Thanks in advance.
i am running rn v0.47 and xcode 9.
Probably you are setting the launch screen as images, try by setting the LaunchScreen as a storyboard and be sure to have the Use Safe Area Layout Guides active on it.
If you don't have a LaunchScreen.storyboard you can just create a new one an set it, or create a new empty project and just grab the existing LaunchScreen.storyboard and copy/paste it to your current project.
Camo's answer is right. The issue is related on splash screen. But i just wanted to share how i fixed my issue since I am not using storyboard for my launchScreen.
So first i created a new launchscreen image with dimensions 1125x2436(portrait) and 2436x1125(landscape) and added it to my launchimage directory.
And then updated the Contents.json file adding this 2 configurations:
{
"orientation" : "portrait",
"idiom" : "iphone",
"extent" : "full-screen",
"minimum-system-version" : "11.0",
"filename" : "1125x2436.png",
"subtype" : "2436h",
"scale" : "3x"
},
{
"orientation" : "landscape",
"idiom" : "iphone",
"extent" : "full-screen",
"minimum-system-version" : "11.0",
"filename" : "2436x1125.png",
"subtype" : "2436h",
"scale" : "3x"
}
Update your LaunchImage assets.
I had an old LaunchImage asset that did not include the iPhone X(s) sizes. I tried "refreshing" or "updating" the existing LaunchImage asset, but couldn't do that. Instead, I just deleted the existing one and created a new one.
That fixed the bars on the top and bottom of the actual app after the launch screen is done.
My guess is because Apple assumes that if you don't have the proper LaunchImage for the taller iPhone X(s) screens, then your app isn't optimized for the new screen so instead of breaking your app layout, it just uses the limited screen size for compatibility.
If you need a good template for making the updated Launch Images, here's a free Sketch template that I used and it worked great:
https://www.sketchappsources.com/free-source/1122-ios-splash-launcher-template-sketch-freebie-resource.html
Related
I am following along with a tutorial on Lynda.com and I am using XCode 6, while the tutorial uses XCode 5, so perhaps this is the problem. I have created a tabbed application and set devices to iPhone but my storyboard file looks like it's displaying iPad sizes. Why is this? My storyboards for other projects are not displayed like that.
In Xcode 6 Main.storyboard is the single storyboard for all devices, no matter their screen size. Open the storyboard and you’ll see that it contains a single view controller, but of an unfamiliar size. Storyboards in previous versions of Xcode had to match the screen size of the target device. This clearly isn’t possible with the “one storyboard to rule them all” approach, so the storyboard is given an abstract size instead.
Please check this tutorial :
http://www.raywenderlich.com/83276/beginning-adaptive-layout-tutorial
I'm trying to transform an app hardcoded, not using storyboard ( view/design/segue harcoded ) to a view with storyboard/scene.
So I'm working on an app that has several functions (login/out, home, notify, data) that majority have similar layout : the same header picture, similar input fields, etc.
So I wonder if there is a solution to transform it into a storyboard with all view of the app ?
Or everything has to be re-coded ?
I create a new iOS project in XCode 5. I choose to use asset catalog for both app icons & launch images. When I run the application, the app icon is overlayed on the launch image. How do I prevent this?
This is my app icon:
This is launch image:
I get this as the launch image on the simulator (and in device)
For those who come here searching, I solved this issue. The launch images should be opaque and not transparent.
I used iDraw to create the launch image. Instead of exporting the entire canvas, I selected 'all objects' which created a transparent image, which caused this issue.
Now it is solved and submitted to AppStore
I built mobile web application with sencha touch 2.0
I have a regular panel object :
{
html : "content",
scrollable : true
}
When I use the scrollable option I have problem on android.
The scroll bar appears but all the content is no visible... just blank.
But the way , on iPhone I see the content and everything works.
Why its happened ? What I need to do to fix that ?
Please Mention
'fullscreen: true'
While creating this panel
Thanks
Jaffer
Small problem here, I'm building an app for ios, and I've added and icon to my project 57x57, and 114x114, but when I run my app on the device, icon is very dim, when original is very bright. How can I fix it? Does it matter if I build my app in debug mode or release?
iOS adds a gloss/shine effect to your app icon that can sometimes reduce the saturation of your image. Add the UIPrerenderedIcon flag to your info.plist file as described here to disable this.
EDITED to add iOS5 details
On iOS 5 there is a new key for specifying icons: CFBundleIcons is the raw name and it displays as 'Icon files (iOS5)' in the plist editor. To turn off the icon shine effect on iOS 5 devices you need to set the UIPrerenderedIcon flag on the Primary Icon as shown below.
To cover all cases (iOS3 - iOS5) you need to specify UIPrerenderedIcon in both places.
This is probably due to physical differences between your desktop monitor and iOS screen. Only thing you can do is redesign the icon and check the colors on an iOS device.
Check the brightness setting of your device's display. Perhaps it's not "up" as much as you think.
Or, you can disable the "shine" effect that iOS applies to your icon by adding the "Icon already includes gloss effects" boolean to your Info.plist file. That might help.