how to make this View Using flexbox in react-native

Question

this is the view that i want to make plz pay attention to the products , this is what i did :

i made a Component named "AllProducts" and put it flexDirection to row and bind my Product Array on it , but i get this result

and this my code if it helps :

this is my AllProduct.js

const Product_kind_one = [{
    name : 'Nice cloth',
    price : '2,999',
    image : require('../imgs/1.jpg')
},{
    name : 'Orange cloth',
    price : '3,999',
    image : require('../imgs/2.jpg')
},{
    name : 'Pink cloth',
    price : '2,999',
    image : require('../imgs/3.jpg')
},{
    name : 'Colory cloth',
    price : '1,999',
    image : require('../imgs/4.jpg')
},{
    name : 'Dark High Heels',
    price : '0,999',
    image : require('../imgs/5.jpeg')
},{
    name : 'Blue Nice Shoes',
    price : '3,599',
    image : require('../imgs/6.jpg')
},{
    name : 'Women Blue Bag',
    price : '2,299',
    image : require('../imgs/7.png')
}];
const Product_kind_two = [{
    name : 'Women Red Bag',
    price : '2,299',
    image : require('../imgs/9.jpg')
},{
    name : 'Bow tie Shoes',
    price : '1,299',
    image : require('../imgs/10.jpg')
},{
    name : 'Dark Black Bag',
    price : '1,299',
    image : require('../imgs/13.jpg')
},{
    name : 'Cream Shoes',
    price : '3,499',
    image : require('../imgs/12.jpg')
},{
    name : 'Green and Blue Shoes',
    price : '5,499',
    image : require('../imgs/12.jpg')
}];


export default class AllProducts extends Component{
    render(){
        return(
            <View style={{flexDirection : 'row',justifyContent : 'center'}}>
                <View style={{flex : 1,justifyContent : 'center'}}>
                    <Products Products={Product_kind_one}/>
                </View>
                <View style={{flex : 1,justifyContent : 'center'}}>
                    <Products Products={Product_kind_two}/>                 
                </View>
            </View>
        )
    }
}

this is my Product.js

return(
            <View style={{flexDirection : 'column'}}>
                {this.props.Products.map((Product,index)=>{
                    console.log(Product.image);
                    return(
                        <View key={index} style={{backgroundColor : '#fff',borderRadius : 5,justifyContent : 'center',margin : 10}}>
                            <Image source={Product.image} style={{height : 200,width : null,resizeMode : 'cover'}} />
                            <TouchableOpacity style={{alignItems : 'flex-end',justifyContent : 'center',position : 'absolute',top : 10,right :  10 }}>
                                <LikeButton/>
                            </TouchableOpacity>
                            <View style={styles.priceContainer}>
                                <Text style={{fontSize : 12}}>Stripped Mxi Dress</Text>
                                <Text style={{color : 'rgb(219, 10, 91)'}}>Rs.1,299</Text>
                            </View>
                        </View>
                    )
                })}
            </View>    
        )

where did i go wrong ???

Answer 1

I just had a few minutes and found a solution, that produces this:

and the code for it, is this:

import React from 'react';
import {FlatList, Text, View, StyleSheet} from "react-native";

export default class ListScreen extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            listItems: [1,2,3],
        };
    }


    render() {
        const {listItems} = this.state;
        return (
            <View style={styles.container}>
                <FlatList
                    style={styles.containerColumn}
                    data={listItems}
                    renderItem={this.renderListItemFirstChildSmaller}
                />
                <FlatList
                    style={styles.containerColumn}
                    data={listItems}
                    renderItem={this.renderListItemLastChildSmaller}
                />
            </View>
        );
    }

    renderListItemFirstChildSmaller = ({item, index}) => {
        return <Text style={[styles.text, { height: index === 0  ? 100 : 200}]}>{item}</Text>;
    };

    renderListItemLastChildSmaller = ({item, index}) => {
        return <Text style={[styles.text, { height: index === this.state.listItems.length - 1  ? 100 : 200}]}>{item}</Text>;
    };
}

const styles = StyleSheet.create({
    container: {
        width: '100%',
        height: '100%',
        display: 'flex',
        flexDirection: 'row',
    }, containerColumn: {
        display: 'flex',
        flex: 1,
        flexDirection: 'column',
    }, text: {
        borderStyle: 'solid',
        borderWidth: 1,
        borderColor: 'green',
    }
});

It would obviously be nicer, if the normal StyleSheet supported first and last child attributes, but I think the idea here is clear. There is the extended Stylesheet, that also supports first/last child, if you want to make it cleaner.