@hero-design/rn 9.0.0-0 → 9.0.0-alpha.0

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

@@ -1,11 +1,34 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`rendering allows custom renderer 1`] = `
-Array [
+<View
+  style={
+    {
+      "flex": 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}
@@ -17,7 +40,7 @@ Array [
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
       style={
-        Object {
+        {
           "opacity": 1,
         }
       }
@@ -28,8 +51,8 @@ Array [
         <View
           pointerEvents="auto"
           style={
-            Array [
-              Object {
+            [
+              {
                 "marginTop": 8,
                 "width": "100%",
               },
@@ -38,9 +61,10 @@ Array [
           }
         >
           <View
+            onLayout={[Function]}
             style={
-              Array [
-                Object {
+              [
+                {
                   "alignItems": "center",
                   "backgroundColor": "#ffffff",
                   "borderRadius": 8,
@@ -53,8 +77,8 @@ Array [
           >
             <View
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "borderColor": "#001f23",
                     "borderRadius": 8,
                     "borderWidth": 1,
@@ -64,8 +88,8 @@ Array [
                     "right": 0,
                     "top": 0,
                   },
-                  Array [
-                    Object {
+                  [
+                    {
                       "backgroundColor": "#ffffff",
                     },
                     undefined,
@@ -76,10 +100,76 @@ Array [
               themeFocused={false}
               themeState="default"
             />
+            <View
+              onLayout={[Function]}
+            />
+            <View
+              collapsable={false}
+              pointerEvents="none"
+              style={
+                {
+                  "alignItems": "center",
+                  "flexDirection": "row",
+                  "justifyContent": "center",
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": -10.666666666666666,
+                  "transform": [
+                    {
+                      "translateY": 0,
+                    },
+                    {
+                      "translateX": 24,
+                    },
+                    {
+                      "scale": 1,
+                    },
+                  ],
+                  "zIndex": 1,
+                }
+              }
+              themeVariant="text"
+            >
+              <Text
+                allowFontScaling={false}
+                onLayout={[Function]}
+                style={
+                  [
+                    {
+                      "color": "#001f23",
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 16,
+                      "letterSpacing": 0.48,
+                      "lineHeight": 24,
+                    },
+                    [
+                      {
+                        "alignContent": "center",
+                        "alignItems": "center",
+                        "color": "#001f23",
+                        "marginTop": -2,
+                        "textAlignVertical": "center",
+                      },
+                      {
+                        "backgroundColor": "#ffffff",
+                      },
+                    ],
+                  ]
+                }
+                testID="input-label"
+                themeIntent="body"
+                themeState="default"
+                themeTypeface="neutral"
+                themeVariant="regular"
+              >
+                Choose collaborators
+              </Text>
+            </View>
             <View
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "alignItems": "center",
                     "alignSelf": "stretch",
                     "flexDirection": "row",
@@ -90,62 +180,9 @@ Array [
                 ]
               }
             >
-              <View
-                pointerEvents="none"
-                style={
-                  Array [
-                    Object {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "flexDirection": "row",
-                      "left": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 0,
-                      "zIndex": 9999,
-                    },
-                    undefined,
-                  ]
-                }
-                themeVariant="text"
-              >
-                <Text
-                  allowFontScaling={false}
-                  style={
-                    Array [
-                      Object {
-                        "color": "#001f23",
-                        "fontFamily": "BeVietnamPro-Regular",
-                        "fontSize": 14,
-                        "letterSpacing": 0.42,
-                        "lineHeight": 22,
-                      },
-                      Array [
-                        Object {
-                          "alignContent": "center",
-                          "alignItems": "center",
-                          "color": "#001f23",
-                          "fontSize": 16,
-                          "marginTop": -2,
-                          "textAlignVertical": "center",
-                        },
-                        undefined,
-                      ],
-                    ]
-                  }
-                  testID="input-label"
-                  themeFontSize="medium"
-                  themeFontWeight="regular"
-                  themeIntent="body"
-                  themeState="default"
-                  themeTypeface="neutral"
-                >
-                  Choose collaborators
-                </Text>
-              </View>
               <TextInput
                 accessibilityState={
-                  Object {
+                  {
                     "disabled": false,
                   }
                 }
@@ -158,8 +195,8 @@ Array [
                 placeholder=" "
                 pointerEvents="none"
                 style={
-                  Array [
-                    Object {
+                  [
+                    {
                       "alignSelf": "stretch",
                       "flexGrow": 2,
                       "fontFamily": "BeVietnamPro-Regular",
@@ -170,7 +207,7 @@ Array [
                       "paddingVertical": 0,
                       "textAlignVertical": "center",
                     },
-                    Object {
+                    {
                       "backgroundColor": "#ffffff",
                       "color": "#001f23",
                     },
@@ -183,8 +220,8 @@ Array [
             <HeroIcon
               name="arrow-down"
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "color": "#001f23",
                     "fontSize": 24,
                   },
@@ -198,10 +235,11 @@ Array [
           </View>
           <View
             style={
-              Array [
-                Object {
+              [
+                {
                   "minHeight": 16,
-                  "paddingLeft": 16,
+                  "paddingHorizontal": 16,
+                  "paddingTop": 2,
                 },
                 undefined,
               ]
@@ -209,8 +247,9 @@ Array [
           >
             <View
               style={
-                Array [
-                  Object {
+                [
+                  {
+                    "alignItems": "flex-start",
                     "flexDirection": "row",
                     "justifyContent": "space-between",
                   },
@@ -222,7 +261,7 @@ Array [
         </View>
       </View>
     </View>
-  </View>,
+  </View>
   <Modal
     hardwareAccelerated={false}
     onRequestClose={[Function]}
@@ -232,8 +271,8 @@ Array [
     <View
       pointerEvents="box-none"
       style={
-        Array [
-          Object {
+        [
+          {
             "bottom": 0,
             "flexDirection": "column-reverse",
             "left": 0,
@@ -248,21 +287,38 @@ Array [
       <View
         onLayout={[Function]}
         style={
-          Array [
-            Array [
-              Object {
+          [
+            [
+              {
                 "flex": 1,
                 "flexDirection": "column-reverse",
               },
               undefined,
             ],
-            Object {
+            {
               "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}
@@ -276,7 +332,7 @@ Array [
           onResponderTerminationRequest={[Function]}
           onStartShouldSetResponder={[Function]}
           style={
-            Object {
+            {
               "backgroundColor": "#000000",
               "bottom": 0,
               "left": 0,
@@ -289,9 +345,8 @@ Array [
         />
         <RCTSafeAreaView
           collapsable={false}
-          emulateUnlessSupported={true}
           style={
-            Object {
+            {
               "backgroundColor": "#ffffff",
               "borderTopLeftRadius": 16,
               "borderTopRightRadius": 16,
@@ -299,17 +354,17 @@ Array [
               "maxHeight": "94%",
               "paddingBottom": 0,
               "shadowColor": "#001f23",
-              "shadowOffset": Object {
+              "shadowOffset": {
                 "height": 3,
                 "width": 0,
               },
               "shadowOpacity": 0.4,
               "shadowRadius": 16,
-              "transform": Array [
-                Object {
+              "transform": [
+                {
                   "scaleY": 1,
                 },
-                Object {
+                {
                   "translateY": 0,
                 },
               ],
@@ -319,8 +374,8 @@ Array [
         >
           <View
             style={
-              Array [
-                Object {
+              [
+                {
                   "flexDirection": "row",
                   "paddingHorizontal": 16,
                   "paddingVertical": 8,
@@ -331,8 +386,8 @@ Array [
           >
             <View
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "flex": 1,
                     "justifyContent": "center",
                   },
@@ -343,29 +398,28 @@ Array [
               <Text
                 allowFontScaling={false}
                 style={
-                  Array [
-                    Object {
+                  [
+                    {
                       "color": "#001f23",
                       "fontFamily": "BeVietnamPro-SemiBold",
                       "fontSize": 16,
-                      "letterSpacing": 0.48,
+                      "letterSpacing": 0.24,
                       "lineHeight": 24,
                     },
                     undefined,
                   ]
                 }
-                themeFontSize="large"
-                themeFontWeight="semi-bold"
                 themeIntent="body"
                 themeTypeface="neutral"
+                themeVariant="regular-bold"
               >
                 Choose collaborators
               </Text>
             </View>
             <View
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "alignItems": "center",
                     "height": 48,
                     "justifyContent": "center",
@@ -377,6 +431,23 @@ Array [
               }
             >
               <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}
@@ -388,7 +459,7 @@ Array [
                 onResponderTerminationRequest={[Function]}
                 onStartShouldSetResponder={[Function]}
                 style={
-                  Object {
+                  {
                     "opacity": 1,
                   }
                 }
@@ -397,8 +468,8 @@ Array [
                 <HeroIcon
                   name="cancel"
                   style={
-                    Array [
-                      Object {
+                    [
+                      {
                         "color": "#001f23",
                         "fontSize": 16,
                       },
@@ -414,31 +485,31 @@ Array [
           <RCTScrollView
             ListFooterComponent={null}
             data={
-              Array [
-                Object {
+              [
+                {
                   "category": "D",
-                  "data": Array [
-                    Object {
+                  "data": [
+                    {
                       "role": "Senior Developer",
                       "text": "Daniel",
                       "value": "daniel",
                     },
-                    Object {
+                    {
                       "role": "Manager",
                       "text": "Daemon",
                       "value": "daemon",
                     },
                   ],
                 },
-                Object {
+                {
                   "category": "J",
-                  "data": Array [
-                    Object {
+                  "data": [
+                    {
                       "role": "UX Designer",
                       "text": "Jennifer",
                       "value": "jennifer",
                     },
-                    Object {
+                    {
                       "role": "Junior Developer",
                       "text": "Josh ",
                       "value": "josh",
@@ -463,34 +534,35 @@ Array [
             renderItem={[Function]}
             scrollEventThrottle={50}
             stickyHeaderIndices={
-              Array [
+              [
                 0,
                 4,
               ]
             }
             style={
-              Array [
-                Object {
+              [
+                {
                   "paddingHorizontal": 12,
                 },
-                Array [
-                  Object {
+                [
+                  {
                     "paddingBottom": 16,
                   },
-                  Object {},
+                  {},
                 ],
               ]
             }
           >
             <View>
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               >
                 <View
                   style={
-                    Array [
-                      Object {
+                    [
+                      {
                         "alignContent": "center",
                         "backgroundColor": "#f6f6f7",
                         "display": "flex",
@@ -500,16 +572,18 @@ Array [
                         "paddingHorizontal": 16,
                         "paddingVertical": 8,
                       },
-                      Object {
+                      {
                         "marginBottom": 0,
                       },
                     ]
                   }
+                  themeSize="medium"
                 >
                   <View
                     style={
-                      Array [
-                        Object {
+                      [
+                        {
+                          "alignItems": "center",
                           "display": "flex",
                           "flexDirection": "row",
                         },
@@ -519,9 +593,9 @@ Array [
                   >
                     <View
                       style={
-                        Array [
-                          Object {
-                            "marginRight": 8,
+                        [
+                          {
+                            "marginRight": 12,
                           },
                           undefined,
                         ]
@@ -530,21 +604,20 @@ Array [
                     <Text
                       allowFontScaling={false}
                       style={
-                        Array [
-                          Object {
+                        [
+                          {
                             "color": "#001f23",
                             "fontFamily": "BeVietnamPro-Regular",
-                            "fontSize": 16,
+                            "fontSize": 14,
                             "letterSpacing": 0.48,
-                            "lineHeight": 24,
+                            "lineHeight": 22,
                           },
                           undefined,
                         ]
                       }
-                      themeFontSize="large"
-                      themeFontWeight="regular"
                       themeIntent="body"
                       themeTypeface="neutral"
+                      themeVariant="small"
                     >
                       D
                     </Text>
@@ -552,6 +625,7 @@ Array [
                 </View>
               </View>
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               >
@@ -559,15 +633,15 @@ Array [
                   <View
                     highlighted={false}
                     section={
-                      Object {
+                      {
                         "category": "D",
-                        "data": Array [
-                          Object {
+                        "data": [
+                          {
                             "role": "Senior Developer",
                             "text": "Daniel",
                             "value": "daniel",
                           },
-                          Object {
+                          {
                             "role": "Manager",
                             "text": "Daemon",
                             "value": "daemon",
@@ -576,30 +650,30 @@ Array [
                       }
                     }
                     style={
-                      Array [
-                        Object {
+                      [
+                        {
                           "marginTop": 12,
                         },
                         undefined,
                       ]
                     }
                     trailingItem={
-                      Object {
+                      {
                         "role": "Senior Developer",
                         "text": "Daniel",
                         "value": "daniel",
                       }
                     }
                     trailingSection={
-                      Object {
+                      {
                         "category": "J",
-                        "data": Array [
-                          Object {
+                        "data": [
+                          {
                             "role": "UX Designer",
                             "text": "Jennifer",
                             "value": "jennifer",
                           },
-                          Object {
+                          {
                             "role": "Junior Developer",
                             "text": "Josh ",
                             "value": "josh",
@@ -610,10 +684,18 @@ Array [
                   />
                   <View
                     accessibilityState={
-                      Object {
+                      {
                         "disabled": false,
                       }
                     }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
                     accessible={true}
                     focusable={true}
                     onClick={[Function]}
@@ -624,8 +706,8 @@ Array [
                     onResponderTerminationRequest={[Function]}
                     onStartShouldSetResponder={[Function]}
                     style={
-                      Array [
-                        Object {
+                      [
+                        {
                           "alignItems": "center",
                           "backgroundColor": "#ffffff",
                           "borderRadius": 4,
@@ -639,8 +721,8 @@ Array [
                   >
                     <View
                       style={
-                        Array [
-                          Object {
+                        [
+                          {
                             "flex": 1,
                           },
                           undefined,
@@ -650,29 +732,28 @@ Array [
                       <Text
                         allowFontScaling={false}
                         style={
-                          Array [
-                            Object {
+                          [
+                            {
                               "color": "#001f23",
                               "fontFamily": "BeVietnamPro-SemiBold",
                               "fontSize": 16,
-                              "letterSpacing": 0.48,
+                              "letterSpacing": 0.24,
                               "lineHeight": 24,
                             },
                             undefined,
                           ]
                         }
-                        themeFontSize="large"
-                        themeFontWeight="semi-bold"
                         themeIntent="body"
                         themeTypeface="neutral"
+                        themeVariant="regular-bold"
                       >
                         Daniel
                       </Text>
                       <Text
                         allowFontScaling={false}
                         style={
-                          Array [
-                            Object {
+                          [
+                            {
                               "color": "#4d6265",
                               "fontFamily": "BeVietnamPro-Regular",
                               "fontSize": 16,
@@ -682,10 +763,9 @@ Array [
                             undefined,
                           ]
                         }
-                        themeFontSize="large"
-                        themeFontWeight="regular"
                         themeIntent="subdued"
                         themeTypeface="neutral"
+                        themeVariant="regular"
                       >
                         Senior Developer
                       </Text>
@@ -694,22 +774,22 @@ Array [
                   <View
                     highlighted={false}
                     leadingItem={
-                      Object {
+                      {
                         "role": "Senior Developer",
                         "text": "Daniel",
                         "value": "daniel",
                       }
                     }
                     section={
-                      Object {
+                      {
                         "category": "D",
-                        "data": Array [
-                          Object {
+                        "data": [
+                          {
                             "role": "Senior Developer",
                             "text": "Daniel",
                             "value": "daniel",
                           },
-                          Object {
+                          {
                             "role": "Manager",
                             "text": "Daemon",
                             "value": "daemon",
@@ -718,30 +798,30 @@ Array [
                       }
                     }
                     style={
-                      Array [
-                        Object {
+                      [
+                        {
                           "marginTop": 4,
                         },
                         undefined,
                       ]
                     }
                     trailingItem={
-                      Object {
+                      {
                         "role": "Manager",
                         "text": "Daemon",
                         "value": "daemon",
                       }
                     }
                     trailingSection={
-                      Object {
+                      {
                         "category": "J",
-                        "data": Array [
-                          Object {
+                        "data": [
+                          {
                             "role": "UX Designer",
                             "text": "Jennifer",
                             "value": "jennifer",
                           },
-                          Object {
+                          {
                             "role": "Junior Developer",
                             "text": "Josh ",
                             "value": "josh",
@@ -753,16 +833,25 @@ Array [
                 </View>
               </View>
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               >
                 <View>
                   <View
                     accessibilityState={
-                      Object {
+                      {
                         "disabled": false,
                       }
                     }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
                     accessible={true}
                     focusable={true}
                     onClick={[Function]}
@@ -773,8 +862,8 @@ Array [
                     onResponderTerminationRequest={[Function]}
                     onStartShouldSetResponder={[Function]}
                     style={
-                      Array [
-                        Object {
+                      [
+                        {
                           "alignItems": "center",
                           "backgroundColor": "#ffffff",
                           "borderRadius": 4,
@@ -788,8 +877,8 @@ Array [
                   >
                     <View
                       style={
-                        Array [
-                          Object {
+                        [
+                          {
                             "flex": 1,
                           },
                           undefined,
@@ -799,29 +888,28 @@ Array [
                       <Text
                         allowFontScaling={false}
                         style={
-                          Array [
-                            Object {
+                          [
+                            {
                               "color": "#001f23",
                               "fontFamily": "BeVietnamPro-SemiBold",
                               "fontSize": 16,
-                              "letterSpacing": 0.48,
+                              "letterSpacing": 0.24,
                               "lineHeight": 24,
                             },
                             undefined,
                           ]
                         }
-                        themeFontSize="large"
-                        themeFontWeight="semi-bold"
                         themeIntent="body"
                         themeTypeface="neutral"
+                        themeVariant="regular-bold"
                       >
                         Daemon
                       </Text>
                       <Text
                         allowFontScaling={false}
                         style={
-                          Array [
-                            Object {
+                          [
+                            {
                               "color": "#4d6265",
                               "fontFamily": "BeVietnamPro-Regular",
                               "fontSize": 16,
@@ -831,10 +919,9 @@ Array [
                             undefined,
                           ]
                         }
-                        themeFontSize="large"
-                        themeFontWeight="regular"
                         themeIntent="subdued"
                         themeTypeface="neutral"
+                        themeVariant="regular"
                       >
                         Manager
                       </Text>
@@ -843,22 +930,22 @@ Array [
                   <View
                     highlighted={false}
                     leadingItem={
-                      Object {
+                      {
                         "role": "Manager",
                         "text": "Daemon",
                         "value": "daemon",
                       }
                     }
                     section={
-                      Object {
+                      {
                         "category": "D",
-                        "data": Array [
-                          Object {
+                        "data": [
+                          {
                             "role": "Senior Developer",
                             "text": "Daniel",
                             "value": "daniel",
                           },
-                          Object {
+                          {
                             "role": "Manager",
                             "text": "Daemon",
                             "value": "daemon",
@@ -867,23 +954,23 @@ Array [
                       }
                     }
                     style={
-                      Array [
-                        Object {
+                      [
+                        {
                           "marginTop": 12,
                         },
                         undefined,
                       ]
                     }
                     trailingSection={
-                      Object {
+                      {
                         "category": "J",
-                        "data": Array [
-                          Object {
+                        "data": [
+                          {
                             "role": "UX Designer",
                             "text": "Jennifer",
                             "value": "jennifer",
                           },
-                          Object {
+                          {
                             "role": "Junior Developer",
                             "text": "Josh ",
                             "value": "josh",
@@ -895,17 +982,19 @@ Array [
                 </View>
               </View>
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               />
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               >
                 <View
                   style={
-                    Array [
-                      Object {
+                    [
+                      {
                         "alignContent": "center",
                         "backgroundColor": "#f6f6f7",
                         "display": "flex",
@@ -915,16 +1004,18 @@ Array [
                         "paddingHorizontal": 16,
                         "paddingVertical": 8,
                       },
-                      Object {
+                      {
                         "marginBottom": 0,
                       },
                     ]
                   }
+                  themeSize="medium"
                 >
                   <View
                     style={
-                      Array [
-                        Object {
+                      [
+                        {
+                          "alignItems": "center",
                           "display": "flex",
                           "flexDirection": "row",
                         },
@@ -934,9 +1025,9 @@ Array [
                   >
                     <View
                       style={
-                        Array [
-                          Object {
-                            "marginRight": 8,
+                        [
+                          {
+                            "marginRight": 12,
                           },
                           undefined,
                         ]
@@ -945,21 +1036,20 @@ Array [
                     <Text
                       allowFontScaling={false}
                       style={
-                        Array [
-                          Object {
+                        [
+                          {
                             "color": "#001f23",
                             "fontFamily": "BeVietnamPro-Regular",
-                            "fontSize": 16,
+                            "fontSize": 14,
                             "letterSpacing": 0.48,
-                            "lineHeight": 24,
+                            "lineHeight": 22,
                           },
                           undefined,
                         ]
                       }
-                      themeFontSize="large"
-                      themeFontWeight="regular"
                       themeIntent="body"
                       themeTypeface="neutral"
+                      themeVariant="small"
                     >
                       J
                     </Text>
@@ -967,6 +1057,7 @@ Array [
                 </View>
               </View>
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               >
@@ -974,15 +1065,15 @@ Array [
                   <View
                     highlighted={false}
                     leadingSection={
-                      Object {
+                      {
                         "category": "D",
-                        "data": Array [
-                          Object {
+                        "data": [
+                          {
                             "role": "Senior Developer",
                             "text": "Daniel",
                             "value": "daniel",
                           },
-                          Object {
+                          {
                             "role": "Manager",
                             "text": "Daemon",
                             "value": "daemon",
@@ -991,15 +1082,15 @@ Array [
                       }
                     }
                     section={
-                      Object {
+                      {
                         "category": "J",
-                        "data": Array [
-                          Object {
+                        "data": [
+                          {
                             "role": "UX Designer",
                             "text": "Jennifer",
                             "value": "jennifer",
                           },
-                          Object {
+                          {
                             "role": "Junior Developer",
                             "text": "Josh ",
                             "value": "josh",
@@ -1008,15 +1099,15 @@ Array [
                       }
                     }
                     style={
-                      Array [
-                        Object {
+                      [
+                        {
                           "marginTop": 12,
                         },
                         undefined,
                       ]
                     }
                     trailingItem={
-                      Object {
+                      {
                         "role": "UX Designer",
                         "text": "Jennifer",
                         "value": "jennifer",
@@ -1025,10 +1116,18 @@ Array [
                   />
                   <View
                     accessibilityState={
-                      Object {
+                      {
                         "disabled": false,
                       }
                     }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
                     accessible={true}
                     focusable={true}
                     onClick={[Function]}
@@ -1039,8 +1138,8 @@ Array [
                     onResponderTerminationRequest={[Function]}
                     onStartShouldSetResponder={[Function]}
                     style={
-                      Array [
-                        Object {
+                      [
+                        {
                           "alignItems": "center",
                           "backgroundColor": "#ffffff",
                           "borderRadius": 4,
@@ -1054,8 +1153,8 @@ Array [
                   >
                     <View
                       style={
-                        Array [
-                          Object {
+                        [
+                          {
                             "flex": 1,
                           },
                           undefined,
@@ -1065,29 +1164,28 @@ Array [
                       <Text
                         allowFontScaling={false}
                         style={
-                          Array [
-                            Object {
+                          [
+                            {
                               "color": "#001f23",
                               "fontFamily": "BeVietnamPro-SemiBold",
                               "fontSize": 16,
-                              "letterSpacing": 0.48,
+                              "letterSpacing": 0.24,
                               "lineHeight": 24,
                             },
                             undefined,
                           ]
                         }
-                        themeFontSize="large"
-                        themeFontWeight="semi-bold"
                         themeIntent="body"
                         themeTypeface="neutral"
+                        themeVariant="regular-bold"
                       >
                         Jennifer
                       </Text>
                       <Text
                         allowFontScaling={false}
                         style={
-                          Array [
-                            Object {
+                          [
+                            {
                               "color": "#4d6265",
                               "fontFamily": "BeVietnamPro-Regular",
                               "fontSize": 16,
@@ -1097,10 +1195,9 @@ Array [
                             undefined,
                           ]
                         }
-                        themeFontSize="large"
-                        themeFontWeight="regular"
                         themeIntent="subdued"
                         themeTypeface="neutral"
+                        themeVariant="regular"
                       >
                         UX Designer
                       </Text>
@@ -1109,22 +1206,22 @@ Array [
                   <View
                     highlighted={false}
                     leadingItem={
-                      Object {
+                      {
                         "role": "UX Designer",
                         "text": "Jennifer",
                         "value": "jennifer",
                       }
                     }
                     leadingSection={
-                      Object {
+                      {
                         "category": "D",
-                        "data": Array [
-                          Object {
+                        "data": [
+                          {
                             "role": "Senior Developer",
                             "text": "Daniel",
                             "value": "daniel",
                           },
-                          Object {
+                          {
                             "role": "Manager",
                             "text": "Daemon",
                             "value": "daemon",
@@ -1133,15 +1230,15 @@ Array [
                       }
                     }
                     section={
-                      Object {
+                      {
                         "category": "J",
-                        "data": Array [
-                          Object {
+                        "data": [
+                          {
                             "role": "UX Designer",
                             "text": "Jennifer",
                             "value": "jennifer",
                           },
-                          Object {
+                          {
                             "role": "Junior Developer",
                             "text": "Josh ",
                             "value": "josh",
@@ -1150,15 +1247,15 @@ Array [
                       }
                     }
                     style={
-                      Array [
-                        Object {
+                      [
+                        {
                           "marginTop": 4,
                         },
                         undefined,
                       ]
                     }
                     trailingItem={
-                      Object {
+                      {
                         "role": "Junior Developer",
                         "text": "Josh ",
                         "value": "josh",
@@ -1168,16 +1265,25 @@ Array [
                 </View>
               </View>
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               >
                 <View>
                   <View
                     accessibilityState={
-                      Object {
+                      {
                         "disabled": false,
                       }
                     }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
                     accessible={true}
                     focusable={true}
                     onClick={[Function]}
@@ -1188,8 +1294,8 @@ Array [
                     onResponderTerminationRequest={[Function]}
                     onStartShouldSetResponder={[Function]}
                     style={
-                      Array [
-                        Object {
+                      [
+                        {
                           "alignItems": "center",
                           "backgroundColor": "#ffffff",
                           "borderRadius": 4,
@@ -1203,8 +1309,8 @@ Array [
                   >
                     <View
                       style={
-                        Array [
-                          Object {
+                        [
+                          {
                             "flex": 1,
                           },
                           undefined,
@@ -1214,29 +1320,28 @@ Array [
                       <Text
                         allowFontScaling={false}
                         style={
-                          Array [
-                            Object {
+                          [
+                            {
                               "color": "#001f23",
                               "fontFamily": "BeVietnamPro-SemiBold",
                               "fontSize": 16,
-                              "letterSpacing": 0.48,
+                              "letterSpacing": 0.24,
                               "lineHeight": 24,
                             },
                             undefined,
                           ]
                         }
-                        themeFontSize="large"
-                        themeFontWeight="semi-bold"
                         themeIntent="body"
                         themeTypeface="neutral"
+                        themeVariant="regular-bold"
                       >
                         Josh 
                       </Text>
                       <Text
                         allowFontScaling={false}
                         style={
-                          Array [
-                            Object {
+                          [
+                            {
                               "color": "#4d6265",
                               "fontFamily": "BeVietnamPro-Regular",
                               "fontSize": 16,
@@ -1246,10 +1351,9 @@ Array [
                             undefined,
                           ]
                         }
-                        themeFontSize="large"
-                        themeFontWeight="regular"
                         themeIntent="subdued"
                         themeTypeface="neutral"
+                        themeVariant="regular"
                       >
                         Junior Developer
                       </Text>
@@ -1258,22 +1362,22 @@ Array [
                   <View
                     highlighted={false}
                     leadingItem={
-                      Object {
+                      {
                         "role": "Junior Developer",
                         "text": "Josh ",
                         "value": "josh",
                       }
                     }
                     leadingSection={
-                      Object {
+                      {
                         "category": "D",
-                        "data": Array [
-                          Object {
+                        "data": [
+                          {
                             "role": "Senior Developer",
                             "text": "Daniel",
                             "value": "daniel",
                           },
-                          Object {
+                          {
                             "role": "Manager",
                             "text": "Daemon",
                             "value": "daemon",
@@ -1282,15 +1386,15 @@ Array [
                       }
                     }
                     section={
-                      Object {
+                      {
                         "category": "J",
-                        "data": Array [
-                          Object {
+                        "data": [
+                          {
                             "role": "UX Designer",
                             "text": "Jennifer",
                             "value": "jennifer",
                           },
-                          Object {
+                          {
                             "role": "Junior Developer",
                             "text": "Josh ",
                             "value": "josh",
@@ -1299,8 +1403,8 @@ Array [
                       }
                     }
                     style={
-                      Array [
-                        Object {
+                      [
+                        {
                           "marginTop": 12,
                         },
                         undefined,
@@ -1310,6 +1414,7 @@ Array [
                 </View>
               </View>
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               />
@@ -1318,16 +1423,59 @@ Array [
         </RCTSafeAreaView>
       </View>
     </View>
-  </Modal>,
-]
+  </Modal>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
 `;
 
 exports[`rendering renders correctly when bottom sheet is NOT visible 1`] = `
-Array [
+<View
+  style={
+    {
+      "flex": 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}
@@ -1339,7 +1487,7 @@ Array [
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
       style={
-        Object {
+        {
           "opacity": 1,
         }
       }
@@ -1350,8 +1498,8 @@ Array [
         <View
           pointerEvents="auto"
           style={
-            Array [
-              Object {
+            [
+              {
                 "marginTop": 8,
                 "width": "100%",
               },
@@ -1360,9 +1508,10 @@ Array [
           }
         >
           <View
+            onLayout={[Function]}
             style={
-              Array [
-                Object {
+              [
+                {
                   "alignItems": "center",
                   "backgroundColor": "#ffffff",
                   "borderRadius": 8,
@@ -1375,8 +1524,8 @@ Array [
           >
             <View
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "borderColor": "#001f23",
                     "borderRadius": 8,
                     "borderWidth": 1,
@@ -1386,8 +1535,8 @@ Array [
                     "right": 0,
                     "top": 0,
                   },
-                  Array [
-                    Object {
+                  [
+                    {
                       "backgroundColor": "#ffffff",
                     },
                     undefined,
@@ -1399,62 +1548,75 @@ Array [
               themeState="filled"
             />
             <View
+              onLayout={[Function]}
+            />
+            <View
+              collapsable={false}
               pointerEvents="none"
               style={
-                Array [
-                  Object {
-                    "backgroundColor": "#ffffff",
-                    "flexDirection": "row",
-                    "left": 16,
-                    "paddingHorizontal": 4,
-                    "position": "absolute",
-                    "top": -4,
-                    "zIndex": 1,
-                  },
-                  Object {
-                    "backgroundColor": "#ffffff",
-                  },
-                ]
+                {
+                  "alignItems": "center",
+                  "flexDirection": "row",
+                  "justifyContent": "center",
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": -10.666666666666666,
+                  "transform": [
+                    {
+                      "translateY": 0,
+                    },
+                    {
+                      "translateX": 24,
+                    },
+                    {
+                      "scale": 1,
+                    },
+                  ],
+                  "zIndex": 1,
+                }
               }
-              testID="label-container"
+              themeVariant="text"
             >
               <Text
                 allowFontScaling={false}
+                onLayout={[Function]}
                 style={
-                  Array [
-                    Object {
+                  [
+                    {
                       "color": "#001f23",
                       "fontFamily": "BeVietnamPro-Regular",
-                      "fontSize": 14,
-                      "letterSpacing": 0.42,
-                      "lineHeight": 22,
+                      "fontSize": 16,
+                      "letterSpacing": 0.48,
+                      "lineHeight": 24,
                     },
-                    Array [
-                      Object {
+                    [
+                      {
+                        "alignContent": "center",
+                        "alignItems": "center",
                         "color": "#001f23",
-                        "fontSize": 12,
-                        "lineHeight": 12,
+                        "marginTop": -2,
+                        "textAlignVertical": "center",
                       },
-                      Object {
+                      {
                         "backgroundColor": "#ffffff",
                       },
                     ],
                   ]
                 }
                 testID="input-label"
-                themeFontSize="medium"
-                themeFontWeight="regular"
                 themeIntent="body"
                 themeState="filled"
                 themeTypeface="neutral"
+                themeVariant="regular"
               >
                 Allow notifications
               </Text>
             </View>
             <View
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "alignItems": "center",
                     "alignSelf": "stretch",
                     "flexDirection": "row",
@@ -1467,7 +1629,7 @@ Array [
             >
               <TextInput
                 accessibilityState={
-                  Object {
+                  {
                     "disabled": false,
                   }
                 }
@@ -1480,8 +1642,8 @@ Array [
                 placeholder=" "
                 pointerEvents="none"
                 style={
-                  Array [
-                    Object {
+                  [
+                    {
                       "alignSelf": "stretch",
                       "flexGrow": 2,
                       "fontFamily": "BeVietnamPro-Regular",
@@ -1492,7 +1654,7 @@ Array [
                       "paddingVertical": 0,
                       "textAlignVertical": "center",
                     },
-                    Object {
+                    {
                       "backgroundColor": "#ffffff",
                       "color": "#001f23",
                     },
@@ -1506,8 +1668,8 @@ Array [
             <HeroIcon
               name="arrow-down"
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "color": "#001f23",
                     "fontSize": 24,
                   },
@@ -1521,10 +1683,11 @@ Array [
           </View>
           <View
             style={
-              Array [
-                Object {
+              [
+                {
                   "minHeight": 16,
-                  "paddingLeft": 16,
+                  "paddingHorizontal": 16,
+                  "paddingTop": 2,
                 },
                 undefined,
               ]
@@ -1532,8 +1695,9 @@ Array [
           >
             <View
               style={
-                Array [
-                  Object {
+                [
+                  {
+                    "alignItems": "flex-start",
                     "flexDirection": "row",
                     "justifyContent": "space-between",
                   },
@@ -1545,22 +1709,65 @@ Array [
         </View>
       </View>
     </View>
-  </View>,
+  </View>
   <Modal
     hardwareAccelerated={false}
     onRequestClose={[Function]}
     transparent={true}
     visible={false}
-  />,
-]
+  />
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
 `;
 
 exports[`rendering renders correctly when bottom sheet is visible 1`] = `
-Array [
+<View
+  style={
+    {
+      "flex": 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}
@@ -1572,7 +1779,7 @@ Array [
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
       style={
-        Object {
+        {
           "opacity": 1,
         }
       }
@@ -1583,8 +1790,8 @@ Array [
         <View
           pointerEvents="auto"
           style={
-            Array [
-              Object {
+            [
+              {
                 "marginTop": 8,
                 "width": "100%",
               },
@@ -1593,9 +1800,10 @@ Array [
           }
         >
           <View
+            onLayout={[Function]}
             style={
-              Array [
-                Object {
+              [
+                {
                   "alignItems": "center",
                   "backgroundColor": "#ffffff",
                   "borderRadius": 8,
@@ -1608,8 +1816,8 @@ Array [
           >
             <View
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "borderColor": "#001f23",
                     "borderRadius": 8,
                     "borderWidth": 1,
@@ -1619,8 +1827,8 @@ Array [
                     "right": 0,
                     "top": 0,
                   },
-                  Array [
-                    Object {
+                  [
+                    {
                       "backgroundColor": "#ffffff",
                     },
                     undefined,
@@ -1632,62 +1840,75 @@ Array [
               themeState="filled"
             />
             <View
+              onLayout={[Function]}
+            />
+            <View
+              collapsable={false}
               pointerEvents="none"
               style={
-                Array [
-                  Object {
-                    "backgroundColor": "#ffffff",
-                    "flexDirection": "row",
-                    "left": 16,
-                    "paddingHorizontal": 4,
-                    "position": "absolute",
-                    "top": -4,
-                    "zIndex": 1,
-                  },
-                  Object {
-                    "backgroundColor": "#ffffff",
-                  },
-                ]
+                {
+                  "alignItems": "center",
+                  "flexDirection": "row",
+                  "justifyContent": "center",
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": -10.666666666666666,
+                  "transform": [
+                    {
+                      "translateY": 0,
+                    },
+                    {
+                      "translateX": 24,
+                    },
+                    {
+                      "scale": 1,
+                    },
+                  ],
+                  "zIndex": 1,
+                }
               }
-              testID="label-container"
+              themeVariant="text"
             >
               <Text
                 allowFontScaling={false}
+                onLayout={[Function]}
                 style={
-                  Array [
-                    Object {
+                  [
+                    {
                       "color": "#001f23",
                       "fontFamily": "BeVietnamPro-Regular",
-                      "fontSize": 14,
-                      "letterSpacing": 0.42,
-                      "lineHeight": 22,
+                      "fontSize": 16,
+                      "letterSpacing": 0.48,
+                      "lineHeight": 24,
                     },
-                    Array [
-                      Object {
+                    [
+                      {
+                        "alignContent": "center",
+                        "alignItems": "center",
                         "color": "#001f23",
-                        "fontSize": 12,
-                        "lineHeight": 12,
+                        "marginTop": -2,
+                        "textAlignVertical": "center",
                       },
-                      Object {
+                      {
                         "backgroundColor": "#ffffff",
                       },
                     ],
                   ]
                 }
                 testID="input-label"
-                themeFontSize="medium"
-                themeFontWeight="regular"
                 themeIntent="body"
                 themeState="filled"
                 themeTypeface="neutral"
+                themeVariant="regular"
               >
                 Allow notifications
               </Text>
             </View>
             <View
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "alignItems": "center",
                     "alignSelf": "stretch",
                     "flexDirection": "row",
@@ -1700,7 +1921,7 @@ Array [
             >
               <TextInput
                 accessibilityState={
-                  Object {
+                  {
                     "disabled": false,
                   }
                 }
@@ -1713,8 +1934,8 @@ Array [
                 placeholder=" "
                 pointerEvents="none"
                 style={
-                  Array [
-                    Object {
+                  [
+                    {
                       "alignSelf": "stretch",
                       "flexGrow": 2,
                       "fontFamily": "BeVietnamPro-Regular",
@@ -1725,7 +1946,7 @@ Array [
                       "paddingVertical": 0,
                       "textAlignVertical": "center",
                     },
-                    Object {
+                    {
                       "backgroundColor": "#ffffff",
                       "color": "#001f23",
                     },
@@ -1739,8 +1960,8 @@ Array [
             <HeroIcon
               name="arrow-down"
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "color": "#001f23",
                     "fontSize": 24,
                   },
@@ -1754,10 +1975,11 @@ Array [
           </View>
           <View
             style={
-              Array [
-                Object {
+              [
+                {
                   "minHeight": 16,
-                  "paddingLeft": 16,
+                  "paddingHorizontal": 16,
+                  "paddingTop": 2,
                 },
                 undefined,
               ]
@@ -1765,8 +1987,9 @@ Array [
           >
             <View
               style={
-                Array [
-                  Object {
+                [
+                  {
+                    "alignItems": "flex-start",
                     "flexDirection": "row",
                     "justifyContent": "space-between",
                   },
@@ -1778,7 +2001,7 @@ Array [
         </View>
       </View>
     </View>
-  </View>,
+  </View>
   <Modal
     hardwareAccelerated={false}
     onRequestClose={[Function]}
@@ -1788,8 +2011,8 @@ Array [
     <View
       pointerEvents="box-none"
       style={
-        Array [
-          Object {
+        [
+          {
             "bottom": 0,
             "flexDirection": "column-reverse",
             "left": 0,
@@ -1804,21 +2027,38 @@ Array [
       <View
         onLayout={[Function]}
         style={
-          Array [
-            Array [
-              Object {
+          [
+            [
+              {
                 "flex": 1,
                 "flexDirection": "column-reverse",
               },
               undefined,
             ],
-            Object {
+            {
               "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}
@@ -1832,7 +2072,7 @@ Array [
           onResponderTerminationRequest={[Function]}
           onStartShouldSetResponder={[Function]}
           style={
-            Object {
+            {
               "backgroundColor": "#000000",
               "bottom": 0,
               "left": 0,
@@ -1845,9 +2085,8 @@ Array [
         />
         <RCTSafeAreaView
           collapsable={false}
-          emulateUnlessSupported={true}
           style={
-            Object {
+            {
               "backgroundColor": "#ffffff",
               "borderTopLeftRadius": 16,
               "borderTopRightRadius": 16,
@@ -1855,17 +2094,17 @@ Array [
               "maxHeight": "94%",
               "paddingBottom": 0,
               "shadowColor": "#001f23",
-              "shadowOffset": Object {
+              "shadowOffset": {
                 "height": 3,
                 "width": 0,
               },
               "shadowOpacity": 0.4,
               "shadowRadius": 16,
-              "transform": Array [
-                Object {
+              "transform": [
+                {
                   "scaleY": 1,
                 },
-                Object {
+                {
                   "translateY": 0,
                 },
               ],
@@ -1875,8 +2114,8 @@ Array [
         >
           <View
             style={
-              Array [
-                Object {
+              [
+                {
                   "flexDirection": "row",
                   "paddingHorizontal": 16,
                   "paddingVertical": 8,
@@ -1887,8 +2126,8 @@ Array [
           >
             <View
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "flex": 1,
                     "justifyContent": "center",
                   },
@@ -1899,29 +2138,28 @@ Array [
               <Text
                 allowFontScaling={false}
                 style={
-                  Array [
-                    Object {
+                  [
+                    {
                       "color": "#001f23",
                       "fontFamily": "BeVietnamPro-SemiBold",
                       "fontSize": 16,
-                      "letterSpacing": 0.48,
+                      "letterSpacing": 0.24,
                       "lineHeight": 24,
                     },
                     undefined,
                   ]
                 }
-                themeFontSize="large"
-                themeFontWeight="semi-bold"
                 themeIntent="body"
                 themeTypeface="neutral"
+                themeVariant="regular-bold"
               >
                 Allow notifications
               </Text>
             </View>
             <View
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "alignItems": "center",
                     "height": 48,
                     "justifyContent": "center",
@@ -1933,6 +2171,23 @@ Array [
               }
             >
               <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}
@@ -1944,7 +2199,7 @@ Array [
                 onResponderTerminationRequest={[Function]}
                 onStartShouldSetResponder={[Function]}
                 style={
-                  Object {
+                  {
                     "opacity": 1,
                   }
                 }
@@ -1953,8 +2208,8 @@ Array [
                 <HeroIcon
                   name="cancel"
                   style={
-                    Array [
-                      Object {
+                    [
+                      {
                         "color": "#001f23",
                         "fontSize": 16,
                       },
@@ -1970,35 +2225,35 @@ Array [
           <RCTScrollView
             ListFooterComponent={null}
             data={
-              Array [
-                Object {
+              [
+                {
                   "category": "",
-                  "data": Array [
-                    Object {
+                  "data": [
+                    {
                       "text": "Monday",
                       "value": "mon",
                     },
-                    Object {
+                    {
                       "text": "Tuesday",
                       "value": "tue",
                     },
-                    Object {
+                    {
                       "text": "Wednesday",
                       "value": "wed",
                     },
-                    Object {
+                    {
                       "text": "Thursday",
                       "value": "thu",
                     },
-                    Object {
+                    {
                       "text": "Friday",
                       "value": "fri",
                     },
-                    Object {
+                    {
                       "text": "Saturday",
                       "value": "sat",
                     },
-                    Object {
+                    {
                       "disabled": true,
                       "text": "Sunday",
                       "value": "sun",
@@ -2023,30 +2278,32 @@ Array [
             renderItem={[Function]}
             scrollEventThrottle={50}
             stickyHeaderIndices={
-              Array [
+              [
                 0,
               ]
             }
             style={
-              Array [
-                Object {
+              [
+                {
                   "paddingHorizontal": 12,
                 },
-                Array [
-                  Object {
+                [
+                  {
                     "paddingBottom": 16,
                   },
-                  Object {},
+                  {},
                 ],
               ]
             }
           >
             <View>
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               />
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               >
@@ -2054,34 +2311,34 @@ Array [
                   <View
                     highlighted={false}
                     section={
-                      Object {
+                      {
                         "category": "",
-                        "data": Array [
-                          Object {
+                        "data": [
+                          {
                             "text": "Monday",
                             "value": "mon",
                           },
-                          Object {
+                          {
                             "text": "Tuesday",
                             "value": "tue",
                           },
-                          Object {
+                          {
                             "text": "Wednesday",
                             "value": "wed",
                           },
-                          Object {
+                          {
                             "text": "Thursday",
                             "value": "thu",
                           },
-                          Object {
+                          {
                             "text": "Friday",
                             "value": "fri",
                           },
-                          Object {
+                          {
                             "text": "Saturday",
                             "value": "sat",
                           },
-                          Object {
+                          {
                             "disabled": true,
                             "text": "Sunday",
                             "value": "sun",
@@ -2090,15 +2347,15 @@ Array [
                       }
                     }
                     style={
-                      Array [
-                        Object {
+                      [
+                        {
                           "marginTop": 12,
                         },
                         undefined,
                       ]
                     }
                     trailingItem={
-                      Object {
+                      {
                         "text": "Monday",
                         "value": "mon",
                       }
@@ -2106,10 +2363,18 @@ Array [
                   />
                   <View
                     accessibilityState={
-                      Object {
+                      {
                         "disabled": false,
                       }
                     }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
                     accessible={true}
                     focusable={true}
                     onClick={[Function]}
@@ -2120,8 +2385,8 @@ Array [
                     onResponderTerminationRequest={[Function]}
                     onStartShouldSetResponder={[Function]}
                     style={
-                      Array [
-                        Object {
+                      [
+                        {
                           "alignItems": "center",
                           "backgroundColor": "#ece8ef",
                           "borderRadius": 4,
@@ -2135,8 +2400,8 @@ Array [
                   >
                     <View
                       style={
-                        Array [
-                          Object {
+                        [
+                          {
                             "flex": 1,
                           },
                           undefined,
@@ -2146,8 +2411,8 @@ Array [
                       <Text
                         allowFontScaling={false}
                         style={
-                          Array [
-                            Object {
+                          [
+                            {
                               "color": "#001f23",
                               "fontFamily": "BeVietnamPro-Regular",
                               "fontSize": 16,
@@ -2157,10 +2422,9 @@ Array [
                             undefined,
                           ]
                         }
-                        themeFontSize="large"
-                        themeFontWeight="regular"
                         themeIntent="body"
                         themeTypeface="neutral"
+                        themeVariant="regular"
                       >
                         Monday
                       </Text>
@@ -2169,40 +2433,40 @@ Array [
                   <View
                     highlighted={false}
                     leadingItem={
-                      Object {
+                      {
                         "text": "Monday",
                         "value": "mon",
                       }
                     }
                     section={
-                      Object {
+                      {
                         "category": "",
-                        "data": Array [
-                          Object {
+                        "data": [
+                          {
                             "text": "Monday",
                             "value": "mon",
                           },
-                          Object {
+                          {
                             "text": "Tuesday",
                             "value": "tue",
                           },
-                          Object {
+                          {
                             "text": "Wednesday",
                             "value": "wed",
                           },
-                          Object {
+                          {
                             "text": "Thursday",
                             "value": "thu",
                           },
-                          Object {
+                          {
                             "text": "Friday",
                             "value": "fri",
                           },
-                          Object {
+                          {
                             "text": "Saturday",
                             "value": "sat",
                           },
-                          Object {
+                          {
                             "disabled": true,
                             "text": "Sunday",
                             "value": "sun",
@@ -2211,15 +2475,15 @@ Array [
                       }
                     }
                     style={
-                      Array [
-                        Object {
+                      [
+                        {
                           "marginTop": 4,
                         },
                         undefined,
                       ]
                     }
                     trailingItem={
-                      Object {
+                      {
                         "text": "Tuesday",
                         "value": "tue",
                       }
@@ -2228,16 +2492,25 @@ Array [
                 </View>
               </View>
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               >
                 <View>
                   <View
                     accessibilityState={
-                      Object {
+                      {
                         "disabled": false,
                       }
                     }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
                     accessible={true}
                     focusable={true}
                     onClick={[Function]}
@@ -2248,8 +2521,8 @@ Array [
                     onResponderTerminationRequest={[Function]}
                     onStartShouldSetResponder={[Function]}
                     style={
-                      Array [
-                        Object {
+                      [
+                        {
                           "alignItems": "center",
                           "backgroundColor": "#ffffff",
                           "borderRadius": 4,
@@ -2263,8 +2536,8 @@ Array [
                   >
                     <View
                       style={
-                        Array [
-                          Object {
+                        [
+                          {
                             "flex": 1,
                           },
                           undefined,
@@ -2274,8 +2547,8 @@ Array [
                       <Text
                         allowFontScaling={false}
                         style={
-                          Array [
-                            Object {
+                          [
+                            {
                               "color": "#001f23",
                               "fontFamily": "BeVietnamPro-Regular",
                               "fontSize": 16,
@@ -2285,10 +2558,9 @@ Array [
                             undefined,
                           ]
                         }
-                        themeFontSize="large"
-                        themeFontWeight="regular"
                         themeIntent="body"
                         themeTypeface="neutral"
+                        themeVariant="regular"
                       >
                         Tuesday
                       </Text>
@@ -2297,40 +2569,40 @@ Array [
                   <View
                     highlighted={false}
                     leadingItem={
-                      Object {
+                      {
                         "text": "Tuesday",
                         "value": "tue",
                       }
                     }
                     section={
-                      Object {
+                      {
                         "category": "",
-                        "data": Array [
-                          Object {
+                        "data": [
+                          {
                             "text": "Monday",
                             "value": "mon",
                           },
-                          Object {
+                          {
                             "text": "Tuesday",
                             "value": "tue",
                           },
-                          Object {
+                          {
                             "text": "Wednesday",
                             "value": "wed",
                           },
-                          Object {
+                          {
                             "text": "Thursday",
                             "value": "thu",
                           },
-                          Object {
+                          {
                             "text": "Friday",
                             "value": "fri",
                           },
-                          Object {
+                          {
                             "text": "Saturday",
                             "value": "sat",
                           },
-                          Object {
+                          {
                             "disabled": true,
                             "text": "Sunday",
                             "value": "sun",
@@ -2339,15 +2611,15 @@ Array [
                       }
                     }
                     style={
-                      Array [
-                        Object {
+                      [
+                        {
                           "marginTop": 4,
                         },
                         undefined,
                       ]
                     }
                     trailingItem={
-                      Object {
+                      {
                         "text": "Wednesday",
                         "value": "wed",
                       }
@@ -2356,16 +2628,25 @@ Array [
                 </View>
               </View>
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               >
                 <View>
                   <View
                     accessibilityState={
-                      Object {
+                      {
                         "disabled": false,
                       }
                     }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
                     accessible={true}
                     focusable={true}
                     onClick={[Function]}
@@ -2376,8 +2657,8 @@ Array [
                     onResponderTerminationRequest={[Function]}
                     onStartShouldSetResponder={[Function]}
                     style={
-                      Array [
-                        Object {
+                      [
+                        {
                           "alignItems": "center",
                           "backgroundColor": "#ffffff",
                           "borderRadius": 4,
@@ -2391,8 +2672,8 @@ Array [
                   >
                     <View
                       style={
-                        Array [
-                          Object {
+                        [
+                          {
                             "flex": 1,
                           },
                           undefined,
@@ -2402,8 +2683,8 @@ Array [
                       <Text
                         allowFontScaling={false}
                         style={
-                          Array [
-                            Object {
+                          [
+                            {
                               "color": "#001f23",
                               "fontFamily": "BeVietnamPro-Regular",
                               "fontSize": 16,
@@ -2413,10 +2694,9 @@ Array [
                             undefined,
                           ]
                         }
-                        themeFontSize="large"
-                        themeFontWeight="regular"
                         themeIntent="body"
                         themeTypeface="neutral"
+                        themeVariant="regular"
                       >
                         Wednesday
                       </Text>
@@ -2425,40 +2705,40 @@ Array [
                   <View
                     highlighted={false}
                     leadingItem={
-                      Object {
+                      {
                         "text": "Wednesday",
                         "value": "wed",
                       }
                     }
                     section={
-                      Object {
+                      {
                         "category": "",
-                        "data": Array [
-                          Object {
+                        "data": [
+                          {
                             "text": "Monday",
                             "value": "mon",
                           },
-                          Object {
+                          {
                             "text": "Tuesday",
                             "value": "tue",
                           },
-                          Object {
+                          {
                             "text": "Wednesday",
                             "value": "wed",
                           },
-                          Object {
+                          {
                             "text": "Thursday",
                             "value": "thu",
                           },
-                          Object {
+                          {
                             "text": "Friday",
                             "value": "fri",
                           },
-                          Object {
+                          {
                             "text": "Saturday",
                             "value": "sat",
                           },
-                          Object {
+                          {
                             "disabled": true,
                             "text": "Sunday",
                             "value": "sun",
@@ -2467,15 +2747,15 @@ Array [
                       }
                     }
                     style={
-                      Array [
-                        Object {
+                      [
+                        {
                           "marginTop": 4,
                         },
                         undefined,
                       ]
                     }
                     trailingItem={
-                      Object {
+                      {
                         "text": "Thursday",
                         "value": "thu",
                       }
@@ -2484,16 +2764,25 @@ Array [
                 </View>
               </View>
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               >
                 <View>
                   <View
                     accessibilityState={
-                      Object {
+                      {
                         "disabled": false,
                       }
                     }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
                     accessible={true}
                     focusable={true}
                     onClick={[Function]}
@@ -2504,8 +2793,8 @@ Array [
                     onResponderTerminationRequest={[Function]}
                     onStartShouldSetResponder={[Function]}
                     style={
-                      Array [
-                        Object {
+                      [
+                        {
                           "alignItems": "center",
                           "backgroundColor": "#ffffff",
                           "borderRadius": 4,
@@ -2519,8 +2808,8 @@ Array [
                   >
                     <View
                       style={
-                        Array [
-                          Object {
+                        [
+                          {
                             "flex": 1,
                           },
                           undefined,
@@ -2530,8 +2819,8 @@ Array [
                       <Text
                         allowFontScaling={false}
                         style={
-                          Array [
-                            Object {
+                          [
+                            {
                               "color": "#001f23",
                               "fontFamily": "BeVietnamPro-Regular",
                               "fontSize": 16,
@@ -2541,10 +2830,9 @@ Array [
                             undefined,
                           ]
                         }
-                        themeFontSize="large"
-                        themeFontWeight="regular"
                         themeIntent="body"
                         themeTypeface="neutral"
+                        themeVariant="regular"
                       >
                         Thursday
                       </Text>
@@ -2553,40 +2841,40 @@ Array [
                   <View
                     highlighted={false}
                     leadingItem={
-                      Object {
+                      {
                         "text": "Thursday",
                         "value": "thu",
                       }
                     }
                     section={
-                      Object {
+                      {
                         "category": "",
-                        "data": Array [
-                          Object {
+                        "data": [
+                          {
                             "text": "Monday",
                             "value": "mon",
                           },
-                          Object {
+                          {
                             "text": "Tuesday",
                             "value": "tue",
                           },
-                          Object {
+                          {
                             "text": "Wednesday",
                             "value": "wed",
                           },
-                          Object {
+                          {
                             "text": "Thursday",
                             "value": "thu",
                           },
-                          Object {
+                          {
                             "text": "Friday",
                             "value": "fri",
                           },
-                          Object {
+                          {
                             "text": "Saturday",
                             "value": "sat",
                           },
-                          Object {
+                          {
                             "disabled": true,
                             "text": "Sunday",
                             "value": "sun",
@@ -2595,15 +2883,15 @@ Array [
                       }
                     }
                     style={
-                      Array [
-                        Object {
+                      [
+                        {
                           "marginTop": 4,
                         },
                         undefined,
                       ]
                     }
                     trailingItem={
-                      Object {
+                      {
                         "text": "Friday",
                         "value": "fri",
                       }
@@ -2612,16 +2900,25 @@ Array [
                 </View>
               </View>
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               >
                 <View>
                   <View
                     accessibilityState={
-                      Object {
+                      {
                         "disabled": false,
                       }
                     }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
                     accessible={true}
                     focusable={true}
                     onClick={[Function]}
@@ -2632,8 +2929,8 @@ Array [
                     onResponderTerminationRequest={[Function]}
                     onStartShouldSetResponder={[Function]}
                     style={
-                      Array [
-                        Object {
+                      [
+                        {
                           "alignItems": "center",
                           "backgroundColor": "#ffffff",
                           "borderRadius": 4,
@@ -2647,8 +2944,8 @@ Array [
                   >
                     <View
                       style={
-                        Array [
-                          Object {
+                        [
+                          {
                             "flex": 1,
                           },
                           undefined,
@@ -2658,8 +2955,8 @@ Array [
                       <Text
                         allowFontScaling={false}
                         style={
-                          Array [
-                            Object {
+                          [
+                            {
                               "color": "#001f23",
                               "fontFamily": "BeVietnamPro-Regular",
                               "fontSize": 16,
@@ -2669,10 +2966,9 @@ Array [
                             undefined,
                           ]
                         }
-                        themeFontSize="large"
-                        themeFontWeight="regular"
                         themeIntent="body"
                         themeTypeface="neutral"
+                        themeVariant="regular"
                       >
                         Friday
                       </Text>
@@ -2681,40 +2977,40 @@ Array [
                   <View
                     highlighted={false}
                     leadingItem={
-                      Object {
+                      {
                         "text": "Friday",
                         "value": "fri",
                       }
                     }
                     section={
-                      Object {
+                      {
                         "category": "",
-                        "data": Array [
-                          Object {
+                        "data": [
+                          {
                             "text": "Monday",
                             "value": "mon",
                           },
-                          Object {
+                          {
                             "text": "Tuesday",
                             "value": "tue",
                           },
-                          Object {
+                          {
                             "text": "Wednesday",
                             "value": "wed",
                           },
-                          Object {
+                          {
                             "text": "Thursday",
                             "value": "thu",
                           },
-                          Object {
+                          {
                             "text": "Friday",
                             "value": "fri",
                           },
-                          Object {
+                          {
                             "text": "Saturday",
                             "value": "sat",
                           },
-                          Object {
+                          {
                             "disabled": true,
                             "text": "Sunday",
                             "value": "sun",
@@ -2723,15 +3019,15 @@ Array [
                       }
                     }
                     style={
-                      Array [
-                        Object {
+                      [
+                        {
                           "marginTop": 4,
                         },
                         undefined,
                       ]
                     }
                     trailingItem={
-                      Object {
+                      {
                         "text": "Saturday",
                         "value": "sat",
                       }
@@ -2740,16 +3036,25 @@ Array [
                 </View>
               </View>
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               >
                 <View>
                   <View
                     accessibilityState={
-                      Object {
+                      {
                         "disabled": false,
                       }
                     }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
                     accessible={true}
                     focusable={true}
                     onClick={[Function]}
@@ -2760,8 +3065,8 @@ Array [
                     onResponderTerminationRequest={[Function]}
                     onStartShouldSetResponder={[Function]}
                     style={
-                      Array [
-                        Object {
+                      [
+                        {
                           "alignItems": "center",
                           "backgroundColor": "#ffffff",
                           "borderRadius": 4,
@@ -2775,8 +3080,8 @@ Array [
                   >
                     <View
                       style={
-                        Array [
-                          Object {
+                        [
+                          {
                             "flex": 1,
                           },
                           undefined,
@@ -2786,8 +3091,8 @@ Array [
                       <Text
                         allowFontScaling={false}
                         style={
-                          Array [
-                            Object {
+                          [
+                            {
                               "color": "#001f23",
                               "fontFamily": "BeVietnamPro-Regular",
                               "fontSize": 16,
@@ -2797,10 +3102,9 @@ Array [
                             undefined,
                           ]
                         }
-                        themeFontSize="large"
-                        themeFontWeight="regular"
                         themeIntent="body"
                         themeTypeface="neutral"
+                        themeVariant="regular"
                       >
                         Saturday
                       </Text>
@@ -2809,40 +3113,40 @@ Array [
                   <View
                     highlighted={false}
                     leadingItem={
-                      Object {
+                      {
                         "text": "Saturday",
                         "value": "sat",
                       }
                     }
                     section={
-                      Object {
+                      {
                         "category": "",
-                        "data": Array [
-                          Object {
+                        "data": [
+                          {
                             "text": "Monday",
                             "value": "mon",
                           },
-                          Object {
+                          {
                             "text": "Tuesday",
                             "value": "tue",
                           },
-                          Object {
+                          {
                             "text": "Wednesday",
                             "value": "wed",
                           },
-                          Object {
+                          {
                             "text": "Thursday",
                             "value": "thu",
                           },
-                          Object {
+                          {
                             "text": "Friday",
                             "value": "fri",
                           },
-                          Object {
+                          {
                             "text": "Saturday",
                             "value": "sat",
                           },
-                          Object {
+                          {
                             "disabled": true,
                             "text": "Sunday",
                             "value": "sun",
@@ -2851,15 +3155,15 @@ Array [
                       }
                     }
                     style={
-                      Array [
-                        Object {
+                      [
+                        {
                           "marginTop": 4,
                         },
                         undefined,
                       ]
                     }
                     trailingItem={
-                      Object {
+                      {
                         "disabled": true,
                         "text": "Sunday",
                         "value": "sun",
@@ -2869,16 +3173,25 @@ Array [
                 </View>
               </View>
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               >
                 <View>
                   <View
                     accessibilityState={
-                      Object {
+                      {
                         "disabled": true,
                       }
                     }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
                     accessible={true}
                     focusable={true}
                     onClick={[Function]}
@@ -2889,8 +3202,8 @@ Array [
                     onResponderTerminationRequest={[Function]}
                     onStartShouldSetResponder={[Function]}
                     style={
-                      Array [
-                        Object {
+                      [
+                        {
                           "alignItems": "center",
                           "backgroundColor": "#ffffff",
                           "borderRadius": 4,
@@ -2904,8 +3217,8 @@ Array [
                   >
                     <View
                       style={
-                        Array [
-                          Object {
+                        [
+                          {
                             "flex": 1,
                           },
                           undefined,
@@ -2915,8 +3228,8 @@ Array [
                       <Text
                         allowFontScaling={false}
                         style={
-                          Array [
-                            Object {
+                          [
+                            {
                               "color": "#001f23",
                               "fontFamily": "BeVietnamPro-Regular",
                               "fontSize": 16,
@@ -2926,10 +3239,9 @@ Array [
                             undefined,
                           ]
                         }
-                        themeFontSize="large"
-                        themeFontWeight="regular"
                         themeIntent="body"
                         themeTypeface="neutral"
+                        themeVariant="regular"
                       >
                         Sunday
                       </Text>
@@ -2938,41 +3250,41 @@ Array [
                   <View
                     highlighted={false}
                     leadingItem={
-                      Object {
+                      {
                         "disabled": true,
                         "text": "Sunday",
                         "value": "sun",
                       }
                     }
                     section={
-                      Object {
+                      {
                         "category": "",
-                        "data": Array [
-                          Object {
+                        "data": [
+                          {
                             "text": "Monday",
                             "value": "mon",
                           },
-                          Object {
+                          {
                             "text": "Tuesday",
                             "value": "tue",
                           },
-                          Object {
+                          {
                             "text": "Wednesday",
                             "value": "wed",
                           },
-                          Object {
+                          {
                             "text": "Thursday",
                             "value": "thu",
                           },
-                          Object {
+                          {
                             "text": "Friday",
                             "value": "fri",
                           },
-                          Object {
+                          {
                             "text": "Saturday",
                             "value": "sat",
                           },
-                          Object {
+                          {
                             "disabled": true,
                             "text": "Sunday",
                             "value": "sun",
@@ -2981,8 +3293,8 @@ Array [
                       }
                     }
                     style={
-                      Array [
-                        Object {
+                      [
+                        {
                           "marginTop": 12,
                         },
                         undefined,
@@ -2992,6 +3304,7 @@ Array [
                 </View>
               </View>
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               />
@@ -3000,16 +3313,59 @@ Array [
         </RCTSafeAreaView>
       </View>
     </View>
-  </Modal>,
-]
+  </Modal>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
 `;
 
 exports[`rendering renders correctly when input is loading 1`] = `
-Array [
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
   <View
     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}
@@ -3021,7 +3377,7 @@ Array [
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
       style={
-        Object {
+        {
           "opacity": 1,
         }
       }
@@ -3032,8 +3388,8 @@ Array [
         <View
           pointerEvents="none"
           style={
-            Array [
-              Object {
+            [
+              {
                 "marginTop": 8,
                 "width": "100%",
               },
@@ -3042,9 +3398,10 @@ Array [
           }
         >
           <View
+            onLayout={[Function]}
             style={
-              Array [
-                Object {
+              [
+                {
                   "alignItems": "center",
                   "backgroundColor": "#ffffff",
                   "borderRadius": 8,
@@ -3057,8 +3414,8 @@ Array [
           >
             <View
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "borderColor": "#808f91",
                     "borderRadius": 8,
                     "borderWidth": 1,
@@ -3068,8 +3425,8 @@ Array [
                     "right": 0,
                     "top": 0,
                   },
-                  Array [
-                    Object {
+                  [
+                    {
                       "backgroundColor": "#ffffff",
                     },
                     undefined,
@@ -3081,62 +3438,75 @@ Array [
               themeState="readonly"
             />
             <View
+              onLayout={[Function]}
+            />
+            <View
+              collapsable={false}
               pointerEvents="none"
               style={
-                Array [
-                  Object {
-                    "backgroundColor": "#ffffff",
-                    "flexDirection": "row",
-                    "left": 16,
-                    "paddingHorizontal": 4,
-                    "position": "absolute",
-                    "top": -4,
-                    "zIndex": 1,
-                  },
-                  Object {
-                    "backgroundColor": "#ffffff",
-                  },
-                ]
+                {
+                  "alignItems": "center",
+                  "flexDirection": "row",
+                  "justifyContent": "center",
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": -10.666666666666666,
+                  "transform": [
+                    {
+                      "translateY": 0,
+                    },
+                    {
+                      "translateX": 24,
+                    },
+                    {
+                      "scale": 1,
+                    },
+                  ],
+                  "zIndex": 1,
+                }
               }
-              testID="label-container"
+              themeVariant="text"
             >
               <Text
                 allowFontScaling={false}
+                onLayout={[Function]}
                 style={
-                  Array [
-                    Object {
+                  [
+                    {
                       "color": "#001f23",
                       "fontFamily": "BeVietnamPro-Regular",
-                      "fontSize": 14,
-                      "letterSpacing": 0.42,
-                      "lineHeight": 22,
+                      "fontSize": 16,
+                      "letterSpacing": 0.48,
+                      "lineHeight": 24,
                     },
-                    Array [
-                      Object {
+                    [
+                      {
+                        "alignContent": "center",
+                        "alignItems": "center",
                         "color": "#808f91",
-                        "fontSize": 12,
-                        "lineHeight": 12,
+                        "marginTop": -2,
+                        "textAlignVertical": "center",
                       },
-                      Object {
+                      {
                         "backgroundColor": "#ffffff",
                       },
                     ],
                   ]
                 }
                 testID="input-label"
-                themeFontSize="medium"
-                themeFontWeight="regular"
                 themeIntent="body"
                 themeState="readonly"
                 themeTypeface="neutral"
+                themeVariant="regular"
               >
                 Allow notifications
               </Text>
             </View>
             <View
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "alignItems": "center",
                     "alignSelf": "stretch",
                     "flexDirection": "row",
@@ -3149,7 +3519,7 @@ Array [
             >
               <TextInput
                 accessibilityState={
-                  Object {
+                  {
                     "disabled": true,
                   }
                 }
@@ -3162,8 +3532,8 @@ Array [
                 placeholder=" "
                 pointerEvents="none"
                 style={
-                  Array [
-                    Object {
+                  [
+                    {
                       "alignSelf": "stretch",
                       "flexGrow": 2,
                       "fontFamily": "BeVietnamPro-Regular",
@@ -3174,7 +3544,7 @@ Array [
                       "paddingVertical": 0,
                       "textAlignVertical": "center",
                     },
-                    Object {
+                    {
                       "backgroundColor": "#ffffff",
                       "color": "#001f23",
                     },
@@ -3188,9 +3558,9 @@ Array [
             <View
               collapsable={false}
               style={
-                Object {
-                  "transform": Array [
-                    Object {
+                {
+                  "transform": [
+                    {
                       "rotate": "0deg",
                     },
                   ],
@@ -3200,8 +3570,8 @@ Array [
               <HeroIcon
                 name="loading"
                 style={
-                  Array [
-                    Object {
+                  [
+                    {
                       "color": "#001f23",
                       "fontSize": 24,
                     },
@@ -3216,10 +3586,11 @@ Array [
           </View>
           <View
             style={
-              Array [
-                Object {
+              [
+                {
                   "minHeight": 16,
-                  "paddingLeft": 16,
+                  "paddingHorizontal": 16,
+                  "paddingTop": 2,
                 },
                 undefined,
               ]
@@ -3227,8 +3598,9 @@ Array [
           >
             <View
               style={
-                Array [
-                  Object {
+                [
+                  {
+                    "alignItems": "flex-start",
                     "flexDirection": "row",
                     "justifyContent": "space-between",
                   },
@@ -3240,22 +3612,65 @@ Array [
         </View>
       </View>
     </View>
-  </View>,
+  </View>
   <Modal
     hardwareAccelerated={false}
     onRequestClose={[Function]}
     transparent={true}
     visible={false}
-  />,
-]
+  />
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
 `;
 
 exports[`rendering renders correctly when receives sections 1`] = `
-Array [
+<View
+  style={
+    {
+      "flex": 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}
@@ -3267,7 +3682,7 @@ Array [
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
       style={
-        Object {
+        {
           "opacity": 1,
         }
       }
@@ -3278,8 +3693,8 @@ Array [
         <View
           pointerEvents="auto"
           style={
-            Array [
-              Object {
+            [
+              {
                 "marginTop": 8,
                 "width": "100%",
               },
@@ -3288,9 +3703,10 @@ Array [
           }
         >
           <View
+            onLayout={[Function]}
             style={
-              Array [
-                Object {
+              [
+                {
                   "alignItems": "center",
                   "backgroundColor": "#ffffff",
                   "borderRadius": 8,
@@ -3303,8 +3719,8 @@ Array [
           >
             <View
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "borderColor": "#001f23",
                     "borderRadius": 8,
                     "borderWidth": 1,
@@ -3314,8 +3730,8 @@ Array [
                     "right": 0,
                     "top": 0,
                   },
-                  Array [
-                    Object {
+                  [
+                    {
                       "backgroundColor": "#ffffff",
                     },
                     undefined,
@@ -3327,62 +3743,75 @@ Array [
               themeState="filled"
             />
             <View
+              onLayout={[Function]}
+            />
+            <View
+              collapsable={false}
               pointerEvents="none"
               style={
-                Array [
-                  Object {
-                    "backgroundColor": "#ffffff",
-                    "flexDirection": "row",
-                    "left": 16,
-                    "paddingHorizontal": 4,
-                    "position": "absolute",
-                    "top": -4,
-                    "zIndex": 1,
-                  },
-                  Object {
-                    "backgroundColor": "#ffffff",
-                  },
-                ]
+                {
+                  "alignItems": "center",
+                  "flexDirection": "row",
+                  "justifyContent": "center",
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": -10.666666666666666,
+                  "transform": [
+                    {
+                      "translateY": 0,
+                    },
+                    {
+                      "translateX": 24,
+                    },
+                    {
+                      "scale": 1,
+                    },
+                  ],
+                  "zIndex": 1,
+                }
               }
-              testID="label-container"
+              themeVariant="text"
             >
               <Text
                 allowFontScaling={false}
+                onLayout={[Function]}
                 style={
-                  Array [
-                    Object {
+                  [
+                    {
                       "color": "#001f23",
                       "fontFamily": "BeVietnamPro-Regular",
-                      "fontSize": 14,
-                      "letterSpacing": 0.42,
-                      "lineHeight": 22,
+                      "fontSize": 16,
+                      "letterSpacing": 0.48,
+                      "lineHeight": 24,
                     },
-                    Array [
-                      Object {
+                    [
+                      {
+                        "alignContent": "center",
+                        "alignItems": "center",
                         "color": "#001f23",
-                        "fontSize": 12,
-                        "lineHeight": 12,
+                        "marginTop": -2,
+                        "textAlignVertical": "center",
                       },
-                      Object {
+                      {
                         "backgroundColor": "#ffffff",
                       },
                     ],
                   ]
                 }
                 testID="input-label"
-                themeFontSize="medium"
-                themeFontWeight="regular"
                 themeIntent="body"
                 themeState="filled"
                 themeTypeface="neutral"
+                themeVariant="regular"
               >
                 Allow notifications
               </Text>
             </View>
             <View
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "alignItems": "center",
                     "alignSelf": "stretch",
                     "flexDirection": "row",
@@ -3395,7 +3824,7 @@ Array [
             >
               <TextInput
                 accessibilityState={
-                  Object {
+                  {
                     "disabled": false,
                   }
                 }
@@ -3408,8 +3837,8 @@ Array [
                 placeholder=" "
                 pointerEvents="none"
                 style={
-                  Array [
-                    Object {
+                  [
+                    {
                       "alignSelf": "stretch",
                       "flexGrow": 2,
                       "fontFamily": "BeVietnamPro-Regular",
@@ -3420,7 +3849,7 @@ Array [
                       "paddingVertical": 0,
                       "textAlignVertical": "center",
                     },
-                    Object {
+                    {
                       "backgroundColor": "#ffffff",
                       "color": "#001f23",
                     },
@@ -3434,8 +3863,8 @@ Array [
             <HeroIcon
               name="arrow-down"
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "color": "#001f23",
                     "fontSize": 24,
                   },
@@ -3449,10 +3878,11 @@ Array [
           </View>
           <View
             style={
-              Array [
-                Object {
+              [
+                {
                   "minHeight": 16,
-                  "paddingLeft": 16,
+                  "paddingHorizontal": 16,
+                  "paddingTop": 2,
                 },
                 undefined,
               ]
@@ -3460,8 +3890,9 @@ Array [
           >
             <View
               style={
-                Array [
-                  Object {
+                [
+                  {
+                    "alignItems": "flex-start",
                     "flexDirection": "row",
                     "justifyContent": "space-between",
                   },
@@ -3473,7 +3904,7 @@ Array [
         </View>
       </View>
     </View>
-  </View>,
+  </View>
   <Modal
     hardwareAccelerated={false}
     onRequestClose={[Function]}
@@ -3483,8 +3914,8 @@ Array [
     <View
       pointerEvents="box-none"
       style={
-        Array [
-          Object {
+        [
+          {
             "bottom": 0,
             "flexDirection": "column-reverse",
             "left": 0,
@@ -3499,21 +3930,38 @@ Array [
       <View
         onLayout={[Function]}
         style={
-          Array [
-            Array [
-              Object {
+          [
+            [
+              {
                 "flex": 1,
                 "flexDirection": "column-reverse",
               },
               undefined,
             ],
-            Object {
+            {
               "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}
@@ -3527,7 +3975,7 @@ Array [
           onResponderTerminationRequest={[Function]}
           onStartShouldSetResponder={[Function]}
           style={
-            Object {
+            {
               "backgroundColor": "#000000",
               "bottom": 0,
               "left": 0,
@@ -3540,9 +3988,8 @@ Array [
         />
         <RCTSafeAreaView
           collapsable={false}
-          emulateUnlessSupported={true}
           style={
-            Object {
+            {
               "backgroundColor": "#ffffff",
               "borderTopLeftRadius": 16,
               "borderTopRightRadius": 16,
@@ -3550,17 +3997,17 @@ Array [
               "maxHeight": "94%",
               "paddingBottom": 0,
               "shadowColor": "#001f23",
-              "shadowOffset": Object {
+              "shadowOffset": {
                 "height": 3,
                 "width": 0,
               },
               "shadowOpacity": 0.4,
               "shadowRadius": 16,
-              "transform": Array [
-                Object {
+              "transform": [
+                {
                   "scaleY": 1,
                 },
-                Object {
+                {
                   "translateY": 0,
                 },
               ],
@@ -3570,8 +4017,8 @@ Array [
         >
           <View
             style={
-              Array [
-                Object {
+              [
+                {
                   "flexDirection": "row",
                   "paddingHorizontal": 16,
                   "paddingVertical": 8,
@@ -3582,8 +4029,8 @@ Array [
           >
             <View
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "flex": 1,
                     "justifyContent": "center",
                   },
@@ -3594,29 +4041,28 @@ Array [
               <Text
                 allowFontScaling={false}
                 style={
-                  Array [
-                    Object {
+                  [
+                    {
                       "color": "#001f23",
                       "fontFamily": "BeVietnamPro-SemiBold",
                       "fontSize": 16,
-                      "letterSpacing": 0.48,
+                      "letterSpacing": 0.24,
                       "lineHeight": 24,
                     },
                     undefined,
                   ]
                 }
-                themeFontSize="large"
-                themeFontWeight="semi-bold"
                 themeIntent="body"
                 themeTypeface="neutral"
+                themeVariant="regular-bold"
               >
                 Allow notifications
               </Text>
             </View>
             <View
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "alignItems": "center",
                     "height": 48,
                     "justifyContent": "center",
@@ -3628,6 +4074,23 @@ Array [
               }
             >
               <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}
@@ -3639,7 +4102,7 @@ Array [
                 onResponderTerminationRequest={[Function]}
                 onStartShouldSetResponder={[Function]}
                 style={
-                  Object {
+                  {
                     "opacity": 1,
                   }
                 }
@@ -3648,8 +4111,8 @@ Array [
                 <HeroIcon
                   name="cancel"
                   style={
-                    Array [
-                      Object {
+                    [
+                      {
                         "color": "#001f23",
                         "fontSize": 16,
                       },
@@ -3665,24 +4128,24 @@ Array [
           <RCTScrollView
             ListFooterComponent={null}
             data={
-              Array [
-                Object {
+              [
+                {
                   "category": "A",
-                  "data": Array [
-                    Object {
+                  "data": [
+                    {
                       "text": "A1",
                       "value": "a1",
                     },
                   ],
                 },
-                Object {
+                {
                   "category": "B",
-                  "data": Array [
-                    Object {
+                  "data": [
+                    {
                       "text": "B1",
                       "value": "b1",
                     },
-                    Object {
+                    {
                       "text": "B2",
                       "value": "b2",
                     },
@@ -3706,34 +4169,35 @@ Array [
             renderItem={[Function]}
             scrollEventThrottle={50}
             stickyHeaderIndices={
-              Array [
+              [
                 0,
                 3,
               ]
             }
             style={
-              Array [
-                Object {
+              [
+                {
                   "paddingHorizontal": 12,
                 },
-                Array [
-                  Object {
+                [
+                  {
                     "paddingBottom": 16,
                   },
-                  Object {},
+                  {},
                 ],
               ]
             }
           >
             <View>
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               >
                 <View
                   style={
-                    Array [
-                      Object {
+                    [
+                      {
                         "alignContent": "center",
                         "backgroundColor": "#f6f6f7",
                         "display": "flex",
@@ -3743,16 +4207,18 @@ Array [
                         "paddingHorizontal": 16,
                         "paddingVertical": 8,
                       },
-                      Object {
+                      {
                         "marginBottom": 0,
                       },
                     ]
                   }
+                  themeSize="medium"
                 >
                   <View
                     style={
-                      Array [
-                        Object {
+                      [
+                        {
+                          "alignItems": "center",
                           "display": "flex",
                           "flexDirection": "row",
                         },
@@ -3762,9 +4228,9 @@ Array [
                   >
                     <View
                       style={
-                        Array [
-                          Object {
-                            "marginRight": 8,
+                        [
+                          {
+                            "marginRight": 12,
                           },
                           undefined,
                         ]
@@ -3773,21 +4239,20 @@ Array [
                     <Text
                       allowFontScaling={false}
                       style={
-                        Array [
-                          Object {
+                        [
+                          {
                             "color": "#001f23",
                             "fontFamily": "BeVietnamPro-Regular",
-                            "fontSize": 16,
+                            "fontSize": 14,
                             "letterSpacing": 0.48,
-                            "lineHeight": 24,
+                            "lineHeight": 22,
                           },
                           undefined,
                         ]
                       }
-                      themeFontSize="large"
-                      themeFontWeight="regular"
                       themeIntent="body"
                       themeTypeface="neutral"
+                      themeVariant="small"
                     >
                       A
                     </Text>
@@ -3795,6 +4260,7 @@ Array [
                 </View>
               </View>
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               >
@@ -3802,10 +4268,10 @@ Array [
                   <View
                     highlighted={false}
                     section={
-                      Object {
+                      {
                         "category": "A",
-                        "data": Array [
-                          Object {
+                        "data": [
+                          {
                             "text": "A1",
                             "value": "a1",
                           },
@@ -3813,28 +4279,28 @@ Array [
                       }
                     }
                     style={
-                      Array [
-                        Object {
+                      [
+                        {
                           "marginTop": 12,
                         },
                         undefined,
                       ]
                     }
                     trailingItem={
-                      Object {
+                      {
                         "text": "A1",
                         "value": "a1",
                       }
                     }
                     trailingSection={
-                      Object {
+                      {
                         "category": "B",
-                        "data": Array [
-                          Object {
+                        "data": [
+                          {
                             "text": "B1",
                             "value": "b1",
                           },
-                          Object {
+                          {
                             "text": "B2",
                             "value": "b2",
                           },
@@ -3844,10 +4310,18 @@ Array [
                   />
                   <View
                     accessibilityState={
-                      Object {
+                      {
                         "disabled": false,
                       }
                     }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
                     accessible={true}
                     focusable={true}
                     onClick={[Function]}
@@ -3858,8 +4332,8 @@ Array [
                     onResponderTerminationRequest={[Function]}
                     onStartShouldSetResponder={[Function]}
                     style={
-                      Array [
-                        Object {
+                      [
+                        {
                           "alignItems": "center",
                           "backgroundColor": "#ece8ef",
                           "borderRadius": 4,
@@ -3873,8 +4347,8 @@ Array [
                   >
                     <View
                       style={
-                        Array [
-                          Object {
+                        [
+                          {
                             "flex": 1,
                           },
                           undefined,
@@ -3884,8 +4358,8 @@ Array [
                       <Text
                         allowFontScaling={false}
                         style={
-                          Array [
-                            Object {
+                          [
+                            {
                               "color": "#001f23",
                               "fontFamily": "BeVietnamPro-Regular",
                               "fontSize": 16,
@@ -3895,10 +4369,9 @@ Array [
                             undefined,
                           ]
                         }
-                        themeFontSize="large"
-                        themeFontWeight="regular"
                         themeIntent="body"
                         themeTypeface="neutral"
+                        themeVariant="regular"
                       >
                         A1
                       </Text>
@@ -3907,16 +4380,16 @@ Array [
                   <View
                     highlighted={false}
                     leadingItem={
-                      Object {
+                      {
                         "text": "A1",
                         "value": "a1",
                       }
                     }
                     section={
-                      Object {
+                      {
                         "category": "A",
-                        "data": Array [
-                          Object {
+                        "data": [
+                          {
                             "text": "A1",
                             "value": "a1",
                           },
@@ -3924,22 +4397,22 @@ Array [
                       }
                     }
                     style={
-                      Array [
-                        Object {
+                      [
+                        {
                           "marginTop": 12,
                         },
                         undefined,
                       ]
                     }
                     trailingSection={
-                      Object {
+                      {
                         "category": "B",
-                        "data": Array [
-                          Object {
+                        "data": [
+                          {
                             "text": "B1",
                             "value": "b1",
                           },
-                          Object {
+                          {
                             "text": "B2",
                             "value": "b2",
                           },
@@ -3950,17 +4423,19 @@ Array [
                 </View>
               </View>
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               />
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               >
                 <View
                   style={
-                    Array [
-                      Object {
+                    [
+                      {
                         "alignContent": "center",
                         "backgroundColor": "#f6f6f7",
                         "display": "flex",
@@ -3970,16 +4445,18 @@ Array [
                         "paddingHorizontal": 16,
                         "paddingVertical": 8,
                       },
-                      Object {
+                      {
                         "marginBottom": 0,
                       },
                     ]
                   }
+                  themeSize="medium"
                 >
                   <View
                     style={
-                      Array [
-                        Object {
+                      [
+                        {
+                          "alignItems": "center",
                           "display": "flex",
                           "flexDirection": "row",
                         },
@@ -3989,9 +4466,9 @@ Array [
                   >
                     <View
                       style={
-                        Array [
-                          Object {
-                            "marginRight": 8,
+                        [
+                          {
+                            "marginRight": 12,
                           },
                           undefined,
                         ]
@@ -4000,21 +4477,20 @@ Array [
                     <Text
                       allowFontScaling={false}
                       style={
-                        Array [
-                          Object {
+                        [
+                          {
                             "color": "#001f23",
                             "fontFamily": "BeVietnamPro-Regular",
-                            "fontSize": 16,
+                            "fontSize": 14,
                             "letterSpacing": 0.48,
-                            "lineHeight": 24,
+                            "lineHeight": 22,
                           },
                           undefined,
                         ]
                       }
-                      themeFontSize="large"
-                      themeFontWeight="regular"
                       themeIntent="body"
                       themeTypeface="neutral"
+                      themeVariant="small"
                     >
                       B
                     </Text>
@@ -4022,6 +4498,7 @@ Array [
                 </View>
               </View>
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               >
@@ -4029,10 +4506,10 @@ Array [
                   <View
                     highlighted={false}
                     leadingSection={
-                      Object {
+                      {
                         "category": "A",
-                        "data": Array [
-                          Object {
+                        "data": [
+                          {
                             "text": "A1",
                             "value": "a1",
                           },
@@ -4040,14 +4517,14 @@ Array [
                       }
                     }
                     section={
-                      Object {
+                      {
                         "category": "B",
-                        "data": Array [
-                          Object {
+                        "data": [
+                          {
                             "text": "B1",
                             "value": "b1",
                           },
-                          Object {
+                          {
                             "text": "B2",
                             "value": "b2",
                           },
@@ -4055,15 +4532,15 @@ Array [
                       }
                     }
                     style={
-                      Array [
-                        Object {
+                      [
+                        {
                           "marginTop": 12,
                         },
                         undefined,
                       ]
                     }
                     trailingItem={
-                      Object {
+                      {
                         "text": "B1",
                         "value": "b1",
                       }
@@ -4071,10 +4548,18 @@ Array [
                   />
                   <View
                     accessibilityState={
-                      Object {
+                      {
                         "disabled": false,
                       }
                     }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
                     accessible={true}
                     focusable={true}
                     onClick={[Function]}
@@ -4085,8 +4570,8 @@ Array [
                     onResponderTerminationRequest={[Function]}
                     onStartShouldSetResponder={[Function]}
                     style={
-                      Array [
-                        Object {
+                      [
+                        {
                           "alignItems": "center",
                           "backgroundColor": "#ffffff",
                           "borderRadius": 4,
@@ -4100,8 +4585,8 @@ Array [
                   >
                     <View
                       style={
-                        Array [
-                          Object {
+                        [
+                          {
                             "flex": 1,
                           },
                           undefined,
@@ -4111,8 +4596,8 @@ Array [
                       <Text
                         allowFontScaling={false}
                         style={
-                          Array [
-                            Object {
+                          [
+                            {
                               "color": "#001f23",
                               "fontFamily": "BeVietnamPro-Regular",
                               "fontSize": 16,
@@ -4122,10 +4607,9 @@ Array [
                             undefined,
                           ]
                         }
-                        themeFontSize="large"
-                        themeFontWeight="regular"
                         themeIntent="body"
                         themeTypeface="neutral"
+                        themeVariant="regular"
                       >
                         B1
                       </Text>
@@ -4134,16 +4618,16 @@ Array [
                   <View
                     highlighted={false}
                     leadingItem={
-                      Object {
+                      {
                         "text": "B1",
                         "value": "b1",
                       }
                     }
                     leadingSection={
-                      Object {
+                      {
                         "category": "A",
-                        "data": Array [
-                          Object {
+                        "data": [
+                          {
                             "text": "A1",
                             "value": "a1",
                           },
@@ -4151,14 +4635,14 @@ Array [
                       }
                     }
                     section={
-                      Object {
+                      {
                         "category": "B",
-                        "data": Array [
-                          Object {
+                        "data": [
+                          {
                             "text": "B1",
                             "value": "b1",
                           },
-                          Object {
+                          {
                             "text": "B2",
                             "value": "b2",
                           },
@@ -4166,15 +4650,15 @@ Array [
                       }
                     }
                     style={
-                      Array [
-                        Object {
+                      [
+                        {
                           "marginTop": 4,
                         },
                         undefined,
                       ]
                     }
                     trailingItem={
-                      Object {
+                      {
                         "text": "B2",
                         "value": "b2",
                       }
@@ -4183,16 +4667,25 @@ Array [
                 </View>
               </View>
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               >
                 <View>
                   <View
                     accessibilityState={
-                      Object {
+                      {
                         "disabled": false,
                       }
                     }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
                     accessible={true}
                     focusable={true}
                     onClick={[Function]}
@@ -4203,8 +4696,8 @@ Array [
                     onResponderTerminationRequest={[Function]}
                     onStartShouldSetResponder={[Function]}
                     style={
-                      Array [
-                        Object {
+                      [
+                        {
                           "alignItems": "center",
                           "backgroundColor": "#ffffff",
                           "borderRadius": 4,
@@ -4218,8 +4711,8 @@ Array [
                   >
                     <View
                       style={
-                        Array [
-                          Object {
+                        [
+                          {
                             "flex": 1,
                           },
                           undefined,
@@ -4229,8 +4722,8 @@ Array [
                       <Text
                         allowFontScaling={false}
                         style={
-                          Array [
-                            Object {
+                          [
+                            {
                               "color": "#001f23",
                               "fontFamily": "BeVietnamPro-Regular",
                               "fontSize": 16,
@@ -4240,10 +4733,9 @@ Array [
                             undefined,
                           ]
                         }
-                        themeFontSize="large"
-                        themeFontWeight="regular"
                         themeIntent="body"
                         themeTypeface="neutral"
+                        themeVariant="regular"
                       >
                         B2
                       </Text>
@@ -4252,16 +4744,16 @@ Array [
                   <View
                     highlighted={false}
                     leadingItem={
-                      Object {
+                      {
                         "text": "B2",
                         "value": "b2",
                       }
                     }
                     leadingSection={
-                      Object {
+                      {
                         "category": "A",
-                        "data": Array [
-                          Object {
+                        "data": [
+                          {
                             "text": "A1",
                             "value": "a1",
                           },
@@ -4269,14 +4761,14 @@ Array [
                       }
                     }
                     section={
-                      Object {
+                      {
                         "category": "B",
-                        "data": Array [
-                          Object {
+                        "data": [
+                          {
                             "text": "B1",
                             "value": "b1",
                           },
-                          Object {
+                          {
                             "text": "B2",
                             "value": "b2",
                           },
@@ -4284,8 +4776,8 @@ Array [
                       }
                     }
                     style={
-                      Array [
-                        Object {
+                      [
+                        {
                           "marginTop": 12,
                         },
                         undefined,
@@ -4295,6 +4787,7 @@ Array [
                 </View>
               </View>
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               />
@@ -4303,6 +4796,26 @@ Array [
         </RCTSafeAreaView>
       </View>
     </View>
-  </Modal>,
-]
+  </Modal>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
 `;