const data = React.useMemo(
 () =>
 _.flatMap(rateTypes, (type, index) =>
 index < rateTypes.length - 1
 ? [{ id: type }, { id: `separator-${index}` }]
 : [{ id: type }],
 ),
 [rateTypes],
);
const renderItem = React.useCallback(
 ({ index, item: { id } }) => {
 const isFirst = index === 0;
 const isLast = index === data.length - 1;
 const isSeparator = id.startsWith('separator');
 return (
 <ContentView
 contentContainerStyle={[
 {
 backgroundColor: Settings.getContentColor(theme, false, isModal),
 marginVertical: 0,
 marginHorizontal: Settings.CARD_PADDING * 2,
 },
 isFirst && {
 borderTopLeftRadius: Settings.BORDER_RADIUS,
 borderTopRightRadius: Settings.BORDER_RADIUS,
 },
 isLast && {
 borderBottomLeftRadius: Settings.BORDER_RADIUS,
 borderBottomRightRadius: Settings.BORDER_RADIUS,
 },
 ]}
 >
 {isSeparator ? (
 <Sortable.Handle mode="fixed-order">
 <Separator />
 </Sortable.Handle>
 ) : (
 <CardItemView
 title={Settings.getRateTitle(id)}
 chevron={false}
 >
 <Sortable.Handle>
 <ActionView
 community
 iconName="drag-horizontal-variant"
 />
 </Sortable.Handle>
 </CardItemView>
 )}
 </ContentView>
 );
 },
 [data.length, isModal, theme],
);
<Sortable.Grid
 activeItemScale={1}
 autoScrollSpeed={0.5}
 data={data}
 dragActivationDelay={0}
 overDrag="vertical"
 renderItem={renderItem}
 customHandle
 onOrderChange={() => {
 Settings.HAPTICS_ENABLED && Haptics.selectionAsync();
 }}
 onDragEnd={({ data: newData }) => {
 const customRateTypes = _.filter(
 _.map(newData, 'id'),
 (id) => id && !id.startsWith('separator'),
 );
 // save here
 Settings.HAPTICS_ENABLED && Haptics.selectionAsync();
 }}
 onDragStart={() => {
 Settings.HAPTICS_ENABLED && Haptics.selectionAsync();
 }}
/>