react-native-segmented-control/segmented-control

[Android only]: Tab's width doesn't get adjusted on updating the values dynamically

pranshuchittora opened this issue · 1 comments

When values are updated on runtime the tab width doesn't get updated. This happens only in Android, currently, the tab width is recomputed only on layout changes.

Screen.Recording.2023-05-04.at.11.42.05.PM.720.mov

Here's the code sample for the above example

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>
  );
}

Deps

    "@react-native-segmented-control/segmented-control": "^2.4.1",
    "react": "18.2.0",
    "react-native": "0.71.7"

Same here! ☝️