Welcome to the CSC Q&A, on our server named in honor of Ada Lovelace. Write great code! Get help and give help!
It is our choices... that show what we truly are, far more than our abilities.


+15 votes

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

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: {
  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!

asked in CSC490_Spring202021 by (1 point)
edited by

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}>
            <Col style={styles.leftContent}>
               <Button style={styles.textBlock}>
                  <Text style={styles.text}>
                      1st Item

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

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.

2 Answers

+4 votes
Best answer

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

answered by (1 point)
selected by
+5 votes

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

answered by (1 point)

I updated the question with my style.