@hero-design/rn 7.16.2 → 7.17.1

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

@@ -18,16 +18,26 @@ exports[`OptionList render isLoading correctly 1`] = `
   data={
     Array [
       Object {
-        "text": "A",
-        "value": "a",
-      },
-      Object {
-        "text": "B",
-        "value": "b",
+        "category": "A",
+        "data": Array [
+          Object {
+            "text": "A1",
+            "value": "a1",
+          },
+        ],
       },
       Object {
-        "text": "C",
-        "value": "c",
+        "category": "B",
+        "data": Array [
+          Object {
+            "text": "B1",
+            "value": "b1",
+          },
+          Object {
+            "text": "B2",
+            "value": "b2",
+          },
+        ],
       },
     ]
   }
@@ -44,23 +54,131 @@ exports[`OptionList render isLoading correctly 1`] = `
   onScrollBeginDrag={[Function]}
   onScrollEndDrag={[Function]}
   onScrollToIndexFailed={[Function]}
-  removeClippedSubviews={false}
   renderItem={[Function]}
   scrollEventThrottle={50}
-  stickyHeaderIndices={Array []}
-  style={
-    Object {
-      "paddingHorizontal": 16,
-    }
+  stickyHeaderIndices={
+    Array [
+      0,
+      3,
+    ]
   }
-  viewabilityConfigCallbackPairs={Array []}
+  style={Object {}}
 >
   <View>
+    <View
+      onLayout={[Function]}
+      style={null}
+    >
+      <View
+        style={
+          Array [
+            Object {
+              "alignContent": "center",
+              "backgroundColor": "#e8e9ea",
+              "display": "flex",
+              "flexDirection": "row",
+              "justifyContent": "space-between",
+              "marginBottom": 16,
+              "paddingHorizontal": 16,
+              "paddingVertical": 8,
+            },
+            Object {
+              "marginBottom": 0,
+            },
+          ]
+        }
+      >
+        <View
+          style={
+            Array [
+              Object {
+                "display": "flex",
+                "flexDirection": "row",
+              },
+              undefined,
+            ]
+          }
+        >
+          <View
+            style={
+              Array [
+                Object {
+                  "marginRight": 8,
+                },
+                undefined,
+              ]
+            }
+          />
+          <Text
+            style={
+              Array [
+                Object {
+                  "color": "#001f23",
+                  "fontFamily": "BeVietnamPro-Regular",
+                  "fontSize": 16,
+                  "letterSpacing": 0.48,
+                  "lineHeight": 24,
+                },
+                undefined,
+              ]
+            }
+            themeFontSize="large"
+            themeFontWeight="regular"
+            themeIntent="body"
+          >
+            A
+          </Text>
+        </View>
+      </View>
+    </View>
     <View
       onLayout={[Function]}
       style={null}
     >
       <View>
+        <View
+          highlighted={false}
+          section={
+            Object {
+              "category": "A",
+              "data": Array [
+                Object {
+                  "text": "A1",
+                  "value": "a1",
+                },
+              ],
+            }
+          }
+          style={
+            Array [
+              Object {
+                "marginTop": 12,
+              },
+              undefined,
+            ]
+          }
+          trailingItem={
+            Object {
+              "text": "A1",
+              "value": "a1",
+            }
+          }
+          trailingSection={
+            Object {
+              "category": "B",
+              "data": Array [
+                Object {
+                  "text": "B1",
+                  "value": "b1",
+                },
+                Object {
+                  "text": "B2",
+                  "value": "b2",
+                },
+              ],
+            }
+          }
+        />
         <View
           accessibilityState={
             Object {
@@ -80,12 +198,14 @@ exports[`OptionList render isLoading correctly 1`] = `
             Array [
               Object {
                 "alignItems": "center",
-                "backgroundColor": "#f1e9fb",
+                "backgroundColor": "#f3e6f6",
                 "flexDirection": "row",
                 "opacity": 1,
                 "padding": 16,
               },
-              undefined,
+              Object {
+                "marginHorizontal": 12,
+              },
             ]
           }
         >
@@ -103,7 +223,7 @@ exports[`OptionList render isLoading correctly 1`] = `
               style={
                 Array [
                   Object {
-                    "color": "#292a2b",
+                    "color": "#001f23",
                     "fontFamily": "BeVietnamPro-Regular",
                     "fontSize": 16,
                     "letterSpacing": 0.48,
@@ -116,10 +236,123 @@ exports[`OptionList render isLoading correctly 1`] = `
               themeFontWeight="regular"
               themeIntent="body"
             >
-              A
+              A1
             </Text>
           </View>
         </View>
+        <View
+          highlighted={false}
+          leadingItem={
+            Object {
+              "text": "A1",
+              "value": "a1",
+            }
+          }
+          section={
+            Object {
+              "category": "A",
+              "data": Array [
+                Object {
+                  "text": "A1",
+                  "value": "a1",
+                },
+              ],
+            }
+          }
+          style={
+            Array [
+              Object {
+                "marginTop": 12,
+              },
+              undefined,
+            ]
+          }
+          trailingSection={
+            Object {
+              "category": "B",
+              "data": Array [
+                Object {
+                  "text": "B1",
+                  "value": "b1",
+                },
+                Object {
+                  "text": "B2",
+                  "value": "b2",
+                },
+              ],
+            }
+          }
+        />
+      </View>
+    </View>
+    <View
+      onLayout={[Function]}
+      style={null}
+    />
+    <View
+      onLayout={[Function]}
+      style={null}
+    >
+      <View
+        style={
+          Array [
+            Object {
+              "alignContent": "center",
+              "backgroundColor": "#e8e9ea",
+              "display": "flex",
+              "flexDirection": "row",
+              "justifyContent": "space-between",
+              "marginBottom": 16,
+              "paddingHorizontal": 16,
+              "paddingVertical": 8,
+            },
+            Object {
+              "marginBottom": 0,
+            },
+          ]
+        }
+      >
+        <View
+          style={
+            Array [
+              Object {
+                "display": "flex",
+                "flexDirection": "row",
+              },
+              undefined,
+            ]
+          }
+        >
+          <View
+            style={
+              Array [
+                Object {
+                  "marginRight": 8,
+                },
+                undefined,
+              ]
+            }
+          />
+          <Text
+            style={
+              Array [
+                Object {
+                  "color": "#001f23",
+                  "fontFamily": "BeVietnamPro-Regular",
+                  "fontSize": 16,
+                  "letterSpacing": 0.48,
+                  "lineHeight": 24,
+                },
+                undefined,
+              ]
+            }
+            themeFontSize="large"
+            themeFontWeight="regular"
+            themeIntent="body"
+          >
+            B
+          </Text>
+        </View>
       </View>
     </View>
     <View
@@ -127,6 +360,49 @@ exports[`OptionList render isLoading correctly 1`] = `
       style={null}
     >
       <View>
+        <View
+          highlighted={false}
+          leadingSection={
+            Object {
+              "category": "A",
+              "data": Array [
+                Object {
+                  "text": "A1",
+                  "value": "a1",
+                },
+              ],
+            }
+          }
+          section={
+            Object {
+              "category": "B",
+              "data": Array [
+                Object {
+                  "text": "B1",
+                  "value": "b1",
+                },
+                Object {
+                  "text": "B2",
+                  "value": "b2",
+                },
+              ],
+            }
+          }
+          style={
+            Array [
+              Object {
+                "marginTop": 12,
+              },
+              undefined,
+            ]
+          }
+          trailingItem={
+            Object {
+              "text": "B1",
+              "value": "b1",
+            }
+          }
+        />
         <View
           accessibilityState={
             Object {
@@ -151,7 +427,9 @@ exports[`OptionList render isLoading correctly 1`] = `
                 "opacity": 1,
                 "padding": 16,
               },
-              undefined,
+              Object {
+                "marginHorizontal": 12,
+              },
             ]
           }
         >
@@ -169,7 +447,7 @@ exports[`OptionList render isLoading correctly 1`] = `
               style={
                 Array [
                   Object {
-                    "color": "#292a2b",
+                    "color": "#001f23",
                     "fontFamily": "BeVietnamPro-Regular",
                     "fontSize": 16,
                     "letterSpacing": 0.48,
@@ -182,10 +460,59 @@ exports[`OptionList render isLoading correctly 1`] = `
               themeFontWeight="regular"
               themeIntent="body"
             >
-              B
+              B1
             </Text>
           </View>
         </View>
+        <View
+          highlighted={false}
+          leadingItem={
+            Object {
+              "text": "B1",
+              "value": "b1",
+            }
+          }
+          leadingSection={
+            Object {
+              "category": "A",
+              "data": Array [
+                Object {
+                  "text": "A1",
+                  "value": "a1",
+                },
+              ],
+            }
+          }
+          section={
+            Object {
+              "category": "B",
+              "data": Array [
+                Object {
+                  "text": "B1",
+                  "value": "b1",
+                },
+                Object {
+                  "text": "B2",
+                  "value": "b2",
+                },
+              ],
+            }
+          }
+          style={
+            Array [
+              Object {
+                "marginTop": 4,
+              },
+              undefined,
+            ]
+          }
+          trailingItem={
+            Object {
+              "text": "B2",
+              "value": "b2",
+            }
+          }
+        />
       </View>
     </View>
     <View
@@ -217,7 +544,9 @@ exports[`OptionList render isLoading correctly 1`] = `
                 "opacity": 1,
                 "padding": 16,
               },
-              undefined,
+              Object {
+                "marginHorizontal": 12,
+              },
             ]
           }
         >
@@ -235,7 +564,7 @@ exports[`OptionList render isLoading correctly 1`] = `
               style={
                 Array [
                   Object {
-                    "color": "#292a2b",
+                    "color": "#001f23",
                     "fontFamily": "BeVietnamPro-Regular",
                     "fontSize": 16,
                     "letterSpacing": 0.48,
@@ -248,12 +577,59 @@ exports[`OptionList render isLoading correctly 1`] = `
               themeFontWeight="regular"
               themeIntent="body"
             >
-              C
+              B2
             </Text>
           </View>
         </View>
+        <View
+          highlighted={false}
+          leadingItem={
+            Object {
+              "text": "B2",
+              "value": "b2",
+            }
+          }
+          leadingSection={
+            Object {
+              "category": "A",
+              "data": Array [
+                Object {
+                  "text": "A1",
+                  "value": "a1",
+                },
+              ],
+            }
+          }
+          section={
+            Object {
+              "category": "B",
+              "data": Array [
+                Object {
+                  "text": "B1",
+                  "value": "b1",
+                },
+                Object {
+                  "text": "B2",
+                  "value": "b2",
+                },
+              ],
+            }
+          }
+          style={
+            Array [
+              Object {
+                "marginTop": 12,
+              },
+              undefined,
+            ]
+          }
+        />
       </View>
     </View>
+    <View
+      onLayout={[Function]}
+      style={null}
+    />
     <View
       onLayout={[Function]}
     >
@@ -319,7 +695,7 @@ exports[`OptionList render isLoading correctly 1`] = `
                   style={
                     Array [
                       Object {
-                        "backgroundColor": "#7622d7",
+                        "backgroundColor": "#8505a2",
                         "borderRadius": 8,
                         "height": 16,
                         "opacity": 1,
@@ -336,7 +712,7 @@ exports[`OptionList render isLoading correctly 1`] = `
                   style={
                     Array [
                       Object {
-                        "backgroundColor": "#7622d7",
+                        "backgroundColor": "#8505a2",
                         "borderRadius": 8,
                         "height": 16,
                         "marginLeft": 8,
@@ -369,7 +745,7 @@ exports[`OptionList render isLoading correctly 1`] = `
                   style={
                     Array [
                       Object {
-                        "backgroundColor": "#7622d7",
+                        "backgroundColor": "#8505a2",
                         "borderRadius": 8,
                         "height": 16,
                         "opacity": 0.5,
@@ -386,7 +762,7 @@ exports[`OptionList render isLoading correctly 1`] = `
                   style={
                     Array [
                       Object {
-                        "backgroundColor": "#7622d7",
+                        "backgroundColor": "#8505a2",
                         "borderRadius": 8,
                         "height": 16,
                         "marginLeft": 8,
@@ -414,16 +790,26 @@ exports[`OptionList renders correctly 1`] = `
   data={
     Array [
       Object {
-        "text": "A",
-        "value": "a",
-      },
-      Object {
-        "text": "B",
-        "value": "b",
+        "category": "A",
+        "data": Array [
+          Object {
+            "text": "A1",
+            "value": "a1",
+          },
+        ],
       },
       Object {
-        "text": "C",
-        "value": "c",
+        "category": "B",
+        "data": Array [
+          Object {
+            "text": "B1",
+            "value": "b1",
+          },
+          Object {
+            "text": "B2",
+            "value": "b2",
+          },
+        ],
       },
     ]
   }
@@ -440,46 +826,46 @@ exports[`OptionList renders correctly 1`] = `
   onScrollBeginDrag={[Function]}
   onScrollEndDrag={[Function]}
   onScrollToIndexFailed={[Function]}
-  removeClippedSubviews={false}
   renderItem={[Function]}
   scrollEventThrottle={50}
-  stickyHeaderIndices={Array []}
-  style={
-    Object {
-      "paddingHorizontal": 16,
-    }
+  stickyHeaderIndices={
+    Array [
+      0,
+      3,
+    ]
   }
-  viewabilityConfigCallbackPairs={Array []}
+  style={Object {}}
 >
   <View>
     <View
       onLayout={[Function]}
       style={null}
     >
-      <View>
-        <View
-          accessibilityState={
+      <View
+        style={
+          Array [
             Object {
-              "disabled": false,
-            }
-          }
-          accessible={true}
-          focusable={true}
-          onClick={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
+              "alignContent": "center",
+              "backgroundColor": "#e8e9ea",
+              "display": "flex",
+              "flexDirection": "row",
+              "justifyContent": "space-between",
+              "marginBottom": 16,
+              "paddingHorizontal": 16,
+              "paddingVertical": 8,
+            },
+            Object {
+              "marginBottom": 0,
+            },
+          ]
+        }
+      >
+        <View
           style={
             Array [
               Object {
-                "alignItems": "center",
-                "backgroundColor": "#f1e9fb",
+                "display": "flex",
                 "flexDirection": "row",
-                "opacity": 1,
-                "padding": 16,
               },
               undefined,
             ]
@@ -489,18 +875,128 @@ exports[`OptionList renders correctly 1`] = `
             style={
               Array [
                 Object {
-                  "flex": 1,
+                  "marginRight": 8,
                 },
                 undefined,
               ]
             }
-          >
-            <Text
-              style={
-                Array [
-                  Object {
-                    "color": "#292a2b",
-                    "fontFamily": "BeVietnamPro-Regular",
+          />
+          <Text
+            style={
+              Array [
+                Object {
+                  "color": "#001f23",
+                  "fontFamily": "BeVietnamPro-Regular",
+                  "fontSize": 16,
+                  "letterSpacing": 0.48,
+                  "lineHeight": 24,
+                },
+                undefined,
+              ]
+            }
+            themeFontSize="large"
+            themeFontWeight="regular"
+            themeIntent="body"
+          >
+            A
+          </Text>
+        </View>
+      </View>
+    </View>
+    <View
+      onLayout={[Function]}
+      style={null}
+    >
+      <View>
+        <View
+          highlighted={false}
+          section={
+            Object {
+              "category": "A",
+              "data": Array [
+                Object {
+                  "text": "A1",
+                  "value": "a1",
+                },
+              ],
+            }
+          }
+          style={
+            Array [
+              Object {
+                "marginTop": 12,
+              },
+              undefined,
+            ]
+          }
+          trailingItem={
+            Object {
+              "text": "A1",
+              "value": "a1",
+            }
+          }
+          trailingSection={
+            Object {
+              "category": "B",
+              "data": Array [
+                Object {
+                  "text": "B1",
+                  "value": "b1",
+                },
+                Object {
+                  "text": "B2",
+                  "value": "b2",
+                },
+              ],
+            }
+          }
+        />
+        <View
+          accessibilityState={
+            Object {
+              "disabled": false,
+            }
+          }
+          accessible={true}
+          focusable={true}
+          onClick={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Array [
+              Object {
+                "alignItems": "center",
+                "backgroundColor": "#f3e6f6",
+                "flexDirection": "row",
+                "opacity": 1,
+                "padding": 16,
+              },
+              Object {
+                "marginHorizontal": 12,
+              },
+            ]
+          }
+        >
+          <View
+            style={
+              Array [
+                Object {
+                  "flex": 1,
+                },
+                undefined,
+              ]
+            }
+          >
+            <Text
+              style={
+                Array [
+                  Object {
+                    "color": "#001f23",
+                    "fontFamily": "BeVietnamPro-Regular",
                     "fontSize": 16,
                     "letterSpacing": 0.48,
                     "lineHeight": 24,
@@ -512,10 +1008,123 @@ exports[`OptionList renders correctly 1`] = `
               themeFontWeight="regular"
               themeIntent="body"
             >
-              A
+              A1
             </Text>
           </View>
         </View>
+        <View
+          highlighted={false}
+          leadingItem={
+            Object {
+              "text": "A1",
+              "value": "a1",
+            }
+          }
+          section={
+            Object {
+              "category": "A",
+              "data": Array [
+                Object {
+                  "text": "A1",
+                  "value": "a1",
+                },
+              ],
+            }
+          }
+          style={
+            Array [
+              Object {
+                "marginTop": 12,
+              },
+              undefined,
+            ]
+          }
+          trailingSection={
+            Object {
+              "category": "B",
+              "data": Array [
+                Object {
+                  "text": "B1",
+                  "value": "b1",
+                },
+                Object {
+                  "text": "B2",
+                  "value": "b2",
+                },
+              ],
+            }
+          }
+        />
+      </View>
+    </View>
+    <View
+      onLayout={[Function]}
+      style={null}
+    />
+    <View
+      onLayout={[Function]}
+      style={null}
+    >
+      <View
+        style={
+          Array [
+            Object {
+              "alignContent": "center",
+              "backgroundColor": "#e8e9ea",
+              "display": "flex",
+              "flexDirection": "row",
+              "justifyContent": "space-between",
+              "marginBottom": 16,
+              "paddingHorizontal": 16,
+              "paddingVertical": 8,
+            },
+            Object {
+              "marginBottom": 0,
+            },
+          ]
+        }
+      >
+        <View
+          style={
+            Array [
+              Object {
+                "display": "flex",
+                "flexDirection": "row",
+              },
+              undefined,
+            ]
+          }
+        >
+          <View
+            style={
+              Array [
+                Object {
+                  "marginRight": 8,
+                },
+                undefined,
+              ]
+            }
+          />
+          <Text
+            style={
+              Array [
+                Object {
+                  "color": "#001f23",
+                  "fontFamily": "BeVietnamPro-Regular",
+                  "fontSize": 16,
+                  "letterSpacing": 0.48,
+                  "lineHeight": 24,
+                },
+                undefined,
+              ]
+            }
+            themeFontSize="large"
+            themeFontWeight="regular"
+            themeIntent="body"
+          >
+            B
+          </Text>
+        </View>
       </View>
     </View>
     <View
@@ -523,6 +1132,49 @@ exports[`OptionList renders correctly 1`] = `
       style={null}
     >
       <View>
+        <View
+          highlighted={false}
+          leadingSection={
+            Object {
+              "category": "A",
+              "data": Array [
+                Object {
+                  "text": "A1",
+                  "value": "a1",
+                },
+              ],
+            }
+          }
+          section={
+            Object {
+              "category": "B",
+              "data": Array [
+                Object {
+                  "text": "B1",
+                  "value": "b1",
+                },
+                Object {
+                  "text": "B2",
+                  "value": "b2",
+                },
+              ],
+            }
+          }
+          style={
+            Array [
+              Object {
+                "marginTop": 12,
+              },
+              undefined,
+            ]
+          }
+          trailingItem={
+            Object {
+              "text": "B1",
+              "value": "b1",
+            }
+          }
+        />
         <View
           accessibilityState={
             Object {
@@ -547,7 +1199,9 @@ exports[`OptionList renders correctly 1`] = `
                 "opacity": 1,
                 "padding": 16,
               },
-              undefined,
+              Object {
+                "marginHorizontal": 12,
+              },
             ]
           }
         >
@@ -565,7 +1219,7 @@ exports[`OptionList renders correctly 1`] = `
               style={
                 Array [
                   Object {
-                    "color": "#292a2b",
+                    "color": "#001f23",
                     "fontFamily": "BeVietnamPro-Regular",
                     "fontSize": 16,
                     "letterSpacing": 0.48,
@@ -578,10 +1232,59 @@ exports[`OptionList renders correctly 1`] = `
               themeFontWeight="regular"
               themeIntent="body"
             >
-              B
+              B1
             </Text>
           </View>
         </View>
+        <View
+          highlighted={false}
+          leadingItem={
+            Object {
+              "text": "B1",
+              "value": "b1",
+            }
+          }
+          leadingSection={
+            Object {
+              "category": "A",
+              "data": Array [
+                Object {
+                  "text": "A1",
+                  "value": "a1",
+                },
+              ],
+            }
+          }
+          section={
+            Object {
+              "category": "B",
+              "data": Array [
+                Object {
+                  "text": "B1",
+                  "value": "b1",
+                },
+                Object {
+                  "text": "B2",
+                  "value": "b2",
+                },
+              ],
+            }
+          }
+          style={
+            Array [
+              Object {
+                "marginTop": 4,
+              },
+              undefined,
+            ]
+          }
+          trailingItem={
+            Object {
+              "text": "B2",
+              "value": "b2",
+            }
+          }
+        />
       </View>
     </View>
     <View
@@ -613,7 +1316,9 @@ exports[`OptionList renders correctly 1`] = `
                 "opacity": 1,
                 "padding": 16,
               },
-              undefined,
+              Object {
+                "marginHorizontal": 12,
+              },
             ]
           }
         >
@@ -631,7 +1336,7 @@ exports[`OptionList renders correctly 1`] = `
               style={
                 Array [
                   Object {
-                    "color": "#292a2b",
+                    "color": "#001f23",
                     "fontFamily": "BeVietnamPro-Regular",
                     "fontSize": 16,
                     "letterSpacing": 0.48,
@@ -644,12 +1349,59 @@ exports[`OptionList renders correctly 1`] = `
               themeFontWeight="regular"
               themeIntent="body"
             >
-              C
+              B2
             </Text>
           </View>
         </View>
+        <View
+          highlighted={false}
+          leadingItem={
+            Object {
+              "text": "B2",
+              "value": "b2",
+            }
+          }
+          leadingSection={
+            Object {
+              "category": "A",
+              "data": Array [
+                Object {
+                  "text": "A1",
+                  "value": "a1",
+                },
+              ],
+            }
+          }
+          section={
+            Object {
+              "category": "B",
+              "data": Array [
+                Object {
+                  "text": "B1",
+                  "value": "b1",
+                },
+                Object {
+                  "text": "B2",
+                  "value": "b2",
+                },
+              ],
+            }
+          }
+          style={
+            Array [
+              Object {
+                "marginTop": 12,
+              },
+              undefined,
+            ]
+          }
+        />
       </View>
     </View>
+    <View
+      onLayout={[Function]}
+      style={null}
+    />
   </View>
 </RCTScrollView>
 `;
@@ -660,16 +1412,26 @@ exports[`OptionList trigger onPress correctly on select new value 1`] = `
   data={
     Array [
       Object {
-        "text": "A",
-        "value": "a",
-      },
-      Object {
-        "text": "B",
-        "value": "b",
+        "category": "A",
+        "data": Array [
+          Object {
+            "text": "A1",
+            "value": "a1",
+          },
+        ],
       },
       Object {
-        "text": "C",
-        "value": "c",
+        "category": "B",
+        "data": Array [
+          Object {
+            "text": "B1",
+            "value": "b1",
+          },
+          Object {
+            "text": "B2",
+            "value": "b2",
+          },
+        ],
       },
     ]
   }
@@ -686,23 +1448,131 @@ exports[`OptionList trigger onPress correctly on select new value 1`] = `
   onScrollBeginDrag={[Function]}
   onScrollEndDrag={[Function]}
   onScrollToIndexFailed={[Function]}
-  removeClippedSubviews={false}
   renderItem={[Function]}
   scrollEventThrottle={50}
-  stickyHeaderIndices={Array []}
-  style={
-    Object {
-      "paddingHorizontal": 16,
-    }
+  stickyHeaderIndices={
+    Array [
+      0,
+      3,
+    ]
   }
-  viewabilityConfigCallbackPairs={Array []}
+  style={Object {}}
 >
   <View>
+    <View
+      onLayout={[Function]}
+      style={null}
+    >
+      <View
+        style={
+          Array [
+            Object {
+              "alignContent": "center",
+              "backgroundColor": "#e8e9ea",
+              "display": "flex",
+              "flexDirection": "row",
+              "justifyContent": "space-between",
+              "marginBottom": 16,
+              "paddingHorizontal": 16,
+              "paddingVertical": 8,
+            },
+            Object {
+              "marginBottom": 0,
+            },
+          ]
+        }
+      >
+        <View
+          style={
+            Array [
+              Object {
+                "display": "flex",
+                "flexDirection": "row",
+              },
+              undefined,
+            ]
+          }
+        >
+          <View
+            style={
+              Array [
+                Object {
+                  "marginRight": 8,
+                },
+                undefined,
+              ]
+            }
+          />
+          <Text
+            style={
+              Array [
+                Object {
+                  "color": "#001f23",
+                  "fontFamily": "BeVietnamPro-Regular",
+                  "fontSize": 16,
+                  "letterSpacing": 0.48,
+                  "lineHeight": 24,
+                },
+                undefined,
+              ]
+            }
+            themeFontSize="large"
+            themeFontWeight="regular"
+            themeIntent="body"
+          >
+            A
+          </Text>
+        </View>
+      </View>
+    </View>
     <View
       onLayout={[Function]}
       style={null}
     >
       <View>
+        <View
+          highlighted={false}
+          section={
+            Object {
+              "category": "A",
+              "data": Array [
+                Object {
+                  "text": "A1",
+                  "value": "a1",
+                },
+              ],
+            }
+          }
+          style={
+            Array [
+              Object {
+                "marginTop": 12,
+              },
+              undefined,
+            ]
+          }
+          trailingItem={
+            Object {
+              "text": "A1",
+              "value": "a1",
+            }
+          }
+          trailingSection={
+            Object {
+              "category": "B",
+              "data": Array [
+                Object {
+                  "text": "B1",
+                  "value": "b1",
+                },
+                Object {
+                  "text": "B2",
+                  "value": "b2",
+                },
+              ],
+            }
+          }
+        />
         <View
           accessibilityState={
             Object {
@@ -722,12 +1592,14 @@ exports[`OptionList trigger onPress correctly on select new value 1`] = `
             Array [
               Object {
                 "alignItems": "center",
-                "backgroundColor": "#f1e9fb",
+                "backgroundColor": "#f3e6f6",
                 "flexDirection": "row",
                 "opacity": 1,
                 "padding": 16,
               },
-              undefined,
+              Object {
+                "marginHorizontal": 12,
+              },
             ]
           }
         >
@@ -745,7 +1617,7 @@ exports[`OptionList trigger onPress correctly on select new value 1`] = `
               style={
                 Array [
                   Object {
-                    "color": "#292a2b",
+                    "color": "#001f23",
                     "fontFamily": "BeVietnamPro-Regular",
                     "fontSize": 16,
                     "letterSpacing": 0.48,
@@ -758,10 +1630,123 @@ exports[`OptionList trigger onPress correctly on select new value 1`] = `
               themeFontWeight="regular"
               themeIntent="body"
             >
-              A
+              A1
             </Text>
           </View>
         </View>
+        <View
+          highlighted={false}
+          leadingItem={
+            Object {
+              "text": "A1",
+              "value": "a1",
+            }
+          }
+          section={
+            Object {
+              "category": "A",
+              "data": Array [
+                Object {
+                  "text": "A1",
+                  "value": "a1",
+                },
+              ],
+            }
+          }
+          style={
+            Array [
+              Object {
+                "marginTop": 12,
+              },
+              undefined,
+            ]
+          }
+          trailingSection={
+            Object {
+              "category": "B",
+              "data": Array [
+                Object {
+                  "text": "B1",
+                  "value": "b1",
+                },
+                Object {
+                  "text": "B2",
+                  "value": "b2",
+                },
+              ],
+            }
+          }
+        />
+      </View>
+    </View>
+    <View
+      onLayout={[Function]}
+      style={null}
+    />
+    <View
+      onLayout={[Function]}
+      style={null}
+    >
+      <View
+        style={
+          Array [
+            Object {
+              "alignContent": "center",
+              "backgroundColor": "#e8e9ea",
+              "display": "flex",
+              "flexDirection": "row",
+              "justifyContent": "space-between",
+              "marginBottom": 16,
+              "paddingHorizontal": 16,
+              "paddingVertical": 8,
+            },
+            Object {
+              "marginBottom": 0,
+            },
+          ]
+        }
+      >
+        <View
+          style={
+            Array [
+              Object {
+                "display": "flex",
+                "flexDirection": "row",
+              },
+              undefined,
+            ]
+          }
+        >
+          <View
+            style={
+              Array [
+                Object {
+                  "marginRight": 8,
+                },
+                undefined,
+              ]
+            }
+          />
+          <Text
+            style={
+              Array [
+                Object {
+                  "color": "#001f23",
+                  "fontFamily": "BeVietnamPro-Regular",
+                  "fontSize": 16,
+                  "letterSpacing": 0.48,
+                  "lineHeight": 24,
+                },
+                undefined,
+              ]
+            }
+            themeFontSize="large"
+            themeFontWeight="regular"
+            themeIntent="body"
+          >
+            B
+          </Text>
+        </View>
       </View>
     </View>
     <View
@@ -769,6 +1754,49 @@ exports[`OptionList trigger onPress correctly on select new value 1`] = `
       style={null}
     >
       <View>
+        <View
+          highlighted={false}
+          leadingSection={
+            Object {
+              "category": "A",
+              "data": Array [
+                Object {
+                  "text": "A1",
+                  "value": "a1",
+                },
+              ],
+            }
+          }
+          section={
+            Object {
+              "category": "B",
+              "data": Array [
+                Object {
+                  "text": "B1",
+                  "value": "b1",
+                },
+                Object {
+                  "text": "B2",
+                  "value": "b2",
+                },
+              ],
+            }
+          }
+          style={
+            Array [
+              Object {
+                "marginTop": 12,
+              },
+              undefined,
+            ]
+          }
+          trailingItem={
+            Object {
+              "text": "B1",
+              "value": "b1",
+            }
+          }
+        />
         <View
           accessibilityState={
             Object {
@@ -793,7 +1821,9 @@ exports[`OptionList trigger onPress correctly on select new value 1`] = `
                 "opacity": 1,
                 "padding": 16,
               },
-              undefined,
+              Object {
+                "marginHorizontal": 12,
+              },
             ]
           }
         >
@@ -811,7 +1841,7 @@ exports[`OptionList trigger onPress correctly on select new value 1`] = `
               style={
                 Array [
                   Object {
-                    "color": "#292a2b",
+                    "color": "#001f23",
                     "fontFamily": "BeVietnamPro-Regular",
                     "fontSize": 16,
                     "letterSpacing": 0.48,
@@ -824,10 +1854,59 @@ exports[`OptionList trigger onPress correctly on select new value 1`] = `
               themeFontWeight="regular"
               themeIntent="body"
             >
-              B
+              B1
             </Text>
           </View>
         </View>
+        <View
+          highlighted={false}
+          leadingItem={
+            Object {
+              "text": "B1",
+              "value": "b1",
+            }
+          }
+          leadingSection={
+            Object {
+              "category": "A",
+              "data": Array [
+                Object {
+                  "text": "A1",
+                  "value": "a1",
+                },
+              ],
+            }
+          }
+          section={
+            Object {
+              "category": "B",
+              "data": Array [
+                Object {
+                  "text": "B1",
+                  "value": "b1",
+                },
+                Object {
+                  "text": "B2",
+                  "value": "b2",
+                },
+              ],
+            }
+          }
+          style={
+            Array [
+              Object {
+                "marginTop": 4,
+              },
+              undefined,
+            ]
+          }
+          trailingItem={
+            Object {
+              "text": "B2",
+              "value": "b2",
+            }
+          }
+        />
       </View>
     </View>
     <View
@@ -859,7 +1938,9 @@ exports[`OptionList trigger onPress correctly on select new value 1`] = `
                 "opacity": 1,
                 "padding": 16,
               },
-              undefined,
+              Object {
+                "marginHorizontal": 12,
+              },
             ]
           }
         >
@@ -877,7 +1958,7 @@ exports[`OptionList trigger onPress correctly on select new value 1`] = `
               style={
                 Array [
                   Object {
-                    "color": "#292a2b",
+                    "color": "#001f23",
                     "fontFamily": "BeVietnamPro-Regular",
                     "fontSize": 16,
                     "letterSpacing": 0.48,
@@ -890,12 +1971,59 @@ exports[`OptionList trigger onPress correctly on select new value 1`] = `
               themeFontWeight="regular"
               themeIntent="body"
             >
-              C
+              B2
             </Text>
           </View>
         </View>
+        <View
+          highlighted={false}
+          leadingItem={
+            Object {
+              "text": "B2",
+              "value": "b2",
+            }
+          }
+          leadingSection={
+            Object {
+              "category": "A",
+              "data": Array [
+                Object {
+                  "text": "A1",
+                  "value": "a1",
+                },
+              ],
+            }
+          }
+          section={
+            Object {
+              "category": "B",
+              "data": Array [
+                Object {
+                  "text": "B1",
+                  "value": "b1",
+                },
+                Object {
+                  "text": "B2",
+                  "value": "b2",
+                },
+              ],
+            }
+          }
+          style={
+            Array [
+              Object {
+                "marginTop": 12,
+              },
+              undefined,
+            ]
+          }
+        />
       </View>
     </View>
+    <View
+      onLayout={[Function]}
+      style={null}
+    />
   </View>
 </RCTScrollView>
 `;
@@ -906,16 +2034,26 @@ exports[`OptionList trigger onPress correctly on unselect current value 1`] = `
   data={
     Array [
       Object {
-        "text": "A",
-        "value": "a",
-      },
-      Object {
-        "text": "B",
-        "value": "b",
+        "category": "A",
+        "data": Array [
+          Object {
+            "text": "A1",
+            "value": "a1",
+          },
+        ],
       },
       Object {
-        "text": "C",
-        "value": "c",
+        "category": "B",
+        "data": Array [
+          Object {
+            "text": "B1",
+            "value": "b1",
+          },
+          Object {
+            "text": "B2",
+            "value": "b2",
+          },
+        ],
       },
     ]
   }
@@ -932,23 +2070,131 @@ exports[`OptionList trigger onPress correctly on unselect current value 1`] = `
   onScrollBeginDrag={[Function]}
   onScrollEndDrag={[Function]}
   onScrollToIndexFailed={[Function]}
-  removeClippedSubviews={false}
   renderItem={[Function]}
   scrollEventThrottle={50}
-  stickyHeaderIndices={Array []}
-  style={
-    Object {
-      "paddingHorizontal": 16,
-    }
+  stickyHeaderIndices={
+    Array [
+      0,
+      3,
+    ]
   }
-  viewabilityConfigCallbackPairs={Array []}
+  style={Object {}}
 >
   <View>
+    <View
+      onLayout={[Function]}
+      style={null}
+    >
+      <View
+        style={
+          Array [
+            Object {
+              "alignContent": "center",
+              "backgroundColor": "#e8e9ea",
+              "display": "flex",
+              "flexDirection": "row",
+              "justifyContent": "space-between",
+              "marginBottom": 16,
+              "paddingHorizontal": 16,
+              "paddingVertical": 8,
+            },
+            Object {
+              "marginBottom": 0,
+            },
+          ]
+        }
+      >
+        <View
+          style={
+            Array [
+              Object {
+                "display": "flex",
+                "flexDirection": "row",
+              },
+              undefined,
+            ]
+          }
+        >
+          <View
+            style={
+              Array [
+                Object {
+                  "marginRight": 8,
+                },
+                undefined,
+              ]
+            }
+          />
+          <Text
+            style={
+              Array [
+                Object {
+                  "color": "#001f23",
+                  "fontFamily": "BeVietnamPro-Regular",
+                  "fontSize": 16,
+                  "letterSpacing": 0.48,
+                  "lineHeight": 24,
+                },
+                undefined,
+              ]
+            }
+            themeFontSize="large"
+            themeFontWeight="regular"
+            themeIntent="body"
+          >
+            A
+          </Text>
+        </View>
+      </View>
+    </View>
     <View
       onLayout={[Function]}
       style={null}
     >
       <View>
+        <View
+          highlighted={false}
+          section={
+            Object {
+              "category": "A",
+              "data": Array [
+                Object {
+                  "text": "A1",
+                  "value": "a1",
+                },
+              ],
+            }
+          }
+          style={
+            Array [
+              Object {
+                "marginTop": 12,
+              },
+              undefined,
+            ]
+          }
+          trailingItem={
+            Object {
+              "text": "A1",
+              "value": "a1",
+            }
+          }
+          trailingSection={
+            Object {
+              "category": "B",
+              "data": Array [
+                Object {
+                  "text": "B1",
+                  "value": "b1",
+                },
+                Object {
+                  "text": "B2",
+                  "value": "b2",
+                },
+              ],
+            }
+          }
+        />
         <View
           accessibilityState={
             Object {
@@ -968,12 +2214,14 @@ exports[`OptionList trigger onPress correctly on unselect current value 1`] = `
             Array [
               Object {
                 "alignItems": "center",
-                "backgroundColor": "#f1e9fb",
+                "backgroundColor": "#f3e6f6",
                 "flexDirection": "row",
                 "opacity": 1,
                 "padding": 16,
               },
-              undefined,
+              Object {
+                "marginHorizontal": 12,
+              },
             ]
           }
         >
@@ -991,7 +2239,7 @@ exports[`OptionList trigger onPress correctly on unselect current value 1`] = `
               style={
                 Array [
                   Object {
-                    "color": "#292a2b",
+                    "color": "#001f23",
                     "fontFamily": "BeVietnamPro-Regular",
                     "fontSize": 16,
                     "letterSpacing": 0.48,
@@ -1004,10 +2252,123 @@ exports[`OptionList trigger onPress correctly on unselect current value 1`] = `
               themeFontWeight="regular"
               themeIntent="body"
             >
-              A
+              A1
             </Text>
           </View>
         </View>
+        <View
+          highlighted={false}
+          leadingItem={
+            Object {
+              "text": "A1",
+              "value": "a1",
+            }
+          }
+          section={
+            Object {
+              "category": "A",
+              "data": Array [
+                Object {
+                  "text": "A1",
+                  "value": "a1",
+                },
+              ],
+            }
+          }
+          style={
+            Array [
+              Object {
+                "marginTop": 12,
+              },
+              undefined,
+            ]
+          }
+          trailingSection={
+            Object {
+              "category": "B",
+              "data": Array [
+                Object {
+                  "text": "B1",
+                  "value": "b1",
+                },
+                Object {
+                  "text": "B2",
+                  "value": "b2",
+                },
+              ],
+            }
+          }
+        />
+      </View>
+    </View>
+    <View
+      onLayout={[Function]}
+      style={null}
+    />
+    <View
+      onLayout={[Function]}
+      style={null}
+    >
+      <View
+        style={
+          Array [
+            Object {
+              "alignContent": "center",
+              "backgroundColor": "#e8e9ea",
+              "display": "flex",
+              "flexDirection": "row",
+              "justifyContent": "space-between",
+              "marginBottom": 16,
+              "paddingHorizontal": 16,
+              "paddingVertical": 8,
+            },
+            Object {
+              "marginBottom": 0,
+            },
+          ]
+        }
+      >
+        <View
+          style={
+            Array [
+              Object {
+                "display": "flex",
+                "flexDirection": "row",
+              },
+              undefined,
+            ]
+          }
+        >
+          <View
+            style={
+              Array [
+                Object {
+                  "marginRight": 8,
+                },
+                undefined,
+              ]
+            }
+          />
+          <Text
+            style={
+              Array [
+                Object {
+                  "color": "#001f23",
+                  "fontFamily": "BeVietnamPro-Regular",
+                  "fontSize": 16,
+                  "letterSpacing": 0.48,
+                  "lineHeight": 24,
+                },
+                undefined,
+              ]
+            }
+            themeFontSize="large"
+            themeFontWeight="regular"
+            themeIntent="body"
+          >
+            B
+          </Text>
+        </View>
       </View>
     </View>
     <View
@@ -1015,6 +2376,49 @@ exports[`OptionList trigger onPress correctly on unselect current value 1`] = `
       style={null}
     >
       <View>
+        <View
+          highlighted={false}
+          leadingSection={
+            Object {
+              "category": "A",
+              "data": Array [
+                Object {
+                  "text": "A1",
+                  "value": "a1",
+                },
+              ],
+            }
+          }
+          section={
+            Object {
+              "category": "B",
+              "data": Array [
+                Object {
+                  "text": "B1",
+                  "value": "b1",
+                },
+                Object {
+                  "text": "B2",
+                  "value": "b2",
+                },
+              ],
+            }
+          }
+          style={
+            Array [
+              Object {
+                "marginTop": 12,
+              },
+              undefined,
+            ]
+          }
+          trailingItem={
+            Object {
+              "text": "B1",
+              "value": "b1",
+            }
+          }
+        />
         <View
           accessibilityState={
             Object {
@@ -1039,7 +2443,9 @@ exports[`OptionList trigger onPress correctly on unselect current value 1`] = `
                 "opacity": 1,
                 "padding": 16,
               },
-              undefined,
+              Object {
+                "marginHorizontal": 12,
+              },
             ]
           }
         >
@@ -1057,7 +2463,7 @@ exports[`OptionList trigger onPress correctly on unselect current value 1`] = `
               style={
                 Array [
                   Object {
-                    "color": "#292a2b",
+                    "color": "#001f23",
                     "fontFamily": "BeVietnamPro-Regular",
                     "fontSize": 16,
                     "letterSpacing": 0.48,
@@ -1070,10 +2476,59 @@ exports[`OptionList trigger onPress correctly on unselect current value 1`] = `
               themeFontWeight="regular"
               themeIntent="body"
             >
-              B
+              B1
             </Text>
           </View>
         </View>
+        <View
+          highlighted={false}
+          leadingItem={
+            Object {
+              "text": "B1",
+              "value": "b1",
+            }
+          }
+          leadingSection={
+            Object {
+              "category": "A",
+              "data": Array [
+                Object {
+                  "text": "A1",
+                  "value": "a1",
+                },
+              ],
+            }
+          }
+          section={
+            Object {
+              "category": "B",
+              "data": Array [
+                Object {
+                  "text": "B1",
+                  "value": "b1",
+                },
+                Object {
+                  "text": "B2",
+                  "value": "b2",
+                },
+              ],
+            }
+          }
+          style={
+            Array [
+              Object {
+                "marginTop": 4,
+              },
+              undefined,
+            ]
+          }
+          trailingItem={
+            Object {
+              "text": "B2",
+              "value": "b2",
+            }
+          }
+        />
       </View>
     </View>
     <View
@@ -1105,7 +2560,9 @@ exports[`OptionList trigger onPress correctly on unselect current value 1`] = `
                 "opacity": 1,
                 "padding": 16,
               },
-              undefined,
+              Object {
+                "marginHorizontal": 12,
+              },
             ]
           }
         >
@@ -1123,7 +2580,7 @@ exports[`OptionList trigger onPress correctly on unselect current value 1`] = `
               style={
                 Array [
                   Object {
-                    "color": "#292a2b",
+                    "color": "#001f23",
                     "fontFamily": "BeVietnamPro-Regular",
                     "fontSize": 16,
                     "letterSpacing": 0.48,
@@ -1136,12 +2593,59 @@ exports[`OptionList trigger onPress correctly on unselect current value 1`] = `
               themeFontWeight="regular"
               themeIntent="body"
             >
-              C
+              B2
             </Text>
           </View>
         </View>
+        <View
+          highlighted={false}
+          leadingItem={
+            Object {
+              "text": "B2",
+              "value": "b2",
+            }
+          }
+          leadingSection={
+            Object {
+              "category": "A",
+              "data": Array [
+                Object {
+                  "text": "A1",
+                  "value": "a1",
+                },
+              ],
+            }
+          }
+          section={
+            Object {
+              "category": "B",
+              "data": Array [
+                Object {
+                  "text": "B1",
+                  "value": "b1",
+                },
+                Object {
+                  "text": "B2",
+                  "value": "b2",
+                },
+              ],
+            }
+          }
+          style={
+            Array [
+              Object {
+                "marginTop": 12,
+              },
+              undefined,
+            ]
+          }
+        />
       </View>
     </View>
+    <View
+      onLayout={[Function]}
+      style={null}
+    />
   </View>
 </RCTScrollView>
 `;