@hero-design/rn 8.43.1 → 8.44.0

package/src/components/List/__tests__/__snapshots__/ListItem.spec.tsx.snap

@@ -2,47 +2,42 @@
 
 exports[`ListItem renders correctly ListItem with children 1`] = `
 <View
-  accessibilityState={
-    {
-      "disabled": false,
-    }
-  }
-  accessibilityValue={
+  style={
     {
-      "max": undefined,
-      "min": undefined,
-      "now": undefined,
-      "text": undefined,
+      "flex": 1,
     }
   }
-  accessible={true}
-  focusable={false}
-  onClick={[Function]}
-  onResponderGrant={[Function]}
-  onResponderMove={[Function]}
-  onResponderRelease={[Function]}
-  onResponderTerminate={[Function]}
-  onResponderTerminationRequest={[Function]}
-  onStartShouldSetResponder={[Function]}
-  style={
-    [
-      {
-        "backgroundColor": "#ffffff",
-        "borderRadius": 8,
-        "flexDirection": "row",
-        "padding": 16,
-      },
-      undefined,
-    ]
-  }
 >
   <View
+    accessibilityState={
+      {
+        "disabled": false,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    focusable={false}
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
     style={
       [
         {
-          "flex": 1,
-          "flexDirection": "column",
-          "flexGrow": 2,
+          "backgroundColor": "#ffffff",
+          "borderRadius": 8,
+          "flexDirection": "row",
+          "padding": 16,
         },
         undefined,
       ]
@@ -50,498 +45,539 @@ exports[`ListItem renders correctly ListItem with children 1`] = `
   >
     <View
       style={
-        {
-          "alignItems": "center",
-          "flexDirection": "row",
-        }
+        [
+          {
+            "flex": 1,
+            "flexDirection": "column",
+            "flexGrow": 2,
+          },
+          undefined,
+        ]
       }
     >
       <View
         style={
-          [
-            {
-              "marginRight": 8,
-            },
-            undefined,
-          ]
+          {
+            "alignItems": "center",
+            "flexDirection": "row",
+          }
         }
       >
         <View
-          accessibilityState={
-            {
-              "busy": undefined,
-              "checked": undefined,
-              "disabled": true,
-              "expanded": undefined,
-              "selected": undefined,
-            }
-          }
-          accessibilityValue={
-            {
-              "max": undefined,
-              "min": undefined,
-              "now": undefined,
-              "text": undefined,
-            }
-          }
-          accessible={true}
-          collapsable={false}
-          focusable={false}
-          onClick={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
           style={
-            {
-              "backgroundColor": "#401960",
-              "borderRadius": 999,
-              "height": 32,
-              "opacity": 1,
-              "overflow": "hidden",
-              "width": 32,
-            }
+            [
+              {
+                "marginRight": 8,
+              },
+              undefined,
+            ]
           }
         >
           <View
+            accessibilityState={
+              {
+                "busy": undefined,
+                "checked": undefined,
+                "disabled": true,
+                "expanded": undefined,
+                "selected": undefined,
+              }
+            }
+            accessibilityValue={
+              {
+                "max": undefined,
+                "min": undefined,
+                "now": undefined,
+                "text": undefined,
+              }
+            }
+            accessible={true}
+            collapsable={false}
+            focusable={false}
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
             style={
-              [
-                {
-                  "alignItems": "center",
-                  "height": "100%",
-                  "justifyContent": "center",
-                  "width": "100%",
-                },
-                undefined,
-              ]
+              {
+                "backgroundColor": "#401960",
+                "borderRadius": 999,
+                "height": 32,
+                "opacity": 1,
+                "overflow": "hidden",
+                "width": 32,
+              }
             }
           >
-            <Text
-              allowFontScaling={false}
+            <View
               style={
                 [
                   {
-                    "color": "#001f23",
-                    "fontFamily": "BeVietnamPro-Regular",
-                    "fontSize": 14,
-                    "letterSpacing": 0.42,
-                    "lineHeight": 22,
+                    "alignItems": "center",
+                    "height": "100%",
+                    "justifyContent": "center",
+                    "width": "100%",
                   },
+                  undefined,
+                ]
+              }
+            >
+              <Text
+                allowFontScaling={false}
+                style={
                   [
                     {
-                      "color": "#ffffff",
+                      "color": "#001f23",
                       "fontFamily": "BeVietnamPro-Regular",
-                      "fontSize": 16,
-                      "lineHeight": 0,
-                      "overflow": "hidden",
-                      "textAlign": "center",
-                      "textAlignVertical": "center",
+                      "fontSize": 14,
+                      "letterSpacing": 0.42,
+                      "lineHeight": 22,
                     },
-                    undefined,
-                  ],
-                ]
-              }
-              themeFontSize="medium"
-              themeFontWeight="regular"
-              themeIntent="body"
-              themeSize="small"
-              themeTypeface="neutral"
-            >
-              ML
-            </Text>
+                    [
+                      {
+                        "color": "#ffffff",
+                        "fontFamily": "BeVietnamPro-Regular",
+                        "fontSize": 16,
+                        "lineHeight": 0,
+                        "overflow": "hidden",
+                        "textAlign": "center",
+                        "textAlignVertical": "center",
+                      },
+                      undefined,
+                    ],
+                  ]
+                }
+                themeFontSize="medium"
+                themeFontWeight="regular"
+                themeIntent="body"
+                themeSize="small"
+                themeTypeface="neutral"
+              >
+                ML
+              </Text>
+            </View>
           </View>
         </View>
-      </View>
-      <View
-        style={
-          [
-            {
-              "flex": 1,
-            },
-            undefined,
-          ]
-        }
-      >
-        <Text
-          allowFontScaling={false}
+        <View
           style={
             [
               {
-                "color": "#001f23",
-                "fontFamily": "BeVietnamPro-Regular",
-                "fontSize": 16,
-                "letterSpacing": 0.48,
-                "lineHeight": 24,
+                "flex": 1,
               },
               undefined,
             ]
           }
-          themeIntent="body"
-          themeTypeface="neutral"
-          themeVariant="regular"
         >
-          Menu List
-        </Text>
-        <Text
-          allowFontScaling={false}
+          <Text
+            allowFontScaling={false}
+            style={
+              [
+                {
+                  "color": "#001f23",
+                  "fontFamily": "BeVietnamPro-Regular",
+                  "fontSize": 16,
+                  "letterSpacing": 0.48,
+                  "lineHeight": 24,
+                },
+                undefined,
+              ]
+            }
+            themeIntent="body"
+            themeTypeface="neutral"
+            themeVariant="regular"
+          >
+            Menu List
+          </Text>
+          <Text
+            allowFontScaling={false}
+            style={
+              [
+                {
+                  "color": "#4d6265",
+                  "fontFamily": "BeVietnamPro-Regular",
+                  "fontSize": 12,
+                  "letterSpacing": 0.48,
+                  "lineHeight": 16,
+                },
+                undefined,
+              ]
+            }
+            themeFontWeight="regular"
+            themeIntent="subdued"
+          >
+            Got a common question?
+          </Text>
+        </View>
+        <View
           style={
             [
               {
-                "color": "#4d6265",
-                "fontFamily": "BeVietnamPro-Regular",
-                "fontSize": 12,
-                "letterSpacing": 0.48,
-                "lineHeight": 16,
+                "marginLeft": 8,
               },
               undefined,
             ]
           }
-          themeFontWeight="regular"
-          themeIntent="subdued"
         >
-          Got a common question?
-        </Text>
+          <HeroIcon
+            name="arrow-right"
+            style={
+              [
+                {
+                  "color": "#401960",
+                  "fontSize": 20,
+                },
+                undefined,
+              ]
+            }
+            themeIntent="primary"
+            themeSize="small"
+          />
+        </View>
       </View>
       <View
         style={
           [
             {
-              "marginLeft": 8,
+              "alignItems": "flex-start",
+              "flexDirection": "column",
+              "justifyContent": "flex-start",
             },
             undefined,
           ]
         }
       >
-        <HeroIcon
-          name="arrow-right"
-          style={
-            [
-              {
-                "color": "#401960",
-                "fontSize": 20,
-              },
-              undefined,
-            ]
-          }
-          themeIntent="primary"
-          themeSize="small"
-        />
-      </View>
-    </View>
-    <View
-      style={
-        [
-          {
-            "alignItems": "flex-start",
-            "flexDirection": "column",
-            "justifyContent": "flex-start",
-          },
-          undefined,
-        ]
-      }
-    >
-      <View
-        style={
-          {
-            "alignSelf": "stretch",
-            "flexDirection": "row",
-            "justifyContent": "space-between",
-          }
-        }
-      >
-        <Text
-          allowFontScaling={false}
-          style={
-            [
-              {
-                "color": "#001f23",
-                "fontFamily": "BeVietnamPro-Regular",
-                "fontSize": 16,
-                "letterSpacing": 0.48,
-                "lineHeight": 24,
-              },
-              undefined,
-            ]
-          }
-          themeIntent="body"
-          themeTypeface="neutral"
-          themeVariant="regular"
-        >
-          Gross pay
-        </Text>
-        <Text
-          allowFontScaling={false}
-          style={
-            [
-              {
-                "color": "#001f23",
-                "fontFamily": "BeVietnamPro-Regular",
-                "fontSize": 16,
-                "letterSpacing": 0.48,
-                "lineHeight": 24,
-              },
-              undefined,
-            ]
-          }
-          themeIntent="body"
-          themeTypeface="neutral"
-          themeVariant="regular"
-        >
-          $1052.03
-        </Text>
-      </View>
-      <View
-        style={
-          {
-            "alignSelf": "stretch",
-            "flexDirection": "row",
-            "justifyContent": "space-between",
-          }
-        }
-      >
-        <Text
-          allowFontScaling={false}
+        <View
           style={
-            [
-              {
-                "color": "#001f23",
-                "fontFamily": "BeVietnamPro-Regular",
-                "fontSize": 16,
-                "letterSpacing": 0.48,
-                "lineHeight": 24,
-              },
-              undefined,
-            ]
+            {
+              "alignSelf": "stretch",
+              "flexDirection": "row",
+              "justifyContent": "space-between",
+            }
           }
-          themeIntent="body"
-          themeTypeface="neutral"
-          themeVariant="regular"
         >
-          Gross pay
-        </Text>
-        <Text
-          allowFontScaling={false}
+          <Text
+            allowFontScaling={false}
+            style={
+              [
+                {
+                  "color": "#001f23",
+                  "fontFamily": "BeVietnamPro-Regular",
+                  "fontSize": 16,
+                  "letterSpacing": 0.48,
+                  "lineHeight": 24,
+                },
+                undefined,
+              ]
+            }
+            themeIntent="body"
+            themeTypeface="neutral"
+            themeVariant="regular"
+          >
+            Gross pay
+          </Text>
+          <Text
+            allowFontScaling={false}
+            style={
+              [
+                {
+                  "color": "#001f23",
+                  "fontFamily": "BeVietnamPro-Regular",
+                  "fontSize": 16,
+                  "letterSpacing": 0.48,
+                  "lineHeight": 24,
+                },
+                undefined,
+              ]
+            }
+            themeIntent="body"
+            themeTypeface="neutral"
+            themeVariant="regular"
+          >
+            $1052.03
+          </Text>
+        </View>
+        <View
           style={
-            [
-              {
-                "color": "#001f23",
-                "fontFamily": "BeVietnamPro-Regular",
-                "fontSize": 16,
-                "letterSpacing": 0.48,
-                "lineHeight": 24,
-              },
-              undefined,
-            ]
+            {
+              "alignSelf": "stretch",
+              "flexDirection": "row",
+              "justifyContent": "space-between",
+            }
           }
-          themeIntent="body"
-          themeTypeface="neutral"
-          themeVariant="regular"
         >
-          $1052.03
-        </Text>
+          <Text
+            allowFontScaling={false}
+            style={
+              [
+                {
+                  "color": "#001f23",
+                  "fontFamily": "BeVietnamPro-Regular",
+                  "fontSize": 16,
+                  "letterSpacing": 0.48,
+                  "lineHeight": 24,
+                },
+                undefined,
+              ]
+            }
+            themeIntent="body"
+            themeTypeface="neutral"
+            themeVariant="regular"
+          >
+            Gross pay
+          </Text>
+          <Text
+            allowFontScaling={false}
+            style={
+              [
+                {
+                  "color": "#001f23",
+                  "fontFamily": "BeVietnamPro-Regular",
+                  "fontSize": 16,
+                  "letterSpacing": 0.48,
+                  "lineHeight": 24,
+                },
+                undefined,
+              ]
+            }
+            themeIntent="body"
+            themeTypeface="neutral"
+            themeVariant="regular"
+          >
+            $1052.03
+          </Text>
+        </View>
       </View>
     </View>
   </View>
+  <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[`ListItem renders correctly ListItem with icon 1`] = `
 <View
-  accessibilityState={
-    {
-      "disabled": false,
-    }
-  }
-  accessibilityValue={
+  style={
     {
-      "max": undefined,
-      "min": undefined,
-      "now": undefined,
-      "text": undefined,
+      "flex": 1,
     }
   }
-  accessible={true}
-  focusable={false}
-  onClick={[Function]}
-  onResponderGrant={[Function]}
-  onResponderMove={[Function]}
-  onResponderRelease={[Function]}
-  onResponderTerminate={[Function]}
-  onResponderTerminationRequest={[Function]}
-  onStartShouldSetResponder={[Function]}
-  style={
-    [
-      {
-        "backgroundColor": "#ffffff",
-        "borderRadius": 8,
-        "flexDirection": "row",
-        "padding": 16,
-      },
-      undefined,
-    ]
-  }
-  testID="list-item"
 >
   <View
+    accessibilityState={
+      {
+        "disabled": false,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    focusable={false}
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
     style={
       [
         {
-          "flex": 1,
-          "flexDirection": "column",
-          "flexGrow": 2,
+          "backgroundColor": "#ffffff",
+          "borderRadius": 8,
+          "flexDirection": "row",
+          "padding": 16,
         },
         undefined,
       ]
     }
+    testID="list-item"
   >
     <View
       style={
-        {
-          "alignItems": "center",
-          "flexDirection": "row",
-        }
+        [
+          {
+            "flex": 1,
+            "flexDirection": "column",
+            "flexGrow": 2,
+          },
+          undefined,
+        ]
       }
     >
       <View
         style={
-          [
-            {
-              "flex": 1,
-            },
-            undefined,
-          ]
+          {
+            "alignItems": "center",
+            "flexDirection": "row",
+          }
         }
       >
-        <Text
-          allowFontScaling={false}
-          style={
-            [
-              {
-                "color": "#001f23",
-                "fontFamily": "BeVietnamPro-Regular",
-                "fontSize": 16,
-                "letterSpacing": 0.48,
-                "lineHeight": 24,
-              },
-              undefined,
-            ]
-          }
-          themeIntent="body"
-          themeTypeface="neutral"
-          themeVariant="regular"
-        >
-          List item
-        </Text>
-        <Text
-          allowFontScaling={false}
+        <View
           style={
             [
               {
-                "color": "#4d6265",
-                "fontFamily": "BeVietnamPro-Regular",
-                "fontSize": 12,
-                "letterSpacing": 0.48,
-                "lineHeight": 16,
+                "flex": 1,
               },
               undefined,
             ]
           }
-          themeFontWeight="regular"
-          themeIntent="subdued"
         >
-          subtitle
-        </Text>
-      </View>
-      <View
-        style={
-          [
-            {
-              "marginLeft": 8,
-            },
-            undefined,
-          ]
-        }
-      >
-        <HeroIcon
-          name="checkmark"
+          <Text
+            allowFontScaling={false}
+            style={
+              [
+                {
+                  "color": "#001f23",
+                  "fontFamily": "BeVietnamPro-Regular",
+                  "fontSize": 16,
+                  "letterSpacing": 0.48,
+                  "lineHeight": 24,
+                },
+                undefined,
+              ]
+            }
+            themeIntent="body"
+            themeTypeface="neutral"
+            themeVariant="regular"
+          >
+            List item
+          </Text>
+          <Text
+            allowFontScaling={false}
+            style={
+              [
+                {
+                  "color": "#4d6265",
+                  "fontFamily": "BeVietnamPro-Regular",
+                  "fontSize": 12,
+                  "letterSpacing": 0.48,
+                  "lineHeight": 16,
+                },
+                undefined,
+              ]
+            }
+            themeFontWeight="regular"
+            themeIntent="subdued"
+          >
+            subtitle
+          </Text>
+        </View>
+        <View
           style={
             [
               {
-                "color": "#401960",
-                "fontSize": 20,
+                "marginLeft": 8,
               },
               undefined,
             ]
           }
-          themeIntent="primary"
-          themeSize="small"
-        />
+        >
+          <HeroIcon
+            name="checkmark"
+            style={
+              [
+                {
+                  "color": "#401960",
+                  "fontSize": 20,
+                },
+                undefined,
+              ]
+            }
+            themeIntent="primary"
+            themeSize="small"
+          />
+        </View>
       </View>
     </View>
   </View>
+  <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[`ListItem renders correctly ListItem with leading status 1`] = `
 <View
-  accessibilityState={
-    {
-      "disabled": false,
-    }
-  }
-  accessibilityValue={
+  style={
     {
-      "max": undefined,
-      "min": undefined,
-      "now": undefined,
-      "text": undefined,
+      "flex": 1,
     }
   }
-  accessible={true}
-  focusable={false}
-  onClick={[Function]}
-  onResponderGrant={[Function]}
-  onResponderMove={[Function]}
-  onResponderRelease={[Function]}
-  onResponderTerminate={[Function]}
-  onResponderTerminationRequest={[Function]}
-  onStartShouldSetResponder={[Function]}
-  style={
-    [
-      {
-        "backgroundColor": "#ffffff",
-        "borderRadius": 8,
-        "flexDirection": "row",
-        "padding": 16,
-      },
-      undefined,
-    ]
-  }
 >
   <View
-    style={
-      [
-        {
-          "backgroundColor": "#abacaf",
-          "borderRadius": 999,
-          "marginRight": 8,
-          "width": 8,
-        },
-        undefined,
-      ]
+    accessibilityState={
+      {
+        "disabled": false,
+      }
     }
-    testID="leadingStatus"
-    themeLeadingStatusIntent="archived"
-  />
-  <View
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    focusable={false}
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
     style={
       [
         {
-          "flex": 1,
-          "flexDirection": "column",
-          "flexGrow": 2,
+          "backgroundColor": "#ffffff",
+          "borderRadius": 8,
+          "flexDirection": "row",
+          "padding": 16,
         },
         undefined,
       ]
@@ -549,339 +585,415 @@ exports[`ListItem renders correctly ListItem with leading status 1`] = `
   >
     <View
       style={
-        {
-          "alignItems": "center",
-          "flexDirection": "row",
-        }
+        [
+          {
+            "backgroundColor": "#abacaf",
+            "borderRadius": 999,
+            "marginRight": 8,
+            "width": 8,
+          },
+          undefined,
+        ]
+      }
+      testID="leadingStatus"
+      themeLeadingStatusIntent="archived"
+    />
+    <View
+      style={
+        [
+          {
+            "flex": 1,
+            "flexDirection": "column",
+            "flexGrow": 2,
+          },
+          undefined,
+        ]
       }
     >
       <View
         style={
-          [
-            {
-              "flex": 1,
-            },
-            undefined,
-          ]
+          {
+            "alignItems": "center",
+            "flexDirection": "row",
+          }
         }
       >
-        <Text
-          allowFontScaling={false}
+        <View
           style={
             [
               {
-                "color": "#001f23",
-                "fontFamily": "BeVietnamPro-Regular",
-                "fontSize": 16,
-                "letterSpacing": 0.48,
-                "lineHeight": 24,
+                "flex": 1,
               },
               undefined,
             ]
           }
-          themeIntent="body"
-          themeTypeface="neutral"
-          themeVariant="regular"
         >
-          03:00 PM - 9:00 PM
-        </Text>
-      </View>
-      <View
-        style={
-          [
-            {
-              "marginLeft": 8,
-            },
-            undefined,
-          ]
-        }
-      >
-        <HeroIcon
-          name="arrow-right"
+          <Text
+            allowFontScaling={false}
+            style={
+              [
+                {
+                  "color": "#001f23",
+                  "fontFamily": "BeVietnamPro-Regular",
+                  "fontSize": 16,
+                  "letterSpacing": 0.48,
+                  "lineHeight": 24,
+                },
+                undefined,
+              ]
+            }
+            themeIntent="body"
+            themeTypeface="neutral"
+            themeVariant="regular"
+          >
+            03:00 PM - 9:00 PM
+          </Text>
+        </View>
+        <View
           style={
             [
               {
-                "color": "#401960",
-                "fontSize": 20,
+                "marginLeft": 8,
               },
               undefined,
             ]
           }
-          themeIntent="primary"
-          themeSize="small"
-        />
+        >
+          <HeroIcon
+            name="arrow-right"
+            style={
+              [
+                {
+                  "color": "#401960",
+                  "fontSize": 20,
+                },
+                undefined,
+              ]
+            }
+            themeIntent="primary"
+            themeSize="small"
+          />
+        </View>
       </View>
     </View>
   </View>
+  <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[`ListItem renders correctly ListItem with prefix suffix is React.Element 1`] = `
 <View
-  accessibilityState={
-    {
-      "disabled": false,
-    }
-  }
-  accessibilityValue={
+  style={
     {
-      "max": undefined,
-      "min": undefined,
-      "now": undefined,
-      "text": undefined,
+      "flex": 1,
     }
   }
-  accessible={true}
-  focusable={false}
-  onClick={[Function]}
-  onResponderGrant={[Function]}
-  onResponderMove={[Function]}
-  onResponderRelease={[Function]}
-  onResponderTerminate={[Function]}
-  onResponderTerminationRequest={[Function]}
-  onStartShouldSetResponder={[Function]}
-  style={
-    [
-      {
-        "backgroundColor": "#ffffff",
-        "borderRadius": 8,
-        "flexDirection": "row",
-        "padding": 16,
-      },
-      undefined,
-    ]
-  }
-  testID="list-item"
 >
   <View
+    accessibilityState={
+      {
+        "disabled": false,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    focusable={false}
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
     style={
       [
         {
-          "flex": 1,
-          "flexDirection": "column",
-          "flexGrow": 2,
+          "backgroundColor": "#ffffff",
+          "borderRadius": 8,
+          "flexDirection": "row",
+          "padding": 16,
         },
         undefined,
       ]
     }
+    testID="list-item"
   >
     <View
       style={
-        {
-          "alignItems": "center",
-          "flexDirection": "row",
-        }
+        [
+          {
+            "flex": 1,
+            "flexDirection": "column",
+            "flexGrow": 2,
+          },
+          undefined,
+        ]
       }
     >
       <View
         style={
-          [
-            {
-              "marginRight": 8,
-            },
-            undefined,
-          ]
+          {
+            "alignItems": "center",
+            "flexDirection": "row",
+          }
         }
       >
         <View
-          accessibilityState={
-            {
-              "busy": undefined,
-              "checked": undefined,
-              "disabled": true,
-              "expanded": undefined,
-              "selected": undefined,
-            }
-          }
-          accessibilityValue={
-            {
-              "max": undefined,
-              "min": undefined,
-              "now": undefined,
-              "text": undefined,
-            }
-          }
-          accessible={true}
-          collapsable={false}
-          focusable={false}
-          onClick={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
           style={
-            {
-              "backgroundColor": "#401960",
-              "borderRadius": 999,
-              "height": 32,
-              "opacity": 1,
-              "overflow": "hidden",
-              "width": 32,
-            }
+            [
+              {
+                "marginRight": 8,
+              },
+              undefined,
+            ]
           }
         >
           <View
+            accessibilityState={
+              {
+                "busy": undefined,
+                "checked": undefined,
+                "disabled": true,
+                "expanded": undefined,
+                "selected": undefined,
+              }
+            }
+            accessibilityValue={
+              {
+                "max": undefined,
+                "min": undefined,
+                "now": undefined,
+                "text": undefined,
+              }
+            }
+            accessible={true}
+            collapsable={false}
+            focusable={false}
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
             style={
-              [
-                {
-                  "alignItems": "center",
-                  "height": "100%",
-                  "justifyContent": "center",
-                  "width": "100%",
-                },
-                undefined,
-              ]
+              {
+                "backgroundColor": "#401960",
+                "borderRadius": 999,
+                "height": 32,
+                "opacity": 1,
+                "overflow": "hidden",
+                "width": 32,
+              }
             }
           >
-            <Text
-              allowFontScaling={false}
+            <View
               style={
                 [
                   {
-                    "color": "#001f23",
-                    "fontFamily": "BeVietnamPro-Regular",
-                    "fontSize": 14,
-                    "letterSpacing": 0.42,
-                    "lineHeight": 22,
+                    "alignItems": "center",
+                    "height": "100%",
+                    "justifyContent": "center",
+                    "width": "100%",
                   },
+                  undefined,
+                ]
+              }
+            >
+              <Text
+                allowFontScaling={false}
+                style={
                   [
                     {
-                      "color": "#ffffff",
+                      "color": "#001f23",
                       "fontFamily": "BeVietnamPro-Regular",
-                      "fontSize": 16,
-                      "lineHeight": 0,
-                      "overflow": "hidden",
-                      "textAlign": "center",
-                      "textAlignVertical": "center",
+                      "fontSize": 14,
+                      "letterSpacing": 0.42,
+                      "lineHeight": 22,
                     },
-                    undefined,
-                  ],
-                ]
-              }
-              themeFontSize="medium"
-              themeFontWeight="regular"
-              themeIntent="body"
-              themeSize="small"
-              themeTypeface="neutral"
-            >
-              ML
-            </Text>
+                    [
+                      {
+                        "color": "#ffffff",
+                        "fontFamily": "BeVietnamPro-Regular",
+                        "fontSize": 16,
+                        "lineHeight": 0,
+                        "overflow": "hidden",
+                        "textAlign": "center",
+                        "textAlignVertical": "center",
+                      },
+                      undefined,
+                    ],
+                  ]
+                }
+                themeFontSize="medium"
+                themeFontWeight="regular"
+                themeIntent="body"
+                themeSize="small"
+                themeTypeface="neutral"
+              >
+                ML
+              </Text>
+            </View>
           </View>
         </View>
-      </View>
-      <View
-        style={
-          [
-            {
-              "flex": 1,
-            },
-            undefined,
-          ]
-        }
-      >
-        <Text
-          allowFontScaling={false}
-          style={
-            [
-              {
-                "color": "#001f23",
-                "fontFamily": "BeVietnamPro-Regular",
-                "fontSize": 16,
-                "letterSpacing": 0.48,
-                "lineHeight": 24,
-              },
-              undefined,
-            ]
-          }
-          themeIntent="body"
-          themeTypeface="neutral"
-          themeVariant="regular"
-        >
-          List item
-        </Text>
-        <Text
-          allowFontScaling={false}
+        <View
           style={
             [
               {
-                "color": "#4d6265",
-                "fontFamily": "BeVietnamPro-Regular",
-                "fontSize": 12,
-                "letterSpacing": 0.48,
-                "lineHeight": 16,
+                "flex": 1,
               },
               undefined,
             ]
           }
-          themeFontWeight="regular"
-          themeIntent="subdued"
         >
-          subtitle
-        </Text>
-      </View>
-      <View
-        style={
-          [
-            {
-              "marginLeft": 8,
-            },
-            undefined,
-          ]
-        }
-      >
-        <View
-          accessibilityState={
-            {
-              "busy": undefined,
-              "checked": undefined,
-              "disabled": false,
-              "expanded": undefined,
-              "selected": undefined,
+          <Text
+            allowFontScaling={false}
+            style={
+              [
+                {
+                  "color": "#001f23",
+                  "fontFamily": "BeVietnamPro-Regular",
+                  "fontSize": 16,
+                  "letterSpacing": 0.48,
+                  "lineHeight": 24,
+                },
+                undefined,
+              ]
             }
-          }
-          accessible={true}
-          focusable={false}
-          onClick={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
+            themeIntent="body"
+            themeTypeface="neutral"
+            themeVariant="regular"
+          >
+            List item
+          </Text>
+          <Text
+            allowFontScaling={false}
+            style={
+              [
+                {
+                  "color": "#4d6265",
+                  "fontFamily": "BeVietnamPro-Regular",
+                  "fontSize": 12,
+                  "letterSpacing": 0.48,
+                  "lineHeight": 16,
+                },
+                undefined,
+              ]
+            }
+            themeFontWeight="regular"
+            themeIntent="subdued"
+          >
+            subtitle
+          </Text>
+        </View>
+        <View
           style={
             [
               {
-                "backgroundColor": "#401960",
-                "borderRadius": 999,
-                "display": "flex",
-                "height": 24,
-                "justifyContent": "center",
-                "paddingHorizontal": 4,
-                "width": 48,
+                "marginLeft": 8,
               },
               undefined,
             ]
           }
-          testID="switch"
-          themeVariant="checked"
         >
           <View
-            collapsable={false}
-            style={
+            accessibilityState={
               {
-                "backgroundColor": "#ffffff",
-                "borderRadius": 999,
-                "height": 16,
-                "left": 24,
-                "width": 16,
+                "busy": undefined,
+                "checked": undefined,
+                "disabled": false,
+                "expanded": undefined,
+                "selected": undefined,
               }
             }
-          />
+            accessible={true}
+            focusable={false}
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              [
+                {
+                  "backgroundColor": "#401960",
+                  "borderRadius": 999,
+                  "display": "flex",
+                  "height": 24,
+                  "justifyContent": "center",
+                  "paddingHorizontal": 4,
+                  "width": 48,
+                },
+                undefined,
+              ]
+            }
+            testID="switch"
+            themeVariant="checked"
+          >
+            <View
+              collapsable={false}
+              style={
+                {
+                  "backgroundColor": "#ffffff",
+                  "borderRadius": 999,
+                  "height": 16,
+                  "left": 24,
+                  "width": 16,
+                }
+              }
+            />
+          </View>
         </View>
       </View>
     </View>
   </View>
+  <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>
 `;