[React native]스크롤뷰 안에 그리드 형식으로 아이템 배치하기

<ScrollView> 안에 내가 원하던 구조는  한줄에 2개씩 배치되는 형태의 그리드 모양을 원했다. 

이렇게 두개씩 배치되는 것이였는데 

        flexDirection:"row", 를 사용해도 ScrollView 안에서는 적용되지 않았다...

 

이런 모양밖에 나오지 않음..

 

내가 원하는 모양을 위해서는 flex:1 인 ScrollView 안에 View를 넣어 flexDirection:"row"를 적용시키면 원하는 모양이 나온다 

 

 

 

아래 코드를 참고

 

 <ScrollView horizontal={false} style={styles.list}>
 	<View style={styles.stylegridView}>
        <TouchableHighlight underlayColor="rgba(0,0,0,0)"  style={styles.item}>
            <View>
               <Image source={require('./assets/test.jpg')} style={styles.itemThumb} />
               <View style={styles.info}>
                   <Text style={styles.infoTitle}>제목</Text>
                   <Text style={styles.infoText}>설명블라블라 </Text>
            </View>
        </TouchableHighlight>
        
         <TouchableHighlight underlayColor="rgba(0,0,0,0)"  style={styles.item}>
            <View>
               <Image source={require('./assets/test.jpg')} style={styles.itemThumb} />
               <View style={styles.info}>
                   <Text style={styles.infoTitle}>제목</Text>
                   <Text style={styles.infoText}>설명블라블라 </Text>
            </View>
        </TouchableHighlight>
        
         <TouchableHighlight underlayColor="rgba(0,0,0,0)"  style={styles.item}>
            <View>
               <Image source={require('./assets/test.jpg')} style={styles.itemThumb} />
               <View style={styles.info}>
                   <Text style={styles.infoTitle}>제목</Text>
                   <Text style={styles.infoText}>설명블라블라 </Text>
            </View>
        </TouchableHighlight>
    </View>
 </ScrollView>
 
 
 
 
 const styles = StyleSheet.create({
    list:{
        flex: 1,
        width:"100%",
        backgroundColor:"#f2f2f2",
    },
    stylegridView:{
        flexDirection:"row",
        flexWrap:"wrap",
        paddingHorizontal:16,
        paddingTop:10,
        justifyContent:"space-between",
        paddingBottom:80,
    }
});