@uiw/react-native/lib/Flex/index.js

UIW for React Native

import React, { Component } from 'react';
import { View } from 'react-native';
import FlexItem from './FlexItem';
export default class Flex extends Component {
  static Item = FlexItem;
  static defaultProps = {
    direction: 'row',
    justify: 'start',
    wrap: 'nowrap',
    align: 'start'
  };

  render() {
    const {
      direction,
      justify,
      align,
      wrap,
      children,
      style
    } = this.props;
    const sty = {};

    if (direction) {
      sty.flexDirection = direction;
    }

    if (wrap) {
      sty.flexWrap = wrap;
    }

    if (justify) {
      sty.justifyContent = justify.replace(/^start$/g, 'flex-start').replace(/^end$/g, 'flex-end').replace(/^between$/g, 'space-between').replace(/^around$/g, 'space-around').replace(/^evenly$/g, 'space-evenly');
    }

    if (align) {
      sty.alignItems = align.replace(/^start$/g, 'flex-start').replace(/^end$/g, 'flex-end');
    }

    return <View style={[sty, style]}>
        {children && React.Children.map(children, child => {
        if (!React.isValidElement(child)) {
          return null;
        }

        if (child.type && child.type.displayName === 'FlexItem') {
          return React.cloneElement(<FlexItem />, { ...child.props,
            style: [{
              flex: 1
            }, child.props.style]
          });
        }

        return child;
      })}
      </View>;
  }

}