@hero-design/rn 8.42.4 → 8.43.1

package/src/components/Select/MultiSelect/__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}
@@ -223,37 +240,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"
@@ -289,6 +280,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}
@@ -315,7 +323,6 @@ exports[`rendering allows custom renderer 1`] = `
         />
         <RCTSafeAreaView
           collapsable={false}
-          emulateUnlessSupported={true}
           style={
             {
               "backgroundColor": "#ffffff",
@@ -402,6 +409,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}
@@ -504,6 +528,7 @@ exports[`rendering allows custom renderer 1`] = `
           >
             <View>
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               >
@@ -573,6 +598,7 @@ exports[`rendering allows custom renderer 1`] = `
                 </View>
               </View>
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               >
@@ -635,6 +661,14 @@ exports[`rendering allows custom renderer 1`] = `
                         "disabled": false,
                       }
                     }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
                     accessible={true}
                     focusable={true}
                     onClick={[Function]}
@@ -772,6 +806,7 @@ exports[`rendering allows custom renderer 1`] = `
                 </View>
               </View>
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               >
@@ -782,6 +817,14 @@ exports[`rendering allows custom renderer 1`] = `
                         "disabled": false,
                       }
                     }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
                     accessible={true}
                     focusable={true}
                     onClick={[Function]}
@@ -912,10 +955,12 @@ exports[`rendering allows custom renderer 1`] = `
                 </View>
               </View>
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               />
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               >
@@ -985,6 +1030,7 @@ exports[`rendering allows custom renderer 1`] = `
                 </View>
               </View>
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               >
@@ -1047,6 +1093,14 @@ exports[`rendering allows custom renderer 1`] = `
                         "disabled": false,
                       }
                     }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
                     accessible={true}
                     focusable={true}
                     onClick={[Function]}
@@ -1184,6 +1238,7 @@ exports[`rendering allows custom renderer 1`] = `
                 </View>
               </View>
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               >
@@ -1194,6 +1249,14 @@ exports[`rendering allows custom renderer 1`] = `
                         "disabled": false,
                       }
                     }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
                     accessible={true}
                     focusable={true}
                     onClick={[Function]}
@@ -1324,6 +1387,7 @@ exports[`rendering allows custom renderer 1`] = `
                 </View>
               </View>
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               />
@@ -1350,6 +1414,14 @@ exports[`rendering allows custom renderer 1`] = `
                     "disabled": false,
                   }
                 }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
                 accessible={true}
                 focusable={true}
                 onClick={[Function]}
@@ -1367,6 +1439,7 @@ exports[`rendering allows custom renderer 1`] = `
                       "borderRadius": 4,
                       "borderWidth": 0,
                       "flexDirection": "row",
+                      "height": 60,
                       "justifyContent": "center",
                       "padding": 12,
                     },
@@ -1412,55 +1485,59 @@ 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,
-      }
-    }
+    pointerEvents="auto"
   >
     <View
-      pointerEvents="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={
+        {
+          "opacity": 1,
+        }
+      }
     >
       <View
-        pointerEvents="auto"
-        style={
-          [
-            {
-              "marginTop": 8,
-              "width": "100%",
-            },
-            undefined,
-          ]
-        }
+        pointerEvents="none"
       >
         <View
+          pointerEvents="auto"
           style={
             [
               {
-                "alignItems": "center",
-                "backgroundColor": "#ffffff",
-                "borderRadius": 8,
-                "flexDirection": "row",
-                "padding": 16,
+                "marginTop": 8,
+                "width": "100%",
               },
               undefined,
             ]
@@ -1470,173 +1547,194 @@ exports[`rendering renders correctly when bottom sheet is NOT visible 1`] = `
             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={
-              [
-                {
+                  "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": "#001f23",
+                    "borderRadius": 8,
+                    "borderWidth": 1,
+                    "bottom": 0,
+                    "left": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
                   },
                   [
-                    {
-                      "color": "#001f23",
-                      "lineHeight": 12,
-                    },
                     {
                       "backgroundColor": "#ffffff",
                     },
+                    undefined,
                   ],
                 ]
               }
-              testID="input-label"
-              themeFontWeight="regular"
-              themeIntent="body"
+              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"
             >
-              Allow notifications
-            </Text>
-          </View>
-          <View
-            style={
-              [
-                {
-                  "alignItems": "center",
-                  "alignSelf": "stretch",
-                  "flexDirection": "row",
-                  "flexGrow": 2,
-                  "flexShrink": 1,
-                },
-                undefined,
-              ]
-            }
-          >
-            <TextInput
-              accessibilityState={
-                {
-                  "disabled": false,
+              <Text
+                allowFontScaling={false}
+                style={
+                  [
+                    {
+                      "color": "#001f23",
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 12,
+                      "letterSpacing": 0.48,
+                      "lineHeight": 16,
+                    },
+                    [
+                      {
+                        "color": "#001f23",
+                        "lineHeight": 12,
+                      },
+                      {
+                        "backgroundColor": "#ffffff",
+                      },
+                    ],
+                  ]
                 }
-              }
-              allowFontScaling={false}
-              editable={true}
-              multiline={true}
-              onBlur={[Function]}
-              onChangeText={[Function]}
-              onFocus={[Function]}
-              placeholder=" "
-              pointerEvents="none"
+                testID="input-label"
+                themeFontWeight="regular"
+                themeIntent="body"
+                themeState="filled"
+              >
+                Allow notifications
+              </Text>
+            </View>
+            <View
               style={
                 [
                   {
+                    "alignItems": "center",
                     "alignSelf": "stretch",
+                    "flexDirection": "row",
                     "flexGrow": 2,
-                    "fontFamily": "BeVietnamPro-Regular",
-                    "fontSize": 16,
-                    "height": undefined,
-                    "marginHorizontal": 8,
-                    "maxHeight": 144,
-                    "paddingVertical": 0,
-                    "textAlignVertical": "center",
+                    "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, Tuesday"
+              />
+            </View>
+            <HeroIcon
+              name="arrow-down"
+              style={
+                [
                   {
-                    "backgroundColor": "#ffffff",
                     "color": "#001f23",
+                    "fontSize": 24,
                   },
+                  undefined,
                 ]
               }
-              testID="text-input"
-              themeVariant="text"
-              value="Monday, Tuesday"
+              testID="input-suffix"
+              themeIntent="text"
+              themeSize="medium"
             />
           </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",
+                  "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 bottom sheet is visible 1`] = `
@@ -1645,6 +1743,23 @@ exports[`rendering renders correctly when bottom sheet is visible 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}
@@ -1861,37 +1976,11 @@ 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,
-      }
-    }
-  />,
-  <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"
@@ -1927,6 +2016,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}
@@ -1953,7 +2059,6 @@ exports[`rendering renders correctly when bottom sheet is visible 1`] = `
         />
         <RCTSafeAreaView
           collapsable={false}
-          emulateUnlessSupported={true}
           style={
             {
               "backgroundColor": "#ffffff",
@@ -2040,6 +2145,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}
@@ -2145,10 +2267,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}
               >
@@ -2212,6 +2336,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]}
@@ -2357,6 +2489,7 @@ exports[`rendering renders correctly when bottom sheet is visible 1`] = `
                 </View>
               </View>
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               >
@@ -2367,6 +2500,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]}
@@ -2893,6 +3061,7 @@ exports[`rendering renders correctly when bottom sheet is visible 1`] = `
                 </View>
               </View>
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               >
@@ -2903,6 +3072,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]}
@@ -3021,6 +3198,7 @@ exports[`rendering renders correctly when bottom sheet is visible 1`] = `
                 </View>
               </View>
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               >
@@ -3031,6 +3209,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]}
@@ -3143,6 +3329,7 @@ exports[`rendering renders correctly when bottom sheet is visible 1`] = `
                 </View>
               </View>
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               />
@@ -3169,6 +3356,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]}
@@ -3186,6 +3381,7 @@ exports[`rendering renders correctly when bottom sheet is visible 1`] = `
                       "borderRadius": 4,
                       "borderWidth": 0,
                       "flexDirection": "row",
+                      "height": 60,
                       "justifyContent": "center",
                       "padding": 12,
                     },
@@ -3231,55 +3427,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
-      pointerEvents="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={
+        {
+          "opacity": 1,
+        }
+      }
     >
       <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,
             ]
@@ -3289,186 +3489,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, Tuesday"
-            />
-          </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, Tuesday"
+              />
+            </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`] = `
@@ -3477,6 +3698,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}
@@ -3693,37 +3931,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"
@@ -3759,6 +3971,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}
@@ -3785,7 +4014,6 @@ exports[`rendering renders correctly when receives sections 1`] = `
         />
         <RCTSafeAreaView
           collapsable={false}
-          emulateUnlessSupported={true}
           style={
             {
               "backgroundColor": "#ffffff",
@@ -3872,6 +4100,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}
@@ -3966,6 +4211,7 @@ exports[`rendering renders correctly when receives sections 1`] = `
           >
             <View>
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               >
@@ -4035,6 +4281,7 @@ exports[`rendering renders correctly when receives sections 1`] = `
                 </View>
               </View>
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               >
@@ -4088,6 +4335,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]}
@@ -4189,10 +4444,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}
               >
@@ -4262,6 +4519,7 @@ exports[`rendering renders correctly when receives sections 1`] = `
                 </View>
               </View>
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               >
@@ -4315,6 +4573,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]}
@@ -4450,6 +4716,7 @@ exports[`rendering renders correctly when receives sections 1`] = `
                 </View>
               </View>
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               >
@@ -4460,6 +4727,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]}
@@ -4589,6 +4864,7 @@ exports[`rendering renders correctly when receives sections 1`] = `
                 </View>
               </View>
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               />
@@ -4615,6 +4891,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]}
@@ -4632,6 +4916,7 @@ exports[`rendering renders correctly when receives sections 1`] = `
                       "borderRadius": 4,
                       "borderWidth": 0,
                       "flexDirection": "row",
+                      "height": 60,
                       "justifyContent": "center",
                       "padding": 12,
                     },
@@ -4677,7 +4962,7 @@ exports[`rendering renders correctly when receives sections 1`] = `
         </RCTSafeAreaView>
       </View>
     </View>
-  </View>,
+  </Modal>,
 ]
 `;
 
@@ -4687,6 +4972,23 @@ exports[`rendering renders correctly when receives sections 2`] = `
     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}
@@ -4903,37 +5205,11 @@ exports[`rendering renders correctly when receives sections 2`] = `
       </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"
@@ -4969,6 +5245,23 @@ exports[`rendering renders correctly when receives sections 2`] = `
         }
       >
         <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}
@@ -4995,7 +5288,6 @@ exports[`rendering renders correctly when receives sections 2`] = `
         />
         <RCTSafeAreaView
           collapsable={false}
-          emulateUnlessSupported={true}
           style={
             {
               "backgroundColor": "#ffffff",
@@ -5082,6 +5374,23 @@ exports[`rendering renders correctly when receives sections 2`] = `
               }
             >
               <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}
@@ -5176,6 +5485,7 @@ exports[`rendering renders correctly when receives sections 2`] = `
           >
             <View>
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               >
@@ -5245,6 +5555,7 @@ exports[`rendering renders correctly when receives sections 2`] = `
                 </View>
               </View>
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               >
@@ -5298,6 +5609,14 @@ exports[`rendering renders correctly when receives sections 2`] = `
                         "disabled": false,
                       }
                     }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
                     accessible={true}
                     focusable={true}
                     onClick={[Function]}
@@ -5427,10 +5746,12 @@ exports[`rendering renders correctly when receives sections 2`] = `
                 </View>
               </View>
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               />
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               >
@@ -5500,6 +5821,7 @@ exports[`rendering renders correctly when receives sections 2`] = `
                 </View>
               </View>
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               >
@@ -5553,6 +5875,14 @@ exports[`rendering renders correctly when receives sections 2`] = `
                         "disabled": false,
                       }
                     }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
                     accessible={true}
                     focusable={true}
                     onClick={[Function]}
@@ -5660,6 +5990,7 @@ exports[`rendering renders correctly when receives sections 2`] = `
                 </View>
               </View>
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               >
@@ -5670,6 +6001,14 @@ exports[`rendering renders correctly when receives sections 2`] = `
                         "disabled": false,
                       }
                     }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
                     accessible={true}
                     focusable={true}
                     onClick={[Function]}
@@ -5771,6 +6110,7 @@ exports[`rendering renders correctly when receives sections 2`] = `
                 </View>
               </View>
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               />
@@ -5797,6 +6137,14 @@ exports[`rendering renders correctly when receives sections 2`] = `
                     "disabled": false,
                   }
                 }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
                 accessible={true}
                 focusable={true}
                 onClick={[Function]}
@@ -5814,6 +6162,7 @@ exports[`rendering renders correctly when receives sections 2`] = `
                       "borderRadius": 4,
                       "borderWidth": 0,
                       "flexDirection": "row",
+                      "height": 60,
                       "justifyContent": "center",
                       "padding": 12,
                     },
@@ -5859,6 +6208,6 @@ exports[`rendering renders correctly when receives sections 2`] = `
         </RCTSafeAreaView>
       </View>
     </View>
-  </View>,
+  </Modal>,
 ]
 `;