Skip to content

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

@pranshuchittora

Description

@pranshuchittora

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"

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions