In my React Native app on iOS, I want to make a <View> that wraps the status bar. Most places say that it should be 20px in height, but on the iPhone 11, for example, it seems to be higher than that. I want a solution that fits all devices.
How should I approach this?
You can's set the status bar height, this is something which related to the phone OS. If you would like to extend it, you can just add a View under it with the same color.
In order to solve iPhone 10 or greater issues you need to use SafeAreaView.
"The purpose of SafeAreaView is to render content within the safe area boundaries of a device. It is currently only applicable to iOS devices with iOS version 11 or later"
Related
What is the correct way of calculating the content insets (https://developer.apple.com/documentation/uikit/uiscrollview/1619406-contentinset) in a react native project?
E.g. when you use padding: 20 on the root view of the application/screen, it aligns with the native navigation title on an iPhone 11. On an iPhone 12 Pro, on the other hand, these content insets seem to be different and the content has an offset:
I also found an example of using 5% of the device width as the content inset/padding, but this still doesn't fit on all devices.
This is how it looks in the apple design guidelines (margins):
https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layout/
As I didn't find any solution for this, I created a small library for it: https://github.com/dioncodes/react-native-layout-margins
With the new iPhone X coming, are there any UI or UI Api changes required to fully support the iPhone X?
Are there any API changes that might affect the UIStatusBarStyle / UINavigationBar / UINavigationItem / UITabBar etc.
The only significant change I see is the larger display of 145pt longer.
The only information I could find is the Apple: Human Interface Guidelines
located here:
https://developer.apple.com/ios/human-interface-guidelines/overview/iphone-x/
For native IOS app the support is already given and all the info is available on full screen(18:9). Lots of app instead still need to fully support the new format so info available on 16:9 ratio
In order to get full-screen applications you will need to recompile your apps with IOS 11 / Xcode 9.
If you use Standard UI controls you should be safe. If you use Autolayout you can utilise the new "safeAreaLayoutGuide" which will then basically help your ui design to respect the iPhoneX view port.
I found this Transcript from Apple located here: https://developer.apple.com/videos/play/fall2017-801/?time=126
"On iPhone X, people access the app switcher (indicated by the red arrow) and the Home screen by swiping up anywhere along the bottom edge of the display. An indicator at the bottom of the screen offers a hint about this interaction.
This indicator is displayed over your app's interface. You'll need to account for this when designing your app. If your app uses UIKit controls and auto-layout, designing and developing for iPhone X and our other devices should be straightforward. Standard UIKit elements such as navigation bars, tables, and collection views, automatically adjust when viewed on iPhone X. Navigation bars, tab bars, and toolbars are positioned and scaled appropriately on all iOS devices. The navigation bar's background material is extended to the display's top edge, and the background material of the tab bar and toolbar is extended to the bottom, while the elements they contain are positioned to prevent underlapping or clipping by other elements."
Basically if you use standard UIKit you have nothing to worry about.
Although Apple recommends: "Make sure that your UI displays correctly and no elements are mispositioned, overlapping, incorrectly scaled, or clipped"
If you discover issues, use the safe area guides and layout margins to correctly position UI elements.
After trying to create pins to the edges, tops, and bottoms of these buttons, the UI still becomes either stretched or not wide enough when selecting the different devices available from the storyboard in Xcode 8. What can I be doing wrong or how do I correct this issue because Apple won't accept this app due to it not showing in iPhone resolution on the iPad even though this app is set to run on iPhone devices.
Here is an image showing the current constraints:
Here is the demo project where you can find the correct constraints as per your requirement.
http://wikisend.com/download/172838/DemoAutolayout.zip
I have recently updated my XCode to 5.0.1 as to be able to test my application on iOS 7.
Everything seems to be working as expected, but for some reason the status bar is overlapping the screen's content.
Now, I am still able to see the overlapped content as the status bar in iOS 7 is translucent, but it looks very weird.
I could always move my content down a bit to compensate for the height taken up by the status bar, but how would that look in iOS 6??
Is this intentional on Apple's part? Is there a standard procedure we as developers are supposed to follow to get this looking how it should?
Also, should I just add 20 pixels (or whatever the height of the status bar is) to the top of my view and just forget about iOS 6?
I have decided to just set my Top Space to: Superview to 20 (the height of the status bar) for all my parent views.
Looks good on iOS 7 but there is a 20pixel gap on iOS 6, and given the fact that 80% of our iPhone users have already updated their OSes to 7, I think it's safe to just assume that eventually everyone will be using iOS 7 and support for iOS 6 will no longer be needed.
I'm not gonna break my head anymore over this.
Thanks anyways!
I have just submitted my iOS 7 compatible app using the Xcode 5 GM and iOS 7 SDK GM. My base SDK is set at iOS 7 GM and my Deployment Target is set at 6.0, I am wanting my app to support iOS versions 6.0 and up. I know that those settings are correct, however I am wondering if there is anything extra I need to do so that when the app goes live it says "Optimized for iOS 7" or whatever phrasing Apple is going to use for this. Just like they did with the iPhone 5 "This app is optimized for the iPhone 5". Anybody have an idea on this?
There is nothing else you have to, or can, do. I don't know if the App Store will display something like "Optimized for iOS 7". If it does show that once iOS 7 is released to the general public, then having built against the 7.0 SDK will probably be how Apple determines whether it's optimized or not.
App icons:
- For iPhone, iOS 7 app icons have grown to 120×120 pixels, compared to 114×114 pixels in iOS 6.
- For iPad, iOS 7 app icons should measure in at 152×152 pixels, instead of the 144×144 pixels in iOS 6.
Notes: IOS 7 & 6 UI are different. You still need to support iOS 6.
All details are in iOS 7 UI Transition Guide
Things Every App Should Do
Make sure that app content is discernible through translucent UI elements—such as bars and keyboards—and the transparent status bar. In iOS 7, view controllers use full-screen layout (to learn more, see Using View Controllers).
Redesign custom bar button icons. In iOS 7, bar button icons are lighter in weight and have a different style. For some design guidance, see “Bar Button Icons”.
Prepare for borderless buttons by reassessing the utility of button background images and bezels in your layout.
Examine your app for hard-coded UI values—such as sizes and positions—and replace them with those you derive dynamically from system-provided values. Use Auto Layout to help your app respond when layout changes are required. (If you’re new to Auto Layout, learn about it by reading Auto Layout Guide.)
Examine your app for places where the metrics and style changes of UIKit controls and views affect the layout and appearance. For example, switches are wider, grouped tables are no longer inset, and progress views are thinner. For more information on specific UI elements, see Bars and Bar Buttons, Content Views, Controls, and Temporary Views.
Adopt Dynamic Type. In iOS 7, users can adjust the text size they see in apps. When you adopt Dynamic Type, you get text that responds appropriately to user-specified size changes. For more information, see Using Fonts.
Expect users to swipe up from the bottom of the screen to reveal Control Center. If iOS determines that a touch that begins at the bottom of the screen should reveal Control Center, it doesn’t deliver the gesture to the currently running app. If iOS determines that the touch should not reveal Control Center, the touch may be slightly delayed before it reaches the app.
Revisit the use of drop shadows, gradients, and bezels. Because the iOS 7 aesthetic is smooth and layered—with much less emphasis on using visual effects to make UI elements look physical—you may want to rethink these effects.
If necessary, update your app to best practices for iOS 6—such as Auto Layout and storyboards—and ensure that the app doesn’t use deprecated APIs.