Sticky Section Headers

A sticky header docks at the top while its section scrolls beneath it and is pushed away by the next one, like the letters in a contacts app. SectionList enables this with stickySectionHeadersEnabled, which defaults to true on iOS and false on Android, the platforms' own conventions. Genres takes a sticky prop and passes it through, so <Genres sticky /> turns it on for both platforms; the left screen of the figure in Catalog Screen shows the Cooking header docked after a slow swipe.

FlatList and ScrollView do the same for chosen children with stickyHeaderIndices, and stickyHeaderHiddenOnScroll hides a sticky header while the user scrolls down. Give sticky headers an opaque background, or the rows show through them, and keep them short: every pixel they occupy is taken from the list.