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

UIW for React Native

import React, { Component } from 'react';
import { Text } from 'react-native';
import ButtonGroup from '../ButtonGroup';
import Button from '../Button';
export default class SegmentedControl extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedIndex: props.selectedIndex || 0
    };
  }

  static defaultProps = {
    value: [],
    size: 'small',
    selectedIndex: 0,
    color: '#108ee9'
  };
  handlePress = (label, selectedIndex) => {
    const {
      onValueChange
    } = this.props;
    this.setState({
      selectedIndex
    }, () => {
      onValueChange && onValueChange(label, selectedIndex);
    });
  };

  render() {
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    const {
      value,
      selectedIndex,
      renderItem,
      textColor = {
        actived: '#fff',
        unactived: this.props.color ?? '#108ee9'
      },
      ...otherProps
    } = this.props;
    return <ButtonGroup {...otherProps}>
        {value && value.map((label, key) => {
        const styl = {};
        const textStyle = {};
        let textStyleColor = textColor.actived;

        if (this.state.selectedIndex !== key + 1) {
          styl.backgroundColor = '#fff';
          textStyle.color = otherProps.color;
          textStyleColor = textColor.unactived;
        }

        const props = {
          type: 'primary',
          style: [styl, otherProps.textStyle],
          textStyle: [textStyle],
          onPress: this.handlePress.bind(this, label, key + 1)
        };

        if (renderItem) {
          return renderItem(label, key + 1, props);
        }

        return React.cloneElement(<Button key={key} />, { ...props
        }, <Text style={{
          color: textStyleColor
        }}>{label}</Text>);
      })}
      </ButtonGroup>;
  }

}