Fix rounding bug (#187)

* Fix rounding (#163)

* Add web to example, fix Android example

* Fix example instructions

Co-authored-by: Sharcoux <darksharcoux@hotmail.com>

.eslintignore

@@ -0,0 +1,10 @@
+node_modules/
+coverage/
+dist/
+lib/
+web-build/
+web-report/
+
+.expo/
+.yarn/
+.vscode/

.eslintrc.json

@@ -0,0 +1,20 @@
+{
+  "extends": "@react-native-community",
+  "env": {
+    "es6": true,
+    "jest": true
+  },
+  "globals": {
+    "it": true,
+    "expect": true,
+    "element": true,
+    "describe": true,
+    "by": true,
+    "device": true,
+    "beforeAll": true,
+    "beforeEach": true,
+    "afterAll": true,
+    "jest": true,
+    "jasmine": true
+  }
+}

.gitignore

@@ -58,3 +58,7 @@ buck-out/
 src/dist
 
 */ios/Pods
+
+# Expo
+.expo
+web-build

example/App.js

@@ -1,12 +1,3 @@
-/**
- * Sample React Native App
- * https://github.com/facebook/react-native
- *
- * @format
- * @flow
- * @lint-ignore-every XPLATJSCOPYRIGHT1
- */
-
 import React, {Component} from 'react';
 import {StyleSheet, Text, ScrollView, View} from 'react-native';
 import {examples} from './SliderExample';

example/README.md

@@ -1,6 +1,13 @@
 # Run the example locally
 
+## Set up
+
 - Clone the repository 
-- Run `yarn` to install the dependencies
-- Checkout to this directory `cd example`
-- Run `yarn run:android` or `yarn run:ios` to start packager and the app
+- Run `yarn` in root to install dependencies and again in `src` to create dist build
+- Run `npx pod-install` from the `example` directory
+
+## Start the app
+
+- Run `yarn run:android` to run on Android
+- Run `yarn run:ios` to run on iOS
+- Run `yarn run:web` to run on web

example/SliderExample.js

@@ -106,10 +106,10 @@ const styles = StyleSheet.create({
   },
 });
 
-exports.title = '<Slider>';
-exports.displayName = 'SliderExample';
-exports.description = 'Slider input for numeric values';
-exports.examples = [
+export const title = '<Slider>';
+export const displayName = 'SliderExample';
+export const description = 'Slider input for numeric values';
+export const examples = [
   {
     title: 'Default settings',
     render(): Element<any> {

example/app.json

@@ -1,4 +1,8 @@
 {
   "name": "example",
-  "displayName": "example"
+  "displayName": "example",
+  "expo": {
+    "name": "example",
+    "slug": "example"
+  }
 }

example/babel.config.js

@@ -0,0 +1,6 @@
+module.exports = function(api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+  };
+};

example/index.web.js

@@ -0,0 +1,8 @@
+import {registerRootComponent} from 'expo';
+
+import App from './App';
+
+// registerRootComponent calls AppRegistry.registerComponent('main', () => App);
+// It also ensures that whether you load the app in the Expo client or in a native build,
+// the environment is set up appropriately
+registerRootComponent(App);

example/ios/Podfile.lock

@@ -182,7 +182,7 @@ PODS:
     - React-cxxreact (= 0.61.2)
     - React-jsi (= 0.61.2)
   - React-jsinspector (0.61.2)
-  - react-native-slider (2.0.5):
+  - react-native-slider (3.0.0-rc.2):
     - React
   - React-RCTActionSheet (0.61.2):
     - React-Core/RCTActionSheetHeaders (= 0.61.2)
@@ -237,7 +237,7 @@ DEPENDENCIES:
   - React-jsi (from `../../node_modules/react-native/ReactCommon/jsi`)
   - React-jsiexecutor (from `../../node_modules/react-native/ReactCommon/jsiexecutor`)
   - React-jsinspector (from `../../node_modules/react-native/ReactCommon/jsinspector`)
-  - "react-native-slider (from `../node_modules/@react-native-community/slider`)"
+  - react-native-slider (from `../../src`)
   - React-RCTActionSheet (from `../../node_modules/react-native/Libraries/ActionSheetIOS`)
   - React-RCTAnimation (from `../../node_modules/react-native/Libraries/NativeAnimation`)
   - React-RCTBlob (from `../../node_modules/react-native/Libraries/Blob`)
@@ -285,7 +285,7 @@ EXTERNAL SOURCES:
   React-jsinspector:
     :path: "../../node_modules/react-native/ReactCommon/jsinspector"
   react-native-slider:
-    :path: "../node_modules/@react-native-community/slider"
+    :path: "../../src"
   React-RCTActionSheet:
     :path: "../../node_modules/react-native/Libraries/ActionSheetIOS"
   React-RCTAnimation:
@@ -325,7 +325,7 @@ SPEC CHECKSUMS:
   React-jsi: 32285a21b1b24c36060493ed3057a34677d58d09
   React-jsiexecutor: 8909917ff7d8f21a57e443a866fd8d4560e50c65
   React-jsinspector: 111d7d342b07a904c400592e02a2b958f1098b60
-  react-native-slider: 39208600e44f885e2d2c0510b5c6435a0f62d087
+  react-native-slider: 1659559d84c99bb050eea4111fa6e0b52f1c604b
   React-RCTActionSheet: 89b037c0fb7d2671607cb645760164e7e0c013f6
   React-RCTAnimation: e3cefa93c38c004c318f7ec04b883eb14b8b8235
   React-RCTBlob: d26ac0e313fbf14e7203473fd593ccaaeee8329e
@@ -340,4 +340,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: c57ebc9c17572d007c20bb8d19901226d73a2699
 
-COCOAPODS: 1.8.4
+COCOAPODS: 1.9.1

example/package.json

@@ -5,11 +5,16 @@
   "scripts": {
     "start": "node ../node_modules/react-native/local-cli/cli.js start",
     "run:android": "react-native run-android",
-    "run:ios": "react-native run-ios"
+    "run:ios": "react-native run-ios",
+    "run:web": "expo web"
   },
   "dependencies": {
+    "@react-native-community/slider": "./src",
+    "babel-preset-expo": "^8.2.1",
+    "expo": "^37.0.12",
     "react": "16.9.0",
+    "react-dom": "~16.9.0",
     "react-native": "0.61.2",
-    "@react-native-community/slider": "./src"
+    "react-native-web": "~0.11"
   }
-}
+}

package.json

@@ -13,26 +13,6 @@
       "/e2e/"
     ]
   },
-  "eslintConfig": {
-    "extends": "@react-native-community",
-    "env": {
-      "es6": true,
-      "jest": true
-    },
-    "globals": {
-      "it": true,
-      "expect": true,
-      "element": true,
-      "describe": true,
-      "by": true,
-      "device": true,
-      "beforeAll": true,
-      "beforeEach": true,
-      "afterAll": true,
-      "jest": true,
-      "jasmine": true
-    }
-  },
   "prettier": {
     "singleQuote": true,
     "trailingComma": "all",
@@ -70,4 +50,4 @@
       }
     }
   }
-}
+}

src/js/RNCSliderNativeComponent.web.js

@@ -241,12 +241,29 @@ const RCTSliderWebComponent = React.forwardRef(
       thumbStyle,
     );
 
+    const decimalPrecision = React.useRef(
+      calculatePrecision(minimumValue, maximumValue, step),
+    );
+    React.useEffect(() => {
+      decimalPrecision.current = calculatePrecision(
+        minimumValue,
+        maximumValue,
+        step,
+      );
+    }, [maximumValue, minimumValue, step]);
+
     const updateValue = useCallback(
       newValue => {
+        // Ensure that the value is correctly rounded
+        const hardRounded =
+          decimalPrecision.current < 20
+            ? Number.parseFloat(newValue.toFixed(decimalPrecision.current))
+            : newValue;
+
         // Ensure that the new value is still between the bounds
         const withinBounds = Math.max(
           minimumValue,
-          Math.min(newValue, maximumValue),
+          Math.min(hardRounded, maximumValue),
         );
         if (value !== withinBounds) {
           setValue(withinBounds);
@@ -323,6 +340,19 @@ const RCTSliderWebComponent = React.forwardRef(
   },
 );
 
+// We should round number with the same precision as the min, max or step values if provided
+function calculatePrecision(minimumValue, maximumValue, step) {
+  if (!step) {
+    return Infinity;
+  } else {
+    // Calculate the number of decimals we can encounter in the results
+    const decimals = [minimumValue, maximumValue, step].map(
+      value => ((value + '').split('.').pop() || '').length,
+    );
+    return Math.max(...decimals);
+  }
+}
+
 RCTSliderWebComponent.displayName = 'RTCSliderWebComponent';
 
 export default RCTSliderWebComponent;