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

UIW for React Native

import React from 'react';
import { View } from 'react-native';
import FlexItem from './FlexItem';
function Flex(props) {
  const {
    direction,
    justify,
    align,
    wrap,
    children,
    style
  } = 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 testID="RNE__Flex__wrap" 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>;
}
Flex.defaultProps = {
  direction: 'row',
  justify: 'start',
  wrap: 'nowrap',
  align: 'start'
};
Flex.Item = FlexItem;
export default Flex;