Patch TabNavigation and AppBar so they render within the viewport in iOS

src/AppBar/AppBar.js

@@ -71,6 +71,18 @@ export default class AppBar extends Component {
     return {}
   }
 
+  getContainerMarginTop() {
+    const { hasDynamicIslandOrNotch, isResponsiveComponent } = this.props;
+    let marginTop = -30;
+    if (hasDynamicIslandOrNotch) {
+      marginTop += -10
+    }
+    if (isResponsiveComponent) {
+      marginTop += -10
+    }
+    return marginTop;
+  }
+
   getShadowStyle() {
     let { shadow } = this.props
     if (shadow) {
@@ -257,12 +269,10 @@ export default class AppBar extends Component {
   }
 
   renderBlur(containerStyles) {
-    let { translucentColor, hasDynamicIslandOrNotch } = this.props
-
-    const blurViewStyle = {};
-    if (hasDynamicIslandOrNotch) {
-      blurViewStyle.marginTop = -40
-    }
+    let { translucentColor } = this.props
+
+    const marginTop = this.getContainerMarginTop();
+    const blurViewStyle = { marginTop };
 
     return (
       <Blur
@@ -278,12 +288,11 @@ export default class AppBar extends Component {
   }
 
   renderImageBackgroundToolbar() {
-    let { backgroundImage, hasDynamicIslandOrNotch } = this.props
+    let { backgroundImage } = this.props
 
+    const marginTop = this.getContainerMarginTop();
     let imageBackgroundStyles = styles.imageBackground;
-    if (hasDynamicIslandOrNotch) {
-      imageBackgroundStyles = { ...imageBackgroundStyles, marginTop: -40 }
-    }
+    imageBackgroundStyles = { ...imageBackgroundStyles, marginTop }
 
     const imageStyles = [
       imageBackgroundStyles,
@@ -311,7 +320,7 @@ export default class AppBar extends Component {
   }
 
   renderToolbar() {
-    let { barType, translucentColor, backgroundColor, editor, hasDynamicIslandOrNotch } = this.props
+    let { barType, translucentColor, backgroundColor, editor } = this.props
     let containerStyles = {
       backgroundColor,
       height: 76,
@@ -322,10 +331,7 @@ export default class AppBar extends Component {
     }
 
     if (!editor) {
-      let marginTop = -30;
-      if (hasDynamicIslandOrNotch) {
-        marginTop = -40;
-      }
+      const marginTop = this.getContainerMarginTop();
       containerStyles = {
         ...containerStyles,
         height: 106,

src/TabNavigator/index.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { StyleSheet } from 'react-native'
+import { StyleSheet, Platform } from 'react-native'
 import {
   BottomNavigation,
   ThemeContext,
@@ -38,7 +38,7 @@ export default class TabNavigator extends Component {
   }
 
   render() {
-    let { backgroundColor, editor, activeTab, _fonts, getFlags } = this.props
+    let { backgroundColor, editor, activeTab, _fonts, getFlags, isResponsiveComponent } = this.props
     const { hasUpdatedLoadingStates } = (getFlags && getFlags()) || {}
 
     let enabledTabs = tabNames.filter((tabName) => {
@@ -53,18 +53,21 @@ export default class TabNavigator extends Component {
     })
 
     let wrapperStyles = editor ? styles.editorWrapper : styles.wrapper
+    if (!editor) {
+      // Patch for TabNavigation rendering outside of viewport in iOS for responsive web apps
+      wrapperStyles = isResponsiveComponent && Platform.OS === "ios" ? styles.responsiveComponentWrapper : styles.wrapper;
+    }
 
     let defaultFontStyle = _fonts
       ? { fontFamily: _fonts.body, fontSize: 11 }
       : { fontSize: 11 }
 
+
     return (
       <ThemeContext.Provider value={this.getTheme()}>
         <BottomNavigation
           active={activeTab}
-          style={{
-            container: [wrapperStyles, { backgroundColor }],
-          }}
+          style={{ container: [wrapperStyles, { backgroundColor }] }}
         >
           {enabledTabs.map((tabName) => (
             <BottomNavigation.Action
@@ -88,11 +91,18 @@ export default class TabNavigator extends Component {
 }
 
 const styles = StyleSheet.create({
-  wrapper: {
+  defaultWrapper: {
     marginBottom: -100,
     paddingBottom: 100,
     height: 156,
   },
+  responsiveComponentWrapper: {
+    position: "absolute",
+    bottom: 0,
+    left: 0,
+    right: 0,
+    height: 156,
+  },
   editorWrapper: {
     height: 56,
   },

src/TextButton/TextButton.js

@@ -23,9 +23,7 @@ export default class WrappedTextButton extends Component {
   getContainerStyles() {
     let { type, primaryColor, borderRadius } = this.props
 
-
     if (type === 'contained') {
-
       return { backgroundColor: primaryColor, borderRadius }
     }
 
@@ -42,7 +40,7 @@ export default class WrappedTextButton extends Component {
   }
 
   getTextStyles() {
-    let { primaryColor, contrastColor, type, icon, styles, _fonts } = this.props
+    let { primaryColor, contrastColor, type, icon, styles, upperCase, _fonts } = this.props
 
     const textStyles = { fontWeight: '600' }
 
@@ -61,10 +59,31 @@ export default class WrappedTextButton extends Component {
 
     if (icon) {
       textStyles.marginLeft = 8
+      textStyles.marginRight = 5
     }
+
+    if (upperCase) {
+      textStyles.letterSpacing = 1
+    }
+
     return textStyles
   }
 
+  getIconStyles() {
+    const { icon } = this.props;
+    // Base icon styles are same as text styles
+    const iconStyles = this.getTextStyles()
+    // marginRight needs to be removed from base text styles for icons
+    delete iconStyles.marginRight;
+
+    if (!iconStyles.width && !iconStyles.minWidth) {
+      // Set default icon size as min width
+      iconStyles.minWidth = 24;
+    }
+
+    return iconStyles
+  }
+
   getAdditionalProps() {
     let { type, shadow = true } = this.props
 
@@ -96,19 +115,11 @@ export default class WrappedTextButton extends Component {
   }
 
   renderSub() {
-    let { icon, action, text, upperCase, container } = this.props
+    let { icon, action, text, upperCase } = this.props
 
     let containerStyles = this.getContainerStyles()
-    let iconStyles = this.getTextStyles()
-    let textStyles = { ...this.getTextStyles() }
-
-    if (icon) {
-      textStyles.marginRight = 5
-    }
-
-    if (upperCase) {
-      textStyles.letterSpacing = 1
-    }
+    let textStyles = this.getTextStyles()
+    let iconStyles = this.getIconStyles()
 
     return (
       <View>
@@ -120,12 +131,11 @@ export default class WrappedTextButton extends Component {
             onPress={action && this.submitAction}
             text={this.state.loading ? '' : text}
             style={{
-              container: [containerStyles, container],
+              container: containerStyles,
               icon: iconStyles,
               text: [textStyles, styles.text],
             }}
-            disabled={this.state.loading}
-
+            disabled={action ? this.state.loading : true}
           />
         </View>
         {this.state.loading && (