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

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

@@ -1,237 +1,135 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`OptionList render isLoading correctly 1`] = `
-<RCTScrollView
-  ListFooterComponent={
-    <View
-      style={
-        {
-          "alignItems": "center",
-          "display": "flex",
-          "height": 56,
-        }
-      }
-    >
-      <Spinner />
-    </View>
-  }
-  data={
-    [
-      {
-        "category": "A",
-        "data": [
-          {
-            "text": "A1",
-            "value": "a1",
-          },
-        ],
-      },
-      {
-        "category": "B",
-        "data": [
-          {
-            "text": "B1",
-            "value": "b1",
-          },
-          {
-            "text": "B2",
-            "value": "b2",
-          },
-        ],
-      },
-    ]
-  }
-  getItem={[Function]}
-  getItemCount={[Function]}
-  keyExtractor={[Function]}
-  onContentSizeChange={[Function]}
-  onEndReached={[Function]}
-  onEndReachedThreshold={0.1}
-  onLayout={[Function]}
-  onMomentumScrollBegin={[Function]}
-  onMomentumScrollEnd={[Function]}
-  onScroll={[Function]}
-  onScrollBeginDrag={[Function]}
-  onScrollEndDrag={[Function]}
-  renderItem={[Function]}
-  scrollEventThrottle={50}
-  stickyHeaderIndices={
-    [
-      0,
-      3,
-    ]
-  }
+<View
   style={
-    [
-      {
-        "paddingHorizontal": 12,
-      },
-      [
-        {
-          "paddingBottom": 16,
-        },
-        {},
-      ],
-    ]
+    {
+      "flex": 1,
+    }
   }
 >
-  <View>
-    <View
-      onLayout={[Function]}
-      style={null}
-    >
+  <RCTScrollView
+    ListFooterComponent={
       <View
         style={
-          [
+          {
+            "alignItems": "center",
+            "display": "flex",
+            "height": 56,
+          }
+        }
+      >
+        <Spinner />
+      </View>
+    }
+    data={
+      [
+        {
+          "category": "A",
+          "data": [
             {
-              "alignContent": "center",
-              "backgroundColor": "#f6f6f7",
-              "display": "flex",
-              "flexDirection": "row",
-              "justifyContent": "space-between",
-              "marginBottom": 16,
-              "paddingHorizontal": 16,
-              "paddingVertical": 8,
+              "text": "A1",
+              "value": "a1",
+            },
+          ],
+        },
+        {
+          "category": "B",
+          "data": [
+            {
+              "text": "B1",
+              "value": "b1",
             },
             {
-              "marginBottom": 0,
+              "text": "B2",
+              "value": "b2",
             },
-          ]
-        }
-        themeSize="medium"
+          ],
+        },
+      ]
+    }
+    getItem={[Function]}
+    getItemCount={[Function]}
+    keyExtractor={[Function]}
+    onContentSizeChange={[Function]}
+    onEndReached={[Function]}
+    onEndReachedThreshold={0.1}
+    onLayout={[Function]}
+    onMomentumScrollBegin={[Function]}
+    onMomentumScrollEnd={[Function]}
+    onScroll={[Function]}
+    onScrollBeginDrag={[Function]}
+    onScrollEndDrag={[Function]}
+    renderItem={[Function]}
+    scrollEventThrottle={50}
+    stickyHeaderIndices={
+      [
+        0,
+        3,
+      ]
+    }
+    style={
+      [
+        {
+          "paddingHorizontal": 12,
+        },
+        [
+          {
+            "paddingBottom": 16,
+          },
+          {},
+        ],
+      ]
+    }
+  >
+    <View>
+      <View
+        onFocusCapture={[Function]}
+        onLayout={[Function]}
+        style={null}
       >
         <View
           style={
             [
               {
-                "alignItems": "center",
+                "alignContent": "center",
+                "backgroundColor": "#f6f6f7",
                 "display": "flex",
                 "flexDirection": "row",
+                "justifyContent": "space-between",
+                "marginBottom": 16,
+                "paddingHorizontal": 16,
+                "paddingVertical": 8,
               },
-              undefined,
-            ]
-          }
-        >
-          <View
-            style={
-              [
-                {
-                  "marginRight": 12,
-                },
-                undefined,
-              ]
-            }
-          />
-          <Text
-            allowFontScaling={false}
-            style={
-              [
-                {
-                  "color": "#001f23",
-                  "fontFamily": "BeVietnamPro-Regular",
-                  "fontSize": 14,
-                  "letterSpacing": 0.48,
-                  "lineHeight": 22,
-                },
-                undefined,
-              ]
-            }
-            themeIntent="body"
-            themeTypeface="neutral"
-            themeVariant="small"
-          >
-            A
-          </Text>
-        </View>
-      </View>
-    </View>
-    <View
-      onLayout={[Function]}
-      style={null}
-    >
-      <View>
-        <View
-          highlighted={false}
-          section={
-            {
-              "category": "A",
-              "data": [
-                {
-                  "text": "A1",
-                  "value": "a1",
-                },
-              ],
-            }
-          }
-          style={
-            [
-              {
-                "marginTop": 12,
-              },
-              undefined,
-            ]
-          }
-          trailingItem={
-            {
-              "text": "A1",
-              "value": "a1",
-            }
-          }
-          trailingSection={
-            {
-              "category": "B",
-              "data": [
-                {
-                  "text": "B1",
-                  "value": "b1",
-                },
-                {
-                  "text": "B2",
-                  "value": "b2",
-                },
-              ],
-            }
-          }
-        />
-        <View
-          accessibilityState={
-            {
-              "disabled": false,
-            }
-          }
-          accessible={true}
-          focusable={true}
-          onClick={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
-          style={
-            [
               {
-                "alignItems": "center",
-                "backgroundColor": "#ece8ef",
-                "borderRadius": 4,
-                "flexDirection": "row",
-                "opacity": 1,
-                "padding": 16,
+                "marginBottom": 0,
               },
-              undefined,
             ]
           }
+          themeSize="medium"
         >
           <View
             style={
               [
                 {
-                  "flex": 1,
+                  "alignItems": "center",
+                  "display": "flex",
+                  "flexDirection": "row",
                 },
                 undefined,
               ]
             }
           >
+            <View
+              style={
+                [
+                  {
+                    "marginRight": 12,
+                  },
+                  undefined,
+                ]
+              }
+            />
             <Text
               allowFontScaling={false}
               style={
@@ -239,226 +137,237 @@ exports[`OptionList render isLoading correctly 1`] = `
                   {
                     "color": "#001f23",
                     "fontFamily": "BeVietnamPro-Regular",
-                    "fontSize": 16,
+                    "fontSize": 14,
                     "letterSpacing": 0.48,
-                    "lineHeight": 24,
+                    "lineHeight": 22,
                   },
                   undefined,
                 ]
               }
               themeIntent="body"
               themeTypeface="neutral"
-              themeVariant="regular"
+              themeVariant="small"
             >
-              A1
+              A
             </Text>
           </View>
         </View>
-        <View
-          highlighted={false}
-          leadingItem={
-            {
-              "text": "A1",
-              "value": "a1",
-            }
-          }
-          section={
-            {
-              "category": "A",
-              "data": [
-                {
-                  "text": "A1",
-                  "value": "a1",
-                },
-              ],
-            }
-          }
-          style={
-            [
-              {
-                "marginTop": 12,
-              },
-              undefined,
-            ]
-          }
-          trailingSection={
-            {
-              "category": "B",
-              "data": [
-                {
-                  "text": "B1",
-                  "value": "b1",
-                },
-                {
-                  "text": "B2",
-                  "value": "b2",
-                },
-              ],
-            }
-          }
-        />
       </View>
-    </View>
-    <View
-      onLayout={[Function]}
-      style={null}
-    />
-    <View
-      onLayout={[Function]}
-      style={null}
-    >
       <View
-        style={
-          [
-            {
-              "alignContent": "center",
-              "backgroundColor": "#f6f6f7",
-              "display": "flex",
-              "flexDirection": "row",
-              "justifyContent": "space-between",
-              "marginBottom": 16,
-              "paddingHorizontal": 16,
-              "paddingVertical": 8,
-            },
-            {
-              "marginBottom": 0,
-            },
-          ]
-        }
-        themeSize="medium"
+        onFocusCapture={[Function]}
+        onLayout={[Function]}
+        style={null}
       >
-        <View
-          style={
-            [
-              {
-                "alignItems": "center",
-                "display": "flex",
-                "flexDirection": "row",
-              },
-              undefined,
-            ]
-          }
-        >
+        <View>
           <View
+            highlighted={false}
+            section={
+              {
+                "category": "A",
+                "data": [
+                  {
+                    "text": "A1",
+                    "value": "a1",
+                  },
+                ],
+              }
+            }
             style={
               [
                 {
-                  "marginRight": 12,
+                  "marginTop": 12,
                 },
                 undefined,
               ]
             }
+            trailingItem={
+              {
+                "text": "A1",
+                "value": "a1",
+              }
+            }
+            trailingSection={
+              {
+                "category": "B",
+                "data": [
+                  {
+                    "text": "B1",
+                    "value": "b1",
+                  },
+                  {
+                    "text": "B2",
+                    "value": "b2",
+                  },
+                ],
+              }
+            }
           />
-          <Text
-            allowFontScaling={false}
+          <View
+            accessibilityState={
+              {
+                "disabled": false,
+              }
+            }
+            accessibilityValue={
+              {
+                "max": undefined,
+                "min": undefined,
+                "now": undefined,
+                "text": undefined,
+              }
+            }
+            accessible={true}
+            focusable={true}
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
             style={
               [
                 {
-                  "color": "#001f23",
-                  "fontFamily": "BeVietnamPro-Regular",
-                  "fontSize": 14,
-                  "letterSpacing": 0.48,
-                  "lineHeight": 22,
+                  "alignItems": "center",
+                  "backgroundColor": "#ece8ef",
+                  "borderRadius": 4,
+                  "flexDirection": "row",
+                  "opacity": 1,
+                  "padding": 16,
                 },
                 undefined,
               ]
             }
-            themeIntent="body"
-            themeTypeface="neutral"
-            themeVariant="small"
           >
-            B
-          </Text>
-        </View>
-      </View>
-    </View>
-    <View
-      onLayout={[Function]}
-      style={null}
-    >
-      <View>
-        <View
-          highlighted={false}
-          leadingSection={
-            {
-              "category": "A",
-              "data": [
-                {
-                  "text": "A1",
-                  "value": "a1",
-                },
-              ],
+            <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"
+              >
+                A1
+              </Text>
+            </View>
+          </View>
+          <View
+            highlighted={false}
+            leadingItem={
+              {
+                "text": "A1",
+                "value": "a1",
+              }
             }
-          }
-          section={
-            {
-              "category": "B",
-              "data": [
-                {
-                  "text": "B1",
-                  "value": "b1",
-                },
+            section={
+              {
+                "category": "A",
+                "data": [
+                  {
+                    "text": "A1",
+                    "value": "a1",
+                  },
+                ],
+              }
+            }
+            style={
+              [
                 {
-                  "text": "B2",
-                  "value": "b2",
+                  "marginTop": 12,
                 },
-              ],
+                undefined,
+              ]
             }
-          }
-          style={
-            [
+            trailingSection={
               {
-                "marginTop": 12,
-              },
-              undefined,
-            ]
-          }
-          trailingItem={
-            {
-              "text": "B1",
-              "value": "b1",
+                "category": "B",
+                "data": [
+                  {
+                    "text": "B1",
+                    "value": "b1",
+                  },
+                  {
+                    "text": "B2",
+                    "value": "b2",
+                  },
+                ],
+              }
             }
-          }
-        />
+          />
+        </View>
+      </View>
+      <View
+        onFocusCapture={[Function]}
+        onLayout={[Function]}
+        style={null}
+      />
+      <View
+        onFocusCapture={[Function]}
+        onLayout={[Function]}
+        style={null}
+      >
         <View
-          accessibilityState={
-            {
-              "disabled": false,
-            }
-          }
-          accessible={true}
-          focusable={true}
-          onClick={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
           style={
             [
               {
-                "alignItems": "center",
-                "backgroundColor": "#ffffff",
-                "borderRadius": 4,
+                "alignContent": "center",
+                "backgroundColor": "#f6f6f7",
+                "display": "flex",
                 "flexDirection": "row",
-                "opacity": 1,
-                "padding": 16,
+                "justifyContent": "space-between",
+                "marginBottom": 16,
+                "paddingHorizontal": 16,
+                "paddingVertical": 8,
+              },
+              {
+                "marginBottom": 0,
               },
-              undefined,
             ]
           }
+          themeSize="medium"
         >
           <View
             style={
               [
                 {
-                  "flex": 1,
+                  "alignItems": "center",
+                  "display": "flex",
+                  "flexDirection": "row",
                 },
                 undefined,
               ]
             }
           >
+            <View
+              style={
+                [
+                  {
+                    "marginRight": 12,
+                  },
+                  undefined,
+                ]
+              }
+            />
             <Text
               allowFontScaling={false}
               style={
@@ -466,564 +375,612 @@ exports[`OptionList render isLoading correctly 1`] = `
                   {
                     "color": "#001f23",
                     "fontFamily": "BeVietnamPro-Regular",
-                    "fontSize": 16,
+                    "fontSize": 14,
                     "letterSpacing": 0.48,
-                    "lineHeight": 24,
+                    "lineHeight": 22,
                   },
                   undefined,
                 ]
               }
               themeIntent="body"
               themeTypeface="neutral"
-              themeVariant="regular"
+              themeVariant="small"
             >
-              B1
+              B
             </Text>
           </View>
         </View>
-        <View
-          highlighted={false}
-          leadingItem={
-            {
-              "text": "B1",
-              "value": "b1",
+      </View>
+      <View
+        onFocusCapture={[Function]}
+        onLayout={[Function]}
+        style={null}
+      >
+        <View>
+          <View
+            highlighted={false}
+            leadingSection={
+              {
+                "category": "A",
+                "data": [
+                  {
+                    "text": "A1",
+                    "value": "a1",
+                  },
+                ],
+              }
             }
-          }
-          leadingSection={
-            {
-              "category": "A",
-              "data": [
+            section={
+              {
+                "category": "B",
+                "data": [
+                  {
+                    "text": "B1",
+                    "value": "b1",
+                  },
+                  {
+                    "text": "B2",
+                    "value": "b2",
+                  },
+                ],
+              }
+            }
+            style={
+              [
                 {
-                  "text": "A1",
-                  "value": "a1",
+                  "marginTop": 12,
                 },
-              ],
+                undefined,
+              ]
             }
-          }
-          section={
-            {
-              "category": "B",
-              "data": [
+            trailingItem={
+              {
+                "text": "B1",
+                "value": "b1",
+              }
+            }
+          />
+          <View
+            accessibilityState={
+              {
+                "disabled": false,
+              }
+            }
+            accessibilityValue={
+              {
+                "max": undefined,
+                "min": undefined,
+                "now": undefined,
+                "text": undefined,
+              }
+            }
+            accessible={true}
+            focusable={true}
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              [
                 {
-                  "text": "B1",
-                  "value": "b1",
+                  "alignItems": "center",
+                  "backgroundColor": "#ffffff",
+                  "borderRadius": 4,
+                  "flexDirection": "row",
+                  "opacity": 1,
+                  "padding": 16,
                 },
+                undefined,
+              ]
+            }
+          >
+            <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"
+              >
+                B1
+              </Text>
+            </View>
+          </View>
+          <View
+            highlighted={false}
+            leadingItem={
+              {
+                "text": "B1",
+                "value": "b1",
+              }
+            }
+            leadingSection={
+              {
+                "category": "A",
+                "data": [
+                  {
+                    "text": "A1",
+                    "value": "a1",
+                  },
+                ],
+              }
+            }
+            section={
+              {
+                "category": "B",
+                "data": [
+                  {
+                    "text": "B1",
+                    "value": "b1",
+                  },
+                  {
+                    "text": "B2",
+                    "value": "b2",
+                  },
+                ],
+              }
+            }
+            style={
+              [
                 {
-                  "text": "B2",
-                  "value": "b2",
+                  "marginTop": 4,
                 },
-              ],
+                undefined,
+              ]
             }
-          }
-          style={
-            [
+            trailingItem={
               {
-                "marginTop": 4,
-              },
-              undefined,
-            ]
-          }
-          trailingItem={
-            {
-              "text": "B2",
-              "value": "b2",
+                "text": "B2",
+                "value": "b2",
+              }
             }
-          }
-        />
+          />
+        </View>
       </View>
-    </View>
-    <View
-      onLayout={[Function]}
-      style={null}
-    >
-      <View>
-        <View
-          accessibilityState={
-            {
-              "disabled": false,
+      <View
+        onFocusCapture={[Function]}
+        onLayout={[Function]}
+        style={null}
+      >
+        <View>
+          <View
+            accessibilityState={
+              {
+                "disabled": false,
+              }
             }
-          }
-          accessible={true}
-          focusable={true}
-          onClick={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
-          style={
-            [
+            accessibilityValue={
               {
-                "alignItems": "center",
-                "backgroundColor": "#ffffff",
-                "borderRadius": 4,
-                "flexDirection": "row",
-                "opacity": 1,
-                "padding": 16,
-              },
-              undefined,
-            ]
-          }
-        >
-          <View
+                "max": undefined,
+                "min": undefined,
+                "now": undefined,
+                "text": undefined,
+              }
+            }
+            accessible={true}
+            focusable={true}
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
             style={
               [
                 {
-                  "flex": 1,
+                  "alignItems": "center",
+                  "backgroundColor": "#ffffff",
+                  "borderRadius": 4,
+                  "flexDirection": "row",
+                  "opacity": 1,
+                  "padding": 16,
                 },
                 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"
             >
-              B2
-            </Text>
+              <Text
+                allowFontScaling={false}
+                style={
+                  [
+                    {
+                      "color": "#001f23",
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 16,
+                      "letterSpacing": 0.48,
+                      "lineHeight": 24,
+                    },
+                    undefined,
+                  ]
+                }
+                themeIntent="body"
+                themeTypeface="neutral"
+                themeVariant="regular"
+              >
+                B2
+              </Text>
+            </View>
           </View>
-        </View>
-        <View
-          highlighted={false}
-          leadingItem={
-            {
-              "text": "B2",
-              "value": "b2",
+          <View
+            highlighted={false}
+            leadingItem={
+              {
+                "text": "B2",
+                "value": "b2",
+              }
             }
-          }
-          leadingSection={
-            {
-              "category": "A",
-              "data": [
-                {
-                  "text": "A1",
-                  "value": "a1",
-                },
-              ],
+            leadingSection={
+              {
+                "category": "A",
+                "data": [
+                  {
+                    "text": "A1",
+                    "value": "a1",
+                  },
+                ],
+              }
             }
-          }
-          section={
-            {
-              "category": "B",
-              "data": [
-                {
-                  "text": "B1",
-                  "value": "b1",
-                },
+            section={
+              {
+                "category": "B",
+                "data": [
+                  {
+                    "text": "B1",
+                    "value": "b1",
+                  },
+                  {
+                    "text": "B2",
+                    "value": "b2",
+                  },
+                ],
+              }
+            }
+            style={
+              [
                 {
-                  "text": "B2",
-                  "value": "b2",
+                  "marginTop": 12,
                 },
-              ],
+                undefined,
+              ]
             }
-          }
-          style={
-            [
-              {
-                "marginTop": 12,
-              },
-              undefined,
-            ]
-          }
-        />
+          />
+        </View>
       </View>
-    </View>
-    <View
-      onLayout={[Function]}
-      style={null}
-    />
-    <View
-      onLayout={[Function]}
-    >
       <View
-        style={
-          {
-            "alignItems": "center",
-            "display": "flex",
-            "height": 56,
-          }
-        }
+        onFocusCapture={[Function]}
+        onLayout={[Function]}
+        style={null}
+      />
+      <View
+        onLayout={[Function]}
       >
         <View
           style={
-            [
-              {},
-              undefined,
-            ]
+            {
+              "alignItems": "center",
+              "display": "flex",
+              "height": 56,
+            }
           }
         >
           <View
             style={
               [
-                {
-                  "alignItems": "center",
-                  "height": "100%",
-                  "justifyContent": "center",
-                },
+                {},
                 undefined,
               ]
             }
           >
             <View
-              collapsable={false}
               style={
-                {
-                  "transform": [
-                    {
-                      "rotate": "0deg",
-                    },
-                  ],
-                }
+                [
+                  {
+                    "alignItems": "center",
+                    "height": "100%",
+                    "justifyContent": "center",
+                  },
+                  undefined,
+                ]
               }
             >
               <View
                 collapsable={false}
                 style={
-                  [
-                    {
-                      "flexDirection": "row",
-                      "marginBottom": 8,
-                    },
-                    {},
-                  ]
-                }
-                themePosition="top"
-                themeSize="medium"
-              >
-                <View
-                  collapsable={false}
-                  style={
-                    [
-                      {
-                        "backgroundColor": "#401960",
-                        "borderRadius": 999,
-                        "height": 16,
-                        "opacity": 0.9,
-                        "width": 16,
-                      },
-                      {},
-                    ]
-                  }
-                  themeIntent="primary"
-                  themePosition="topLeft"
-                  themeSize="medium"
-                />
-                <View
-                  collapsable={false}
-                  style={
-                    [
+                  {
+                    "transform": [
                       {
-                        "backgroundColor": "#401960",
-                        "borderRadius": 999,
-                        "height": 16,
-                        "marginLeft": 8,
-                        "opacity": 0.675,
-                        "width": 16,
+                        "rotate": "0deg",
                       },
-                      {},
-                    ]
+                    ],
                   }
-                  themeIntent="primary"
-                  themePosition="topRight"
-                  themeSize="medium"
-                />
-              </View>
-              <View
-                collapsable={false}
-                style={
-                  [
-                    {
-                      "flexDirection": "row",
-                      "marginBottom": 0,
-                    },
-                    {},
-                  ]
                 }
-                themePosition="bottom"
-                themeSize="medium"
               >
                 <View
                   collapsable={false}
                   style={
                     [
                       {
-                        "backgroundColor": "#401960",
-                        "borderRadius": 999,
-                        "height": 16,
-                        "opacity": 0.45,
-                        "width": 16,
+                        "flexDirection": "row",
+                        "marginBottom": 8,
                       },
                       {},
                     ]
                   }
-                  themeIntent="primary"
-                  themePosition="bottomLeft"
+                  themePosition="top"
                   themeSize="medium"
-                />
+                >
+                  <View
+                    collapsable={false}
+                    style={
+                      [
+                        {
+                          "backgroundColor": "#401960",
+                          "borderRadius": 999,
+                          "height": 16,
+                          "opacity": 0.9,
+                          "width": 16,
+                        },
+                        {},
+                      ]
+                    }
+                    themeIntent="primary"
+                    themePosition="topLeft"
+                    themeSize="medium"
+                  />
+                  <View
+                    collapsable={false}
+                    style={
+                      [
+                        {
+                          "backgroundColor": "#401960",
+                          "borderRadius": 999,
+                          "height": 16,
+                          "marginLeft": 8,
+                          "opacity": 0.675,
+                          "width": 16,
+                        },
+                        {},
+                      ]
+                    }
+                    themeIntent="primary"
+                    themePosition="topRight"
+                    themeSize="medium"
+                  />
+                </View>
                 <View
                   collapsable={false}
                   style={
                     [
                       {
-                        "backgroundColor": "#401960",
-                        "borderRadius": 999,
-                        "height": 16,
-                        "marginLeft": 8,
-                        "opacity": 0.225,
-                        "width": 16,
+                        "flexDirection": "row",
+                        "marginBottom": 0,
                       },
                       {},
                     ]
                   }
-                  themeIntent="primary"
-                  themePosition="bottomRight"
+                  themePosition="bottom"
                   themeSize="medium"
-                />
+                >
+                  <View
+                    collapsable={false}
+                    style={
+                      [
+                        {
+                          "backgroundColor": "#401960",
+                          "borderRadius": 999,
+                          "height": 16,
+                          "opacity": 0.45,
+                          "width": 16,
+                        },
+                        {},
+                      ]
+                    }
+                    themeIntent="primary"
+                    themePosition="bottomLeft"
+                    themeSize="medium"
+                  />
+                  <View
+                    collapsable={false}
+                    style={
+                      [
+                        {
+                          "backgroundColor": "#401960",
+                          "borderRadius": 999,
+                          "height": 16,
+                          "marginLeft": 8,
+                          "opacity": 0.225,
+                          "width": 16,
+                        },
+                        {},
+                      ]
+                    }
+                    themeIntent="primary"
+                    themePosition="bottomRight"
+                    themeSize="medium"
+                  />
+                </View>
               </View>
             </View>
           </View>
         </View>
       </View>
     </View>
-  </View>
-</RCTScrollView>
+  </RCTScrollView>
+  <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[`OptionList renders correctly 1`] = `
-<RCTScrollView
-  ListFooterComponent={null}
-  data={
-    [
-      {
-        "category": "A",
-        "data": [
-          {
-            "text": "A1",
-            "value": "a1",
-          },
-        ],
-      },
-      {
-        "category": "B",
-        "data": [
-          {
-            "text": "B1",
-            "value": "b1",
-          },
-          {
-            "text": "B2",
-            "value": "b2",
-          },
-        ],
-      },
-    ]
-  }
-  getItem={[Function]}
-  getItemCount={[Function]}
-  keyExtractor={[Function]}
-  onContentSizeChange={[Function]}
-  onEndReached={[Function]}
-  onEndReachedThreshold={0.1}
-  onLayout={[Function]}
-  onMomentumScrollBegin={[Function]}
-  onMomentumScrollEnd={[Function]}
-  onScroll={[Function]}
-  onScrollBeginDrag={[Function]}
-  onScrollEndDrag={[Function]}
-  renderItem={[Function]}
-  scrollEventThrottle={50}
-  stickyHeaderIndices={
-    [
-      0,
-      3,
-    ]
-  }
+<View
   style={
-    [
-      {
-        "paddingHorizontal": 12,
-      },
-      [
-        {
-          "paddingBottom": 16,
-        },
-        {},
-      ],
-    ]
+    {
+      "flex": 1,
+    }
   }
 >
-  <View>
-    <View
-      onLayout={[Function]}
-      style={null}
-    >
-      <View
-        style={
-          [
+  <RCTScrollView
+    ListFooterComponent={null}
+    data={
+      [
+        {
+          "category": "A",
+          "data": [
             {
-              "alignContent": "center",
-              "backgroundColor": "#f6f6f7",
-              "display": "flex",
-              "flexDirection": "row",
-              "justifyContent": "space-between",
-              "marginBottom": 16,
-              "paddingHorizontal": 16,
-              "paddingVertical": 8,
+              "text": "A1",
+              "value": "a1",
             },
+          ],
+        },
+        {
+          "category": "B",
+          "data": [
             {
-              "marginBottom": 0,
+              "text": "B1",
+              "value": "b1",
             },
-          ]
-        }
-        themeSize="medium"
+            {
+              "text": "B2",
+              "value": "b2",
+            },
+          ],
+        },
+      ]
+    }
+    getItem={[Function]}
+    getItemCount={[Function]}
+    keyExtractor={[Function]}
+    onContentSizeChange={[Function]}
+    onEndReached={[Function]}
+    onEndReachedThreshold={0.1}
+    onLayout={[Function]}
+    onMomentumScrollBegin={[Function]}
+    onMomentumScrollEnd={[Function]}
+    onScroll={[Function]}
+    onScrollBeginDrag={[Function]}
+    onScrollEndDrag={[Function]}
+    renderItem={[Function]}
+    scrollEventThrottle={50}
+    stickyHeaderIndices={
+      [
+        0,
+        3,
+      ]
+    }
+    style={
+      [
+        {
+          "paddingHorizontal": 12,
+        },
+        [
+          {
+            "paddingBottom": 16,
+          },
+          {},
+        ],
+      ]
+    }
+  >
+    <View>
+      <View
+        onFocusCapture={[Function]}
+        onLayout={[Function]}
+        style={null}
       >
         <View
           style={
             [
               {
-                "alignItems": "center",
+                "alignContent": "center",
+                "backgroundColor": "#f6f6f7",
                 "display": "flex",
                 "flexDirection": "row",
+                "justifyContent": "space-between",
+                "marginBottom": 16,
+                "paddingHorizontal": 16,
+                "paddingVertical": 8,
               },
-              undefined,
-            ]
-          }
-        >
-          <View
-            style={
-              [
-                {
-                  "marginRight": 12,
-                },
-                undefined,
-              ]
-            }
-          />
-          <Text
-            allowFontScaling={false}
-            style={
-              [
-                {
-                  "color": "#001f23",
-                  "fontFamily": "BeVietnamPro-Regular",
-                  "fontSize": 14,
-                  "letterSpacing": 0.48,
-                  "lineHeight": 22,
-                },
-                undefined,
-              ]
-            }
-            themeIntent="body"
-            themeTypeface="neutral"
-            themeVariant="small"
-          >
-            A
-          </Text>
-        </View>
-      </View>
-    </View>
-    <View
-      onLayout={[Function]}
-      style={null}
-    >
-      <View>
-        <View
-          highlighted={false}
-          section={
-            {
-              "category": "A",
-              "data": [
-                {
-                  "text": "A1",
-                  "value": "a1",
-                },
-              ],
-            }
-          }
-          style={
-            [
-              {
-                "marginTop": 12,
-              },
-              undefined,
-            ]
-          }
-          trailingItem={
-            {
-              "text": "A1",
-              "value": "a1",
-            }
-          }
-          trailingSection={
-            {
-              "category": "B",
-              "data": [
-                {
-                  "text": "B1",
-                  "value": "b1",
-                },
-                {
-                  "text": "B2",
-                  "value": "b2",
-                },
-              ],
-            }
-          }
-        />
-        <View
-          accessibilityState={
-            {
-              "disabled": false,
-            }
-          }
-          accessible={true}
-          focusable={true}
-          onClick={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
-          style={
-            [
               {
-                "alignItems": "center",
-                "backgroundColor": "#ece8ef",
-                "borderRadius": 4,
-                "flexDirection": "row",
-                "opacity": 1,
-                "padding": 16,
+                "marginBottom": 0,
               },
-              undefined,
             ]
           }
+          themeSize="medium"
         >
           <View
             style={
               [
                 {
-                  "flex": 1,
+                  "alignItems": "center",
+                  "display": "flex",
+                  "flexDirection": "row",
                 },
                 undefined,
               ]
             }
           >
+            <View
+              style={
+                [
+                  {
+                    "marginRight": 12,
+                  },
+                  undefined,
+                ]
+              }
+            />
             <Text
               allowFontScaling={false}
               style={
@@ -1031,343 +988,237 @@ exports[`OptionList renders correctly 1`] = `
                   {
                     "color": "#001f23",
                     "fontFamily": "BeVietnamPro-Regular",
-                    "fontSize": 16,
+                    "fontSize": 14,
                     "letterSpacing": 0.48,
-                    "lineHeight": 24,
+                    "lineHeight": 22,
                   },
                   undefined,
                 ]
               }
               themeIntent="body"
               themeTypeface="neutral"
-              themeVariant="regular"
+              themeVariant="small"
             >
-              A1
+              A
             </Text>
           </View>
         </View>
-        <View
-          highlighted={false}
-          leadingItem={
-            {
-              "text": "A1",
-              "value": "a1",
-            }
-          }
-          section={
-            {
-              "category": "A",
-              "data": [
-                {
-                  "text": "A1",
-                  "value": "a1",
-                },
-              ],
-            }
-          }
-          style={
-            [
-              {
-                "marginTop": 12,
-              },
-              undefined,
-            ]
-          }
-          trailingSection={
-            {
-              "category": "B",
-              "data": [
-                {
-                  "text": "B1",
-                  "value": "b1",
-                },
-                {
-                  "text": "B2",
-                  "value": "b2",
-                },
-              ],
-            }
-          }
-        />
       </View>
-    </View>
-    <View
-      onLayout={[Function]}
-      style={null}
-    />
-    <View
-      onLayout={[Function]}
-      style={null}
-    >
       <View
-        style={
-          [
-            {
-              "alignContent": "center",
-              "backgroundColor": "#f6f6f7",
-              "display": "flex",
-              "flexDirection": "row",
-              "justifyContent": "space-between",
-              "marginBottom": 16,
-              "paddingHorizontal": 16,
-              "paddingVertical": 8,
-            },
-            {
-              "marginBottom": 0,
-            },
-          ]
-        }
-        themeSize="medium"
+        onFocusCapture={[Function]}
+        onLayout={[Function]}
+        style={null}
       >
-        <View
-          style={
-            [
-              {
-                "alignItems": "center",
-                "display": "flex",
-                "flexDirection": "row",
-              },
-              undefined,
-            ]
-          }
-        >
+        <View>
           <View
-            style={
-              [
-                {
-                  "marginRight": 12,
-                },
-                undefined,
-              ]
+            highlighted={false}
+            section={
+              {
+                "category": "A",
+                "data": [
+                  {
+                    "text": "A1",
+                    "value": "a1",
+                  },
+                ],
+              }
             }
-          />
-          <Text
-            allowFontScaling={false}
             style={
               [
                 {
-                  "color": "#001f23",
-                  "fontFamily": "BeVietnamPro-Regular",
-                  "fontSize": 14,
-                  "letterSpacing": 0.48,
-                  "lineHeight": 22,
+                  "marginTop": 12,
                 },
                 undefined,
               ]
             }
-            themeIntent="body"
-            themeTypeface="neutral"
-            themeVariant="small"
-          >
-            B
-          </Text>
-        </View>
-      </View>
-    </View>
-    <View
-      onLayout={[Function]}
-      style={null}
-    >
-      <View>
-        <View
-          highlighted={false}
-          leadingSection={
-            {
-              "category": "A",
-              "data": [
-                {
-                  "text": "A1",
-                  "value": "a1",
-                },
-              ],
-            }
-          }
-          section={
-            {
-              "category": "B",
-              "data": [
-                {
-                  "text": "B1",
-                  "value": "b1",
-                },
-                {
-                  "text": "B2",
-                  "value": "b2",
-                },
-              ],
+            trailingItem={
+              {
+                "text": "A1",
+                "value": "a1",
+              }
             }
-          }
-          style={
-            [
+            trailingSection={
               {
-                "marginTop": 12,
-              },
-              undefined,
-            ]
-          }
-          trailingItem={
-            {
-              "text": "B1",
-              "value": "b1",
+                "category": "B",
+                "data": [
+                  {
+                    "text": "B1",
+                    "value": "b1",
+                  },
+                  {
+                    "text": "B2",
+                    "value": "b2",
+                  },
+                ],
+              }
             }
-          }
-        />
-        <View
-          accessibilityState={
-            {
-              "disabled": false,
+          />
+          <View
+            accessibilityState={
+              {
+                "disabled": false,
+              }
             }
-          }
-          accessible={true}
-          focusable={true}
-          onClick={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
-          style={
-            [
+            accessibilityValue={
               {
-                "alignItems": "center",
-                "backgroundColor": "#ffffff",
-                "borderRadius": 4,
-                "flexDirection": "row",
-                "opacity": 1,
-                "padding": 16,
-              },
-              undefined,
-            ]
-          }
-        >
-          <View
+                "max": undefined,
+                "min": undefined,
+                "now": undefined,
+                "text": undefined,
+              }
+            }
+            accessible={true}
+            focusable={true}
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
             style={
               [
                 {
-                  "flex": 1,
+                  "alignItems": "center",
+                  "backgroundColor": "#ece8ef",
+                  "borderRadius": 4,
+                  "flexDirection": "row",
+                  "opacity": 1,
+                  "padding": 16,
                 },
                 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"
             >
-              B1
-            </Text>
+              <Text
+                allowFontScaling={false}
+                style={
+                  [
+                    {
+                      "color": "#001f23",
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 16,
+                      "letterSpacing": 0.48,
+                      "lineHeight": 24,
+                    },
+                    undefined,
+                  ]
+                }
+                themeIntent="body"
+                themeTypeface="neutral"
+                themeVariant="regular"
+              >
+                A1
+              </Text>
+            </View>
           </View>
-        </View>
-        <View
-          highlighted={false}
-          leadingItem={
-            {
-              "text": "B1",
-              "value": "b1",
+          <View
+            highlighted={false}
+            leadingItem={
+              {
+                "text": "A1",
+                "value": "a1",
+              }
             }
-          }
-          leadingSection={
-            {
-              "category": "A",
-              "data": [
-                {
-                  "text": "A1",
-                  "value": "a1",
-                },
-              ],
+            section={
+              {
+                "category": "A",
+                "data": [
+                  {
+                    "text": "A1",
+                    "value": "a1",
+                  },
+                ],
+              }
             }
-          }
-          section={
-            {
-              "category": "B",
-              "data": [
-                {
-                  "text": "B1",
-                  "value": "b1",
-                },
+            style={
+              [
                 {
-                  "text": "B2",
-                  "value": "b2",
+                  "marginTop": 12,
                 },
-              ],
+                undefined,
+              ]
             }
-          }
-          style={
-            [
+            trailingSection={
               {
-                "marginTop": 4,
-              },
-              undefined,
-            ]
-          }
-          trailingItem={
-            {
-              "text": "B2",
-              "value": "b2",
+                "category": "B",
+                "data": [
+                  {
+                    "text": "B1",
+                    "value": "b1",
+                  },
+                  {
+                    "text": "B2",
+                    "value": "b2",
+                  },
+                ],
+              }
             }
-          }
-        />
+          />
+        </View>
       </View>
-    </View>
-    <View
-      onLayout={[Function]}
-      style={null}
-    >
-      <View>
+      <View
+        onFocusCapture={[Function]}
+        onLayout={[Function]}
+        style={null}
+      />
+      <View
+        onFocusCapture={[Function]}
+        onLayout={[Function]}
+        style={null}
+      >
         <View
-          accessibilityState={
-            {
-              "disabled": false,
-            }
-          }
-          accessible={true}
-          focusable={true}
-          onClick={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
           style={
             [
               {
-                "alignItems": "center",
-                "backgroundColor": "#ffffff",
-                "borderRadius": 4,
+                "alignContent": "center",
+                "backgroundColor": "#f6f6f7",
+                "display": "flex",
                 "flexDirection": "row",
-                "opacity": 1,
-                "padding": 16,
+                "justifyContent": "space-between",
+                "marginBottom": 16,
+                "paddingHorizontal": 16,
+                "paddingVertical": 8,
+              },
+              {
+                "marginBottom": 0,
               },
-              undefined,
             ]
           }
+          themeSize="medium"
         >
           <View
             style={
               [
                 {
-                  "flex": 1,
+                  "alignItems": "center",
+                  "display": "flex",
+                  "flexDirection": "row",
                 },
                 undefined,
               ]
             }
           >
+            <View
+              style={
+                [
+                  {
+                    "marginRight": 12,
+                  },
+                  undefined,
+                ]
+              }
+            />
             <Text
               allowFontScaling={false}
               style={
@@ -1375,294 +1226,697 @@ exports[`OptionList renders correctly 1`] = `
                   {
                     "color": "#001f23",
                     "fontFamily": "BeVietnamPro-Regular",
-                    "fontSize": 16,
+                    "fontSize": 14,
                     "letterSpacing": 0.48,
-                    "lineHeight": 24,
+                    "lineHeight": 22,
                   },
                   undefined,
                 ]
               }
               themeIntent="body"
               themeTypeface="neutral"
-              themeVariant="regular"
+              themeVariant="small"
             >
-              B2
+              B
             </Text>
           </View>
         </View>
-        <View
-          highlighted={false}
-          leadingItem={
-            {
-              "text": "B2",
-              "value": "b2",
+      </View>
+      <View
+        onFocusCapture={[Function]}
+        onLayout={[Function]}
+        style={null}
+      >
+        <View>
+          <View
+            highlighted={false}
+            leadingSection={
+              {
+                "category": "A",
+                "data": [
+                  {
+                    "text": "A1",
+                    "value": "a1",
+                  },
+                ],
+              }
             }
-          }
-          leadingSection={
-            {
-              "category": "A",
-              "data": [
+            section={
+              {
+                "category": "B",
+                "data": [
+                  {
+                    "text": "B1",
+                    "value": "b1",
+                  },
+                  {
+                    "text": "B2",
+                    "value": "b2",
+                  },
+                ],
+              }
+            }
+            style={
+              [
                 {
-                  "text": "A1",
-                  "value": "a1",
+                  "marginTop": 12,
                 },
-              ],
+                undefined,
+              ]
             }
-          }
-          section={
-            {
-              "category": "B",
-              "data": [
+            trailingItem={
+              {
+                "text": "B1",
+                "value": "b1",
+              }
+            }
+          />
+          <View
+            accessibilityState={
+              {
+                "disabled": false,
+              }
+            }
+            accessibilityValue={
+              {
+                "max": undefined,
+                "min": undefined,
+                "now": undefined,
+                "text": undefined,
+              }
+            }
+            accessible={true}
+            focusable={true}
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              [
                 {
-                  "text": "B1",
-                  "value": "b1",
+                  "alignItems": "center",
+                  "backgroundColor": "#ffffff",
+                  "borderRadius": 4,
+                  "flexDirection": "row",
+                  "opacity": 1,
+                  "padding": 16,
                 },
+                undefined,
+              ]
+            }
+          >
+            <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"
+              >
+                B1
+              </Text>
+            </View>
+          </View>
+          <View
+            highlighted={false}
+            leadingItem={
+              {
+                "text": "B1",
+                "value": "b1",
+              }
+            }
+            leadingSection={
+              {
+                "category": "A",
+                "data": [
+                  {
+                    "text": "A1",
+                    "value": "a1",
+                  },
+                ],
+              }
+            }
+            section={
+              {
+                "category": "B",
+                "data": [
+                  {
+                    "text": "B1",
+                    "value": "b1",
+                  },
+                  {
+                    "text": "B2",
+                    "value": "b2",
+                  },
+                ],
+              }
+            }
+            style={
+              [
                 {
-                  "text": "B2",
-                  "value": "b2",
+                  "marginTop": 4,
                 },
-              ],
+                undefined,
+              ]
             }
-          }
-          style={
-            [
+            trailingItem={
               {
-                "marginTop": 12,
-              },
-              undefined,
-            ]
-          }
-        />
+                "text": "B2",
+                "value": "b2",
+              }
+            }
+          />
+        </View>
+      </View>
+      <View
+        onFocusCapture={[Function]}
+        onLayout={[Function]}
+        style={null}
+      >
+        <View>
+          <View
+            accessibilityState={
+              {
+                "disabled": false,
+              }
+            }
+            accessibilityValue={
+              {
+                "max": undefined,
+                "min": undefined,
+                "now": undefined,
+                "text": undefined,
+              }
+            }
+            accessible={true}
+            focusable={true}
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              [
+                {
+                  "alignItems": "center",
+                  "backgroundColor": "#ffffff",
+                  "borderRadius": 4,
+                  "flexDirection": "row",
+                  "opacity": 1,
+                  "padding": 16,
+                },
+                undefined,
+              ]
+            }
+          >
+            <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"
+              >
+                B2
+              </Text>
+            </View>
+          </View>
+          <View
+            highlighted={false}
+            leadingItem={
+              {
+                "text": "B2",
+                "value": "b2",
+              }
+            }
+            leadingSection={
+              {
+                "category": "A",
+                "data": [
+                  {
+                    "text": "A1",
+                    "value": "a1",
+                  },
+                ],
+              }
+            }
+            section={
+              {
+                "category": "B",
+                "data": [
+                  {
+                    "text": "B1",
+                    "value": "b1",
+                  },
+                  {
+                    "text": "B2",
+                    "value": "b2",
+                  },
+                ],
+              }
+            }
+            style={
+              [
+                {
+                  "marginTop": 12,
+                },
+                undefined,
+              ]
+            }
+          />
+        </View>
       </View>
+      <View
+        onFocusCapture={[Function]}
+        onLayout={[Function]}
+        style={null}
+      />
     </View>
-    <View
-      onLayout={[Function]}
-      style={null}
-    />
-  </View>
-</RCTScrollView>
+  </RCTScrollView>
+  <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[`OptionList trigger onPress correctly on select new value 1`] = `
-<RCTScrollView
-  ListFooterComponent={null}
-  data={
-    [
-      {
-        "category": "A",
-        "data": [
-          {
-            "text": "A1",
-            "value": "a1",
-          },
-        ],
-      },
-      {
-        "category": "B",
-        "data": [
-          {
-            "text": "B1",
-            "value": "b1",
-          },
-          {
-            "text": "B2",
-            "value": "b2",
-          },
-        ],
-      },
-    ]
-  }
-  getItem={[Function]}
-  getItemCount={[Function]}
-  keyExtractor={[Function]}
-  onContentSizeChange={[Function]}
-  onEndReached={[Function]}
-  onEndReachedThreshold={0.1}
-  onLayout={[Function]}
-  onMomentumScrollBegin={[Function]}
-  onMomentumScrollEnd={[Function]}
-  onScroll={[Function]}
-  onScrollBeginDrag={[Function]}
-  onScrollEndDrag={[Function]}
-  renderItem={[Function]}
-  scrollEventThrottle={50}
-  stickyHeaderIndices={
-    [
-      0,
-      3,
-    ]
-  }
+<View
   style={
-    [
-      {
-        "paddingHorizontal": 12,
-      },
+    {
+      "flex": 1,
+    }
+  }
+>
+  <RCTScrollView
+    ListFooterComponent={null}
+    data={
       [
         {
-          "paddingBottom": 16,
+          "category": "A",
+          "data": [
+            {
+              "text": "A1",
+              "value": "a1",
+            },
+          ],
         },
-        {},
-      ],
-    ]
-  }
->
-  <View>
-    <View
-      onLayout={[Function]}
-      style={null}
-    >
-      <View
-        style={
-          [
+        {
+          "category": "B",
+          "data": [
             {
-              "alignContent": "center",
-              "backgroundColor": "#f6f6f7",
-              "display": "flex",
-              "flexDirection": "row",
-              "justifyContent": "space-between",
-              "marginBottom": 16,
-              "paddingHorizontal": 16,
-              "paddingVertical": 8,
+              "text": "B1",
+              "value": "b1",
             },
             {
-              "marginBottom": 0,
+              "text": "B2",
+              "value": "b2",
             },
-          ]
-        }
-        themeSize="medium"
+          ],
+        },
+      ]
+    }
+    getItem={[Function]}
+    getItemCount={[Function]}
+    keyExtractor={[Function]}
+    onContentSizeChange={[Function]}
+    onEndReached={[Function]}
+    onEndReachedThreshold={0.1}
+    onLayout={[Function]}
+    onMomentumScrollBegin={[Function]}
+    onMomentumScrollEnd={[Function]}
+    onScroll={[Function]}
+    onScrollBeginDrag={[Function]}
+    onScrollEndDrag={[Function]}
+    renderItem={[Function]}
+    scrollEventThrottle={50}
+    stickyHeaderIndices={
+      [
+        0,
+        3,
+      ]
+    }
+    style={
+      [
+        {
+          "paddingHorizontal": 12,
+        },
+        [
+          {
+            "paddingBottom": 16,
+          },
+          {},
+        ],
+      ]
+    }
+  >
+    <View>
+      <View
+        onFocusCapture={[Function]}
+        onLayout={[Function]}
+        style={null}
       >
         <View
           style={
             [
               {
-                "alignItems": "center",
+                "alignContent": "center",
+                "backgroundColor": "#f6f6f7",
                 "display": "flex",
                 "flexDirection": "row",
+                "justifyContent": "space-between",
+                "marginBottom": 16,
+                "paddingHorizontal": 16,
+                "paddingVertical": 8,
+              },
+              {
+                "marginBottom": 0,
               },
-              undefined,
             ]
           }
+          themeSize="medium"
         >
           <View
             style={
               [
                 {
-                  "marginRight": 12,
+                  "alignItems": "center",
+                  "display": "flex",
+                  "flexDirection": "row",
                 },
                 undefined,
               ]
             }
-          />
-          <Text
-            allowFontScaling={false}
+          >
+            <View
+              style={
+                [
+                  {
+                    "marginRight": 12,
+                  },
+                  undefined,
+                ]
+              }
+            />
+            <Text
+              allowFontScaling={false}
+              style={
+                [
+                  {
+                    "color": "#001f23",
+                    "fontFamily": "BeVietnamPro-Regular",
+                    "fontSize": 14,
+                    "letterSpacing": 0.48,
+                    "lineHeight": 22,
+                  },
+                  undefined,
+                ]
+              }
+              themeIntent="body"
+              themeTypeface="neutral"
+              themeVariant="small"
+            >
+              A
+            </Text>
+          </View>
+        </View>
+      </View>
+      <View
+        onFocusCapture={[Function]}
+        onLayout={[Function]}
+        style={null}
+      >
+        <View>
+          <View
+            highlighted={false}
+            section={
+              {
+                "category": "A",
+                "data": [
+                  {
+                    "text": "A1",
+                    "value": "a1",
+                  },
+                ],
+              }
+            }
             style={
               [
                 {
-                  "color": "#001f23",
-                  "fontFamily": "BeVietnamPro-Regular",
-                  "fontSize": 14,
-                  "letterSpacing": 0.48,
-                  "lineHeight": 22,
+                  "marginTop": 12,
                 },
                 undefined,
               ]
             }
-            themeIntent="body"
-            themeTypeface="neutral"
-            themeVariant="small"
-          >
-            A
-          </Text>
-        </View>
-      </View>
-    </View>
-    <View
-      onLayout={[Function]}
-      style={null}
-    >
-      <View>
-        <View
-          highlighted={false}
-          section={
-            {
-              "category": "A",
-              "data": [
-                {
-                  "text": "A1",
-                  "value": "a1",
-                },
-              ],
+            trailingItem={
+              {
+                "text": "A1",
+                "value": "a1",
+              }
             }
-          }
-          style={
-            [
+            trailingSection={
               {
-                "marginTop": 12,
-              },
-              undefined,
-            ]
-          }
-          trailingItem={
-            {
-              "text": "A1",
-              "value": "a1",
+                "category": "B",
+                "data": [
+                  {
+                    "text": "B1",
+                    "value": "b1",
+                  },
+                  {
+                    "text": "B2",
+                    "value": "b2",
+                  },
+                ],
+              }
             }
-          }
-          trailingSection={
-            {
-              "category": "B",
-              "data": [
+          />
+          <View
+            accessibilityState={
+              {
+                "disabled": false,
+              }
+            }
+            accessibilityValue={
+              {
+                "max": undefined,
+                "min": undefined,
+                "now": undefined,
+                "text": undefined,
+              }
+            }
+            accessible={true}
+            focusable={true}
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              [
                 {
-                  "text": "B1",
-                  "value": "b1",
+                  "alignItems": "center",
+                  "backgroundColor": "#ece8ef",
+                  "borderRadius": 4,
+                  "flexDirection": "row",
+                  "opacity": 1,
+                  "padding": 16,
                 },
+                undefined,
+              ]
+            }
+          >
+            <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"
+              >
+                A1
+              </Text>
+            </View>
+          </View>
+          <View
+            highlighted={false}
+            leadingItem={
+              {
+                "text": "A1",
+                "value": "a1",
+              }
+            }
+            section={
+              {
+                "category": "A",
+                "data": [
+                  {
+                    "text": "A1",
+                    "value": "a1",
+                  },
+                ],
+              }
+            }
+            style={
+              [
                 {
-                  "text": "B2",
-                  "value": "b2",
+                  "marginTop": 12,
                 },
-              ],
+                undefined,
+              ]
             }
-          }
-        />
-        <View
-          accessibilityState={
-            {
-              "disabled": false,
+            trailingSection={
+              {
+                "category": "B",
+                "data": [
+                  {
+                    "text": "B1",
+                    "value": "b1",
+                  },
+                  {
+                    "text": "B2",
+                    "value": "b2",
+                  },
+                ],
+              }
             }
-          }
-          accessible={true}
-          focusable={true}
-          onClick={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
+          />
+        </View>
+      </View>
+      <View
+        onFocusCapture={[Function]}
+        onLayout={[Function]}
+        style={null}
+      />
+      <View
+        onFocusCapture={[Function]}
+        onLayout={[Function]}
+        style={null}
+      >
+        <View
           style={
             [
               {
-                "alignItems": "center",
-                "backgroundColor": "#ece8ef",
-                "borderRadius": 4,
+                "alignContent": "center",
+                "backgroundColor": "#f6f6f7",
+                "display": "flex",
                 "flexDirection": "row",
-                "opacity": 1,
-                "padding": 16,
+                "justifyContent": "space-between",
+                "marginBottom": 16,
+                "paddingHorizontal": 16,
+                "paddingVertical": 8,
+              },
+              {
+                "marginBottom": 0,
               },
-              undefined,
             ]
           }
+          themeSize="medium"
         >
           <View
             style={
               [
                 {
-                  "flex": 1,
+                  "alignItems": "center",
+                  "display": "flex",
+                  "flexDirection": "row",
                 },
                 undefined,
               ]
             }
           >
+            <View
+              style={
+                [
+                  {
+                    "marginRight": 12,
+                  },
+                  undefined,
+                ]
+              }
+            />
             <Text
               allowFontScaling={false}
               style={
@@ -1670,226 +1924,459 @@ exports[`OptionList trigger onPress correctly on select new value 1`] = `
                   {
                     "color": "#001f23",
                     "fontFamily": "BeVietnamPro-Regular",
-                    "fontSize": 16,
+                    "fontSize": 14,
                     "letterSpacing": 0.48,
-                    "lineHeight": 24,
+                    "lineHeight": 22,
                   },
                   undefined,
                 ]
               }
               themeIntent="body"
               themeTypeface="neutral"
-              themeVariant="regular"
+              themeVariant="small"
             >
-              A1
+              B
             </Text>
           </View>
         </View>
-        <View
-          highlighted={false}
-          leadingItem={
-            {
-              "text": "A1",
-              "value": "a1",
+      </View>
+      <View
+        onFocusCapture={[Function]}
+        onLayout={[Function]}
+        style={null}
+      >
+        <View>
+          <View
+            highlighted={false}
+            leadingSection={
+              {
+                "category": "A",
+                "data": [
+                  {
+                    "text": "A1",
+                    "value": "a1",
+                  },
+                ],
+              }
             }
-          }
-          section={
-            {
-              "category": "A",
-              "data": [
+            section={
+              {
+                "category": "B",
+                "data": [
+                  {
+                    "text": "B1",
+                    "value": "b1",
+                  },
+                  {
+                    "text": "B2",
+                    "value": "b2",
+                  },
+                ],
+              }
+            }
+            style={
+              [
                 {
-                  "text": "A1",
-                  "value": "a1",
+                  "marginTop": 12,
                 },
-              ],
+                undefined,
+              ]
             }
-          }
-          style={
-            [
+            trailingItem={
               {
-                "marginTop": 12,
-              },
-              undefined,
-            ]
-          }
-          trailingSection={
-            {
-              "category": "B",
-              "data": [
+                "text": "B1",
+                "value": "b1",
+              }
+            }
+          />
+          <View
+            accessibilityState={
+              {
+                "disabled": false,
+              }
+            }
+            accessibilityValue={
+              {
+                "max": undefined,
+                "min": undefined,
+                "now": undefined,
+                "text": undefined,
+              }
+            }
+            accessible={true}
+            focusable={true}
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              [
                 {
-                  "text": "B1",
-                  "value": "b1",
+                  "alignItems": "center",
+                  "backgroundColor": "#ffffff",
+                  "borderRadius": 4,
+                  "flexDirection": "row",
+                  "opacity": 1,
+                  "padding": 16,
                 },
+                undefined,
+              ]
+            }
+          >
+            <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"
+              >
+                B1
+              </Text>
+            </View>
+          </View>
+          <View
+            highlighted={false}
+            leadingItem={
+              {
+                "text": "B1",
+                "value": "b1",
+              }
+            }
+            leadingSection={
+              {
+                "category": "A",
+                "data": [
+                  {
+                    "text": "A1",
+                    "value": "a1",
+                  },
+                ],
+              }
+            }
+            section={
+              {
+                "category": "B",
+                "data": [
+                  {
+                    "text": "B1",
+                    "value": "b1",
+                  },
+                  {
+                    "text": "B2",
+                    "value": "b2",
+                  },
+                ],
+              }
+            }
+            style={
+              [
                 {
-                  "text": "B2",
-                  "value": "b2",
+                  "marginTop": 4,
                 },
-              ],
+                undefined,
+              ]
             }
-          }
-        />
+            trailingItem={
+              {
+                "text": "B2",
+                "value": "b2",
+              }
+            }
+          />
+        </View>
       </View>
-    </View>
-    <View
-      onLayout={[Function]}
-      style={null}
-    />
-    <View
-      onLayout={[Function]}
-      style={null}
-    >
       <View
-        style={
-          [
-            {
-              "alignContent": "center",
-              "backgroundColor": "#f6f6f7",
-              "display": "flex",
-              "flexDirection": "row",
-              "justifyContent": "space-between",
-              "marginBottom": 16,
-              "paddingHorizontal": 16,
-              "paddingVertical": 8,
-            },
-            {
-              "marginBottom": 0,
-            },
-          ]
-        }
-        themeSize="medium"
+        onFocusCapture={[Function]}
+        onLayout={[Function]}
+        style={null}
       >
-        <View
-          style={
-            [
-              {
-                "alignItems": "center",
-                "display": "flex",
-                "flexDirection": "row",
-              },
-              undefined,
-            ]
-          }
-        >
+        <View>
           <View
+            accessibilityState={
+              {
+                "disabled": false,
+              }
+            }
+            accessibilityValue={
+              {
+                "max": undefined,
+                "min": undefined,
+                "now": undefined,
+                "text": undefined,
+              }
+            }
+            accessible={true}
+            focusable={true}
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
             style={
               [
                 {
-                  "marginRight": 12,
+                  "alignItems": "center",
+                  "backgroundColor": "#ffffff",
+                  "borderRadius": 4,
+                  "flexDirection": "row",
+                  "opacity": 1,
+                  "padding": 16,
                 },
                 undefined,
               ]
             }
-          />
-          <Text
-            allowFontScaling={false}
+          >
+            <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"
+              >
+                B2
+              </Text>
+            </View>
+          </View>
+          <View
+            highlighted={false}
+            leadingItem={
+              {
+                "text": "B2",
+                "value": "b2",
+              }
+            }
+            leadingSection={
+              {
+                "category": "A",
+                "data": [
+                  {
+                    "text": "A1",
+                    "value": "a1",
+                  },
+                ],
+              }
+            }
+            section={
+              {
+                "category": "B",
+                "data": [
+                  {
+                    "text": "B1",
+                    "value": "b1",
+                  },
+                  {
+                    "text": "B2",
+                    "value": "b2",
+                  },
+                ],
+              }
+            }
             style={
               [
                 {
-                  "color": "#001f23",
-                  "fontFamily": "BeVietnamPro-Regular",
-                  "fontSize": 14,
-                  "letterSpacing": 0.48,
-                  "lineHeight": 22,
+                  "marginTop": 12,
                 },
                 undefined,
               ]
             }
-            themeIntent="body"
-            themeTypeface="neutral"
-            themeVariant="small"
-          >
-            B
-          </Text>
+          />
         </View>
       </View>
+      <View
+        onFocusCapture={[Function]}
+        onLayout={[Function]}
+        style={null}
+      />
     </View>
-    <View
-      onLayout={[Function]}
-      style={null}
-    >
-      <View>
-        <View
-          highlighted={false}
-          leadingSection={
-            {
-              "category": "A",
-              "data": [
-                {
-                  "text": "A1",
-                  "value": "a1",
-                },
-              ],
-            }
-          }
-          section={
+  </RCTScrollView>
+  <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[`OptionList trigger onPress correctly on unselect current value 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <RCTScrollView
+    ListFooterComponent={null}
+    data={
+      [
+        {
+          "category": "A",
+          "data": [
             {
-              "category": "B",
-              "data": [
-                {
-                  "text": "B1",
-                  "value": "b1",
-                },
-                {
-                  "text": "B2",
-                  "value": "b2",
-                },
-              ],
-            }
-          }
-          style={
-            [
-              {
-                "marginTop": 12,
-              },
-              undefined,
-            ]
-          }
-          trailingItem={
+              "text": "A1",
+              "value": "a1",
+            },
+          ],
+        },
+        {
+          "category": "B",
+          "data": [
             {
               "text": "B1",
               "value": "b1",
-            }
-          }
-        />
-        <View
-          accessibilityState={
+            },
             {
-              "disabled": false,
-            }
-          }
-          accessible={true}
-          focusable={true}
-          onClick={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
+              "text": "B2",
+              "value": "b2",
+            },
+          ],
+        },
+      ]
+    }
+    getItem={[Function]}
+    getItemCount={[Function]}
+    keyExtractor={[Function]}
+    onContentSizeChange={[Function]}
+    onEndReached={[Function]}
+    onEndReachedThreshold={0.1}
+    onLayout={[Function]}
+    onMomentumScrollBegin={[Function]}
+    onMomentumScrollEnd={[Function]}
+    onScroll={[Function]}
+    onScrollBeginDrag={[Function]}
+    onScrollEndDrag={[Function]}
+    renderItem={[Function]}
+    scrollEventThrottle={50}
+    stickyHeaderIndices={
+      [
+        0,
+        3,
+      ]
+    }
+    style={
+      [
+        {
+          "paddingHorizontal": 12,
+        },
+        [
+          {
+            "paddingBottom": 16,
+          },
+          {},
+        ],
+      ]
+    }
+  >
+    <View>
+      <View
+        onFocusCapture={[Function]}
+        onLayout={[Function]}
+        style={null}
+      >
+        <View
           style={
             [
               {
-                "alignItems": "center",
-                "backgroundColor": "#ffffff",
-                "borderRadius": 4,
+                "alignContent": "center",
+                "backgroundColor": "#f6f6f7",
+                "display": "flex",
                 "flexDirection": "row",
-                "opacity": 1,
-                "padding": 16,
+                "justifyContent": "space-between",
+                "marginBottom": 16,
+                "paddingHorizontal": 16,
+                "paddingVertical": 8,
+              },
+              {
+                "marginBottom": 0,
               },
-              undefined,
             ]
           }
+          themeSize="medium"
         >
           <View
             style={
               [
                 {
-                  "flex": 1,
+                  "alignItems": "center",
+                  "display": "flex",
+                  "flexDirection": "row",
                 },
                 undefined,
               ]
             }
           >
+            <View
+              style={
+                [
+                  {
+                    "marginRight": 12,
+                  },
+                  undefined,
+                ]
+              }
+            />
             <Text
               allowFontScaling={false}
               style={
@@ -1897,411 +2384,237 @@ exports[`OptionList trigger onPress correctly on select new value 1`] = `
                   {
                     "color": "#001f23",
                     "fontFamily": "BeVietnamPro-Regular",
-                    "fontSize": 16,
+                    "fontSize": 14,
                     "letterSpacing": 0.48,
-                    "lineHeight": 24,
+                    "lineHeight": 22,
                   },
                   undefined,
                 ]
               }
               themeIntent="body"
               themeTypeface="neutral"
-              themeVariant="regular"
+              themeVariant="small"
             >
-              B1
+              A
             </Text>
           </View>
         </View>
-        <View
-          highlighted={false}
-          leadingItem={
-            {
-              "text": "B1",
-              "value": "b1",
+      </View>
+      <View
+        onFocusCapture={[Function]}
+        onLayout={[Function]}
+        style={null}
+      >
+        <View>
+          <View
+            highlighted={false}
+            section={
+              {
+                "category": "A",
+                "data": [
+                  {
+                    "text": "A1",
+                    "value": "a1",
+                  },
+                ],
+              }
             }
-          }
-          leadingSection={
-            {
-              "category": "A",
-              "data": [
+            style={
+              [
                 {
-                  "text": "A1",
-                  "value": "a1",
+                  "marginTop": 12,
                 },
-              ],
+                undefined,
+              ]
             }
-          }
-          section={
-            {
-              "category": "B",
-              "data": [
-                {
-                  "text": "B1",
-                  "value": "b1",
-                },
-                {
-                  "text": "B2",
-                  "value": "b2",
-                },
-              ],
+            trailingItem={
+              {
+                "text": "A1",
+                "value": "a1",
+              }
             }
-          }
-          style={
-            [
+            trailingSection={
               {
-                "marginTop": 4,
-              },
-              undefined,
-            ]
-          }
-          trailingItem={
-            {
-              "text": "B2",
-              "value": "b2",
+                "category": "B",
+                "data": [
+                  {
+                    "text": "B1",
+                    "value": "b1",
+                  },
+                  {
+                    "text": "B2",
+                    "value": "b2",
+                  },
+                ],
+              }
             }
-          }
-        />
-      </View>
-    </View>
-    <View
-      onLayout={[Function]}
-      style={null}
-    >
-      <View>
-        <View
-          accessibilityState={
-            {
-              "disabled": false,
+          />
+          <View
+            accessibilityState={
+              {
+                "disabled": false,
+              }
             }
-          }
-          accessible={true}
-          focusable={true}
-          onClick={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
-          style={
-            [
+            accessibilityValue={
               {
-                "alignItems": "center",
-                "backgroundColor": "#ffffff",
-                "borderRadius": 4,
-                "flexDirection": "row",
-                "opacity": 1,
-                "padding": 16,
-              },
-              undefined,
-            ]
-          }
-        >
-          <View
+                "max": undefined,
+                "min": undefined,
+                "now": undefined,
+                "text": undefined,
+              }
+            }
+            accessible={true}
+            focusable={true}
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
             style={
               [
                 {
-                  "flex": 1,
+                  "alignItems": "center",
+                  "backgroundColor": "#ece8ef",
+                  "borderRadius": 4,
+                  "flexDirection": "row",
+                  "opacity": 1,
+                  "padding": 16,
                 },
                 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"
             >
-              B2
-            </Text>
+              <Text
+                allowFontScaling={false}
+                style={
+                  [
+                    {
+                      "color": "#001f23",
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 16,
+                      "letterSpacing": 0.48,
+                      "lineHeight": 24,
+                    },
+                    undefined,
+                  ]
+                }
+                themeIntent="body"
+                themeTypeface="neutral"
+                themeVariant="regular"
+              >
+                A1
+              </Text>
+            </View>
           </View>
-        </View>
-        <View
-          highlighted={false}
-          leadingItem={
-            {
-              "text": "B2",
-              "value": "b2",
-            }
-          }
-          leadingSection={
-            {
-              "category": "A",
-              "data": [
-                {
-                  "text": "A1",
-                  "value": "a1",
-                },
-              ],
-            }
-          }
-          section={
-            {
-              "category": "B",
-              "data": [
-                {
-                  "text": "B1",
-                  "value": "b1",
-                },
-                {
-                  "text": "B2",
-                  "value": "b2",
-                },
-              ],
-            }
-          }
-          style={
-            [
+          <View
+            highlighted={false}
+            leadingItem={
               {
-                "marginTop": 12,
-              },
-              undefined,
-            ]
-          }
-        />
-      </View>
-    </View>
-    <View
-      onLayout={[Function]}
-      style={null}
-    />
-  </View>
-</RCTScrollView>
-`;
-
-exports[`OptionList trigger onPress correctly on unselect current value 1`] = `
-<RCTScrollView
-  ListFooterComponent={null}
-  data={
-    [
-      {
-        "category": "A",
-        "data": [
-          {
-            "text": "A1",
-            "value": "a1",
-          },
-        ],
-      },
-      {
-        "category": "B",
-        "data": [
-          {
-            "text": "B1",
-            "value": "b1",
-          },
-          {
-            "text": "B2",
-            "value": "b2",
-          },
-        ],
-      },
-    ]
-  }
-  getItem={[Function]}
-  getItemCount={[Function]}
-  keyExtractor={[Function]}
-  onContentSizeChange={[Function]}
-  onEndReached={[Function]}
-  onEndReachedThreshold={0.1}
-  onLayout={[Function]}
-  onMomentumScrollBegin={[Function]}
-  onMomentumScrollEnd={[Function]}
-  onScroll={[Function]}
-  onScrollBeginDrag={[Function]}
-  onScrollEndDrag={[Function]}
-  renderItem={[Function]}
-  scrollEventThrottle={50}
-  stickyHeaderIndices={
-    [
-      0,
-      3,
-    ]
-  }
-  style={
-    [
-      {
-        "paddingHorizontal": 12,
-      },
-      [
-        {
-          "paddingBottom": 16,
-        },
-        {},
-      ],
-    ]
-  }
->
-  <View>
-    <View
-      onLayout={[Function]}
-      style={null}
-    >
-      <View
-        style={
-          [
-            {
-              "alignContent": "center",
-              "backgroundColor": "#f6f6f7",
-              "display": "flex",
-              "flexDirection": "row",
-              "justifyContent": "space-between",
-              "marginBottom": 16,
-              "paddingHorizontal": 16,
-              "paddingVertical": 8,
-            },
-            {
-              "marginBottom": 0,
-            },
-          ]
-        }
-        themeSize="medium"
-      >
-        <View
-          style={
-            [
+                "text": "A1",
+                "value": "a1",
+              }
+            }
+            section={
               {
-                "alignItems": "center",
-                "display": "flex",
-                "flexDirection": "row",
-              },
-              undefined,
-            ]
-          }
-        >
-          <View
-            style={
-              [
-                {
-                  "marginRight": 12,
-                },
-                undefined,
-              ]
+                "category": "A",
+                "data": [
+                  {
+                    "text": "A1",
+                    "value": "a1",
+                  },
+                ],
+              }
             }
-          />
-          <Text
-            allowFontScaling={false}
             style={
               [
                 {
-                  "color": "#001f23",
-                  "fontFamily": "BeVietnamPro-Regular",
-                  "fontSize": 14,
-                  "letterSpacing": 0.48,
-                  "lineHeight": 22,
+                  "marginTop": 12,
                 },
                 undefined,
               ]
             }
-            themeIntent="body"
-            themeTypeface="neutral"
-            themeVariant="small"
-          >
-            A
-          </Text>
+            trailingSection={
+              {
+                "category": "B",
+                "data": [
+                  {
+                    "text": "B1",
+                    "value": "b1",
+                  },
+                  {
+                    "text": "B2",
+                    "value": "b2",
+                  },
+                ],
+              }
+            }
+          />
         </View>
       </View>
-    </View>
-    <View
-      onLayout={[Function]}
-      style={null}
-    >
-      <View>
+      <View
+        onFocusCapture={[Function]}
+        onLayout={[Function]}
+        style={null}
+      />
+      <View
+        onFocusCapture={[Function]}
+        onLayout={[Function]}
+        style={null}
+      >
         <View
-          highlighted={false}
-          section={
-            {
-              "category": "A",
-              "data": [
-                {
-                  "text": "A1",
-                  "value": "a1",
-                },
-              ],
-            }
-          }
           style={
             [
               {
-                "marginTop": 12,
+                "alignContent": "center",
+                "backgroundColor": "#f6f6f7",
+                "display": "flex",
+                "flexDirection": "row",
+                "justifyContent": "space-between",
+                "marginBottom": 16,
+                "paddingHorizontal": 16,
+                "paddingVertical": 8,
               },
-              undefined,
-            ]
-          }
-          trailingItem={
-            {
-              "text": "A1",
-              "value": "a1",
-            }
-          }
-          trailingSection={
-            {
-              "category": "B",
-              "data": [
-                {
-                  "text": "B1",
-                  "value": "b1",
-                },
-                {
-                  "text": "B2",
-                  "value": "b2",
-                },
-              ],
-            }
-          }
-        />
-        <View
-          accessibilityState={
-            {
-              "disabled": false,
-            }
-          }
-          accessible={true}
-          focusable={true}
-          onClick={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
-          style={
-            [
               {
-                "alignItems": "center",
-                "backgroundColor": "#ece8ef",
-                "borderRadius": 4,
-                "flexDirection": "row",
-                "opacity": 1,
-                "padding": 16,
+                "marginBottom": 0,
               },
-              undefined,
             ]
           }
+          themeSize="medium"
         >
           <View
             style={
               [
                 {
-                  "flex": 1,
+                  "alignItems": "center",
+                  "display": "flex",
+                  "flexDirection": "row",
                 },
                 undefined,
               ]
             }
           >
+            <View
+              style={
+                [
+                  {
+                    "marginRight": 12,
+                  },
+                  undefined,
+                ]
+              }
+            />
             <Text
               allowFontScaling={false}
               style={
@@ -2309,414 +2622,337 @@ exports[`OptionList trigger onPress correctly on unselect current value 1`] = `
                   {
                     "color": "#001f23",
                     "fontFamily": "BeVietnamPro-Regular",
-                    "fontSize": 16,
+                    "fontSize": 14,
                     "letterSpacing": 0.48,
-                    "lineHeight": 24,
+                    "lineHeight": 22,
                   },
                   undefined,
                 ]
               }
               themeIntent="body"
               themeTypeface="neutral"
-              themeVariant="regular"
+              themeVariant="small"
             >
-              A1
+              B
             </Text>
           </View>
         </View>
-        <View
-          highlighted={false}
-          leadingItem={
-            {
-              "text": "A1",
-              "value": "a1",
-            }
-          }
-          section={
-            {
-              "category": "A",
-              "data": [
-                {
-                  "text": "A1",
-                  "value": "a1",
-                },
-              ],
-            }
-          }
-          style={
-            [
-              {
-                "marginTop": 12,
-              },
-              undefined,
-            ]
-          }
-          trailingSection={
-            {
-              "category": "B",
-              "data": [
-                {
-                  "text": "B1",
-                  "value": "b1",
-                },
-                {
-                  "text": "B2",
-                  "value": "b2",
-                },
-              ],
-            }
-          }
-        />
       </View>
-    </View>
-    <View
-      onLayout={[Function]}
-      style={null}
-    />
-    <View
-      onLayout={[Function]}
-      style={null}
-    >
       <View
-        style={
-          [
-            {
-              "alignContent": "center",
-              "backgroundColor": "#f6f6f7",
-              "display": "flex",
-              "flexDirection": "row",
-              "justifyContent": "space-between",
-              "marginBottom": 16,
-              "paddingHorizontal": 16,
-              "paddingVertical": 8,
-            },
-            {
-              "marginBottom": 0,
-            },
-          ]
-        }
-        themeSize="medium"
+        onFocusCapture={[Function]}
+        onLayout={[Function]}
+        style={null}
       >
-        <View
-          style={
-            [
-              {
-                "alignItems": "center",
-                "display": "flex",
-                "flexDirection": "row",
-              },
-              undefined,
-            ]
-          }
-        >
+        <View>
           <View
-            style={
-              [
-                {
-                  "marginRight": 12,
-                },
-                undefined,
-              ]
+            highlighted={false}
+            leadingSection={
+              {
+                "category": "A",
+                "data": [
+                  {
+                    "text": "A1",
+                    "value": "a1",
+                  },
+                ],
+              }
+            }
+            section={
+              {
+                "category": "B",
+                "data": [
+                  {
+                    "text": "B1",
+                    "value": "b1",
+                  },
+                  {
+                    "text": "B2",
+                    "value": "b2",
+                  },
+                ],
+              }
             }
-          />
-          <Text
-            allowFontScaling={false}
             style={
               [
                 {
-                  "color": "#001f23",
-                  "fontFamily": "BeVietnamPro-Regular",
-                  "fontSize": 14,
-                  "letterSpacing": 0.48,
-                  "lineHeight": 22,
+                  "marginTop": 12,
                 },
                 undefined,
               ]
             }
-            themeIntent="body"
-            themeTypeface="neutral"
-            themeVariant="small"
-          >
-            B
-          </Text>
-        </View>
-      </View>
-    </View>
-    <View
-      onLayout={[Function]}
-      style={null}
-    >
-      <View>
-        <View
-          highlighted={false}
-          leadingSection={
-            {
-              "category": "A",
-              "data": [
-                {
-                  "text": "A1",
-                  "value": "a1",
-                },
-              ],
-            }
-          }
-          section={
-            {
-              "category": "B",
-              "data": [
-                {
-                  "text": "B1",
-                  "value": "b1",
-                },
-                {
-                  "text": "B2",
-                  "value": "b2",
-                },
-              ],
-            }
-          }
-          style={
-            [
+            trailingItem={
               {
-                "marginTop": 12,
-              },
-              undefined,
-            ]
-          }
-          trailingItem={
-            {
-              "text": "B1",
-              "value": "b1",
+                "text": "B1",
+                "value": "b1",
+              }
             }
-          }
-        />
-        <View
-          accessibilityState={
-            {
-              "disabled": false,
+          />
+          <View
+            accessibilityState={
+              {
+                "disabled": false,
+              }
             }
-          }
-          accessible={true}
-          focusable={true}
-          onClick={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
-          style={
-            [
+            accessibilityValue={
               {
-                "alignItems": "center",
-                "backgroundColor": "#ffffff",
-                "borderRadius": 4,
-                "flexDirection": "row",
-                "opacity": 1,
-                "padding": 16,
-              },
-              undefined,
-            ]
-          }
-        >
-          <View
+                "max": undefined,
+                "min": undefined,
+                "now": undefined,
+                "text": undefined,
+              }
+            }
+            accessible={true}
+            focusable={true}
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
             style={
               [
                 {
-                  "flex": 1,
+                  "alignItems": "center",
+                  "backgroundColor": "#ffffff",
+                  "borderRadius": 4,
+                  "flexDirection": "row",
+                  "opacity": 1,
+                  "padding": 16,
                 },
                 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"
             >
-              B1
-            </Text>
+              <Text
+                allowFontScaling={false}
+                style={
+                  [
+                    {
+                      "color": "#001f23",
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 16,
+                      "letterSpacing": 0.48,
+                      "lineHeight": 24,
+                    },
+                    undefined,
+                  ]
+                }
+                themeIntent="body"
+                themeTypeface="neutral"
+                themeVariant="regular"
+              >
+                B1
+              </Text>
+            </View>
           </View>
-        </View>
-        <View
-          highlighted={false}
-          leadingItem={
-            {
-              "text": "B1",
-              "value": "b1",
+          <View
+            highlighted={false}
+            leadingItem={
+              {
+                "text": "B1",
+                "value": "b1",
+              }
             }
-          }
-          leadingSection={
-            {
-              "category": "A",
-              "data": [
-                {
-                  "text": "A1",
-                  "value": "a1",
-                },
-              ],
+            leadingSection={
+              {
+                "category": "A",
+                "data": [
+                  {
+                    "text": "A1",
+                    "value": "a1",
+                  },
+                ],
+              }
             }
-          }
-          section={
-            {
-              "category": "B",
-              "data": [
-                {
-                  "text": "B1",
-                  "value": "b1",
-                },
+            section={
+              {
+                "category": "B",
+                "data": [
+                  {
+                    "text": "B1",
+                    "value": "b1",
+                  },
+                  {
+                    "text": "B2",
+                    "value": "b2",
+                  },
+                ],
+              }
+            }
+            style={
+              [
                 {
-                  "text": "B2",
-                  "value": "b2",
+                  "marginTop": 4,
                 },
-              ],
+                undefined,
+              ]
             }
-          }
-          style={
-            [
+            trailingItem={
               {
-                "marginTop": 4,
-              },
-              undefined,
-            ]
-          }
-          trailingItem={
-            {
-              "text": "B2",
-              "value": "b2",
+                "text": "B2",
+                "value": "b2",
+              }
             }
-          }
-        />
+          />
+        </View>
       </View>
-    </View>
-    <View
-      onLayout={[Function]}
-      style={null}
-    >
-      <View>
-        <View
-          accessibilityState={
-            {
-              "disabled": false,
+      <View
+        onFocusCapture={[Function]}
+        onLayout={[Function]}
+        style={null}
+      >
+        <View>
+          <View
+            accessibilityState={
+              {
+                "disabled": false,
+              }
             }
-          }
-          accessible={true}
-          focusable={true}
-          onClick={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
-          style={
-            [
+            accessibilityValue={
               {
-                "alignItems": "center",
-                "backgroundColor": "#ffffff",
-                "borderRadius": 4,
-                "flexDirection": "row",
-                "opacity": 1,
-                "padding": 16,
-              },
-              undefined,
-            ]
-          }
-        >
-          <View
+                "max": undefined,
+                "min": undefined,
+                "now": undefined,
+                "text": undefined,
+              }
+            }
+            accessible={true}
+            focusable={true}
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
             style={
               [
                 {
-                  "flex": 1,
+                  "alignItems": "center",
+                  "backgroundColor": "#ffffff",
+                  "borderRadius": 4,
+                  "flexDirection": "row",
+                  "opacity": 1,
+                  "padding": 16,
                 },
                 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"
             >
-              B2
-            </Text>
+              <Text
+                allowFontScaling={false}
+                style={
+                  [
+                    {
+                      "color": "#001f23",
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 16,
+                      "letterSpacing": 0.48,
+                      "lineHeight": 24,
+                    },
+                    undefined,
+                  ]
+                }
+                themeIntent="body"
+                themeTypeface="neutral"
+                themeVariant="regular"
+              >
+                B2
+              </Text>
+            </View>
           </View>
-        </View>
-        <View
-          highlighted={false}
-          leadingItem={
-            {
-              "text": "B2",
-              "value": "b2",
+          <View
+            highlighted={false}
+            leadingItem={
+              {
+                "text": "B2",
+                "value": "b2",
+              }
             }
-          }
-          leadingSection={
-            {
-              "category": "A",
-              "data": [
-                {
-                  "text": "A1",
-                  "value": "a1",
-                },
-              ],
+            leadingSection={
+              {
+                "category": "A",
+                "data": [
+                  {
+                    "text": "A1",
+                    "value": "a1",
+                  },
+                ],
+              }
             }
-          }
-          section={
-            {
-              "category": "B",
-              "data": [
-                {
-                  "text": "B1",
-                  "value": "b1",
-                },
+            section={
+              {
+                "category": "B",
+                "data": [
+                  {
+                    "text": "B1",
+                    "value": "b1",
+                  },
+                  {
+                    "text": "B2",
+                    "value": "b2",
+                  },
+                ],
+              }
+            }
+            style={
+              [
                 {
-                  "text": "B2",
-                  "value": "b2",
+                  "marginTop": 12,
                 },
-              ],
+                undefined,
+              ]
             }
-          }
-          style={
-            [
-              {
-                "marginTop": 12,
-              },
-              undefined,
-            ]
-          }
-        />
+          />
+        </View>
       </View>
+      <View
+        onFocusCapture={[Function]}
+        onLayout={[Function]}
+        style={null}
+      />
     </View>
-    <View
-      onLayout={[Function]}
-      style={null}
-    />
-  </View>
-</RCTScrollView>
+  </RCTScrollView>
+  <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>
 `;