react native flexbox row and cloumn

Question

Good Day! I am working on a design task to develop myself in reactnative flex concepts. I am trying to achieve the below design

Anyone can guide me how to get the above output. I have one container which is "FlexDirection:Row" and ItemID, ItemName and Date in one container where I am using "FlexDirection:"Column". Thanks in advance.

Answer 1

Maybe this can help you

const App = () => (
    <View style={styles.container}>
        <View style={styles.item}>
            <Text>Item ID</Text>
            <TextInput />
        </View>
        <View style={styles.item}>
            <Text>Item Name</Text>
            <TextInput />
        </View>
        <View style={styles.item}>
            <Text>Date</Text>
            <TextInput />
        </View>
    </View>
);
const styles = StyleSheet.create({
    container: {
        flexDirection: 'row',
        flexWrap: 'wrap'
    },
    item: {
        width: '50%'
    }
});