Плоский список данных рендеринга из json api как 3 элемента в строке

Привет всем, я получаю данные из json api и использую плоский список для рендеринга элементов. Я использую свойство numColumns для отображения 3 элементов в строке но предположим, что у меня есть 7 или 8 предметов у меня проблемы с рендерингом. макет, который я хочу отобразить, выглядит следующим образом

X X X
X X X
X X

но я получаю следующее: макет

Вот мой код:

    _renderItem = ({ item, index }) => (
            <View style = {categorystyles.Category} key = {index}>
                <TouchableOpacity activeOpacity = {.5}
                    onPress = {() => this.props.navigation.navigate('ListingPerCategory', { catid: item.id })}>
                    {item.category_app_icon ? <Image style = {categorystyles.CategoryImg}
                        source = {{ uri: `${item.category_app_icon}` }} /> :
                        <Image style = {categorystyles.CategoryImg}
                            source = {require('../assets/coffeecup.png')} />}
                </TouchableOpacity>
                <Text style = {{ marginTop: 5 }}>{escape(item.name).replace('%20', ' ').replace('%26amp%3B%20', ' ')}</Text>
            </View>
        )
   render(){
     return(
        <FlatList
        horizontal = {false}
        data = {this.state.categories}
        keyExtractor = {(item, index) => item.id}
        numColumns = {3}
        renderItem = {this._renderItem}
    />
     )
   }

    const styles = StyleSheet.create({
       Category: {
            flex:1,
            justifyContent: 'center',
            alignItems:'center',    
            margin:5
        },
        CategoryImg: {
            resizeMode: 'contain',
            width: 50,
            height: 50
        }
    })