SegmentedControl UI Issues

[Chehow]

Description

SegmentedControl does not work as expected - strange dot in the center and selected segment is not highlighted properly.

Related to

• Demo

Steps to reproduce

Steps to reproduce the behavior:

1. Go to 'https://snack.expo.dev/@ethanshar/rnuilib_snack?platform=web'
2. Scroll down to 'SegmentedControl'
3. Click on 'SegmentedControl'
4. UI issue is there

Expected behavior

Selected segment should be highlighted with the background. Dot in the center should not be present

Actual behavior

Strange dot in the center and selected segment is not highlighted properly.

More Info

Code snippet

import _ from 'lodash';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import 'react-native-reanimated';
import {screens} from 'unicorn-demo-app';
import MainScreen from './MainScreen'
const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Main">
        <Stack.Screen name="Main" component={MainScreen}/>
        {_.map(screens, (screen, key) => {      
            return <Stack.Screen key={key} name={key.replace('Screen', '')} component={screen}/>;
        })}
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Screenshots/Video

Environment

• React Native version: 0.73.6
• React Native UI Lib version: 7.20.0

Affected platforms

• Android
• iOS
• Web

[Relax594]

same since upgrading to React-Native 0.73.x.
0.72.x was working fine.

[MichaelHerrmann1]

Same here. Some additional hints for reproducing the bug: When selecting Expo v50 or higher in the Snack demo on web, the SegmentedControl works correctly, somehow. But on iOS/Android the bug still exists.

(my environment: Expo v51.0.8, RNUILib v7.22.0, RN v0.74.1)

[burnaDLX]

if you set outlineWidth to 0, the dot disappears.