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

UIW for React Native

import React from 'react';
import { StyleSheet } from 'react-native';
import Flex from '../Flex';
const styles = StyleSheet.create({
  default: {
    display: 'flex',
    flexDirection: 'row',
    flexWrap: 'wrap'
  }
});
export default function ButtonGroup(props) {
  const {
    children,
    gutter,
    inline = false,
    size,
    rounded,
    // Button Props
    color,
    type,
    bordered = true,
    disabled,
    textStyle,
    // Button Props
    direction,
    justify,
    align,
    wrap,
    // Flex Props
    ...otherProps
  } = props;
  const porps = {
    color,
    type,
    bordered,
    disabled,
    textStyle
  };
  const flexProps = {
    direction,
    justify,
    align,
    wrap
  };
  const childs = React.Children.toArray(children);
  if (inline) {
    flexProps.direction = 'row';
    flexProps.wrap = 'wrap';
  }
  return <Flex testID="RNE__ButtonGroup__wrap" style={styles.default} {...flexProps} {...otherProps}>
      {childs.map((child, idx) => {
      if (!React.isValidElement(child)) {
        return null;
      }
      const childStyle = {
        flex: inline ? 0 : 1
      };
      if (inline && gutter) {
        childStyle.marginVertical = gutter / 2;
      }
      if (!gutter) {
        if (childs.length !== 1 && (idx === 0 || idx < childs.length - 1)) {
          childStyle.borderTopRightRadius = 0;
          childStyle.borderBottomRightRadius = 0;
        }
        if (childs.length > 0 && idx !== 0) {
          childStyle.borderTopLeftRadius = 0;
          childStyle.borderBottomLeftRadius = 0;
        }
      }
      if (!bordered) {
        childStyle.borderWidth = 0;
      }
      if (bordered && !gutter) {
        if (idx > 0 && idx < children.length - 1 || idx === 0) {
          childStyle.borderRightWidth = StyleSheet.hairlineWidth;
        }
        if (idx > 0 && idx < children.length) {
          childStyle.borderLeftWidth = StyleSheet.hairlineWidth;
        }
      }
      if (gutter && inline) {
        childStyle.marginHorizontal = gutter / 2;
      } else if (gutter && idx !== 0) {
        childStyle.marginLeft = gutter / 2;
      }
      return React.cloneElement(child, {
        ...porps,
        ...child.props,
        size,
        rounded,
        style: [childStyle, child.props.style]
      });
    })}
    </Flex>;
}