diff --git a/js/SegmentedControl.js b/js/SegmentedControl.js index d82ecb5f..74790fb4 100644 --- a/js/SegmentedControl.js +++ b/js/SegmentedControl.js @@ -41,6 +41,7 @@ const SegmentedControl = ({ const colorScheme = appearance || colorSchemeHook; const [segmentWidth, setSegmentWidth] = React.useState(0); const animation = React.useRef(new Animated.Value(0)).current; + const [containerWidth, setContainerWidth] = React.useState(0); const handleChange = (index: number) => { // mocks iOS's nativeEvent @@ -66,6 +67,14 @@ const SegmentedControl = ({ } }, [animation, segmentWidth, selectedIndex]); + React.useEffect(() => { + const newSegmentWidth = values.length ? containerWidth / values.length : 0; + if (newSegmentWidth !== segmentWidth) { + animation.setValue(newSegmentWidth * (selectedIndex || 0)); + setSegmentWidth(newSegmentWidth); + } + }, [values.length, containerWidth]); + return ( { - const newSegmentWidth = values.length ? width / values.length : 0; - if (newSegmentWidth !== segmentWidth) { - animation.setValue(newSegmentWidth * (selectedIndex || 0)); - setSegmentWidth(newSegmentWidth); - } + setContainerWidth(width); }}> {!backgroundColor && !tintColor && (