@hero-design/rn 8.42.4 → 8.43.1

package/src/components/Select/SingleSelect/__tests__/__snapshots__/index.spec.tsx.snap

@@ -6,6 +6,23 @@ exports[`rendering allows custom renderer 1`] = `
     pointerEvents="auto"
   >
     <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}
@@ -222,37 +239,11 @@ exports[`rendering allows custom renderer 1`] = `
       </View>
     </View>
   </View>,
-  <View
-    collapsable={false}
-    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,
-          },
-        ],
-      }
-    }
+  <Modal
+    hardwareAccelerated={false}
+    onRequestClose={[Function]}
+    transparent={true}
+    visible={true}
   >
     <View
       pointerEvents="box-none"
@@ -288,6 +279,23 @@ exports[`rendering allows custom renderer 1`] = `
         }
       >
         <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}
@@ -314,7 +322,6 @@ exports[`rendering allows custom renderer 1`] = `
         />
         <RCTSafeAreaView
           collapsable={false}
-          emulateUnlessSupported={true}
           style={
             {
               "backgroundColor": "#ffffff",
@@ -401,6 +408,23 @@ exports[`rendering allows custom renderer 1`] = `
               }
             >
               <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}
@@ -508,6 +532,7 @@ exports[`rendering allows custom renderer 1`] = `
           >
             <View>
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               >
@@ -577,6 +602,7 @@ exports[`rendering allows custom renderer 1`] = `
                 </View>
               </View>
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               >
@@ -639,6 +665,14 @@ exports[`rendering allows custom renderer 1`] = `
                         "disabled": false,
                       }
                     }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
                     accessible={true}
                     focusable={true}
                     onClick={[Function]}
@@ -776,6 +810,7 @@ exports[`rendering allows custom renderer 1`] = `
                 </View>
               </View>
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               >
@@ -786,6 +821,14 @@ exports[`rendering allows custom renderer 1`] = `
                         "disabled": false,
                       }
                     }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
                     accessible={true}
                     focusable={true}
                     onClick={[Function]}
@@ -916,10 +959,12 @@ exports[`rendering allows custom renderer 1`] = `
                 </View>
               </View>
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               />
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               >
@@ -989,6 +1034,7 @@ exports[`rendering allows custom renderer 1`] = `
                 </View>
               </View>
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               >
@@ -1051,6 +1097,14 @@ exports[`rendering allows custom renderer 1`] = `
                         "disabled": false,
                       }
                     }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
                     accessible={true}
                     focusable={true}
                     onClick={[Function]}
@@ -1188,6 +1242,7 @@ exports[`rendering allows custom renderer 1`] = `
                 </View>
               </View>
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               >
@@ -1198,6 +1253,14 @@ exports[`rendering allows custom renderer 1`] = `
                         "disabled": false,
                       }
                     }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
                     accessible={true}
                     focusable={true}
                     onClick={[Function]}
@@ -1328,6 +1391,7 @@ exports[`rendering allows custom renderer 1`] = `
                 </View>
               </View>
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               />
@@ -1336,239 +1400,33 @@ exports[`rendering allows custom renderer 1`] = `
         </RCTSafeAreaView>
       </View>
     </View>
-  </View>,
+  </Modal>,
 ]
 `;
 
 exports[`rendering renders correctly when bottom sheet is NOT visible 1`] = `
-<View
-  pointerEvents="auto"
->
-  <View
-    accessible={true}
-    collapsable={false}
-    focusable={true}
-    onClick={[Function]}
-    onResponderGrant={[Function]}
-    onResponderMove={[Function]}
-    onResponderRelease={[Function]}
-    onResponderTerminate={[Function]}
-    onResponderTerminationRequest={[Function]}
-    onStartShouldSetResponder={[Function]}
-    style={
-      {
-        "opacity": 1,
-      }
-    }
-  >
-    <View
-      pointerEvents="none"
-    >
-      <View
-        pointerEvents="auto"
-        style={
-          [
-            {
-              "marginTop": 8,
-              "width": "100%",
-            },
-            undefined,
-          ]
-        }
-      >
-        <View
-          style={
-            [
-              {
-                "alignItems": "center",
-                "backgroundColor": "#ffffff",
-                "borderRadius": 8,
-                "flexDirection": "row",
-                "padding": 16,
-              },
-              undefined,
-            ]
-          }
-        >
-          <View
-            style={
-              [
-                {
-                  "borderColor": "#001f23",
-                  "borderRadius": 8,
-                  "borderWidth": 1,
-                  "bottom": 0,
-                  "left": 0,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
-                },
-                [
-                  {
-                    "backgroundColor": "#ffffff",
-                  },
-                  undefined,
-                ],
-              ]
-            }
-            testID="text-input-border"
-            themeFocused={false}
-            themeState="filled"
-          />
-          <View
-            pointerEvents="none"
-            style={
-              [
-                {
-                  "backgroundColor": "#ffffff",
-                  "flexDirection": "row",
-                  "left": 16,
-                  "paddingHorizontal": 4,
-                  "position": "absolute",
-                  "top": -4,
-                  "zIndex": 1,
-                },
-                {
-                  "backgroundColor": "#ffffff",
-                },
-              ]
-            }
-            testID="label-container"
-          >
-            <Text
-              allowFontScaling={false}
-              style={
-                [
-                  {
-                    "color": "#001f23",
-                    "fontFamily": "BeVietnamPro-Regular",
-                    "fontSize": 12,
-                    "letterSpacing": 0.48,
-                    "lineHeight": 16,
-                  },
-                  [
-                    {
-                      "color": "#001f23",
-                      "lineHeight": 12,
-                    },
-                    {
-                      "backgroundColor": "#ffffff",
-                    },
-                  ],
-                ]
-              }
-              testID="input-label"
-              themeFontWeight="regular"
-              themeIntent="body"
-              themeState="filled"
-            >
-              Allow notifications
-            </Text>
-          </View>
-          <View
-            style={
-              [
-                {
-                  "alignItems": "center",
-                  "alignSelf": "stretch",
-                  "flexDirection": "row",
-                  "flexGrow": 2,
-                  "flexShrink": 1,
-                },
-                undefined,
-              ]
-            }
-          >
-            <TextInput
-              accessibilityState={
-                {
-                  "disabled": false,
-                }
-              }
-              allowFontScaling={false}
-              editable={true}
-              multiline={true}
-              onBlur={[Function]}
-              onChangeText={[Function]}
-              onFocus={[Function]}
-              placeholder=" "
-              pointerEvents="none"
-              style={
-                [
-                  {
-                    "alignSelf": "stretch",
-                    "flexGrow": 2,
-                    "fontFamily": "BeVietnamPro-Regular",
-                    "fontSize": 16,
-                    "height": undefined,
-                    "marginHorizontal": 8,
-                    "maxHeight": 144,
-                    "paddingVertical": 0,
-                    "textAlignVertical": "center",
-                  },
-                  {
-                    "backgroundColor": "#ffffff",
-                    "color": "#001f23",
-                  },
-                ]
-              }
-              testID="text-input"
-              themeVariant="text"
-              value="Monday"
-            />
-          </View>
-          <HeroIcon
-            name="arrow-down"
-            style={
-              [
-                {
-                  "color": "#001f23",
-                  "fontSize": 24,
-                },
-                undefined,
-              ]
-            }
-            testID="input-suffix"
-            themeIntent="text"
-            themeSize="medium"
-          />
-        </View>
-        <View
-          style={
-            [
-              {
-                "minHeight": 16,
-                "paddingLeft": 16,
-                "paddingTop": 2,
-              },
-              undefined,
-            ]
-          }
-        >
-          <View
-            style={
-              [
-                {
-                  "flexDirection": "row",
-                  "justifyContent": "space-between",
-                },
-                undefined,
-              ]
-            }
-          />
-        </View>
-      </View>
-    </View>
-  </View>
-</View>
-`;
-
-exports[`rendering renders correctly when bottom sheet is visible 1`] = `
 [
   <View
     pointerEvents="auto"
   >
     <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}
@@ -1785,99 +1643,337 @@ exports[`rendering renders correctly when bottom sheet is visible 1`] = `
       </View>
     </View>
   </View>,
-  <View
-    collapsable={false}
-    style={
-      {
-        "backgroundColor": "transparent",
-        "bottom": 0,
-        "left": 0,
-        "opacity": 0.4,
-        "position": "absolute",
-        "right": 0,
-        "top": 0,
-      }
-    }
+  <Modal
+    hardwareAccelerated={false}
+    onRequestClose={[Function]}
+    transparent={true}
+    visible={false}
   />,
+]
+`;
+
+exports[`rendering renders correctly when bottom sheet is visible 1`] = `
+[
   <View
-    collapsable={false}
-    style={
-      {
-        "bottom": 0,
-        "left": 0,
-        "opacity": 1,
-        "position": "absolute",
-        "right": 0,
-        "top": 0,
-        "transform": [
-          {
-            "translateY": 0,
-          },
-        ],
-      }
-    }
+    pointerEvents="auto"
   >
     <View
-      pointerEvents="box-none"
+      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={
-        [
-          {
-            "bottom": 0,
-            "flexDirection": "column-reverse",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-          },
-          undefined,
-        ]
+        {
+          "opacity": 1,
+        }
       }
     >
       <View
-        onLayout={[Function]}
-        style={
-          [
+        pointerEvents="none"
+      >
+        <View
+          pointerEvents="auto"
+          style={
             [
               {
-                "flex": 1,
-                "flexDirection": "column-reverse",
+                "marginTop": 8,
+                "width": "100%",
               },
               undefined,
-            ],
-            {
-              "paddingBottom": 0,
-            },
-          ]
-        }
-      >
-        <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.48,
-              "position": "absolute",
-              "right": 0,
+            ]
+          }
+        >
+          <View
+            style={
+              [
+                {
+                  "alignItems": "center",
+                  "backgroundColor": "#ffffff",
+                  "borderRadius": 8,
+                  "flexDirection": "row",
+                  "padding": 16,
+                },
+                undefined,
+              ]
+            }
+          >
+            <View
+              style={
+                [
+                  {
+                    "borderColor": "#001f23",
+                    "borderRadius": 8,
+                    "borderWidth": 1,
+                    "bottom": 0,
+                    "left": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  },
+                  [
+                    {
+                      "backgroundColor": "#ffffff",
+                    },
+                    undefined,
+                  ],
+                ]
+              }
+              testID="text-input-border"
+              themeFocused={false}
+              themeState="filled"
+            />
+            <View
+              pointerEvents="none"
+              style={
+                [
+                  {
+                    "backgroundColor": "#ffffff",
+                    "flexDirection": "row",
+                    "left": 16,
+                    "paddingHorizontal": 4,
+                    "position": "absolute",
+                    "top": -4,
+                    "zIndex": 1,
+                  },
+                  {
+                    "backgroundColor": "#ffffff",
+                  },
+                ]
+              }
+              testID="label-container"
+            >
+              <Text
+                allowFontScaling={false}
+                style={
+                  [
+                    {
+                      "color": "#001f23",
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 12,
+                      "letterSpacing": 0.48,
+                      "lineHeight": 16,
+                    },
+                    [
+                      {
+                        "color": "#001f23",
+                        "lineHeight": 12,
+                      },
+                      {
+                        "backgroundColor": "#ffffff",
+                      },
+                    ],
+                  ]
+                }
+                testID="input-label"
+                themeFontWeight="regular"
+                themeIntent="body"
+                themeState="filled"
+              >
+                Allow notifications
+              </Text>
+            </View>
+            <View
+              style={
+                [
+                  {
+                    "alignItems": "center",
+                    "alignSelf": "stretch",
+                    "flexDirection": "row",
+                    "flexGrow": 2,
+                    "flexShrink": 1,
+                  },
+                  undefined,
+                ]
+              }
+            >
+              <TextInput
+                accessibilityState={
+                  {
+                    "disabled": false,
+                  }
+                }
+                allowFontScaling={false}
+                editable={true}
+                multiline={true}
+                onBlur={[Function]}
+                onChangeText={[Function]}
+                onFocus={[Function]}
+                placeholder=" "
+                pointerEvents="none"
+                style={
+                  [
+                    {
+                      "alignSelf": "stretch",
+                      "flexGrow": 2,
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 16,
+                      "height": undefined,
+                      "marginHorizontal": 8,
+                      "maxHeight": 144,
+                      "paddingVertical": 0,
+                      "textAlignVertical": "center",
+                    },
+                    {
+                      "backgroundColor": "#ffffff",
+                      "color": "#001f23",
+                    },
+                  ]
+                }
+                testID="text-input"
+                themeVariant="text"
+                value="Monday"
+              />
+            </View>
+            <HeroIcon
+              name="arrow-down"
+              style={
+                [
+                  {
+                    "color": "#001f23",
+                    "fontSize": 24,
+                  },
+                  undefined,
+                ]
+              }
+              testID="input-suffix"
+              themeIntent="text"
+              themeSize="medium"
+            />
+          </View>
+          <View
+            style={
+              [
+                {
+                  "minHeight": 16,
+                  "paddingLeft": 16,
+                  "paddingTop": 2,
+                },
+                undefined,
+              ]
+            }
+          >
+            <View
+              style={
+                [
+                  {
+                    "flexDirection": "row",
+                    "justifyContent": "space-between",
+                  },
+                  undefined,
+                ]
+              }
+            />
+          </View>
+        </View>
+      </View>
+    </View>
+  </View>,
+  <Modal
+    hardwareAccelerated={false}
+    onRequestClose={[Function]}
+    transparent={true}
+    visible={true}
+  >
+    <View
+      pointerEvents="box-none"
+      style={
+        [
+          {
+            "bottom": 0,
+            "flexDirection": "column-reverse",
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        onLayout={[Function]}
+        style={
+          [
+            [
+              {
+                "flex": 1,
+                "flexDirection": "column-reverse",
+              },
+              undefined,
+            ],
+            {
+              "paddingBottom": 0,
+            },
+          ]
+        }
+      >
+        <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}
+          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.48,
+              "position": "absolute",
+              "right": 0,
               "top": 0,
             }
           }
         />
         <RCTSafeAreaView
           collapsable={false}
-          emulateUnlessSupported={true}
           style={
             {
               "backgroundColor": "#ffffff",
@@ -1964,6 +2060,23 @@ exports[`rendering renders correctly when bottom sheet is visible 1`] = `
               }
             >
               <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}
@@ -2074,10 +2187,12 @@ exports[`rendering renders correctly when bottom sheet is visible 1`] = `
           >
             <View>
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               />
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               >
@@ -2141,6 +2256,14 @@ exports[`rendering renders correctly when bottom sheet is visible 1`] = `
                         "disabled": false,
                       }
                     }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
                     accessible={true}
                     focusable={true}
                     onClick={[Function]}
@@ -2258,6 +2381,7 @@ exports[`rendering renders correctly when bottom sheet is visible 1`] = `
                 </View>
               </View>
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               >
@@ -2268,6 +2392,14 @@ exports[`rendering renders correctly when bottom sheet is visible 1`] = `
                         "disabled": false,
                       }
                     }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
                     accessible={true}
                     focusable={true}
                     onClick={[Function]}
@@ -2385,6 +2517,7 @@ exports[`rendering renders correctly when bottom sheet is visible 1`] = `
                 </View>
               </View>
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               >
@@ -2395,6 +2528,14 @@ exports[`rendering renders correctly when bottom sheet is visible 1`] = `
                         "disabled": false,
                       }
                     }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
                     accessible={true}
                     focusable={true}
                     onClick={[Function]}
@@ -2512,6 +2653,7 @@ exports[`rendering renders correctly when bottom sheet is visible 1`] = `
                 </View>
               </View>
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               >
@@ -2522,6 +2664,14 @@ exports[`rendering renders correctly when bottom sheet is visible 1`] = `
                         "disabled": false,
                       }
                     }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
                     accessible={true}
                     focusable={true}
                     onClick={[Function]}
@@ -2639,6 +2789,7 @@ exports[`rendering renders correctly when bottom sheet is visible 1`] = `
                 </View>
               </View>
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               >
@@ -2649,6 +2800,14 @@ exports[`rendering renders correctly when bottom sheet is visible 1`] = `
                         "disabled": false,
                       }
                     }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
                     accessible={true}
                     focusable={true}
                     onClick={[Function]}
@@ -2766,6 +2925,7 @@ exports[`rendering renders correctly when bottom sheet is visible 1`] = `
                 </View>
               </View>
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               >
@@ -2776,6 +2936,14 @@ exports[`rendering renders correctly when bottom sheet is visible 1`] = `
                         "disabled": false,
                       }
                     }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
                     accessible={true}
                     focusable={true}
                     onClick={[Function]}
@@ -2894,6 +3062,7 @@ exports[`rendering renders correctly when bottom sheet is visible 1`] = `
                 </View>
               </View>
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               >
@@ -2904,6 +3073,14 @@ exports[`rendering renders correctly when bottom sheet is visible 1`] = `
                         "disabled": true,
                       }
                     }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
                     accessible={true}
                     focusable={true}
                     onClick={[Function]}
@@ -3016,6 +3193,7 @@ exports[`rendering renders correctly when bottom sheet is visible 1`] = `
                 </View>
               </View>
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               />
@@ -3024,55 +3202,59 @@ exports[`rendering renders correctly when bottom sheet is visible 1`] = `
         </RCTSafeAreaView>
       </View>
     </View>
-  </View>,
+  </Modal>,
 ]
 `;
 
 exports[`rendering renders correctly when input is loading 1`] = `
-<View
-  pointerEvents="none"
->
+[
   <View
-    accessible={true}
-    collapsable={false}
-    focusable={true}
-    onClick={[Function]}
-    onResponderGrant={[Function]}
-    onResponderMove={[Function]}
-    onResponderRelease={[Function]}
-    onResponderTerminate={[Function]}
-    onResponderTerminationRequest={[Function]}
-    onStartShouldSetResponder={[Function]}
-    style={
-      {
-        "opacity": 1,
+    pointerEvents="none"
+  >
+    <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,
+        }
       }
-    }
-  >
-    <View
-      pointerEvents="none"
     >
       <View
         pointerEvents="none"
-        style={
-          [
-            {
-              "marginTop": 8,
-              "width": "100%",
-            },
-            undefined,
-          ]
-        }
       >
         <View
+          pointerEvents="none"
           style={
             [
               {
-                "alignItems": "center",
-                "backgroundColor": "#ffffff",
-                "borderRadius": 8,
-                "flexDirection": "row",
-                "padding": 16,
+                "marginTop": 8,
+                "width": "100%",
               },
               undefined,
             ]
@@ -3082,186 +3264,207 @@ exports[`rendering renders correctly when input is loading 1`] = `
             style={
               [
                 {
-                  "borderColor": "#808f91",
-                  "borderRadius": 8,
-                  "borderWidth": 1,
-                  "bottom": 0,
-                  "left": 0,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
-                },
-                [
-                  {
-                    "backgroundColor": "#ffffff",
-                  },
-                  undefined,
-                ],
-              ]
-            }
-            testID="text-input-border"
-            themeFocused={false}
-            themeState="readonly"
-          />
-          <View
-            pointerEvents="none"
-            style={
-              [
-                {
+                  "alignItems": "center",
                   "backgroundColor": "#ffffff",
+                  "borderRadius": 8,
                   "flexDirection": "row",
-                  "left": 16,
-                  "paddingHorizontal": 4,
-                  "position": "absolute",
-                  "top": -4,
-                  "zIndex": 1,
-                },
-                {
-                  "backgroundColor": "#ffffff",
+                  "padding": 16,
                 },
+                undefined,
               ]
             }
-            testID="label-container"
           >
-            <Text
-              allowFontScaling={false}
+            <View
               style={
                 [
                   {
-                    "color": "#001f23",
-                    "fontFamily": "BeVietnamPro-Regular",
-                    "fontSize": 12,
-                    "letterSpacing": 0.48,
-                    "lineHeight": 16,
+                    "borderColor": "#808f91",
+                    "borderRadius": 8,
+                    "borderWidth": 1,
+                    "bottom": 0,
+                    "left": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
                   },
                   [
-                    {
-                      "color": "#808f91",
-                      "lineHeight": 12,
-                    },
                     {
                       "backgroundColor": "#ffffff",
                     },
+                    undefined,
                   ],
                 ]
               }
-              testID="input-label"
-              themeFontWeight="regular"
-              themeIntent="body"
+              testID="text-input-border"
+              themeFocused={false}
               themeState="readonly"
-            >
-              Allow notifications
-            </Text>
-          </View>
-          <View
-            style={
-              [
-                {
-                  "alignItems": "center",
-                  "alignSelf": "stretch",
-                  "flexDirection": "row",
-                  "flexGrow": 2,
-                  "flexShrink": 1,
-                },
-                undefined,
-              ]
-            }
-          >
-            <TextInput
-              accessibilityState={
-                {
-                  "disabled": true,
-                }
-              }
-              allowFontScaling={false}
-              editable={true}
-              multiline={true}
-              onBlur={[Function]}
-              onChangeText={[Function]}
-              onFocus={[Function]}
-              placeholder=" "
+            />
+            <View
               pointerEvents="none"
               style={
                 [
                   {
-                    "alignSelf": "stretch",
-                    "flexGrow": 2,
-                    "fontFamily": "BeVietnamPro-Regular",
-                    "fontSize": 16,
-                    "height": undefined,
-                    "marginHorizontal": 8,
-                    "maxHeight": 144,
-                    "paddingVertical": 0,
-                    "textAlignVertical": "center",
+                    "backgroundColor": "#ffffff",
+                    "flexDirection": "row",
+                    "left": 16,
+                    "paddingHorizontal": 4,
+                    "position": "absolute",
+                    "top": -4,
+                    "zIndex": 1,
                   },
                   {
                     "backgroundColor": "#ffffff",
-                    "color": "#001f23",
                   },
                 ]
               }
-              testID="text-input"
-              themeVariant="text"
-              value="Monday"
-            />
-          </View>
-          <View
-            collapsable={false}
-            style={
-              {
-                "transform": [
-                  {
-                    "rotate": "0deg",
-                  },
-                ],
-              }
-            }
-          >
-            <HeroIcon
-              name="loading"
+              testID="label-container"
+            >
+              <Text
+                allowFontScaling={false}
+                style={
+                  [
+                    {
+                      "color": "#001f23",
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 12,
+                      "letterSpacing": 0.48,
+                      "lineHeight": 16,
+                    },
+                    [
+                      {
+                        "color": "#808f91",
+                        "lineHeight": 12,
+                      },
+                      {
+                        "backgroundColor": "#ffffff",
+                      },
+                    ],
+                  ]
+                }
+                testID="input-label"
+                themeFontWeight="regular"
+                themeIntent="body"
+                themeState="readonly"
+              >
+                Allow notifications
+              </Text>
+            </View>
+            <View
               style={
                 [
                   {
-                    "color": "#001f23",
-                    "fontSize": 24,
+                    "alignItems": "center",
+                    "alignSelf": "stretch",
+                    "flexDirection": "row",
+                    "flexGrow": 2,
+                    "flexShrink": 1,
                   },
                   undefined,
                 ]
               }
-              testID="input-suffix"
-              themeIntent="text"
-              themeSize="medium"
-            />
+            >
+              <TextInput
+                accessibilityState={
+                  {
+                    "disabled": true,
+                  }
+                }
+                allowFontScaling={false}
+                editable={true}
+                multiline={true}
+                onBlur={[Function]}
+                onChangeText={[Function]}
+                onFocus={[Function]}
+                placeholder=" "
+                pointerEvents="none"
+                style={
+                  [
+                    {
+                      "alignSelf": "stretch",
+                      "flexGrow": 2,
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 16,
+                      "height": undefined,
+                      "marginHorizontal": 8,
+                      "maxHeight": 144,
+                      "paddingVertical": 0,
+                      "textAlignVertical": "center",
+                    },
+                    {
+                      "backgroundColor": "#ffffff",
+                      "color": "#001f23",
+                    },
+                  ]
+                }
+                testID="text-input"
+                themeVariant="text"
+                value="Monday"
+              />
+            </View>
+            <View
+              collapsable={false}
+              style={
+                {
+                  "transform": [
+                    {
+                      "rotate": "0deg",
+                    },
+                  ],
+                }
+              }
+            >
+              <HeroIcon
+                name="loading"
+                style={
+                  [
+                    {
+                      "color": "#001f23",
+                      "fontSize": 24,
+                    },
+                    undefined,
+                  ]
+                }
+                testID="input-suffix"
+                themeIntent="text"
+                themeSize="medium"
+              />
+            </View>
           </View>
-        </View>
-        <View
-          style={
-            [
-              {
-                "minHeight": 16,
-                "paddingLeft": 16,
-                "paddingTop": 2,
-              },
-              undefined,
-            ]
-          }
-        >
           <View
             style={
               [
                 {
-                  "flexDirection": "row",
-                  "justifyContent": "space-between",
+                  "minHeight": 16,
+                  "paddingLeft": 16,
+                  "paddingTop": 2,
                 },
                 undefined,
               ]
             }
-          />
+          >
+            <View
+              style={
+                [
+                  {
+                    "flexDirection": "row",
+                    "justifyContent": "space-between",
+                  },
+                  undefined,
+                ]
+              }
+            />
+          </View>
         </View>
       </View>
     </View>
-  </View>
-</View>
+  </View>,
+  <Modal
+    hardwareAccelerated={false}
+    onRequestClose={[Function]}
+    transparent={true}
+    visible={false}
+  />,
+]
 `;
 
 exports[`rendering renders correctly when receives sections 1`] = `
@@ -3270,6 +3473,23 @@ exports[`rendering renders correctly when receives sections 1`] = `
     pointerEvents="auto"
   >
     <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}
@@ -3486,37 +3706,11 @@ exports[`rendering renders correctly when receives sections 1`] = `
       </View>
     </View>
   </View>,
-  <View
-    collapsable={false}
-    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,
-          },
-        ],
-      }
-    }
+  <Modal
+    hardwareAccelerated={false}
+    onRequestClose={[Function]}
+    transparent={true}
+    visible={true}
   >
     <View
       pointerEvents="box-none"
@@ -3552,6 +3746,23 @@ exports[`rendering renders correctly when receives sections 1`] = `
         }
       >
         <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}
@@ -3578,7 +3789,6 @@ exports[`rendering renders correctly when receives sections 1`] = `
         />
         <RCTSafeAreaView
           collapsable={false}
-          emulateUnlessSupported={true}
           style={
             {
               "backgroundColor": "#ffffff",
@@ -3665,6 +3875,23 @@ exports[`rendering renders correctly when receives sections 1`] = `
               }
             >
               <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}
@@ -3764,6 +3991,7 @@ exports[`rendering renders correctly when receives sections 1`] = `
           >
             <View>
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               >
@@ -3833,6 +4061,7 @@ exports[`rendering renders correctly when receives sections 1`] = `
                 </View>
               </View>
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               >
@@ -3886,6 +4115,14 @@ exports[`rendering renders correctly when receives sections 1`] = `
                         "disabled": false,
                       }
                     }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
                     accessible={true}
                     focusable={true}
                     onClick={[Function]}
@@ -3987,10 +4224,12 @@ exports[`rendering renders correctly when receives sections 1`] = `
                 </View>
               </View>
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               />
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               >
@@ -4060,6 +4299,7 @@ exports[`rendering renders correctly when receives sections 1`] = `
                 </View>
               </View>
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               >
@@ -4113,6 +4353,14 @@ exports[`rendering renders correctly when receives sections 1`] = `
                         "disabled": false,
                       }
                     }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
                     accessible={true}
                     focusable={true}
                     onClick={[Function]}
@@ -4220,6 +4468,7 @@ exports[`rendering renders correctly when receives sections 1`] = `
                 </View>
               </View>
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               >
@@ -4230,6 +4479,14 @@ exports[`rendering renders correctly when receives sections 1`] = `
                         "disabled": false,
                       }
                     }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
                     accessible={true}
                     focusable={true}
                     onClick={[Function]}
@@ -4331,6 +4588,7 @@ exports[`rendering renders correctly when receives sections 1`] = `
                 </View>
               </View>
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               />
@@ -4339,6 +4597,6 @@ exports[`rendering renders correctly when receives sections 1`] = `
         </RCTSafeAreaView>
       </View>
     </View>
-  </View>,
+  </Modal>,
 ]
 `;