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.

score 0 · Answer 1 · answered Oct 03 '20 at 12:14

0

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%'
    }
});

answered Oct 03 '20 at 12:14

Ali

1
2

Thank you for the response. I have tried this, but I am using DropdownBox for Item ID and TextInput for Item Name and date time picker for Date at that time the lines are getting collapsed. – Still_Learning Oct 03 '20 at 12:27
Did you try to set a special height to all item? like this => item: { width: '50%, height: 200 } – Ali Oct 04 '20 at 12:11
There are three columns in the section, first one is the picture above I have asked and for that only I want to fix the height and width . For remaining two columns there are two fields where I don't want to give size and split in to two columns. – Still_Learning Oct 06 '20 at 04:12

react native flexbox row and cloumn

1 Answers1