@hero-design/rn 8.98.1 → 8.99.0

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

@@ -158,163 +158,161 @@ exports[`OptionList render isLoading correctly 1`] = `
         onLayout={[Function]}
         style={null}
       >
-        <View>
-          <View
-            highlighted={false}
-            section={
-              {
-                "category": "A",
-                "data": [
-                  {
-                    "text": "A1",
-                    "value": "a1",
-                  },
-                ],
-              }
-            }
-            style={
-              [
+        <View
+          highlighted={false}
+          section={
+            {
+              "category": "A",
+              "data": [
                 {
-                  "marginTop": 12,
+                  "text": "A1",
+                  "value": "a1",
                 },
-                undefined,
-              ]
+              ],
             }
-            trailingItem={
+          }
+          style={
+            [
               {
-                "text": "A1",
-                "value": "a1",
-              }
+                "marginTop": 12,
+              },
+              undefined,
+            ]
+          }
+          trailingItem={
+            {
+              "text": "A1",
+              "value": "a1",
             }
-            trailingSection={
-              {
-                "category": "B",
-                "data": [
-                  {
-                    "text": "B1",
-                    "value": "b1",
-                  },
-                  {
-                    "text": "B2",
-                    "value": "b2",
-                  },
-                ],
-              }
+          }
+          trailingSection={
+            {
+              "category": "B",
+              "data": [
+                {
+                  "text": "B1",
+                  "value": "b1",
+                },
+                {
+                  "text": "B2",
+                  "value": "b2",
+                },
+              ],
             }
-          />
-          <View
-            accessibilityState={
-              {
-                "disabled": false,
-              }
+          }
+        />
+        <View
+          accessibilityState={
+            {
+              "disabled": false,
             }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
+          }
+          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]}
+          }
+          accessible={true}
+          focusable={true}
+          onClick={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            [
+              {
+                "alignItems": "center",
+                "backgroundColor": undefined,
+                "borderRadius": 4,
+                "flexDirection": "row",
+                "opacity": 1,
+                "padding": 16,
+              },
+              undefined,
+            ]
+          }
+        >
+          <View
             style={
               [
                 {
-                  "alignItems": "center",
-                  "backgroundColor": undefined,
-                  "borderRadius": 4,
-                  "flexDirection": "row",
-                  "opacity": 1,
-                  "padding": 16,
+                  "flex": 1,
                 },
                 undefined,
               ]
             }
           >
-            <View
+            <Text
+              allowFontScaling={false}
               style={
                 [
                   {
-                    "flex": 1,
+                    "color": "#001f23",
+                    "fontFamily": "BeVietnamPro-Regular",
+                    "fontSize": 16,
+                    "letterSpacing": 0.48,
+                    "lineHeight": 24,
                   },
                   undefined,
                 ]
               }
+              themeIntent="body"
+              themeTypeface="neutral"
+              themeVariant="regular"
             >
-              <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>
+              A1
+            </Text>
           </View>
-          <View
-            highlighted={false}
-            leadingItem={
-              {
-                "text": "A1",
-                "value": "a1",
-              }
-            }
-            section={
-              {
-                "category": "A",
-                "data": [
-                  {
-                    "text": "A1",
-                    "value": "a1",
-                  },
-                ],
-              }
+        </View>
+        <View
+          highlighted={false}
+          leadingItem={
+            {
+              "text": "A1",
+              "value": "a1",
             }
-            style={
-              [
+          }
+          section={
+            {
+              "category": "A",
+              "data": [
                 {
-                  "marginTop": 12,
+                  "text": "A1",
+                  "value": "a1",
                 },
-                undefined,
-              ]
+              ],
             }
-            trailingSection={
+          }
+          style={
+            [
               {
-                "category": "B",
-                "data": [
-                  {
-                    "text": "B1",
-                    "value": "b1",
-                  },
-                  {
-                    "text": "B2",
-                    "value": "b2",
-                  },
-                ],
-              }
+                "marginTop": 12,
+              },
+              undefined,
+            ]
+          }
+          trailingSection={
+            {
+              "category": "B",
+              "data": [
+                {
+                  "text": "B1",
+                  "value": "b1",
+                },
+                {
+                  "text": "B2",
+                  "value": "b2",
+                },
+              ],
             }
-          />
-        </View>
+          }
+        />
       </View>
       <View
         onFocusCapture={[Function]}
@@ -396,289 +394,285 @@ exports[`OptionList render isLoading correctly 1`] = `
         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",
-                  },
-                ],
-              }
+        <View
+          highlighted={false}
+          leadingSection={
+            {
+              "category": "A",
+              "data": [
+                {
+                  "text": "A1",
+                  "value": "a1",
+                },
+              ],
             }
-            style={
-              [
+          }
+          section={
+            {
+              "category": "B",
+              "data": [
                 {
-                  "marginTop": 12,
+                  "text": "B1",
+                  "value": "b1",
                 },
-                undefined,
-              ]
+                {
+                  "text": "B2",
+                  "value": "b2",
+                },
+              ],
             }
-            trailingItem={
+          }
+          style={
+            [
               {
-                "text": "B1",
-                "value": "b1",
-              }
+                "marginTop": 12,
+              },
+              undefined,
+            ]
+          }
+          trailingItem={
+            {
+              "text": "B1",
+              "value": "b1",
             }
-          />
-          <View
-            accessibilityState={
-              {
-                "disabled": false,
-              }
+          }
+        />
+        <View
+          accessibilityState={
+            {
+              "disabled": false,
             }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
+          }
+          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]}
+          }
+          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={
               [
                 {
-                  "alignItems": "center",
-                  "backgroundColor": "#ffffff",
-                  "borderRadius": 4,
-                  "flexDirection": "row",
-                  "opacity": 1,
-                  "padding": 16,
+                  "flex": 1,
                 },
                 undefined,
               ]
             }
           >
-            <View
+            <Text
+              allowFontScaling={false}
               style={
                 [
                   {
-                    "flex": 1,
+                    "color": "#001f23",
+                    "fontFamily": "BeVietnamPro-Regular",
+                    "fontSize": 16,
+                    "letterSpacing": 0.48,
+                    "lineHeight": 24,
                   },
                   undefined,
                 ]
               }
+              themeIntent="body"
+              themeTypeface="neutral"
+              themeVariant="regular"
             >
-              <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>
+              B1
+            </Text>
           </View>
-          <View
-            highlighted={false}
-            leadingItem={
-              {
-                "text": "B1",
-                "value": "b1",
-              }
-            }
-            leadingSection={
-              {
-                "category": "A",
-                "data": [
-                  {
-                    "text": "A1",
-                    "value": "a1",
-                  },
-                ],
-              }
+        </View>
+        <View
+          highlighted={false}
+          leadingItem={
+            {
+              "text": "B1",
+              "value": "b1",
             }
-            section={
-              {
-                "category": "B",
-                "data": [
-                  {
-                    "text": "B1",
-                    "value": "b1",
-                  },
-                  {
-                    "text": "B2",
-                    "value": "b2",
-                  },
-                ],
-              }
+          }
+          leadingSection={
+            {
+              "category": "A",
+              "data": [
+                {
+                  "text": "A1",
+                  "value": "a1",
+                },
+              ],
             }
-            style={
-              [
+          }
+          section={
+            {
+              "category": "B",
+              "data": [
                 {
-                  "marginTop": 4,
+                  "text": "B1",
+                  "value": "b1",
                 },
-                undefined,
-              ]
+                {
+                  "text": "B2",
+                  "value": "b2",
+                },
+              ],
             }
-            trailingItem={
+          }
+          style={
+            [
               {
-                "text": "B2",
-                "value": "b2",
-              }
+                "marginTop": 4,
+              },
+              undefined,
+            ]
+          }
+          trailingItem={
+            {
+              "text": "B2",
+              "value": "b2",
             }
-          />
-        </View>
+          }
+        />
       </View>
       <View
         onFocusCapture={[Function]}
         onLayout={[Function]}
         style={null}
       >
-        <View>
-          <View
-            accessibilityState={
-              {
-                "disabled": false,
-              }
+        <View
+          accessibilityState={
+            {
+              "disabled": false,
             }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
+          }
+          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]}
+          }
+          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={
               [
                 {
-                  "alignItems": "center",
-                  "backgroundColor": "#ffffff",
-                  "borderRadius": 4,
-                  "flexDirection": "row",
-                  "opacity": 1,
-                  "padding": 16,
+                  "flex": 1,
                 },
                 undefined,
               ]
             }
           >
-            <View
+            <Text
+              allowFontScaling={false}
               style={
                 [
                   {
-                    "flex": 1,
+                    "color": "#001f23",
+                    "fontFamily": "BeVietnamPro-Regular",
+                    "fontSize": 16,
+                    "letterSpacing": 0.48,
+                    "lineHeight": 24,
                   },
                   undefined,
                 ]
               }
+              themeIntent="body"
+              themeTypeface="neutral"
+              themeVariant="regular"
             >
-              <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>
+              B2
+            </Text>
           </View>
-          <View
-            highlighted={false}
-            leadingItem={
-              {
-                "text": "B2",
-                "value": "b2",
-              }
-            }
-            leadingSection={
-              {
-                "category": "A",
-                "data": [
-                  {
-                    "text": "A1",
-                    "value": "a1",
-                  },
-                ],
-              }
+        </View>
+        <View
+          highlighted={false}
+          leadingItem={
+            {
+              "text": "B2",
+              "value": "b2",
             }
-            section={
-              {
-                "category": "B",
-                "data": [
-                  {
-                    "text": "B1",
-                    "value": "b1",
-                  },
-                  {
-                    "text": "B2",
-                    "value": "b2",
-                  },
-                ],
-              }
+          }
+          leadingSection={
+            {
+              "category": "A",
+              "data": [
+                {
+                  "text": "A1",
+                  "value": "a1",
+                },
+              ],
             }
-            style={
-              [
+          }
+          section={
+            {
+              "category": "B",
+              "data": [
                 {
-                  "marginTop": 12,
+                  "text": "B1",
+                  "value": "b1",
                 },
-                undefined,
-              ]
+                {
+                  "text": "B2",
+                  "value": "b2",
+                },
+              ],
             }
-          />
-        </View>
+          }
+          style={
+            [
+              {
+                "marginTop": 12,
+              },
+              undefined,
+            ]
+          }
+        />
       </View>
       <View
         onFocusCapture={[Function]}
@@ -737,7 +731,7 @@ exports[`OptionList render isLoading correctly 1`] = `
                         "flexDirection": "row",
                         "marginBottom": 8,
                       },
-                      {},
+                      undefined,
                     ]
                   }
                   themePosition="top"
@@ -754,7 +748,7 @@ exports[`OptionList render isLoading correctly 1`] = `
                           "opacity": 0.9,
                           "width": 16,
                         },
-                        {},
+                        undefined,
                       ]
                     }
                     themeIntent="primary"
@@ -773,7 +767,7 @@ exports[`OptionList render isLoading correctly 1`] = `
                           "opacity": 0.675,
                           "width": 16,
                         },
-                        {},
+                        undefined,
                       ]
                     }
                     themeIntent="primary"
@@ -789,7 +783,7 @@ exports[`OptionList render isLoading correctly 1`] = `
                         "flexDirection": "row",
                         "marginBottom": 0,
                       },
-                      {},
+                      undefined,
                     ]
                   }
                   themePosition="bottom"
@@ -806,7 +800,7 @@ exports[`OptionList render isLoading correctly 1`] = `
                           "opacity": 0.45,
                           "width": 16,
                         },
-                        {},
+                        undefined,
                       ]
                     }
                     themeIntent="primary"
@@ -825,7 +819,7 @@ exports[`OptionList render isLoading correctly 1`] = `
                           "opacity": 0.225,
                           "width": 16,
                         },
-                        {},
+                        undefined,
                       ]
                     }
                     themeIntent="primary"
@@ -1011,173 +1005,171 @@ exports[`OptionList render object value correctly 1`] = `
         onLayout={[Function]}
         style={null}
       >
-        <View>
-          <View
-            highlighted={false}
-            section={
-              {
-                "category": "A",
-                "data": [
-                  {
-                    "text": "Item 1",
-                    "value": {
-                      "id": "1",
-                      "label": "Item 1",
-                    },
-                  },
-                ],
-              }
-            }
-            style={
-              [
+        <View
+          highlighted={false}
+          section={
+            {
+              "category": "A",
+              "data": [
                 {
-                  "marginTop": 12,
+                  "text": "Item 1",
+                  "value": {
+                    "id": "1",
+                    "label": "Item 1",
+                  },
                 },
-                undefined,
-              ]
+              ],
             }
-            trailingItem={
+          }
+          style={
+            [
               {
-                "text": "Item 1",
-                "value": {
-                  "id": "1",
-                  "label": "Item 1",
-                },
-              }
+                "marginTop": 12,
+              },
+              undefined,
+            ]
+          }
+          trailingItem={
+            {
+              "text": "Item 1",
+              "value": {
+                "id": "1",
+                "label": "Item 1",
+              },
             }
-            trailingSection={
-              {
-                "category": "B",
-                "data": [
-                  {
-                    "text": "Item 2",
-                    "value": {
-                      "id": "2",
-                      "label": "Item 2",
-                    },
+          }
+          trailingSection={
+            {
+              "category": "B",
+              "data": [
+                {
+                  "text": "Item 2",
+                  "value": {
+                    "id": "2",
+                    "label": "Item 2",
                   },
-                ],
-              }
+                },
+              ],
             }
-          />
-          <View
-            accessibilityState={
-              {
-                "disabled": false,
-              }
+          }
+        />
+        <View
+          accessibilityState={
+            {
+              "disabled": false,
             }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
+          }
+          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]}
+          }
+          accessible={true}
+          focusable={true}
+          onClick={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            [
+              {
+                "alignItems": "center",
+                "backgroundColor": undefined,
+                "borderRadius": 4,
+                "flexDirection": "row",
+                "opacity": 1,
+                "padding": 16,
+              },
+              undefined,
+            ]
+          }
+        >
+          <View
             style={
               [
                 {
-                  "alignItems": "center",
-                  "backgroundColor": undefined,
-                  "borderRadius": 4,
-                  "flexDirection": "row",
-                  "opacity": 1,
-                  "padding": 16,
+                  "flex": 1,
                 },
                 undefined,
               ]
             }
           >
-            <View
+            <Text
+              allowFontScaling={false}
               style={
                 [
                   {
-                    "flex": 1,
+                    "color": "#001f23",
+                    "fontFamily": "BeVietnamPro-Regular",
+                    "fontSize": 16,
+                    "letterSpacing": 0.48,
+                    "lineHeight": 24,
                   },
                   undefined,
                 ]
               }
+              themeIntent="body"
+              themeTypeface="neutral"
+              themeVariant="regular"
             >
-              <Text
-                allowFontScaling={false}
-                style={
-                  [
-                    {
-                      "color": "#001f23",
-                      "fontFamily": "BeVietnamPro-Regular",
-                      "fontSize": 16,
-                      "letterSpacing": 0.48,
-                      "lineHeight": 24,
-                    },
-                    undefined,
-                  ]
-                }
-                themeIntent="body"
-                themeTypeface="neutral"
-                themeVariant="regular"
-              >
-                Item 1
-              </Text>
-            </View>
+              Item 1
+            </Text>
           </View>
-          <View
-            highlighted={false}
-            leadingItem={
-              {
-                "text": "Item 1",
-                "value": {
-                  "id": "1",
-                  "label": "Item 1",
-                },
-              }
-            }
-            section={
-              {
-                "category": "A",
-                "data": [
-                  {
-                    "text": "Item 1",
-                    "value": {
-                      "id": "1",
-                      "label": "Item 1",
-                    },
-                  },
-                ],
-              }
+        </View>
+        <View
+          highlighted={false}
+          leadingItem={
+            {
+              "text": "Item 1",
+              "value": {
+                "id": "1",
+                "label": "Item 1",
+              },
             }
-            style={
-              [
+          }
+          section={
+            {
+              "category": "A",
+              "data": [
                 {
-                  "marginTop": 12,
+                  "text": "Item 1",
+                  "value": {
+                    "id": "1",
+                    "label": "Item 1",
+                  },
                 },
-                undefined,
-              ]
+              ],
             }
-            trailingSection={
+          }
+          style={
+            [
               {
-                "category": "B",
-                "data": [
-                  {
-                    "text": "Item 2",
-                    "value": {
-                      "id": "2",
-                      "label": "Item 2",
-                    },
+                "marginTop": 12,
+              },
+              undefined,
+            ]
+          }
+          trailingSection={
+            {
+              "category": "B",
+              "data": [
+                {
+                  "text": "Item 2",
+                  "value": {
+                    "id": "2",
+                    "label": "Item 2",
                   },
-                ],
-              }
+                },
+              ],
             }
-          />
-        </View>
+          }
+        />
       </View>
       <View
         onFocusCapture={[Function]}
@@ -1259,173 +1251,171 @@ exports[`OptionList render object value correctly 1`] = `
         onLayout={[Function]}
         style={null}
       >
-        <View>
-          <View
-            highlighted={false}
-            leadingSection={
-              {
-                "category": "A",
-                "data": [
-                  {
-                    "text": "Item 1",
-                    "value": {
-                      "id": "1",
-                      "label": "Item 1",
-                    },
-                  },
-                ],
-              }
-            }
-            section={
-              {
-                "category": "B",
-                "data": [
-                  {
-                    "text": "Item 2",
-                    "value": {
-                      "id": "2",
-                      "label": "Item 2",
-                    },
+        <View
+          highlighted={false}
+          leadingSection={
+            {
+              "category": "A",
+              "data": [
+                {
+                  "text": "Item 1",
+                  "value": {
+                    "id": "1",
+                    "label": "Item 1",
                   },
-                ],
-              }
+                },
+              ],
             }
-            style={
-              [
+          }
+          section={
+            {
+              "category": "B",
+              "data": [
                 {
-                  "marginTop": 12,
+                  "text": "Item 2",
+                  "value": {
+                    "id": "2",
+                    "label": "Item 2",
+                  },
                 },
-                undefined,
-              ]
+              ],
             }
-            trailingItem={
+          }
+          style={
+            [
               {
-                "text": "Item 2",
-                "value": {
-                  "id": "2",
-                  "label": "Item 2",
-                },
-              }
+                "marginTop": 12,
+              },
+              undefined,
+            ]
+          }
+          trailingItem={
+            {
+              "text": "Item 2",
+              "value": {
+                "id": "2",
+                "label": "Item 2",
+              },
             }
-          />
-          <View
-            accessibilityState={
-              {
-                "disabled": false,
-              }
+          }
+        />
+        <View
+          accessibilityState={
+            {
+              "disabled": false,
             }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
+          }
+          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]}
+          }
+          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={
               [
                 {
-                  "alignItems": "center",
-                  "backgroundColor": "#ffffff",
-                  "borderRadius": 4,
-                  "flexDirection": "row",
-                  "opacity": 1,
-                  "padding": 16,
+                  "flex": 1,
                 },
                 undefined,
               ]
             }
           >
-            <View
+            <Text
+              allowFontScaling={false}
               style={
                 [
                   {
-                    "flex": 1,
+                    "color": "#001f23",
+                    "fontFamily": "BeVietnamPro-Regular",
+                    "fontSize": 16,
+                    "letterSpacing": 0.48,
+                    "lineHeight": 24,
                   },
                   undefined,
                 ]
               }
+              themeIntent="body"
+              themeTypeface="neutral"
+              themeVariant="regular"
             >
-              <Text
-                allowFontScaling={false}
-                style={
-                  [
-                    {
-                      "color": "#001f23",
-                      "fontFamily": "BeVietnamPro-Regular",
-                      "fontSize": 16,
-                      "letterSpacing": 0.48,
-                      "lineHeight": 24,
-                    },
-                    undefined,
-                  ]
-                }
-                themeIntent="body"
-                themeTypeface="neutral"
-                themeVariant="regular"
-              >
-                Item 2
-              </Text>
-            </View>
+              Item 2
+            </Text>
           </View>
-          <View
-            highlighted={false}
-            leadingItem={
-              {
-                "text": "Item 2",
-                "value": {
-                  "id": "2",
-                  "label": "Item 2",
-                },
-              }
-            }
-            leadingSection={
-              {
-                "category": "A",
-                "data": [
-                  {
-                    "text": "Item 1",
-                    "value": {
-                      "id": "1",
-                      "label": "Item 1",
-                    },
-                  },
-                ],
-              }
+        </View>
+        <View
+          highlighted={false}
+          leadingItem={
+            {
+              "text": "Item 2",
+              "value": {
+                "id": "2",
+                "label": "Item 2",
+              },
             }
-            section={
-              {
-                "category": "B",
-                "data": [
-                  {
-                    "text": "Item 2",
-                    "value": {
-                      "id": "2",
-                      "label": "Item 2",
-                    },
+          }
+          leadingSection={
+            {
+              "category": "A",
+              "data": [
+                {
+                  "text": "Item 1",
+                  "value": {
+                    "id": "1",
+                    "label": "Item 1",
                   },
-                ],
-              }
+                },
+              ],
             }
-            style={
-              [
+          }
+          section={
+            {
+              "category": "B",
+              "data": [
                 {
-                  "marginTop": 12,
+                  "text": "Item 2",
+                  "value": {
+                    "id": "2",
+                    "label": "Item 2",
+                  },
                 },
-                undefined,
-              ]
+              ],
             }
-          />
-        </View>
+          }
+          style={
+            [
+              {
+                "marginTop": 12,
+              },
+              undefined,
+            ]
+          }
+        />
       </View>
       <View
         onFocusCapture={[Function]}
@@ -1603,163 +1593,161 @@ exports[`OptionList renders correctly 1`] = `
         onLayout={[Function]}
         style={null}
       >
-        <View>
-          <View
-            highlighted={false}
-            section={
-              {
-                "category": "A",
-                "data": [
-                  {
-                    "text": "A1",
-                    "value": "a1",
-                  },
-                ],
-              }
-            }
-            style={
-              [
+        <View
+          highlighted={false}
+          section={
+            {
+              "category": "A",
+              "data": [
                 {
-                  "marginTop": 12,
+                  "text": "A1",
+                  "value": "a1",
                 },
-                undefined,
-              ]
+              ],
             }
-            trailingItem={
+          }
+          style={
+            [
               {
-                "text": "A1",
-                "value": "a1",
-              }
+                "marginTop": 12,
+              },
+              undefined,
+            ]
+          }
+          trailingItem={
+            {
+              "text": "A1",
+              "value": "a1",
             }
-            trailingSection={
-              {
-                "category": "B",
-                "data": [
-                  {
-                    "text": "B1",
-                    "value": "b1",
-                  },
-                  {
-                    "text": "B2",
-                    "value": "b2",
-                  },
-                ],
-              }
+          }
+          trailingSection={
+            {
+              "category": "B",
+              "data": [
+                {
+                  "text": "B1",
+                  "value": "b1",
+                },
+                {
+                  "text": "B2",
+                  "value": "b2",
+                },
+              ],
             }
-          />
-          <View
-            accessibilityState={
-              {
-                "disabled": false,
-              }
+          }
+        />
+        <View
+          accessibilityState={
+            {
+              "disabled": false,
             }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
+          }
+          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]}
+          }
+          accessible={true}
+          focusable={true}
+          onClick={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            [
+              {
+                "alignItems": "center",
+                "backgroundColor": undefined,
+                "borderRadius": 4,
+                "flexDirection": "row",
+                "opacity": 1,
+                "padding": 16,
+              },
+              undefined,
+            ]
+          }
+        >
+          <View
             style={
               [
                 {
-                  "alignItems": "center",
-                  "backgroundColor": undefined,
-                  "borderRadius": 4,
-                  "flexDirection": "row",
-                  "opacity": 1,
-                  "padding": 16,
+                  "flex": 1,
                 },
                 undefined,
               ]
             }
           >
-            <View
+            <Text
+              allowFontScaling={false}
               style={
                 [
                   {
-                    "flex": 1,
+                    "color": "#001f23",
+                    "fontFamily": "BeVietnamPro-Regular",
+                    "fontSize": 16,
+                    "letterSpacing": 0.48,
+                    "lineHeight": 24,
                   },
                   undefined,
                 ]
               }
+              themeIntent="body"
+              themeTypeface="neutral"
+              themeVariant="regular"
             >
-              <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>
+              A1
+            </Text>
           </View>
-          <View
-            highlighted={false}
-            leadingItem={
-              {
-                "text": "A1",
-                "value": "a1",
-              }
-            }
-            section={
-              {
-                "category": "A",
-                "data": [
-                  {
-                    "text": "A1",
-                    "value": "a1",
-                  },
-                ],
-              }
+        </View>
+        <View
+          highlighted={false}
+          leadingItem={
+            {
+              "text": "A1",
+              "value": "a1",
             }
-            style={
-              [
+          }
+          section={
+            {
+              "category": "A",
+              "data": [
                 {
-                  "marginTop": 12,
+                  "text": "A1",
+                  "value": "a1",
                 },
-                undefined,
-              ]
+              ],
             }
-            trailingSection={
+          }
+          style={
+            [
               {
-                "category": "B",
-                "data": [
-                  {
-                    "text": "B1",
-                    "value": "b1",
-                  },
-                  {
-                    "text": "B2",
-                    "value": "b2",
-                  },
-                ],
-              }
+                "marginTop": 12,
+              },
+              undefined,
+            ]
+          }
+          trailingSection={
+            {
+              "category": "B",
+              "data": [
+                {
+                  "text": "B1",
+                  "value": "b1",
+                },
+                {
+                  "text": "B2",
+                  "value": "b2",
+                },
+              ],
             }
-          />
-        </View>
+          }
+        />
       </View>
       <View
         onFocusCapture={[Function]}
@@ -1836,294 +1824,290 @@ exports[`OptionList renders correctly 1`] = `
           </View>
         </View>
       </View>
-      <View
-        onFocusCapture={[Function]}
-        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",
-                  },
-                ],
-              }
+      <View
+        onFocusCapture={[Function]}
+        onLayout={[Function]}
+        style={null}
+      >
+        <View
+          highlighted={false}
+          leadingSection={
+            {
+              "category": "A",
+              "data": [
+                {
+                  "text": "A1",
+                  "value": "a1",
+                },
+              ],
             }
-            style={
-              [
+          }
+          section={
+            {
+              "category": "B",
+              "data": [
                 {
-                  "marginTop": 12,
+                  "text": "B1",
+                  "value": "b1",
                 },
-                undefined,
-              ]
+                {
+                  "text": "B2",
+                  "value": "b2",
+                },
+              ],
             }
-            trailingItem={
+          }
+          style={
+            [
               {
-                "text": "B1",
-                "value": "b1",
-              }
+                "marginTop": 12,
+              },
+              undefined,
+            ]
+          }
+          trailingItem={
+            {
+              "text": "B1",
+              "value": "b1",
             }
-          />
-          <View
-            accessibilityState={
-              {
-                "disabled": false,
-              }
+          }
+        />
+        <View
+          accessibilityState={
+            {
+              "disabled": false,
             }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
+          }
+          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]}
+          }
+          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={
               [
                 {
-                  "alignItems": "center",
-                  "backgroundColor": "#ffffff",
-                  "borderRadius": 4,
-                  "flexDirection": "row",
-                  "opacity": 1,
-                  "padding": 16,
+                  "flex": 1,
                 },
                 undefined,
               ]
             }
           >
-            <View
+            <Text
+              allowFontScaling={false}
               style={
                 [
                   {
-                    "flex": 1,
+                    "color": "#001f23",
+                    "fontFamily": "BeVietnamPro-Regular",
+                    "fontSize": 16,
+                    "letterSpacing": 0.48,
+                    "lineHeight": 24,
                   },
                   undefined,
                 ]
               }
+              themeIntent="body"
+              themeTypeface="neutral"
+              themeVariant="regular"
             >
-              <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>
+              B1
+            </Text>
           </View>
-          <View
-            highlighted={false}
-            leadingItem={
-              {
-                "text": "B1",
-                "value": "b1",
-              }
-            }
-            leadingSection={
-              {
-                "category": "A",
-                "data": [
-                  {
-                    "text": "A1",
-                    "value": "a1",
-                  },
-                ],
-              }
+        </View>
+        <View
+          highlighted={false}
+          leadingItem={
+            {
+              "text": "B1",
+              "value": "b1",
             }
-            section={
-              {
-                "category": "B",
-                "data": [
-                  {
-                    "text": "B1",
-                    "value": "b1",
-                  },
-                  {
-                    "text": "B2",
-                    "value": "b2",
-                  },
-                ],
-              }
+          }
+          leadingSection={
+            {
+              "category": "A",
+              "data": [
+                {
+                  "text": "A1",
+                  "value": "a1",
+                },
+              ],
             }
-            style={
-              [
+          }
+          section={
+            {
+              "category": "B",
+              "data": [
                 {
-                  "marginTop": 4,
+                  "text": "B1",
+                  "value": "b1",
                 },
-                undefined,
-              ]
+                {
+                  "text": "B2",
+                  "value": "b2",
+                },
+              ],
             }
-            trailingItem={
+          }
+          style={
+            [
               {
-                "text": "B2",
-                "value": "b2",
-              }
+                "marginTop": 4,
+              },
+              undefined,
+            ]
+          }
+          trailingItem={
+            {
+              "text": "B2",
+              "value": "b2",
             }
-          />
-        </View>
+          }
+        />
       </View>
       <View
         onFocusCapture={[Function]}
         onLayout={[Function]}
         style={null}
       >
-        <View>
-          <View
-            accessibilityState={
-              {
-                "disabled": false,
-              }
+        <View
+          accessibilityState={
+            {
+              "disabled": false,
             }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
+          }
+          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]}
+          }
+          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={
               [
                 {
-                  "alignItems": "center",
-                  "backgroundColor": "#ffffff",
-                  "borderRadius": 4,
-                  "flexDirection": "row",
-                  "opacity": 1,
-                  "padding": 16,
+                  "flex": 1,
                 },
                 undefined,
               ]
             }
           >
-            <View
+            <Text
+              allowFontScaling={false}
               style={
                 [
                   {
-                    "flex": 1,
+                    "color": "#001f23",
+                    "fontFamily": "BeVietnamPro-Regular",
+                    "fontSize": 16,
+                    "letterSpacing": 0.48,
+                    "lineHeight": 24,
                   },
                   undefined,
                 ]
               }
+              themeIntent="body"
+              themeTypeface="neutral"
+              themeVariant="regular"
             >
-              <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>
+              B2
+            </Text>
           </View>
-          <View
-            highlighted={false}
-            leadingItem={
-              {
-                "text": "B2",
-                "value": "b2",
-              }
-            }
-            leadingSection={
-              {
-                "category": "A",
-                "data": [
-                  {
-                    "text": "A1",
-                    "value": "a1",
-                  },
-                ],
-              }
+        </View>
+        <View
+          highlighted={false}
+          leadingItem={
+            {
+              "text": "B2",
+              "value": "b2",
             }
-            section={
-              {
-                "category": "B",
-                "data": [
-                  {
-                    "text": "B1",
-                    "value": "b1",
-                  },
-                  {
-                    "text": "B2",
-                    "value": "b2",
-                  },
-                ],
-              }
+          }
+          leadingSection={
+            {
+              "category": "A",
+              "data": [
+                {
+                  "text": "A1",
+                  "value": "a1",
+                },
+              ],
             }
-            style={
-              [
+          }
+          section={
+            {
+              "category": "B",
+              "data": [
                 {
-                  "marginTop": 12,
+                  "text": "B1",
+                  "value": "b1",
                 },
-                undefined,
-              ]
+                {
+                  "text": "B2",
+                  "value": "b2",
+                },
+              ],
             }
-          />
-        </View>
+          }
+          style={
+            [
+              {
+                "marginTop": 12,
+              },
+              undefined,
+            ]
+          }
+        />
       </View>
       <View
         onFocusCapture={[Function]}
@@ -2301,163 +2285,161 @@ exports[`OptionList trigger onPress correctly on select new value 1`] = `
         onLayout={[Function]}
         style={null}
       >
-        <View>
-          <View
-            highlighted={false}
-            section={
-              {
-                "category": "A",
-                "data": [
-                  {
-                    "text": "A1",
-                    "value": "a1",
-                  },
-                ],
-              }
-            }
-            style={
-              [
+        <View
+          highlighted={false}
+          section={
+            {
+              "category": "A",
+              "data": [
                 {
-                  "marginTop": 12,
+                  "text": "A1",
+                  "value": "a1",
                 },
-                undefined,
-              ]
+              ],
             }
-            trailingItem={
+          }
+          style={
+            [
               {
-                "text": "A1",
-                "value": "a1",
-              }
+                "marginTop": 12,
+              },
+              undefined,
+            ]
+          }
+          trailingItem={
+            {
+              "text": "A1",
+              "value": "a1",
             }
-            trailingSection={
-              {
-                "category": "B",
-                "data": [
-                  {
-                    "text": "B1",
-                    "value": "b1",
-                  },
-                  {
-                    "text": "B2",
-                    "value": "b2",
-                  },
-                ],
-              }
+          }
+          trailingSection={
+            {
+              "category": "B",
+              "data": [
+                {
+                  "text": "B1",
+                  "value": "b1",
+                },
+                {
+                  "text": "B2",
+                  "value": "b2",
+                },
+              ],
             }
-          />
-          <View
-            accessibilityState={
-              {
-                "disabled": false,
-              }
+          }
+        />
+        <View
+          accessibilityState={
+            {
+              "disabled": false,
             }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
+          }
+          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]}
+          }
+          accessible={true}
+          focusable={true}
+          onClick={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            [
+              {
+                "alignItems": "center",
+                "backgroundColor": undefined,
+                "borderRadius": 4,
+                "flexDirection": "row",
+                "opacity": 1,
+                "padding": 16,
+              },
+              undefined,
+            ]
+          }
+        >
+          <View
             style={
               [
                 {
-                  "alignItems": "center",
-                  "backgroundColor": undefined,
-                  "borderRadius": 4,
-                  "flexDirection": "row",
-                  "opacity": 1,
-                  "padding": 16,
+                  "flex": 1,
                 },
                 undefined,
               ]
             }
           >
-            <View
+            <Text
+              allowFontScaling={false}
               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",
+                    "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",
             }
-            style={
-              [
+          }
+          section={
+            {
+              "category": "A",
+              "data": [
                 {
-                  "marginTop": 12,
+                  "text": "A1",
+                  "value": "a1",
                 },
-                undefined,
-              ]
+              ],
             }
-            trailingSection={
+          }
+          style={
+            [
               {
-                "category": "B",
-                "data": [
-                  {
-                    "text": "B1",
-                    "value": "b1",
-                  },
-                  {
-                    "text": "B2",
-                    "value": "b2",
-                  },
-                ],
-              }
+                "marginTop": 12,
+              },
+              undefined,
+            ]
+          }
+          trailingSection={
+            {
+              "category": "B",
+              "data": [
+                {
+                  "text": "B1",
+                  "value": "b1",
+                },
+                {
+                  "text": "B2",
+                  "value": "b2",
+                },
+              ],
             }
-          />
-        </View>
+          }
+        />
       </View>
       <View
         onFocusCapture={[Function]}
@@ -2539,289 +2521,285 @@ exports[`OptionList trigger onPress correctly on select new value 1`] = `
         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",
-                  },
-                ],
-              }
+        <View
+          highlighted={false}
+          leadingSection={
+            {
+              "category": "A",
+              "data": [
+                {
+                  "text": "A1",
+                  "value": "a1",
+                },
+              ],
             }
-            style={
-              [
+          }
+          section={
+            {
+              "category": "B",
+              "data": [
                 {
-                  "marginTop": 12,
+                  "text": "B1",
+                  "value": "b1",
                 },
-                undefined,
-              ]
+                {
+                  "text": "B2",
+                  "value": "b2",
+                },
+              ],
             }
-            trailingItem={
+          }
+          style={
+            [
               {
-                "text": "B1",
-                "value": "b1",
-              }
+                "marginTop": 12,
+              },
+              undefined,
+            ]
+          }
+          trailingItem={
+            {
+              "text": "B1",
+              "value": "b1",
             }
-          />
-          <View
-            accessibilityState={
-              {
-                "disabled": false,
-              }
+          }
+        />
+        <View
+          accessibilityState={
+            {
+              "disabled": false,
             }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
+          }
+          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]}
+          }
+          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={
               [
                 {
-                  "alignItems": "center",
-                  "backgroundColor": "#ffffff",
-                  "borderRadius": 4,
-                  "flexDirection": "row",
-                  "opacity": 1,
-                  "padding": 16,
+                  "flex": 1,
                 },
                 undefined,
               ]
             }
           >
-            <View
+            <Text
+              allowFontScaling={false}
               style={
                 [
                   {
-                    "flex": 1,
+                    "color": "#001f23",
+                    "fontFamily": "BeVietnamPro-Regular",
+                    "fontSize": 16,
+                    "letterSpacing": 0.48,
+                    "lineHeight": 24,
                   },
                   undefined,
                 ]
               }
+              themeIntent="body"
+              themeTypeface="neutral"
+              themeVariant="regular"
             >
-              <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>
+              B1
+            </Text>
           </View>
-          <View
-            highlighted={false}
-            leadingItem={
-              {
-                "text": "B1",
-                "value": "b1",
-              }
-            }
-            leadingSection={
-              {
-                "category": "A",
-                "data": [
-                  {
-                    "text": "A1",
-                    "value": "a1",
-                  },
-                ],
-              }
+        </View>
+        <View
+          highlighted={false}
+          leadingItem={
+            {
+              "text": "B1",
+              "value": "b1",
             }
-            section={
-              {
-                "category": "B",
-                "data": [
-                  {
-                    "text": "B1",
-                    "value": "b1",
-                  },
-                  {
-                    "text": "B2",
-                    "value": "b2",
-                  },
-                ],
-              }
+          }
+          leadingSection={
+            {
+              "category": "A",
+              "data": [
+                {
+                  "text": "A1",
+                  "value": "a1",
+                },
+              ],
             }
-            style={
-              [
+          }
+          section={
+            {
+              "category": "B",
+              "data": [
                 {
-                  "marginTop": 4,
+                  "text": "B1",
+                  "value": "b1",
                 },
-                undefined,
-              ]
+                {
+                  "text": "B2",
+                  "value": "b2",
+                },
+              ],
             }
-            trailingItem={
+          }
+          style={
+            [
               {
-                "text": "B2",
-                "value": "b2",
-              }
+                "marginTop": 4,
+              },
+              undefined,
+            ]
+          }
+          trailingItem={
+            {
+              "text": "B2",
+              "value": "b2",
             }
-          />
-        </View>
+          }
+        />
       </View>
       <View
         onFocusCapture={[Function]}
         onLayout={[Function]}
         style={null}
       >
-        <View>
-          <View
-            accessibilityState={
-              {
-                "disabled": false,
-              }
+        <View
+          accessibilityState={
+            {
+              "disabled": false,
             }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
+          }
+          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]}
+          }
+          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={
               [
                 {
-                  "alignItems": "center",
-                  "backgroundColor": "#ffffff",
-                  "borderRadius": 4,
-                  "flexDirection": "row",
-                  "opacity": 1,
-                  "padding": 16,
+                  "flex": 1,
                 },
                 undefined,
               ]
             }
           >
-            <View
+            <Text
+              allowFontScaling={false}
               style={
                 [
                   {
-                    "flex": 1,
+                    "color": "#001f23",
+                    "fontFamily": "BeVietnamPro-Regular",
+                    "fontSize": 16,
+                    "letterSpacing": 0.48,
+                    "lineHeight": 24,
                   },
                   undefined,
                 ]
               }
+              themeIntent="body"
+              themeTypeface="neutral"
+              themeVariant="regular"
             >
-              <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>
+              B2
+            </Text>
           </View>
-          <View
-            highlighted={false}
-            leadingItem={
-              {
-                "text": "B2",
-                "value": "b2",
-              }
-            }
-            leadingSection={
-              {
-                "category": "A",
-                "data": [
-                  {
-                    "text": "A1",
-                    "value": "a1",
-                  },
-                ],
-              }
+        </View>
+        <View
+          highlighted={false}
+          leadingItem={
+            {
+              "text": "B2",
+              "value": "b2",
             }
-            section={
-              {
-                "category": "B",
-                "data": [
-                  {
-                    "text": "B1",
-                    "value": "b1",
-                  },
-                  {
-                    "text": "B2",
-                    "value": "b2",
-                  },
-                ],
-              }
+          }
+          leadingSection={
+            {
+              "category": "A",
+              "data": [
+                {
+                  "text": "A1",
+                  "value": "a1",
+                },
+              ],
             }
-            style={
-              [
+          }
+          section={
+            {
+              "category": "B",
+              "data": [
                 {
-                  "marginTop": 12,
+                  "text": "B1",
+                  "value": "b1",
                 },
-                undefined,
-              ]
+                {
+                  "text": "B2",
+                  "value": "b2",
+                },
+              ],
             }
-          />
-        </View>
+          }
+          style={
+            [
+              {
+                "marginTop": 12,
+              },
+              undefined,
+            ]
+          }
+        />
       </View>
       <View
         onFocusCapture={[Function]}
@@ -2999,163 +2977,161 @@ exports[`OptionList trigger onPress correctly on unselect current value 1`] = `
         onLayout={[Function]}
         style={null}
       >
-        <View>
-          <View
-            highlighted={false}
-            section={
-              {
-                "category": "A",
-                "data": [
-                  {
-                    "text": "A1",
-                    "value": "a1",
-                  },
-                ],
-              }
-            }
-            style={
-              [
+        <View
+          highlighted={false}
+          section={
+            {
+              "category": "A",
+              "data": [
                 {
-                  "marginTop": 12,
+                  "text": "A1",
+                  "value": "a1",
                 },
-                undefined,
-              ]
+              ],
             }
-            trailingItem={
+          }
+          style={
+            [
               {
-                "text": "A1",
-                "value": "a1",
-              }
+                "marginTop": 12,
+              },
+              undefined,
+            ]
+          }
+          trailingItem={
+            {
+              "text": "A1",
+              "value": "a1",
             }
-            trailingSection={
-              {
-                "category": "B",
-                "data": [
-                  {
-                    "text": "B1",
-                    "value": "b1",
-                  },
-                  {
-                    "text": "B2",
-                    "value": "b2",
-                  },
-                ],
-              }
+          }
+          trailingSection={
+            {
+              "category": "B",
+              "data": [
+                {
+                  "text": "B1",
+                  "value": "b1",
+                },
+                {
+                  "text": "B2",
+                  "value": "b2",
+                },
+              ],
+            }
+          }
+        />
+        <View
+          accessibilityState={
+            {
+              "disabled": false,
             }
-          />
-          <View
-            accessibilityState={
-              {
-                "disabled": false,
-              }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
             }
-            accessibilityValue={
+          }
+          accessible={true}
+          focusable={true}
+          onClick={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            [
               {
-                "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]}
+                "alignItems": "center",
+                "backgroundColor": undefined,
+                "borderRadius": 4,
+                "flexDirection": "row",
+                "opacity": 1,
+                "padding": 16,
+              },
+              undefined,
+            ]
+          }
+        >
+          <View
             style={
               [
                 {
-                  "alignItems": "center",
-                  "backgroundColor": undefined,
-                  "borderRadius": 4,
-                  "flexDirection": "row",
-                  "opacity": 1,
-                  "padding": 16,
+                  "flex": 1,
                 },
                 undefined,
               ]
             }
           >
-            <View
+            <Text
+              allowFontScaling={false}
               style={
                 [
                   {
-                    "flex": 1,
+                    "color": "#001f23",
+                    "fontFamily": "BeVietnamPro-Regular",
+                    "fontSize": 16,
+                    "letterSpacing": 0.48,
+                    "lineHeight": 24,
                   },
                   undefined,
                 ]
               }
+              themeIntent="body"
+              themeTypeface="neutral"
+              themeVariant="regular"
             >
-              <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>
+              A1
+            </Text>
           </View>
-          <View
-            highlighted={false}
-            leadingItem={
-              {
-                "text": "A1",
-                "value": "a1",
-              }
-            }
-            section={
-              {
-                "category": "A",
-                "data": [
-                  {
-                    "text": "A1",
-                    "value": "a1",
-                  },
-                ],
-              }
+        </View>
+        <View
+          highlighted={false}
+          leadingItem={
+            {
+              "text": "A1",
+              "value": "a1",
             }
-            style={
-              [
+          }
+          section={
+            {
+              "category": "A",
+              "data": [
                 {
-                  "marginTop": 12,
+                  "text": "A1",
+                  "value": "a1",
                 },
-                undefined,
-              ]
+              ],
             }
-            trailingSection={
+          }
+          style={
+            [
               {
-                "category": "B",
-                "data": [
-                  {
-                    "text": "B1",
-                    "value": "b1",
-                  },
-                  {
-                    "text": "B2",
-                    "value": "b2",
-                  },
-                ],
-              }
+                "marginTop": 12,
+              },
+              undefined,
+            ]
+          }
+          trailingSection={
+            {
+              "category": "B",
+              "data": [
+                {
+                  "text": "B1",
+                  "value": "b1",
+                },
+                {
+                  "text": "B2",
+                  "value": "b2",
+                },
+              ],
             }
-          />
-        </View>
+          }
+        />
       </View>
       <View
         onFocusCapture={[Function]}
@@ -3237,289 +3213,285 @@ exports[`OptionList trigger onPress correctly on unselect current value 1`] = `
         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",
-                  },
-                ],
-              }
+        <View
+          highlighted={false}
+          leadingSection={
+            {
+              "category": "A",
+              "data": [
+                {
+                  "text": "A1",
+                  "value": "a1",
+                },
+              ],
             }
-            style={
-              [
+          }
+          section={
+            {
+              "category": "B",
+              "data": [
                 {
-                  "marginTop": 12,
+                  "text": "B1",
+                  "value": "b1",
                 },
-                undefined,
-              ]
+                {
+                  "text": "B2",
+                  "value": "b2",
+                },
+              ],
             }
-            trailingItem={
+          }
+          style={
+            [
               {
-                "text": "B1",
-                "value": "b1",
-              }
+                "marginTop": 12,
+              },
+              undefined,
+            ]
+          }
+          trailingItem={
+            {
+              "text": "B1",
+              "value": "b1",
             }
-          />
-          <View
-            accessibilityState={
-              {
-                "disabled": false,
-              }
+          }
+        />
+        <View
+          accessibilityState={
+            {
+              "disabled": false,
             }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
+          }
+          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]}
+          }
+          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={
               [
                 {
-                  "alignItems": "center",
-                  "backgroundColor": "#ffffff",
-                  "borderRadius": 4,
-                  "flexDirection": "row",
-                  "opacity": 1,
-                  "padding": 16,
+                  "flex": 1,
                 },
                 undefined,
               ]
             }
           >
-            <View
+            <Text
+              allowFontScaling={false}
               style={
                 [
                   {
-                    "flex": 1,
+                    "color": "#001f23",
+                    "fontFamily": "BeVietnamPro-Regular",
+                    "fontSize": 16,
+                    "letterSpacing": 0.48,
+                    "lineHeight": 24,
                   },
                   undefined,
                 ]
               }
+              themeIntent="body"
+              themeTypeface="neutral"
+              themeVariant="regular"
             >
-              <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>
+              B1
+            </Text>
           </View>
-          <View
-            highlighted={false}
-            leadingItem={
-              {
-                "text": "B1",
-                "value": "b1",
-              }
-            }
-            leadingSection={
-              {
-                "category": "A",
-                "data": [
-                  {
-                    "text": "A1",
-                    "value": "a1",
-                  },
-                ],
-              }
+        </View>
+        <View
+          highlighted={false}
+          leadingItem={
+            {
+              "text": "B1",
+              "value": "b1",
             }
-            section={
-              {
-                "category": "B",
-                "data": [
-                  {
-                    "text": "B1",
-                    "value": "b1",
-                  },
-                  {
-                    "text": "B2",
-                    "value": "b2",
-                  },
-                ],
-              }
+          }
+          leadingSection={
+            {
+              "category": "A",
+              "data": [
+                {
+                  "text": "A1",
+                  "value": "a1",
+                },
+              ],
             }
-            style={
-              [
+          }
+          section={
+            {
+              "category": "B",
+              "data": [
                 {
-                  "marginTop": 4,
+                  "text": "B1",
+                  "value": "b1",
                 },
-                undefined,
-              ]
+                {
+                  "text": "B2",
+                  "value": "b2",
+                },
+              ],
             }
-            trailingItem={
+          }
+          style={
+            [
               {
-                "text": "B2",
-                "value": "b2",
-              }
+                "marginTop": 4,
+              },
+              undefined,
+            ]
+          }
+          trailingItem={
+            {
+              "text": "B2",
+              "value": "b2",
             }
-          />
-        </View>
+          }
+        />
       </View>
       <View
         onFocusCapture={[Function]}
         onLayout={[Function]}
         style={null}
       >
-        <View>
-          <View
-            accessibilityState={
-              {
-                "disabled": false,
-              }
+        <View
+          accessibilityState={
+            {
+              "disabled": false,
             }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
+          }
+          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]}
+          }
+          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={
               [
                 {
-                  "alignItems": "center",
-                  "backgroundColor": "#ffffff",
-                  "borderRadius": 4,
-                  "flexDirection": "row",
-                  "opacity": 1,
-                  "padding": 16,
+                  "flex": 1,
                 },
                 undefined,
               ]
             }
           >
-            <View
+            <Text
+              allowFontScaling={false}
               style={
                 [
                   {
-                    "flex": 1,
+                    "color": "#001f23",
+                    "fontFamily": "BeVietnamPro-Regular",
+                    "fontSize": 16,
+                    "letterSpacing": 0.48,
+                    "lineHeight": 24,
                   },
                   undefined,
                 ]
               }
+              themeIntent="body"
+              themeTypeface="neutral"
+              themeVariant="regular"
             >
-              <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>
+              B2
+            </Text>
           </View>
-          <View
-            highlighted={false}
-            leadingItem={
-              {
-                "text": "B2",
-                "value": "b2",
-              }
-            }
-            leadingSection={
-              {
-                "category": "A",
-                "data": [
-                  {
-                    "text": "A1",
-                    "value": "a1",
-                  },
-                ],
-              }
+        </View>
+        <View
+          highlighted={false}
+          leadingItem={
+            {
+              "text": "B2",
+              "value": "b2",
             }
-            section={
-              {
-                "category": "B",
-                "data": [
-                  {
-                    "text": "B1",
-                    "value": "b1",
-                  },
-                  {
-                    "text": "B2",
-                    "value": "b2",
-                  },
-                ],
-              }
+          }
+          leadingSection={
+            {
+              "category": "A",
+              "data": [
+                {
+                  "text": "A1",
+                  "value": "a1",
+                },
+              ],
             }
-            style={
-              [
+          }
+          section={
+            {
+              "category": "B",
+              "data": [
                 {
-                  "marginTop": 12,
+                  "text": "B1",
+                  "value": "b1",
                 },
-                undefined,
-              ]
+                {
+                  "text": "B2",
+                  "value": "b2",
+                },
+              ],
             }
-          />
-        </View>
+          }
+          style={
+            [
+              {
+                "marginTop": 12,
+              },
+              undefined,
+            ]
+          }
+        />
       </View>
       <View
         onFocusCapture={[Function]}