2 columns in react native

react native 2 column list
react native image
react native grid
flexwrap react native
react native align right
react native-spacing
react native table
react native flexbox cheat sheet

I'm trying to make 2 columns that contain buttons, I tried with flex direction 'row' but this happened

it supposed to be look like this

is there any other way to do it?

var rows = [], columns = [];
var i = 0;

buttons.forEach((e, idx) => {
    rows.push(e);
    i++;

    if (i === 2 || idx === buttons.length - 1) {
        i = 0;
        columns.push(
            <View key={ idx } style = {{ flex: 1, flexDirection: 'row' }}>
                { rows }
            </View>
        );
        rows = [];
        i = 0;
    }
});

return (
    <View style = {{ flex: 1, margin: normalize(20) }} >
        { columns }
    </View>
);

You can style it like below:

<View>
  <View style={{flexDirection:'row'}}>
   <Button1View/> // Break
   <Button2View/> // Meeting
  </View>
  <View style={{flexDirection:'row'}}>
   <Button3View/> // on the way
   <Button4View/> // office
  </View>
</View>

you can add styles in views and buttons accordingly but this will arrange the buttons like you want

Layout with Flexbox · React Native, The defaults are different, with flexDirection defaulting to column instead of row The red view uses flex: 1 , the yellow view uses flex: 2 , and the green view  It allows for much easier layouts and is supported by React-Native which means when I layout pages for React-Native I reach for flexbox first, but I have found my self reaching for flexbox first in web development as well. In fact the last application I laid out, I did entirely with flexbox. I have found it that easy to use.

You can use **GRID** component 
<Grid
    renderItem={() => (
        <View style={{ 
          flex: 1,
          height: xx,
          borderWidth: 1,
          margin: xx
        }}/>
      )}
    data={[arrayData]}
    itemsPerRow={2}
/>
Please check this documentation.

react-native-grid-component

react-native two column layout · GitHub, react-native two column layout. react-native-two-column-layout.jsx. <View style={{ justifyContent: 'center', alignItems: 'center', flexDirection: 'row', flex: 1}}>. Now we can use any of the components available through React-Bootstrap. Grids, Rows & Columns. To use the responsive and fluid grid system Bootstrap offers, we need to import {Grid, Row, Col} from

You can use a FlatList for this.

Here's how to get a 2x2 grid showing, you will need to adapt it to accomodate your buttons.

<FlatList
  data={[1, 2, 3, 4]}
  numColumns={2}
  renderItem={() => (
    <View style={{ 
      flex: 1,
      height: 150,
      borderWidth: 1,
      margin: 20
    }}/>
  )}
/>

This will output black boxes but should be enough to get you going.

The Full React Native Layout Cheat Sheet - Wix Engineering, Opposite to the web, React Native default flexDirection is column which The red view got flex:1 , the yellow view got flex:2 and the green view  reactstrap - easy to use React Bootstrap 4 components compatible with React 16+

I used to solve that issue by using flexDirection and given height and width to the contents

in the question above can be solved like this

<View>
    <View
     style = {{
         flexDirection: 'row',
         justifyContent: 'space-between'
     }}
    >
        <ButtonView
            style = {{
                height: (Dimensions.get('screen').width - 60) / 2,
                width: (Dimensions.get('screen').width - 60) / 2
            }}
        />

        <ButtonView
            style = {{
                height: (Dimensions.get('screen').width - 60) / 2,
                width: (Dimensions.get('screen').width - 60) / 2
            }}
        />
    </View>

    <View
     style = {{
         flexDirection: 'row',
         justifyContent: 'space-between'
     }}
    >
        <ButtonView
            style = {{
                height: (Dimensions.get('screen').width - 60) / 2,
                width: (Dimensions.get('screen').width - 60) / 2
            }}
        />

        <ButtonView
            style = {{
                height: (Dimensions.get('screen').width - 60) / 2,
                width: (Dimensions.get('screen').width - 60) / 2
            }}
        />
    </View>
<View>

React Native FlatList Grid, In this video, we will start with a list of content from a React Native let Duration: 2:54 Posted: Mar 13, 2018 Flexbox works the same way in React Native as it does in CSS on the web, with a few exceptions. The defaults are different, with flexDirection defaulting to column instead of row, and the flex parameter only supporting a single number. Flex. flex will define how your items are going to “fill” over the available space along your main axis

Flex Two Columns: Ridiculously easy row and column layouts with , It allows for much easier layouts and is supported by React-Native which means when I layout pages for React-Native I reach for flexbox first,  Material Design’s responsive UI is based on a 12-column grid layout. How it works. The grid system is implemented with the Grid component: It uses CSS’s Flexible Box module for high flexibility. There are two types of layout: containers and items. Item widths are set in percentages, so they’re always fluid and sized relative to their

Using Flexbox with React Native, React Native is very similar to React, but one of the major difference is styling the flexDirection have two values 'row' and 'column'. Defalut  React Native flexDirection Row Column Explained iOS Android example. admin January 13, 2018 January 14, 2018 React Native. 2. Column : The The

Two column layout in react native - reactjs - html, I want to display multiple elements in two columns in a react native application. This is what I have so far: class App extends Component { render() { const  react-native two column layout. GitHub Gist: instantly share code, notes, and snippets.

Comments
  • So I pushed my buttons from api and I don't want to hard code that, how do I do that?
  • You mean to say your grid arrangement will be dynamic ? You will not know in advance that how will have to arrange the images?
  • I got my buttons from api and I dont want to hard code like this, is there anyway to do it?