Row

Use this property to center a child horizontally within a container with flexDirection set to row.

MonalisaUI

View full example: Row Example

import React from 'react';
import { View, Text } from 'react-native';
import { Row } from 'monalisa-ui';

const Example = () => (
  <View>
    <Row>
      <Text>Value 1</Text>
      <Text>Value 2</Text>
      <Text>Value 3</Text>
    </Row>
  </View>
);

export default Example;

Configuration

Property	Default	Option	Description
content	flex-start	string	Describes how to align children within the main axis of their container. ('flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly')
alignItems	stretch	string	Aligns children in the cross direction. ('flex-start', 'flex-end', 'center', 'stretch', 'baseline')
style	-	-	Style for the row

Example

• space-between

import React from 'react';
import { Text } from 'react-native';
import { Row } from 'monalisa-ui';

const Example = () => (
  <Row content="space-between">
    <Text>Value 1</Text>
    <Text>Value 2</Text>
    <Text>Value 3</Text>
  </Row>
);

export default Example;

• space-around

import React from 'react';
import { Text } from 'react-native';
import { Row } from 'monalisa-ui';

const Example = () => (
  <Row content="space-around">
    <Text>Value 1</Text>
    <Text>Value 2</Text>
    <Text>Value 3</Text>
  </Row>
);

export default Example;

• flex-end

import React from 'react';
import { Text } from 'react-native';
import { Row } from 'monalisa-ui';

const Example = () => (
  <Row content="flex-end">
    <Text>Value 1</Text>
    <Text>Value 2</Text>
    <Text>Value 3</Text>
  </Row>
);

export default Example;

• space-evenly

import React from 'react';
import { Text } from 'react-native';
import { Row } from 'monalisa-ui';

const Example = () => (
  <Row content="space-evenly">
    <Text>Value 1</Text>
    <Text>Value 2</Text>
    <Text>Value 3</Text>
  </Row>
);

export default Example;