Im attempting to achieve the following design:

however when i set the borderColor i get the following expected result:

Does it make sense to submit a PR for something named liked dividerColor?

Thanks for all the help so far guys, but I have a new request.

While I can use this module in my Chrome browser just fine with webpack-dev-server, I've come across issues when building the production version.

1. Source code isn't in ES5 format. So while it works on the Chrome browser, it doesn't compile properly (assuming you exclude the node_modules folder).

2. Once source code is in ES5 format, and I try to webpack -p, I get an error with once I open index.html in the the console. There is an error with:
   View.propTypes.style

Uncaught TypeError: Cannot read property 'style' of undefined

Note quite sure why this is an issue. And I know this component is mainly for iOS and android, but was hoping it would work in the browser as well. Thanks!

in SegmentedControl.js

SegmentedControlTab.propTypes = {
values: PropTypes.array,
badges: PropTypes.array,
multiple: PropTypes.bool,
onTabPress: PropTypes.func,
selectedIndex: PropTypes.number,
selectedIndices: PropTypes.arrayOf(PropTypes.number),
tabsContainerStyle: View.propTypes.style,
tabStyle: View.propTypes.style,
activeTabStyle: View.propTypes.style,
tabTextStyle: Text.propTypes.style,
activeTabTextStyle: Text.propTypes.style,
tabBadgeContainerStyle: Text.propTypes.style,
activeTabBadgeContainerStyle: Text.propTypes.style,
tabBadgeStyle: Text.propTypes.style,
activeTabBadgeStyle: Text.propTypes.style,
borderRadius: PropTypes.number
}

Component doesn't update visual state if props changed via parent. Problem is in line 27 in method renderTabOption: component gets selected index from self internal state, but it must get it from props. Also state is useless for this component in RN conception...

renderTabOption(tab, index) {
        const {values, borderRadius, selectedIndex} = this.props
        const isTabActive = selectedIndex === index
...

I've found a way to fix this issue!
add the following code to SegmentedControlTab to get this issue fixed.
...
componentWillReceiveProps(props){
const {selectedIndex} = props;
if(selectedIndex){
this.setState({selectedIndex});
}
}
....

I got this problem in iOS when I set the values to be only 2 (works fine on Android)

The tab works fine if I have more than 2 values

Here's my code

             <SegmentedControlTab
                    values={['Aktif', 'Selesai']}
                    selectedIndex={this.state.selectedIndex}
                    onTabPress={this.handleIndexChange}
                    tabsContainerStyle={{ padding:20}}
                    tabStyle={{borderColor:'#a55eea'}}
                    tabTextStyle={{color:'#a55eea'}}
                    activeTabStyle={{backgroundColor:'#a55eea'}}
                />

When I this:

values={['something', 'something else', 'see this']

I get ellipsis like so:

Anyway I can make it go to a new line?

Correct me if i am wrong .The 'multiple' prop set to true should allow us to select multiple tabs. It does not work that way with the tabclick. It works when the selectedIndices are hardcoded on the component itself. If there is other way of doing that. please let me know .
Thanks,
VeerU

Hi guys. I think that would be great to be able to disable certain tabs and style them.

Thanks! 💯

I want to put custom image in Text place for each tab.
Where to change code for that?

<SegmentedControlTab
values={['买入', '卖出','撤单']}
selectedIndex={this.state.customStyleIndex}
onTabPress={this.handleSelect}
borderRadius={0}
tabsContainerStyle={{ height: p(60), backgroundColor: '#1F2229',marginVertical:p(20)}}
tabStyle={{ backgroundColor: '#1F2229', borderWidth: StyleSheet.hairlineWidth, borderColor:'#313840'}}
activeTabStyle={{ backgroundColor: '#313840'}}
tabTextStyle={{ color: '#FFFFFF', fontWeight: 'bold' }}
activeTabTextStyle={{ color: '#FFFFFF' }} />

handleSelect = (index) => {
console.log('index',index);
this.setState({
...this.state,
customStyleIndex: index,
});
};

It would be very helpful if I could be alerted when a tab that is already selected has been selected also. Ideal situation I am trying to solve is to un-select a selected tab.

At the moment, no action is recorded (at least in documentaiton)

Given Example file is not working as expected. Seems there could be some problem accessing the package using file:.../ protocol in package.json

Below is the error message.

error: bundling failed: TypeError: Cannot read property 'bindings' of null

There are some cases where the text I display inside the segmented control does not fit on one line. It would be nice to be able to truncate the text like on TextInput with numberOfLines.

React Native's SegmentedControlIOS already does this by default.

I can submit a PR with the fix if you want!

I am using Segmented tab as per given example but its not updating style, its taking only default color of sky blue.
Code sample:


<SegmentedControl
defaultPage={1}
itemButtonViewStyle = {{
width:200
}}
itemHeaderViewStyle = {{
paddingVertical:10
}}
borderRadius={0}
tabsContainerStyle={{height: 50, backgroundColor: '#F2F2F2'}}
tabStyle={{backgroundColor: '#F2F2F2', borderWidth: 0}}
activeTabStyle={{backgroundColor: 'white', marginTop: 2}}
tabTextStyle={{color: '#444444', fontWeight: 'bold'}}
activeTabTextStyle={{color: '#888888'}}
>
<SegmentedControl.Item
title = {Nearby}
>

</SegmentedControl.Item>
<SegmentedControl.Item
title = {Invites 3 }
>

</SegmentedControl.Item>





);
}
}

const styles = StyleSheet.create({
parent: {
flex: 1,
flexDirection: 'column',
},
flex1: {
flex: 1,
flexDirection: 'column',
backgroundColor: '#211F47',
justifyContent: 'center',
alignItems: 'center',
paddingTop: 20
},
flex11: {
flex: 10,
flexDirection: 'column'
},
notificationItems:{
backgroundColor: '#CF2A52',
color: 'white'
}
});

The repository readme says

Lasted code in the repo let to be published with more flexibility in styling.(v1.0.4)- coming soon

According to 0d78272 the next version will introduce breaking changes. According to the semver guidelines, breaking changes should cause a major version bump:

Given a version number MAJOR.MINOR.PATCH, increment the:

1. MAJOR version when you make incompatible API changes,
2. MINOR version when you add functionality in a backwards-compatible manner, and
3. PATCH version when you make backwards-compatible bug fixes

The next release should therefore be 2.0.0. The release will otherwise break any consumers' builds, unless they have pinned a specific patch version.

Thanks!

How to style the control in order to achieve something like:

Option1 | Option2

In the native iOS version of this component there is a visual indicator for when you press down but haven't yet let your finger up. It's a slightly lighter color than the fully active color.

I would like to open a PR to add this functionality to your component if you're cool with that I can start working on it.

Add accessibilityLabel for each tab, so that disabled user can easily identify the tab using voiceover or other assistive technology. And this also helps us to write proper functional test(automation test) using frameworks like Appium. Most of the testing frameworks expect an accessibiltyLabel or testID props to identify the item and trigger the event.

How are you?
I put this component in my project, and put this one in any scrollview.
When i run my app initially, this component isn't shown on my app.

But when i change the state of scrollview by scrolling, your component is shown.

So that is my fault?
Would you please help me ASAP?

does anyone ever experience this

Per https://facebook.github.io/react-native/docs/segmentedcontrolios.html#enabled

Is there any possible way to add the image icon before the value/tab name ? if yes please help me. i do like this but the text is not adjusted with the image.
badges={[ <Text style={styles.badgeText}> <Image style={styles.badgeImage1} source={require("./Images/3.png")} />Personal </Text>, <Text style={styles.badgeText}> <Image style={styles.badgeImage} source={require("./Images/2.png")} />Doctor </Text>, <Text style={styles.badgeText}> <Image style={styles.badgeImage2} source={require("./Images/1.png")} />Security </Text> ]} values={["", "", ""]}

Is there a way to have the controls's width scaling depending on the options?

Rather than setting the width, I hope it can change according to the text, and not necessary to fill the parent's width.

For example,

Tabs solves the problem of separating content into sections and accessed via a single content area using a flat navigation structure that does not refresh the page when selected.

What is the rationale of having multiple option ?

Hello @kirankalyan5, Could you update version of lib from 3.2.2, because in this lib we added a lot of changes.

Hi,

A question...wow would I go about capturing repeated presses on the currently selected tab as onTabPress fires when the selectedIndex changes?

Many thanks,

Chris

I'm posting this to add more attention to this previously filed bug.
#10

It's happening on ios, on device only.
This SS from an iPhone 6s.

I've tried.
const firstTabStyle = this.state.selectedIndex === 1 ? [{ borderRightWidth: 0 }] : {} const lastTabStyle = this.state.selectedIndex === 0 ? [{ borderLeftWidth: 0 }] : {}

This didn't make a difference.
Thanks for the awesome package!

I have a situation where I need to toggle the segment which is selected based on some logic. But I can't figure out how to change the ControlTab's actual UI to reflect the state, as selectedIndex seems to only affect the initially selected index, but doesn't update dynamically.

Any way around this?

is it possible to customise segment like this?

I was looking for option to disable, and took me a while to figure out that prop name should be "enabled" instead of "enable". Small typo, but could save some time in the future by fixing it.

Hey there.
I'm getting weird padding on the right side of first tab on the devices like iPhone X or iPads

Any ideas?

There is no unit test for the source code SegmentedControlTab.js

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

Hi,

I have changed the style of whole tab. I have set activeTabStyle border bottom color and width. Its working fine for the centered tab, but when i am selecting other tab borderBottom not displaying.

Kindly help.

Trying to set:

activeTabStyle={{borderBottomLeftRadius: 0, borderBottomRightRadius: 0}

but it doesn't appear to be overriding the default styles

I would like to have an individual tab segment highlighted temporarily (using TouchableHighlight if possible) when tapped to give the user feedback that they've tapped. Is this possible with this library?

something like this:
https://facebook.github.io/react-native/docs/touchablehighlight.html#underlaycolor

@kirankalyan5:
Hello congratulations on the module. Can this effect be done on the module?

Code:

import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View
} from 'react-native';

import SegmentedControlTab from 'react-native-segmented-control-tab'
 // 3.2.1

export default class ExampleMain extends Component {
    constructor(props) {
        super(props)
        this.state = {
            customStyleIndex: 0,
        }
    }

    handleCustomIndexSelect = (index) => {
        this.setState({
            ...this.state,
            customStyleIndex: index,
        });
    }

    render() {
        return (
            <View style={styles.container}>
                <SegmentedControlTab
                    values={['Stai seguendo', 'Italiano', 'Tutto']}
                    //badges={[1, 2, 3]}
                    selectedIndex={this.state.customStyleIndex}
                    onTabPress={this.handleCustomIndexSelect}
                    borderRadius={10}
                    tabsContainerStyle={{ backgroundColor: '#212020', borderRadius: 10 }}
                    tabStyle={{ backgroundColor: '#212020', borderWidth: 0 }}
                    activeTabStyle={{ backgroundColor: '#141414', margin: 1, borderRadius: 10 }}
                    tabTextStyle={{ color: '#e5e5e5', fontWeight: 'bold', }}
                    activeTabTextStyle={{ color: '#fff' }} />
                {this.state.customStyleIndex === 0 &&
                    <Text style={styles.tabContent} > Tab one</Text>}
                {this.state.customStyleIndex === 1 &&
                    <Text style={styles.tabContent} > Tab two</Text>}
                {this.state.customStyleIndex === 2 &&
                    <Text style={styles.tabContent} > Tab three</Text>}
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        //justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#141414',
        padding: 10,
        paddingTop: 40,
    },
    tabContent: {
        color: '#fff',
        fontSize: 18,
        margin: 24
    },
});

Link:
https://snack.expo.io/BJfDpik4f

How can I reduce the size of the segment, as in the image?

P. S.
Because if I put the segregation in a view without problem style, do not you see?

The above happens, but as soon as the segments resize, the resizing stops. I switched to ArnaudRinquin/react-native-radio-buttons due to this, but it happened with that repo too. I'm not even sure where to mention this because it happens on both.

Noticing the divider between the second and third tab is not visible unless I tap and hold the third tab.

How to change the page when tab index changed?

    <SegmentedControlTab
        tabsContainerStyle={styles.tabsContainerStyle}
        tabStyle={styles.tabStyle}
        tabTextStyle={styles.tabTextStyle}
        activeTabStyle={styles.activeTabStyle}
        activeTabTextStyle={styles.activeTabTextStyle}






  tabsContainerStyle: {
      //custom styles
    },
    tabStyle: {
      //custom styles
      },
    tabTextStyle: {
      //custom styles
    },
    activeTabStyle: {
      //custom styles
      backgroundColor: '#D52C43'
      },
    activeTabTextStyle: {
      //custom styles
      backgroundColor: '#D52C43'
    },
    tabBadgeContainerStyle: {
      //custom styles
      backgroundColor: '#D52C43',
      color: '#D52C43'
    },
    activeTabBadgeContainerStyle: {
      //custom styles
    },
    tabBadgeStyle: {
      //custom styles
    },
    activeTabBadgeStyle: {
      //custom styles
    }

});

//

//

Hello @kirankalyan5, thanks for the nice component! I am wondering if you would be open to a PR for setting right and left borders a bit differently, because as it is now inner cells left and right borders join and double up. If You would like to keep the default as is, I could also make it based on an optional prop. I would simply omit the the left border on all except the first tab. Thanks in advance for your reply!

Why not use Native Segmented control on iOS and the custom one on Android since it would have better performance?

I used to use this code that worked perfectly on iOs but is causing the app to crash on Android devices :

                            <SegmentedControlTab
                                values={['Non', '1 pers', '2 pers', '3 pers']}
                                selectedIndex={this.state.selectedIndex}
                                onTabPress={this.handleIndexChange}
                                borderRadius={20}
                                tabsContainerStyle={{ height: 40, backgroundColor: uiTheme.palette.blue, borderRadius: 30, marginBottom: 15, }}
                                tabStyle={{ backgroundColor: uiTheme.palette.white, borderWidth: 0, borderColor: 'transparent' }}
                                activeTabStyle={{ backgroundColor: uiTheme.palette.blue, marginTop: 2 }}
                                tabTextStyle={{ color: uiTheme.palette.blue, fontFamily: 'Dosis-Regular' }}
                                activeTabTextStyle={{ color: uiTheme.palette.white }} />
                            />

The error is the following :

I solved it by simply removing the activeTabTextStyle property as the text is white by default in the activeTab. 👍

But the activeTabTextStyle is still not functionnal