Example for https://github.com/akveo/react-native-ui-kitten/issues/724#issuecomment-605326312

button-switch.component.tsx

import React from 'react';
import { StyleSheet, View, ViewProps, ViewStyle } from 'react-native';
import { ButtonElement } from '@ui-kitten/components';

interface ButtonSwitchProps extends ViewProps {
  fullWidth?: boolean;
  children: ButtonElement[];
  selectedIndex: number;
  onSelect: (index: number) => void;
}

export type ButtonSwitchElement = React.ReactElement<ButtonSwitchProps>;

const STATUS_DEFAULT: string = 'basic';
const STATUS_SELECTED: string = 'primary';

export class ButtonSwitch extends React.Component<ButtonSwitchProps> {

  private get childCount(): number {
    return React.Children.count(this.props.children);
  }

  private getBorderStyleForPosition = (index: number): ViewStyle => {
    switch (index) {
      case 0: return styles.firstButton;
      case this.childCount - 1: return styles.lastButton;
      default: return styles.middleButton;
    }
  };

  private renderComponentChildren = (children: ButtonElement[]): ButtonElement[] => {
    return React.Children.map(children, (element: ButtonElement, index: number): ButtonElement => {
    const borderStyle: ViewStyle = this.getBorderStyleForPosition(index);

      return React.cloneElement(element, {
        style: [element.props.style, borderStyle, this.props.fullWidth && styles.buttonFullWidth],
        status: index === this.props.selectedIndex ? STATUS_SELECTED : STATUS_DEFAULT,
        onPress: () => this.props.onSelect(index),
      });
    });
  };

  public render(): React.ReactElement<ViewProps> {
    const { style, children, ...viewProps } = this.props;
    return (
      <View
        {...viewProps}
        style={[styles.container, style]}>
        {this.renderComponentChildren(children)}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  firstButton: {
    borderTopEndRadius: 0,
    borderBottomEndRadius: 0,
  },
  middleButton: {
    borderRadius: 0,
  },
  lastButton: {
    borderTopStartRadius: 0,
    borderBottomStartRadius: 0,
  },
  buttonFullWidth: {
    flex: 1,
  },
});

Hey do you have an example of how to use this?

Usage is pretty straightforward, but I'll leave this here for anyone else looking for a quick copy / paste:

export default ({}: Props) => {
  const [selectedIndex, setSelectedIndex] = React.useState(0);

  return (
    <ButtonSwitch
      onSelect={(index) => setSelectedIndex(index)}
      selectedIndex={selectedIndex}
      fullWidth>
      <Button>OPTION 0</Button>
      <Button>OPTION 1</Button>
      <Button>OPTION 2</Button>
    </ButtonSwitch>
  );
};

This yields the following: