@hero-design/rn 8.42.4 → 8.43.1

package/src/components/Avatar/__tests__/__snapshots__/index.spec.tsx.snap

@@ -4,7 +4,19 @@ exports[`Avatar fallbacks to title when there image failed to load 1`] = `
 <View
   accessibilityState={
     {
+      "busy": undefined,
+      "checked": undefined,
       "disabled": true,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
     }
   }
   accessible={true}
@@ -103,7 +115,19 @@ exports[`Avatar prioritizes source over title 1`] = `
 <View
   accessibilityState={
     {
+      "busy": undefined,
+      "checked": undefined,
       "disabled": true,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
     }
   }
   accessible={true}
@@ -156,7 +180,19 @@ exports[`Avatar shows title when there is no source 1`] = `
 <View
   accessibilityState={
     {
+      "busy": undefined,
+      "checked": undefined,
       "disabled": true,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
     }
   }
   accessible={true}

package/src/components/BottomNavigation/__tests__/__snapshots__/index.spec.tsx.snap

@@ -99,6 +99,15 @@ exports[`BottomNavigation renders correctly 1`] = `
         }
       >
         <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": undefined,
+              "expanded": undefined,
+              "selected": undefined,
+            }
+          }
           accessible={true}
           focusable={true}
           onClick={[Function]}
@@ -160,6 +169,15 @@ exports[`BottomNavigation renders correctly 1`] = `
           </Text>
         </View>
         <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": undefined,
+              "expanded": undefined,
+              "selected": undefined,
+            }
+          }
           accessible={true}
           focusable={true}
           onClick={[Function]}
@@ -221,6 +239,15 @@ exports[`BottomNavigation renders correctly 1`] = `
           </Text>
         </View>
         <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": undefined,
+              "expanded": undefined,
+              "selected": undefined,
+            }
+          }
           accessible={true}
           focusable={true}
           onClick={[Function]}
@@ -282,6 +309,15 @@ exports[`BottomNavigation renders correctly 1`] = `
           </Text>
         </View>
         <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": undefined,
+              "expanded": undefined,
+              "selected": undefined,
+            }
+          }
           accessible={true}
           focusable={true}
           onClick={[Function]}

package/src/components/BottomSheet/__tests__/__snapshots__/index.spec.tsx.snap

@@ -1,287 +1,323 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`BottomSheet renders correctly with BottomSheet.ScrollView 1`] = `null`;
+exports[`BottomSheet renders correctly with BottomSheet.ScrollView 1`] = `
+<Modal
+  hardwareAccelerated={false}
+  onRequestClose={[MockFunction]}
+  transparent={true}
+  visible={false}
+/>
+`;
 
-exports[`BottomSheet renders correctly with close state 1`] = `null`;
+exports[`BottomSheet renders correctly with close state 1`] = `
+<Modal
+  hardwareAccelerated={false}
+  onRequestClose={[MockFunction]}
+  transparent={true}
+  visible={false}
+/>
+`;
 
 exports[`BottomSheet renders correctly with open state 1`] = `
-[
+<Modal
+  hardwareAccelerated={false}
+  onRequestClose={[MockFunction]}
+  transparent={true}
+  visible={true}
+>
   <View
-    collapsable={false}
+    pointerEvents="box-none"
     style={
-      {
-        "backgroundColor": "transparent",
-        "bottom": 0,
-        "left": 0,
-        "opacity": 0.4,
-        "position": "absolute",
-        "right": 0,
-        "top": 0,
-      }
-    }
-  />,
-  <View
-    collapsable={false}
-    style={
-      {
-        "bottom": 0,
-        "left": 0,
-        "opacity": 1,
-        "position": "absolute",
-        "right": 0,
-        "top": 0,
-        "transform": [
-          {
-            "translateY": 0,
-          },
-        ],
-      }
+      [
+        {
+          "bottom": 0,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
     }
   >
     <View
-      pointerEvents="box-none"
+      onLayout={[Function]}
       style={
         [
+          [
+            {
+              "flex": 1,
+              "flexDirection": "column-reverse",
+            },
+            undefined,
+          ],
           {
-            "bottom": 0,
-            "flexDirection": "column-reverse",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
+            "paddingBottom": 0,
           },
-          undefined,
         ]
       }
     >
       <View
-        onLayout={[Function]}
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
+        collapsable={false}
+        focusable={true}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
-          [
-            [
+          {
+            "backgroundColor": "#000000",
+            "bottom": 0,
+            "left": 0,
+            "opacity": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          }
+        }
+      />
+      <RCTSafeAreaView
+        collapsable={false}
+        style={
+          {
+            "backgroundColor": "#ffffff",
+            "borderTopLeftRadius": 16,
+            "borderTopRightRadius": 16,
+            "elevation": 10,
+            "maxHeight": "94%",
+            "shadowColor": "#001f23",
+            "shadowOffset": {
+              "height": 3,
+              "width": 0,
+            },
+            "shadowOpacity": 0.4,
+            "shadowRadius": 16,
+            "transform": [
               {
-                "flex": 1,
-                "flexDirection": "column-reverse",
+                "scaleY": 1,
+              },
+              {
+                "translateY": 1334,
               },
-              undefined,
             ],
-            {
-              "paddingBottom": 0,
-            },
-          ]
+            "width": "100%",
+          }
         }
       >
         <View
-          accessible={true}
-          collapsable={false}
-          focusable={true}
-          onBlur={[Function]}
-          onClick={[Function]}
-          onFocus={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
-          style={
-            {
-              "backgroundColor": "#000000",
-              "bottom": 0,
-              "left": 0,
-              "opacity": 0,
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-            }
-          }
-        />
-        <RCTSafeAreaView
-          collapsable={false}
-          emulateUnlessSupported={true}
           style={
-            {
-              "backgroundColor": "#ffffff",
-              "borderTopLeftRadius": 16,
-              "borderTopRightRadius": 16,
-              "elevation": 10,
-              "maxHeight": "94%",
-              "shadowColor": "#001f23",
-              "shadowOffset": {
-                "height": 3,
-                "width": 0,
+            [
+              {
+                "flexDirection": "row",
+                "paddingHorizontal": 16,
+                "paddingVertical": 8,
               },
-              "shadowOpacity": 0.4,
-              "shadowRadius": 16,
-              "transform": [
-                {
-                  "scaleY": 1,
-                },
-                {
-                  "translateY": 1334,
-                },
-              ],
-              "width": "100%",
-            }
+              undefined,
+            ]
           }
         >
           <View
             style={
               [
                 {
-                  "flexDirection": "row",
-                  "paddingHorizontal": 16,
-                  "paddingVertical": 8,
+                  "flex": 1,
+                  "justifyContent": "center",
                 },
                 undefined,
               ]
             }
           >
-            <View
+            <Text
+              allowFontScaling={false}
               style={
                 [
                   {
-                    "flex": 1,
-                    "justifyContent": "center",
+                    "color": "#001f23",
+                    "fontFamily": "BeVietnamPro-SemiBold",
+                    "fontSize": 16,
+                    "letterSpacing": 0.24,
+                    "lineHeight": 24,
                   },
                   undefined,
                 ]
               }
+              themeIntent="body"
+              themeTypeface="neutral"
+              themeVariant="regular-bold"
+            >
+              Title
+            </Text>
+          </View>
+          <View
+            style={
+              [
+                {
+                  "alignItems": "center",
+                  "height": 48,
+                  "justifyContent": "center",
+                  "marginLeft": 12,
+                  "width": 48,
+                },
+                undefined,
+              ]
+            }
+          >
+            <View
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              collapsable={false}
+              focusable={true}
+              onClick={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
+              style={
+                {
+                  "opacity": 1,
+                }
+              }
+              testID="bottom-sheet-close-icon"
             >
-              <Text
-                allowFontScaling={false}
+              <HeroIcon
+                name="cancel"
                 style={
                   [
                     {
                       "color": "#001f23",
-                      "fontFamily": "BeVietnamPro-SemiBold",
                       "fontSize": 16,
-                      "letterSpacing": 0.24,
-                      "lineHeight": 24,
                     },
                     undefined,
                   ]
                 }
-                themeIntent="body"
-                themeTypeface="neutral"
-                themeVariant="regular-bold"
-              >
-                Title
-              </Text>
+                themeIntent="text"
+                themeSize="xsmall"
+              />
             </View>
+          </View>
+        </View>
+        <Text>
+          Content
+        </Text>
+        <View>
+          <View
+            style={
+              [
+                {
+                  "alignItems": "center",
+                  "flexDirection": "row",
+                  "justifyContent": "flex-end",
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 2,
+                },
+                undefined,
+              ]
+            }
+          >
             <View
-              style={
-                [
-                  {
-                    "alignItems": "center",
-                    "height": 48,
-                    "justifyContent": "center",
-                    "marginLeft": 12,
-                    "width": 48,
-                  },
-                  undefined,
-                ]
+              accessibilityRole="button"
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
               }
-            >
-              <View
-                accessible={true}
-                collapsable={false}
-                focusable={true}
-                onClick={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
-                style={
-                  {
-                    "opacity": 1,
-                  }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
                 }
-                testID="bottom-sheet-close-icon"
-              >
-                <HeroIcon
-                  name="cancel"
-                  style={
-                    [
-                      {
-                        "color": "#001f23",
-                        "fontSize": 16,
-                      },
-                      undefined,
-                    ]
-                  }
-                  themeIntent="text"
-                  themeSize="xsmall"
-                />
-              </View>
-            </View>
-          </View>
-          <Text>
-            Content
-          </Text>
-          <View>
-            <View
+              }
+              accessible={true}
+              collapsable={false}
+              focusable={false}
+              onClick={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
-                [
-                  {
-                    "alignItems": "center",
-                    "flexDirection": "row",
-                    "justifyContent": "flex-end",
-                    "paddingHorizontal": 12,
-                    "paddingVertical": 2,
-                  },
-                  undefined,
-                ]
+                {
+                  "opacity": 1,
+                }
               }
             >
               <View
-                accessibilityRole="button"
-                accessible={true}
-                collapsable={false}
-                focusable={false}
-                onClick={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
                 style={
-                  {
-                    "opacity": 1,
-                  }
+                  [
+                    {},
+                  ]
                 }
               >
-                <View
+                <Text
                   style={
                     [
-                      {},
+                      {
+                        "color": "#007AFF",
+                        "fontSize": 18,
+                        "margin": 8,
+                        "textAlign": "center",
+                      },
                     ]
                   }
                 >
-                  <Text
-                    style={
-                      [
-                        {
-                          "color": "#007AFF",
-                          "fontSize": 18,
-                          "margin": 8,
-                          "textAlign": "center",
-                        },
-                      ]
-                    }
-                  >
-                    Footer CTA
-                  </Text>
-                </View>
+                  Footer CTA
+                </Text>
               </View>
             </View>
           </View>
-        </RCTSafeAreaView>
-      </View>
+        </View>
+      </RCTSafeAreaView>
     </View>
-  </View>,
-]
+  </View>
+</Modal>
 `;

package/src/components/BottomSheet/index.tsx

@@ -6,6 +6,7 @@ import {
   Dimensions,
   Easing,
   KeyboardAvoidingViewProps,
+  Modal,
   Platform,
 } from 'react-native';
 import BottomSheetContext from './BottomSheetContext';
@@ -18,7 +19,6 @@ import {
   StyledWrapper,
 } from './StyledBottomSheet';
 import ScrollView from './ScrollView';
-import Modal from '../Modal';
 
 interface BottomSheetProps {
   /**