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

UIW for React Native

import React, { useState } from 'react';
import { Text } from 'react-native';
import ButtonGroup from '../ButtonGroup';
import Button from '../Button';
import { useTheme } from '@shopify/restyle';
export default function SegmentedControl(props) {
    const theme = useTheme();
    const [state, setState] = useState({
        selectedIndex: props.selectedIndex || 0,
    });
    const handlePress = (label, selectedIndex) => {
        setState({ selectedIndex });
        const { onValueChange } = props;
        onValueChange && onValueChange(label, selectedIndex);
        return undefined;
    };
    const { value, selectedIndex, renderItem, textColor = {
        actived: theme.colors.text_active || '#fff',
        unactived: props.color ?? (theme.colors.primary_background || '#3578e5'),
    }, colors = props.color || theme.colors.primary_background || '#3578e5', ...otherProps } = props;
    return (<ButtonGroup {...otherProps}>
      {value &&
            value.map((label, key) => {
                const styl = {};
                const textStyle = {};
                let textStyleColor = textColor.actived;
                if (state.selectedIndex !== key + 1) {
                    styl.backgroundColor = '#fff';
                    textStyle.color = colors;
                    textStyleColor = textColor.unactived;
                }
                const props = {
                    type: 'primary',
                    style: [styl, otherProps.textStyle],
                    textStyle: [textStyle],
                    onPress: () => handlePress(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>);
}
SegmentedControl.defaultProps = {
    value: [],
    size: 'small',
    selectedIndex: 0,
};