import {View, Button, SafeAreaView} from 'react-native';
import React, {useState} from 'react';
import SegmentedControl from '@react-native-segmented-control/segmented-control';

export default function App() {
  const getTabs = (prevTabs: string[] = []) => {
    return [...prevTabs, (prevTabs.length + 1).toString()];
  };

  const [tabs, setTabs] = useState<string[]>(getTabs());
  const [selectedTabIndex, setSelectedTabIndex] = useState<number>(0);

  return (
    <SafeAreaView>
      <View>
        <SegmentedControl
          values={tabs}
          selectedIndex={selectedTabIndex}
          onChange={event => {
            setSelectedTabIndex(event.nativeEvent.selectedSegmentIndex);
          }}
        />
        <Button title="Add Tabs" onPress={() => setTabs(getTabs(tabs))} />
      </View>
    </SafeAreaView>
  );
}