Uploaded image for project: 'Titanium SDK/CLI'
  1. Titanium SDK/CLI
  2. TIMOB-26461

iOS: Add "safeAreaPadding" property to Ti.UI.Window

    Details

      Description

      On iOS add read-only property "safeAreaPadding" to Ti.UI.Window. This property will return a Titanium ViewPadding dictionary providing the left, top, right, and bottom padding needed to show content safely within the window without overlap. If there are no insets or if "extendSafeArea" is set false, then this property is expected to return all zeros for the padding.

      The idea is that the app developer will then be able to set up their own safe area view and use it as a container as shown below.

      var window = Ti.UI.createWindow({
      	extendSafeArea: true,
      });
      var safeAreaView = Ti.UI.createView({
      	backgroundColor: "green",
      	borderWidth: "4dp",
      	borderColor: "blue",
      });
      window.add(safeAreaView);
      window.addEventListener("postlayout", function() {
      	// Padding's left/top/right/bottom can be used as pin positions for the view.
      	safeAreaView.applyProperties(window.safeAreaPadding);
      });
      window.open();
      

      Note:
      We should do the same on iOS to handle the following:

      • iPhone X top notch and bottom home indicator.
      • Translucent status bar on all other iOS devices. (Safe area should be beneath status bar.)

      Safe-Area Container Example:
      Test code ExtendSafeAreaContainerTest.js shows how to create a safe-area view container for other child views, guaranteed to always make child content tappable without overlap. The green rectangle with the blue border is the safe-area view within the root white window using an orange border. Note that the safe-area padding compensates for the status bar on all iOS versions and the iPhone X notch and rounded corners.

      Safe-Area ScrollView Example:
      Test code ExtendSafeAreaScrollViewTest.js shows how to pad a ScrollView. It allows its contents to scroll beneath a translucent status bar and iPhone X notch/home-indicator, but pads the top and bottom so that the top-most view and bottom-most view can be scrolled within the safe-area, making them tappable. it also pads around the iPhone X rounded corners too.

      Safe-Area TabGroup Example:
      Test code ExtendSafeAreaTabsTest.js shows how to extend tabs under an iPhone X notch and rounded corners. The safe-area padding reported lies within the TabGroup container where content is normally displayed when "extendSafeArea" is set to false.

        Attachments

          Issue Links

            Activity

              People

              • Assignee:
                vijaysingh Vijay Singh
                Reporter:
                jquick Joshua Quick
                Reviewer:
                Jan Vennemann
              • Watchers:
                8 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved:

                  Backbone Issue Sync

                  • Backbone Issue Sync is enabled for your project, but we do not have any synchronization info for this issue.

                    Git Source Code