Hi @shexiaoheng. I'm seeing this too, although without trying to set any component styles. Can you please post some more details about your environment? npm, node versions, plus the node packages you have installed? Thanks J

@smallsaucepan

Thanks @shexiaoheng. This is what I see with react-native@0.18.0-rc and react-native-scrollable-tab-view@0.3.3. What versions are you on?

This was actually occurring for me because of styles (applied to a parent component). Having worked through the different permutations, perhaps you can verify a few test cases to see if your behaviour matches mine exactly?

This behaviour occurs for both alignItems and alignSelf, but only for values of flex-start, flex-end, center. However, stretch works fine. So does auto with alignSelf. Do you see the same?

@smallsaucepan yes , and i used react-native@0.17.0 and react-native-scrollable-tab-view@0.3.4.

Tried this on ios too. It has the same problem, although it did provide more of a clue as to what was happening.

At some point ScrollableTabView._handleLayout is called with a layout event. On ios that event arrives with the following values:
stretch => { y: 0, width: 320, x: 0, height: 568 }
center => { y: 0, width: 1.063384e+38, x: -5.31692e+37, height: 568 }

I'm only guessing, but presumably at some point those values are causing whacky math to happen, which ultimately causes a problem when serialising.

I also took a step back, and am wondering what is your expectation for the behaviour of alignItems center for the container? Although using center probably shouldn't error out like that, on stretch does seem to make more sense for first level children.

I'm just curious ，such use center is no problem at AndroidViewPager.

Im seeing this as well with "react-native-scrollable-tab-view": "^0.3.4" and react-native@0.17.0

I'm seeing this too with just ViewPagerAndroid on react-native@0.17.0
Indeed setting its container's alignItems: 'stretch' solves the problem.

I had the same issue when I adding a ViewPagerAndroid inside into a tabbar.
The fix is to add the width parameter into its parents' style. Like this:

`var {height, width} = Dimensions.get('window');

    return (
        <View style={[styles.wrapper, {width: width}]}>

            {this.renderViewPagers()}

        </View>
    )`

Hi , I have faced the same issue when nesting Scrollable-Tab-View within another Scrollable-Tab-View .

STV Version : react-native-scrollable-tab-view@0.4.0
React-Native-Version :
--- react-native-cli: 0.1.10
--- react-native: 0.21.0
The problem occurs when parent ScrollableTabView has property 'alignItems = 'center'.(Line : 93 in code).

and Second problem is even if it works , Nested ScrollableTabViews dont work properly. (For which i will file another bug in a moment.)

index.android.txt

I just wanted to comment, slightly off topic, that there is a similar issue using ViewPagerAndroid that is resolved, as @liaq192 mentions, by removing alignItems: 'center'. This may indicate a larger issue with react native on Android?

Why the bug is closes?
It is still happening , Is there any update, fix?

I also have this problem. RN 0.32

Closing as this issue is very old, feel free to open a new issue if its still happening in the latest release