Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

folly::toJson: JSON object value was a Nan or INF #115

Closed
shexiaoheng opened this issue Dec 31, 2015 · 14 comments
Closed

folly::toJson: JSON object value was a Nan or INF #115

shexiaoheng opened this issue Dec 31, 2015 · 14 comments

Comments

@shexiaoheng
Copy link

@shexiaoheng shexiaoheng commented Dec 31, 2015

error occurred " folly::toJson: JSON object value was a Nan or INF " in android

var ScrollableTabView = require('react-native-scrollable-tab-view');

var App = React.createClass({
  render() {
    return (
        <View style={styles.container}>
             <ScrollableTabView>
                 <ReactPage tabLabel="React" />
                 <FlowPage tabLabel="Flow" />
                 <JestPage tabLabel="Jest" />
            </ScrollableTabView>
         </View>
    );
  }
}

var styles = StyleSheet.create({
  container: { 
        flex: 1, 
        flexDirection: 'column',
        justifyContent: 'center',
        // alignItems: 'center',    // This prop is the wrong location, but i don't know why .
        backgroundColor: '#fff',
    },
});

when i used the prop " alignItems: 'center' " , the error occurs .

@smallsaucepan
Copy link

@smallsaucepan smallsaucepan commented Jan 11, 2016

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

Loading

@shexiaoheng
Copy link
Author

@shexiaoheng shexiaoheng commented Jan 11, 2016

Loading

@smallsaucepan
Copy link

@smallsaucepan smallsaucepan commented Jan 11, 2016

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?

Loading

@shexiaoheng
Copy link
Author

@shexiaoheng shexiaoheng commented Jan 11, 2016

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

Loading

@smallsaucepan
Copy link

@smallsaucepan smallsaucepan commented Jan 11, 2016

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.

Loading

@shexiaoheng
Copy link
Author

@shexiaoheng shexiaoheng commented Jan 12, 2016

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

Loading

@robinsingh1
Copy link

@robinsingh1 robinsingh1 commented Jan 13, 2016

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

Loading

@wvengen
Copy link

@wvengen wvengen commented Jan 15, 2016

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

Loading

@lesliesam
Copy link

@lesliesam lesliesam commented Mar 10, 2016

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>
    )`

Loading

@liaq192
Copy link

@liaq192 liaq192 commented Mar 21, 2016

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.)

witherror
withouterror

index.android.txt

Loading

@mrozbarry
Copy link

@mrozbarry mrozbarry commented Apr 27, 2016

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?

Loading

@roysG
Copy link

@roysG roysG commented Sep 20, 2016

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

Loading

@ammichael
Copy link

@ammichael ammichael commented Sep 21, 2016

I also have this problem. RN 0.32

Loading

@ptomasroos
Copy link
Owner

@ptomasroos ptomasroos commented Oct 25, 2018

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

Loading

@ptomasroos ptomasroos closed this Oct 25, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
10 participants