how to react-native Flatlist dynamic height grid?

Question

I want to use the flatlist to maintain the size of the image and to construct a grid with dynamic height. However, unlike what you think, the image is output differently depending on the size you specify, but the height of the grid in the flatlist is output only at a constant height.

The result image is...

enter image description here

The layout configuration I want is a dynamic height configuration that removes blue boxes from the image.

my source

import React, {Component} from 'react';
import { Card, CardItem, Thumbnail, Container, Header, Content, Button, H1, Left, Right, Body, Title, Form, Item, Input, Label, Icon, Text, Spinner, } from 'native-base';
import { View, Alert, Image, ScrollView, Dimensions, StyleSheet, TouchableOpacity, TouchableWithoutFeedback, StatusBar,SafeAreaView, ImageBackground , TouchableHighlight,FlatList} from 'react-native';
import MainFooter from '../Components/MainFooter';
import MainHeader from '../Components/MainHeader';
import SideUserProfile from '../Components/Profile/userProfile';

const FooterProfile = () => (
    <View style = {styles.profile_box}>
        <Image style = {styles.profile_img} source = {{uri : 'https://k.kakaocdn.net/dn/bcz92L/btqIglgwRj9/lBJkgi3B8KsAokiv2K2fGk/img_640x640.jpg'}}/>
        <View style = {styles.profile_text_box}>
            <Text style = {styles.profile_memberclass} note>GOLDMEDALLIST</Text>
            <Text style = {styles.profile_name}>{'뚜뚜'}</Text>
        </View>
    </View>
)
class TimeLineScreen extends Component{
    constructor(props) {
        super(props);
        this.state = {
            data : [
                {
                    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
                    title: 'First Item',
                    image : 'https://i.picsum.photos/id/10/2500/1667.jpg?hmac=J04WWC_ebchx3WwzbM-Z4_KC_LeLBWr5LZMaAkWkF68',
                    width : 236,
                },
                {
                    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
                    title: 'Second Item',
                    image : 'https://i.picsum.photos/id/10/2500/1667.jpg?hmac=J04WWC_ebchx3WwzbM-Z4_KC_LeLBWr5LZMaAkWkF68',
                    width : 159,
                },
                {
                    id: '58694a0f-3da1-471f-bd96-145571e29d72',
                    title: 'Third Item',
                    image : 'https://i.picsum.photos/id/10/2500/1667.jpg?hmac=J04WWC_ebchx3WwzbM-Z4_KC_LeLBWr5LZMaAkWkF68',
                    width : 165,
                },
                {
                    id: '5862394a0f-3da1-471f-bd96-145571e29d72',
                    title: 'Thsird Item',
                    image : 'https://i.picsum.photos/id/10/2500/1667.jpg?hmac=J04WWC_ebchx3WwzbM-Z4_KC_LeLBWr5LZMaAkWkF68',
                    width : 120,
                }, {
                    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
                    title: 'First Item',
                    image : 'https://i.picsum.photos/id/10/2500/1667.jpg?hmac=J04WWC_ebchx3WwzbM-Z4_KC_LeLBWr5LZMaAkWkF68',
                    width : 100,
                },
                {
                    id: '58694a0f-3da1-471f-bd96-145571e29d72',
                    title: 'Third Item',
                    image : 'https://i.picsum.photos/id/10/2500/1667.jpg?hmac=J04WWC_ebchx3WwzbM-Z4_KC_LeLBWr5LZMaAkWkF68',
                    width : 165,
                },
                {
                    id: '5862394a0f-3da1-471f-bd96-145571e29d72',
                    title: 'Thsird Item',
                    image : 'https://i.picsum.photos/id/10/2500/1667.jpg?hmac=J04WWC_ebchx3WwzbM-Z4_KC_LeLBWr5LZMaAkWkF68',
                    width : 120,
                }, {
                    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
                    title: 'First Item',
                    image : 'https://i.picsum.photos/id/10/2500/1667.jpg?hmac=J04WWC_ebchx3WwzbM-Z4_KC_LeLBWr5LZMaAkWkF68',
                    width : 100,
                },

            ]
        }


    }

    renderItem({item}){
     console.log(item)
     return (
         <View style={[styles.item, { flexGrow : 50}]}>
             <Image style ={{height : item.width , width : 'auto', resizeMode : 'stretch',}} source ={ {uri : item.image} } />
             <FooterProfile/>
        </View>
     )
    }

    render(): React.ReactElement<any> | string | number | {} | React.ReactNodeArray | React.ReactPortal | boolean | null | undefined {
        return (
            <Container>
                <MainHeader {...this.props} on_ = {"Mission"} title = {"커뮤니티"} />
                <Content>
                    <View style ={{flex: 1, margin : 10}}>
                    <FlatList
                        style={styles.flatList}
                        data={this.state.data}
                        renderItem={(item) => this.renderItem(item)}
                        keyExtractor={item => item.id}
                        numColumns={2}
                    />
                    </View>
                </Content>
                <MainFooter on_={"Community"} {...this.props}/>
            </Container>
        );
    }

}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        marginTop: StatusBar.currentHeight || 0,
    },
    item: {
        backgroundColor: '#f9c2ff',
        flexGrow : 0,
        margin : 5
    },
    title: {
        fontSize: 32,
    },
    flatList: {
        flex : 0,
    },
    profile_box : {
        margin : 10,
        flexDirection : 'row',
        alignItems: 'center',
    },
    profile_img :{
        borderRadius : 50, width : 30, height : 30,
        marginRight : 10,
    },
    profile_text_box :{
        marginTop : 10,
        alignItems : 'flex-start',
        justifyContent : 'center'
    },
    profile_memberclass : {
        fontFamily : 'NotoSansKR-Regular',
        fontSize : 10,
        color : '#39c191'
    },
    profile_name : {
        fontFamily : 'NotoSansKR-Bold',
        marginTop : -10,
        fontSize : 16,
    }
});

export default TimeLineScreen

How can I get the grid I want? I look forward to hearing from you. thankyou

Answer 1

It is a known limitation of the Flatlist API that masonry layouts are not supported. There are many alternatives available such as react-native-masonry.