Creating a view with two columns of elements

Question

I am using react-native and I am trying to create a view with two columns of elements. I want buttons on the right side and left side. I unfortunately am not using view, I am using native-base's content/container layout.

  <Container style={styles.container}>
    <Content padder style = {styles.content}>
      <Button block
        style = {styles.button}>
        <Text style= {styles.text}>
          Emergency Contacts
        </Text>
      </Button></Content></Container>

My Style is as follows:

import { StyleSheet, Dimensions } from "react-native"
const extraWidth = Dimensions.get('window').width/30;
const extraHeight = Dimensions.get('window').height/30;
const windowWidth = Dimensions.get('window').width;
const windowHeight = Dimensions.get('window').height;

export default StyleSheet.create({
container: {
    backgroundColor: '#002F6C'
},
content: {
  flexDirection: 'row',
  flex: 1
},
button: {
  marginBottom:25,
  marginLeft:0,
  marginRight:(windowWidth / 2),
  backgroundColor: '#FFDD00'
},
text: {
  color: '#000000'
}
})

I've been trying to change the container and content's style to allow for a setup but have not found a solution yet. Thank you!

Comments

React Native has a Grid component, so with "import { Col, Row, Grid } from 'react-native-easy-grid' ", We can create a simple grid under container and content like so:

<Container style={styles.container}>
        <Content padder style={styles.content}>
          <Grid>
            <Col style={styles.leftContent}>
               <Button style={styles.textBlock}>
                  <Text style={styles.text}>
                      1st Item
                  </Text>
               </Button>
            </Col>

            <Col style={styles.rightContent}>
               <Button style={styles.textBlock}>
                  <Text style={styles.text}>
                     2nd item
                  </Text>
               </Button>
            </Col>

Whatever is wrapped in each Col tag should appear in the corresponding column, might take a little fiddling but it should work. A similar setup should work with the Row tag as well.

Answer 1

I accidentally commented rather than answered, so please refer to my comment for the answer instead

Answer 2

It's hard to tell without seeing how your styles are set up. Can you post those as well?

Comments

I updated the question with my style.