Creating Rows and Columns in React Native

Well, If you’re here then you are from the background of using Bootstrap or other similar ways of developing a page with Grids like me. The flexbox model provides us with all the necessary features, but it is not exactly we want.

Let us see how to use the flexbox model and create our own Row and Column components which can be reused across the application.In this post, I will give the basic skeleton for the Row and Col components which could be extended based on your needs, and I will explain how easy it is to create our own components.

import React, {Component} from 'react';
import {StyleSheet, View} from 'react-native';


export default class Row extends Component{
  render() {
    return (
      <View style={styles.container}>
      {this.props.children}
      </View>
    );
  }
}



const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    marginTop: 10,
    marginBottom: 10,
  }
});

import React, {Component} from 'react';

import {StyleSheet, View} from 'react-native';

export default class Row extends Component{

render() {

return (

{this.props.children}

</View>

);

}

const styles = StyleSheet.create({

container: {

flexDirection: 'row',

marginTop: 10,

marginBottom: 10,

}

});

As you can see, the simple trick to get the items in a row is by specifying the flexDirection to ‘row’. ‘props.children’ allows us to get the entire list of elements which are present inside the component and place it in our View. Margin styles are based on the need.

import React, {Component} from 'react';
import {StyleSheet, View} from 'react-native';


export default class Col extends Component{
  render() {
    let customStyles = Object.assign({}, this.props.customStyles, styles.container);
    return (
      <View style={customStyles}>
      {this.props.children}
      </View>
    );
  }
}



const styles = StyleSheet.create({
  container: {
      marginLeft: 5,
      marginRight: 5,
  }
});

import React, {Component} from 'react';

import {StyleSheet, View} from 'react-native';

export default class Col extends Component{

render() {

let customStyles = Object.assign({}, this.props.customStyles, styles.container);

return (

{this.props.children}

</View>

);

}

const styles = StyleSheet.create({

container: {

marginLeft: 5,

marginRight: 5,

}

});

Do not specify any flexDirection unless you’re forced to, and add the margins or other style properties based on the requirement. This example also illustrates how to merge the style properties which could be passed when using the component.

Now Let’s see a basic component which makes use of these custom components to create the row and column grids.

<Row>
            <Col customStyles={{"flex":1}}>
              <Text>Test 1</Text>
            </Col>
            <Col customStyles={{"flex":1}}>
               <Text>Test 2</Text>
            </Col>
            <Col customStyles={{"flex":1}}>
               <Text>Test 3</Text>
            </Col>
</Row>

<Row>

</Col>

</Col>

</Col>

</Row>

Hope this article helped you, Happy coding…:)

Tagged as: JavaScript, react-native

Related Posts