Grid Layout of View in React Native

Question

I am trying to create a React Native View with a Layout like this one. How can I create a box, like one of the boxes on the image?

Is it possible to achieve this with Flex? I need one for the number (left), one for a text (right, top) and for another text (right, bottom)? They should be in the same order like on the image.

Answer 1

I would suggest you to learn flexbox styling rules.

It will make your life easier to design such simple screens.

Your render method should look something like this:

render() {
    return (
        <View style={styles.containerStyle}>
            <Text style={styles.numberStyle}>6</Text>
            <View style={styles.textContainerStyle}>
                <Text>D in 227 -</Text>
                <Text>Vtr. Online Lehrer</Text>
            </View>
        </View>
    );
}

Your styles should look like this:

const styles = {
    containerStyle: {
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'space-around'
    },
    numberStyle: {
        flex: 1
    },
    textContainerStyle: {
        flex: 4,
        flexDirection: 'row',
        justifyContent: 'center' 
    }
}

Note: I have not tested the output, but it should work. If it is not working as expected then please feel free to ask me.

You can learn flexbox here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

The above link is for css but still if you learn that then you can apply similarly in React Native.