SegmentedView takes all space in parent View?

[MossP]

trafficstars

Hi. I have tried using this component which looks great, thank you.

When I add it to my project other content gets pushed to the bottom of the view. I've styled the SegmentedView to see what space it is occupying and it appears to attempt to take all the empty space on the page.

Code Example:

    render: function() {
        var theTitles = ["Tab1","Tab2","Tab3","Tab4"];
        var currentTabContent = ( <View><Text>{theTitles[this.state.index]}</Text></View> );
        return (
            <View style={styles.container}>
                <SegmentedView
                    titles={theTitles}
                    index={this.state.index}
                    onPress={ index => this.setState({index})}
                    stretch
                    style={styles.segmentedView} />
                {currentTabContent}
                <View><Text>[contentArea]</Text></View>
                <View><Text>[contentArea]</Text></View>
                <View><Text>[contentArea]</Text></View>
            </View>
        );

    }

    var styles = StyleSheet.create({
        container: {
            backgroundColor:"#ffffff",
            flex: 1
        },
        segmentedView: {
            backgroundColor:"#ff9999"
        },
    });

If I remove the "flex:1" attribute from the container then the SegmentedView behaves, but the page layout is then affected.

Am I doing something wrong?

[MossP]

As a quick fix for anyone else experiencing this issue. Wrapping the SegmentedView in another View appears to be a valid workaround.

[lelandrichardson]

@MossP thanks for the kind words. This is something some others have had a problem with as well, and I will try and make a tweak so it's easier to work with.

The main issue is that the <SegmentedView> component is expecting to be in a container with flexDirection: 'row' applied to it. Otherwise, when the component stretches it will stretch vertically.

For your example, try wrapping the <SegmentedView> with a <View> with flexDirection: 'row' applied to it, and it should behave as advertised.

I will try and push a change shortly that makes this unnecessary.

[MossP]

No rush, I just thought I would ask? Wrapping it in a view with no styles attached appears to work fine in quashing the issue :) Thanks.