Rendering problem on iOS 10

[junedomingo]

Here you can see some shadow effect in the inactive tab.
this happens in actual device

[kirankalyan5]

@junedomingo can you share the code for the above ? It's working fine for me.

[junedomingo]

Custom styles are inlined for now.

<SegmentedControlTab
	tabStyle={{ 
        backgroundColor: 'white', 
        marginTop: Platform.OS === 'ios' ? 15 : 10, 
        borderColor: '#163258', 
        marginBottom: 10 
    }}
	tabTextStyle={{ color: '#163258' }}
	activeTabStyle={{ backgroundColor: '#163258' }}
	values={['Schedules', 'Tasks']}
	selectedIndex={this.state.segmentedControlTabIndex}
	onTabPress={index => { this._filterSchedules(index); }}
/>

[junedomingo]

@kirankalyan5, This is already in release build by the way, my iOS version is 10.2.
No problem in Simulator.

[whan]

I guess this is React Native bug on iOS, even this simple piece of codes will have the same issue:

text

[whan]

<TouchableOpacity > <View style={{ width: 100, borderBottomLeftRadius: 5, borderTopLeftRadius: 5, borderColor: 'blue', paddingHorizontal: 10, paddingVertical: 5, borderWidth: 1, }}> <Text style={{ width: 30 }}>text</Text> </View> </TouchableOpacity>

[asessa]

This glitch is visible only when your side border radius is greater than 0 and you have an element on its side with borders.

I've disabled the left/right border and works for me (iOS 10.2.1 device).

Try to disable the border left/right width on L51/52:

        const firstTabStyle = index === 0 ? [{ borderRightWidth: 0, borderTopLeftRadius: borderRadius, borderBottomLeftRadius: borderRadius }] : {}
        const lastTabStyle = index === values.length - 1 ? [{ borderLeftWidth: 0, borderTopRightRadius: borderRadius, borderBottomRightRadius: borderRadius }] : {}

@kirankalyan5 if it's ok for you I can submit a PR.

[bedemiralp]

This appears to be a bug with React Native itself. Many people have reported similar issues:

• borderBottomLeftRadius et. al. produce blurry corners on iOS facebook/react-native#8577
• Artifacts on View with borderRadius on only 2 corners on iOS facebook/react-native#11897
• Border color bleeding bug when border radius is set. facebook/react-native#10823
• iOS RN:0.14.2 Border Radius - Blur facebook/react-native#4604

[kirankalyan5]

@here - I have published the latest version, have a look!

[asessa]

@kirankalyan5 I've tested with the latest version and the problem is still there

[giautm]

I still got that problem after upgrade to Expo's SDK 18.

[daltondanis]

Still have this problem too

Example:

    let tank = 60 //can be higher or smaller

    rightTank: {
        borderTopLeftRadius: 40,
        borderBottomLeftRadius: 40,
        borderColor: 'black',
        borderTopWidth: 3,
        borderLeftWidth: 3,
        borderBottomWidth: 3,
        height: 120,
        width: window.width/tank - 50,
        justifyContent: 'center',
        alignItems: 'center',
    },
    middleTank: {
        borderColor: 'black',
        borderTopWidth: 3,
        borderBottomWidth: 3,
        borderLeftWidth: 3,
        height: 120,
        width: window.width/tank - 50,
        justifyContent: 'center',
        alignItems: 'center',
    },
    leftTank: {
        borderTopRightRadius: 40,
        borderBottomRightRadius: 40,
        borderColor: 'black',
        borderWidth: 3,
        height: 120,
        width: window.width/tank - 50,
        justifyContent: 'center',
        alignItems: 'center',
    },

EDIT:

Fixed it by doing this (??????)

    rightTank: {
        borderTopLeftRadius: 40,
        borderBottomLeftRadius: 40,
        borderColor: 'black',
        borderTopWidth: 3,
        borderLeftWidth: 3,
        borderBottomWidth: 3,
        height: 120,
        width: window.width/tank - 50,
        justifyContent: 'center',
        alignItems: 'center',
    },
    middleTank: {
        //marginRight: 0.5,
        //marginLeft: 0.5,
        borderColor: 'black',
        //borderTopWidth: 3,
        //borderBottomWidth: 3,
        //borderLeftWidth: 3,
        borderWidth: 3,
        height: 120,
        width: window.width/tank - 50,
        justifyContent: 'center',
        alignItems: 'center',
    },
    leftTank: {
        borderTopRightRadius: 40,
        borderBottomRightRadius: 40,
        borderColor: 'black',
        //borderWidth: 3,
        borderTopWidth: 3,
        borderBottomWidth: 3,
        borderRightWidth: 3,
        height: 120,
        width: window.width/tank- 50,
        justifyContent: 'center',
        alignItems: 'center',
    },

[kirankalyan5]

Hi Guys, I have fixed this issue, I have published the latest version have a look.
Attaching the screen shot for reference.

[kennykswan]

Note with this fix, if there are only two tabs, there is no border between them.

[kirankalyan5]

@kennykswan I agree, but when it's two tabs I don't find a need of border between them.
PFA

[jamesholcomb]

I tried the fix. With three tabs on Simulator, seeing some extra spacing between second and third tab when third tab is selected.

RN 0.46.4
iOS 10.3

[jamesholcomb]

This resolved it for me:

tabStyle={[
  tabStyle,
  index !== 0 && index !== values.length - 1
    ? { marginLeft: Platform.OS === "ios" ? -1 : 0 }
    : {}
]}

[MassieurHunter]

hello guys,
commit f31e512 produces the same issue for ios 9 and 10 when there's only 2 tabs, rolling back to :
const firstTabStyle = [{ borderRightWidth: 0, borderTopLeftRadius: borderRadius, borderBottomLeftRadius: borderRadius }]
fixed the problem for me

[ajayveer1414]

Hi guys,
use following code to remove the shadow from SegmentedControlTab

                        <SegmentedControlTab
                            tabStyle={{
                                flex: 1, borderTopLeftRadius: 5,
                                borderTopRightRadius: 5,
                                borderBottomLeftRadius: 5,
                                borderBottomRightRadius: 5,
                            }}
                            values={['No', 'Yes',]}
                            selectedIndex={this.state.selectedIndex}
                            onTabPress={this._handleIndexChange}
                        />

[luigiquero]

I got rid of the artefact in by using Math.round in borderRadius provided directly to SegmentedControlTab.

Apparently it doesn't like floats.

This is certainly an iOS-only problem

[hsparihar-systango]

@kirankalyan5 @junedomingo Still getting this issue in ios 6s device with 2 tabs.

[GavinThomas1192]

I'm also still getting this issue on ios 6s