react-native-multiswitch-controller/lib/module/SwitchItem.js

Smooth animated multiswitch component with dynamic width

"use strict";

import { Pressable, StyleSheet, Text } from 'react-native';
import Animated, { useAnimatedStyle, withTiming } from 'react-native-reanimated';
import { memo } from 'react';
import { variantColors } from "./constants.js";
import { jsx as _jsx } from "react/jsx-runtime";
const AnimatedText = Animated.createAnimatedComponent(Text);
function SwitchItem(props) {
  const {
    item,
    isActive,
    onChange,
    onLayout,
    index,
    variant,
    inactiveTextStyle,
    activeTextStyle,
    itemContainerStyle,
    animatedActiveOptionIndex
  } = props;
  const textColorActive = activeTextStyle?.color || variantColors[variant].activeText;
  const textColorInactive = inactiveTextStyle?.color || variantColors[variant].inactiveText;
  const animatedColor = useAnimatedStyle(() => {
    if (!animatedActiveOptionIndex || textColorActive === textColorInactive) {
      return {};
    }
    return {
      color: withTiming(animatedActiveOptionIndex?.value === index ? textColorActive : textColorInactive, {
        duration: 200
      })
    };
  });
  return /*#__PURE__*/_jsx(Pressable, {
    onPress: () => onChange(item.value),
    onLayout: event => onLayout(event, index),
    accessibilityRole: "tab",
    accessibilityState: {
      selected: isActive
    },
    accessibilityLabel: item.label,
    disabled: isActive,
    style: [styles.containerDefault, variant === 'segmentedControl' && styles.containerSegmentedControl, variant === 'tabs' && styles.containerTabs, itemContainerStyle],
    children: /*#__PURE__*/_jsx(AnimatedText, {
      style: [styles.textDefault, inactiveTextStyle, isActive && activeTextStyle, animatedColor],
      children: item.label
    })
  });
}
const styles = StyleSheet.create({
  containerDefault: {
    justifyContent: 'center',
    alignItems: 'center',
    paddingHorizontal: 12
  },
  containerSegmentedControl: {
    borderRadius: 999,
    alignSelf: 'center'
  },
  containerTabs: {},
  textDefault: {
    fontSize: 16,
    fontWeight: 'bold'
  }
});
export default /*#__PURE__*/memo(SwitchItem);
//# sourceMappingURL=SwitchItem.js.map