SectionListColumn.js

import React, { Component } from 'react';
import { StyleSheet, Text, Button, SectionList, TouchableOpacity } from 'react-native';

class Collections extends Component {

    static renderHeader(title) {
        return (
            <Text style={styles.header}>{title}</Text>
        );
    }

    renderItem(item) {
        return (
            <TouchableOpacity key={item.id} style={styles.item} onPress={() => {} />
        );
    }

    render() {
        const { collections } = this.props;

        return (
            <SectionList
                style={styles.container}
                contentContainerStyle={styles.list}
                sections={[
                    { key: 0, title: 'Your collections', data: collections.default },
                    { key: 1, title: 'Collections you\'e created (' + collections.custom.length + ')', data: collections.custom },
                ]}
                renderSectionHeader={({ section }) => Collections.renderHeader(section.title)}
                renderItem={({ item }) => this.renderItem(item)}
                removeClippedSubviews={false}
            />
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    list: {
        flexDirection: 'row',
        flexWrap: 'wrap',
        justifyContent: 'space-between',
        marginRight: 10,
        marginLeft: 10,
    },
    header: {
        minWidth: '100%',
        paddingTop: 20,
        paddingBottom: 10,
        fontWeight: 'bold',
        color: colors.medium,
    },
    item: {
        minWidth: '48%',
        height: 170,
        marginBottom: 15,
        padding: 10,
        backgroundColor: 'white',
    },
    itemTitle: {},
    itemSubtitle: {
        color: colors.medium,
    },
});