sfm-uikit-react-native/src/view/EnxSegmentView.js

It is a react native component for SmartFloMeet users.

import React, { useState } from "react";
import { View, Text, TouchableOpacity } from "react-native";
import {styles} from "../style/EnxSegmentStype"

const EnxSegmentView = ({ items, onSegmentChange, style, defaultSelectedIndex = 0 }) => {
  const [selectedSegment, setSelectedSegment] = useState(defaultSelectedIndex);

  const handleSegmentChange = (index) => {
    setSelectedSegment(index);
    if (onSegmentChange) {
      onSegmentChange(index); // Notify the parent component
    }
  };

  return (
    <View style={[styles.container, style]}>
      {items.map((item, index) => (
        <TouchableOpacity
          key={index}
          style={[
            styles.segment,
            selectedSegment === index && styles.selectedSegment,
          ]}
          onPress={() => handleSegmentChange(index)}
        >
          <Text
            style={[
              styles.segmentText,
              selectedSegment === index && styles.selectedSegmentText,
            ]}
          >
            {item}
          </Text>
        </TouchableOpacity>
      ))}
    </View>
  );
};
export default EnxSegmentView;