@hero-design/rn 7.16.2 → 7.17.1

package/src/components/Select/MultiSelect/__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,7 +236,7 @@ exports[`OptionList render isLoading correctly 1`] = `
               themeFontWeight="regular"
               themeIntent="body"
             >
-              A
+              A1
             </Text>
           </View>
           <View
@@ -134,7 +254,7 @@ exports[`OptionList render isLoading correctly 1`] = `
               style={
                 Array [
                   Object {
-                    "color": "#292a2b",
+                    "color": "#001f23",
                     "fontSize": 20,
                   },
                   undefined,
@@ -145,6 +265,119 @@ exports[`OptionList render isLoading correctly 1`] = `
             />
           </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
@@ -152,6 +385,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 {
@@ -176,7 +452,9 @@ exports[`OptionList render isLoading correctly 1`] = `
                 "opacity": 1,
                 "padding": 16,
               },
-              undefined,
+              Object {
+                "marginHorizontal": 12,
+              },
             ]
           }
         >
@@ -194,7 +472,7 @@ exports[`OptionList render isLoading correctly 1`] = `
               style={
                 Array [
                   Object {
-                    "color": "#292a2b",
+                    "color": "#001f23",
                     "fontFamily": "BeVietnamPro-Regular",
                     "fontSize": 16,
                     "letterSpacing": 0.48,
@@ -207,10 +485,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
@@ -242,7 +569,9 @@ exports[`OptionList render isLoading correctly 1`] = `
                 "opacity": 1,
                 "padding": 16,
               },
-              undefined,
+              Object {
+                "marginHorizontal": 12,
+              },
             ]
           }
         >
@@ -260,7 +589,7 @@ exports[`OptionList render isLoading correctly 1`] = `
               style={
                 Array [
                   Object {
-                    "color": "#292a2b",
+                    "color": "#001f23",
                     "fontFamily": "BeVietnamPro-Regular",
                     "fontSize": 16,
                     "letterSpacing": 0.48,
@@ -273,12 +602,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]}
     >
@@ -344,7 +720,7 @@ exports[`OptionList render isLoading correctly 1`] = `
                   style={
                     Array [
                       Object {
-                        "backgroundColor": "#7622d7",
+                        "backgroundColor": "#8505a2",
                         "borderRadius": 8,
                         "height": 16,
                         "opacity": 1,
@@ -361,7 +737,7 @@ exports[`OptionList render isLoading correctly 1`] = `
                   style={
                     Array [
                       Object {
-                        "backgroundColor": "#7622d7",
+                        "backgroundColor": "#8505a2",
                         "borderRadius": 8,
                         "height": 16,
                         "marginLeft": 8,
@@ -394,7 +770,7 @@ exports[`OptionList render isLoading correctly 1`] = `
                   style={
                     Array [
                       Object {
-                        "backgroundColor": "#7622d7",
+                        "backgroundColor": "#8505a2",
                         "borderRadius": 8,
                         "height": 16,
                         "opacity": 0.5,
@@ -411,7 +787,7 @@ exports[`OptionList render isLoading correctly 1`] = `
                   style={
                     Array [
                       Object {
-                        "backgroundColor": "#7622d7",
+                        "backgroundColor": "#8505a2",
                         "borderRadius": 8,
                         "height": 16,
                         "marginLeft": 8,
@@ -439,16 +815,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",
+          },
+        ],
       },
     ]
   }
@@ -465,46 +851,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,
             ]
@@ -514,18 +900,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,
@@ -537,7 +1033,7 @@ exports[`OptionList renders correctly 1`] = `
               themeFontWeight="regular"
               themeIntent="body"
             >
-              A
+              A1
             </Text>
           </View>
           <View
@@ -555,7 +1051,7 @@ exports[`OptionList renders correctly 1`] = `
               style={
                 Array [
                   Object {
-                    "color": "#292a2b",
+                    "color": "#001f23",
                     "fontSize": 20,
                   },
                   undefined,
@@ -566,6 +1062,119 @@ exports[`OptionList renders correctly 1`] = `
             />
           </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
@@ -573,6 +1182,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 {
@@ -597,7 +1249,9 @@ exports[`OptionList renders correctly 1`] = `
                 "opacity": 1,
                 "padding": 16,
               },
-              undefined,
+              Object {
+                "marginHorizontal": 12,
+              },
             ]
           }
         >
@@ -615,7 +1269,7 @@ exports[`OptionList renders correctly 1`] = `
               style={
                 Array [
                   Object {
-                    "color": "#292a2b",
+                    "color": "#001f23",
                     "fontFamily": "BeVietnamPro-Regular",
                     "fontSize": 16,
                     "letterSpacing": 0.48,
@@ -628,10 +1282,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
@@ -663,7 +1366,9 @@ exports[`OptionList renders correctly 1`] = `
                 "opacity": 1,
                 "padding": 16,
               },
-              undefined,
+              Object {
+                "marginHorizontal": 12,
+              },
             ]
           }
         >
@@ -681,7 +1386,7 @@ exports[`OptionList renders correctly 1`] = `
               style={
                 Array [
                   Object {
-                    "color": "#292a2b",
+                    "color": "#001f23",
                     "fontFamily": "BeVietnamPro-Regular",
                     "fontSize": 16,
                     "letterSpacing": 0.48,
@@ -694,12 +1399,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>
 `;
@@ -710,16 +1462,26 @@ exports[`OptionList trigger onPress correctly on changing selection 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",
+          },
+        ],
       },
     ]
   }
@@ -736,23 +1498,131 @@ exports[`OptionList trigger onPress correctly on changing selection 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 {
@@ -772,12 +1642,14 @@ exports[`OptionList trigger onPress correctly on changing selection 1`] = `
             Array [
               Object {
                 "alignItems": "center",
-                "backgroundColor": "#f1e9fb",
+                "backgroundColor": "#f3e6f6",
                 "flexDirection": "row",
                 "opacity": 1,
                 "padding": 16,
               },
-              undefined,
+              Object {
+                "marginHorizontal": 12,
+              },
             ]
           }
         >
@@ -795,7 +1667,7 @@ exports[`OptionList trigger onPress correctly on changing selection 1`] = `
               style={
                 Array [
                   Object {
-                    "color": "#292a2b",
+                    "color": "#001f23",
                     "fontFamily": "BeVietnamPro-Regular",
                     "fontSize": 16,
                     "letterSpacing": 0.48,
@@ -808,7 +1680,7 @@ exports[`OptionList trigger onPress correctly on changing selection 1`] = `
               themeFontWeight="regular"
               themeIntent="body"
             >
-              A
+              A1
             </Text>
           </View>
           <View
@@ -826,7 +1698,7 @@ exports[`OptionList trigger onPress correctly on changing selection 1`] = `
               style={
                 Array [
                   Object {
-                    "color": "#292a2b",
+                    "color": "#001f23",
                     "fontSize": 20,
                   },
                   undefined,
@@ -837,6 +1709,119 @@ exports[`OptionList trigger onPress correctly on changing selection 1`] = `
             />
           </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
@@ -844,6 +1829,49 @@ exports[`OptionList trigger onPress correctly on changing selection 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 {
@@ -863,12 +1891,14 @@ exports[`OptionList trigger onPress correctly on changing selection 1`] = `
             Array [
               Object {
                 "alignItems": "center",
-                "backgroundColor": "#f1e9fb",
+                "backgroundColor": "#f3e6f6",
                 "flexDirection": "row",
                 "opacity": 1,
                 "padding": 16,
               },
-              undefined,
+              Object {
+                "marginHorizontal": 12,
+              },
             ]
           }
         >
@@ -886,7 +1916,7 @@ exports[`OptionList trigger onPress correctly on changing selection 1`] = `
               style={
                 Array [
                   Object {
-                    "color": "#292a2b",
+                    "color": "#001f23",
                     "fontFamily": "BeVietnamPro-Regular",
                     "fontSize": 16,
                     "letterSpacing": 0.48,
@@ -899,7 +1929,7 @@ exports[`OptionList trigger onPress correctly on changing selection 1`] = `
               themeFontWeight="regular"
               themeIntent="body"
             >
-              B
+              B1
             </Text>
           </View>
           <View
@@ -917,7 +1947,7 @@ exports[`OptionList trigger onPress correctly on changing selection 1`] = `
               style={
                 Array [
                   Object {
-                    "color": "#292a2b",
+                    "color": "#001f23",
                     "fontSize": 20,
                   },
                   undefined,
@@ -928,6 +1958,55 @@ exports[`OptionList trigger onPress correctly on changing selection 1`] = `
             />
           </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
@@ -959,7 +2038,9 @@ exports[`OptionList trigger onPress correctly on changing selection 1`] = `
                 "opacity": 1,
                 "padding": 16,
               },
-              undefined,
+              Object {
+                "marginHorizontal": 12,
+              },
             ]
           }
         >
@@ -977,7 +2058,7 @@ exports[`OptionList trigger onPress correctly on changing selection 1`] = `
               style={
                 Array [
                   Object {
-                    "color": "#292a2b",
+                    "color": "#001f23",
                     "fontFamily": "BeVietnamPro-Regular",
                     "fontSize": 16,
                     "letterSpacing": 0.48,
@@ -990,12 +2071,59 @@ exports[`OptionList trigger onPress correctly on changing selection 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>
 `;
@@ -1006,16 +2134,26 @@ exports[`OptionList trigger onPress correctly on select additional 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",
+          },
+        ],
       },
     ]
   }
@@ -1032,23 +2170,131 @@ exports[`OptionList trigger onPress correctly on select additional 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 {
@@ -1068,12 +2314,14 @@ exports[`OptionList trigger onPress correctly on select additional value 1`] = `
             Array [
               Object {
                 "alignItems": "center",
-                "backgroundColor": "#f1e9fb",
+                "backgroundColor": "#f3e6f6",
                 "flexDirection": "row",
                 "opacity": 1,
                 "padding": 16,
               },
-              undefined,
+              Object {
+                "marginHorizontal": 12,
+              },
             ]
           }
         >
@@ -1091,7 +2339,7 @@ exports[`OptionList trigger onPress correctly on select additional value 1`] = `
               style={
                 Array [
                   Object {
-                    "color": "#292a2b",
+                    "color": "#001f23",
                     "fontFamily": "BeVietnamPro-Regular",
                     "fontSize": 16,
                     "letterSpacing": 0.48,
@@ -1104,7 +2352,7 @@ exports[`OptionList trigger onPress correctly on select additional value 1`] = `
               themeFontWeight="regular"
               themeIntent="body"
             >
-              A
+              A1
             </Text>
           </View>
           <View
@@ -1122,7 +2370,7 @@ exports[`OptionList trigger onPress correctly on select additional value 1`] = `
               style={
                 Array [
                   Object {
-                    "color": "#292a2b",
+                    "color": "#001f23",
                     "fontSize": 20,
                   },
                   undefined,
@@ -1133,6 +2381,119 @@ exports[`OptionList trigger onPress correctly on select additional value 1`] = `
             />
           </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
@@ -1140,6 +2501,49 @@ exports[`OptionList trigger onPress correctly on select additional 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 {
@@ -1164,7 +2568,9 @@ exports[`OptionList trigger onPress correctly on select additional value 1`] = `
                 "opacity": 1,
                 "padding": 16,
               },
-              undefined,
+              Object {
+                "marginHorizontal": 12,
+              },
             ]
           }
         >
@@ -1182,7 +2588,7 @@ exports[`OptionList trigger onPress correctly on select additional value 1`] = `
               style={
                 Array [
                   Object {
-                    "color": "#292a2b",
+                    "color": "#001f23",
                     "fontFamily": "BeVietnamPro-Regular",
                     "fontSize": 16,
                     "letterSpacing": 0.48,
@@ -1195,10 +2601,59 @@ exports[`OptionList trigger onPress correctly on select additional 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
@@ -1230,7 +2685,9 @@ exports[`OptionList trigger onPress correctly on select additional value 1`] = `
                 "opacity": 1,
                 "padding": 16,
               },
-              undefined,
+              Object {
+                "marginHorizontal": 12,
+              },
             ]
           }
         >
@@ -1248,7 +2705,7 @@ exports[`OptionList trigger onPress correctly on select additional value 1`] = `
               style={
                 Array [
                   Object {
-                    "color": "#292a2b",
+                    "color": "#001f23",
                     "fontFamily": "BeVietnamPro-Regular",
                     "fontSize": 16,
                     "letterSpacing": 0.48,
@@ -1261,12 +2718,59 @@ exports[`OptionList trigger onPress correctly on select additional 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>
 `;