ExceptionsManager.js:126 RCTJSONStringify() encountered the following error: Floating point values must be finite. JSON does not support NaN or Infinity.

Bug report

Summary

When I use react-native-viewpager, debug mode show ExceptionsManager.js:126 RCTJSONStringify() encountered the following error: Floating point values must be finite. JSON does not support NaN or Infinity., Everything’s fine when I’m not using it.

Environment info

react-native info output:

System:
    OS: macOS Mojave 10.14.5
    CPU: (8) x64 Intel(R) Core(TM) i5-8257U CPU @ 1.40GHz
    Memory: 21.93 MB / 8.00 GB
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 13.12.0 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.4 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1
  IDEs:
    Android Studio: 4.0 AI-193.6911.18.40.6514223
    Xcode: 11.3.1/11C504 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.9.0 => 16.9.0
    react-native: 0.61.5 => 0.61.5
  npmGlobalPackages:
    react-native-git-upgrade: 0.2.7

Library version: 4.1.0

Steps to reproduce

import ViewPager from '@react-native-community/viewpager';

1. open Debugging
2. render ViewPager

Describe what you expected to happen:

When I use react-native-viewpager, debug mode show ExceptionsManager.js:126 RCTJSONStringify() encountered the following error: Floating point values must be finite. JSON does not support NaN or Infinity.

Reproducible sample code

<ViewPager
    style={{ flex: 1 }}
    initialPage={0}
    ref={this.viewPager}
    showPageIndicator={false}
>
    <View key="1"></View>
    <View key="2"></View>
    <View key="3"></View>
</ViewPager>

[gabrielbull]

Here’s the patch file in the meantime. You can use patch-package to patch after a yarn install.

diff --git a/node_modules/@react-native-community/viewpager/ios/ReactNativePageView.m b/node_modules/@react-native-community/viewpager/ios/ReactNativePageView.m
index 0af0f44..6685e46 100644
--- a/node_modules/@react-native-community/viewpager/ios/ReactNativePageView.m
+++ b/node_modules/@react-native-community/viewpager/ios/ReactNativePageView.m
@@ -325,9 +325,13 @@ - (void)scrollViewDidScroll:(UIScrollView *)scrollView {
     CGPoint point = scrollView.contentOffset;
     float offset = 0;
     if (self.orientation == UIPageViewControllerNavigationOrientationHorizontal) {
-        offset = (point.x - self.frame.size.width)/self.frame.size.width;
+        if (self.frame.size.width != 0) {
+            offset = (point.x - self.frame.size.width)/self.frame.size.width;
+        }
     } else {
-        offset = (point.y - self.frame.size.height)/self.frame.size.height;
+        if (self.frame.size.height != 0) {
+            offset = (point.y - self.frame.size.height)/self.frame.size.height;
+        }
     }
     if(fabs(offset) > 1) {
         offset = offset > 0 ? 1.0 : -1.0;

[troZee]

Thank you guys @skychx and @gabrielbull for cooperation 😄

In case of any problem or proposition, feel free to create the new issue.