Invariant Violation: [4113,"RNCSlider",{"value":"<<NaN>>"}] is not usable as a native method argument

[Omer2041]

Environment

System: OS: Windows 10 10.0.19042 CPU: (8) x64 Intel(R) Core(TM) i7-10510U CPU @ 1.80GHz Memory: 4.61 GB / 15.79 GB Binaries: Node: 16.5.0 - C:\Program Files\nodejs\node.EXE Yarn: Not Found npm: 7.22.0 - C:\Program Files\nodejs\npm.CMD Watchman: Not Found SDKs: Android SDK: Not Found Windows SDK: Not Found IDEs: Android Studio: Version 2020.3.0.0 AI-203.7717.56.2031.7678000 Visual Studio: Not Found Languages: Java: Not Found npmPackages: @react-native-community/cli: Not Found react: 17.0.2 => 17.0.2 react-native: ^0.66.2 => 0.66.2 react-native-windows: Not Found npmGlobalPackages: react-native: Not Found

Description

trying to attach the slider to number input. all working fine until i delete the number from the input then i get this: Invariant Violation: [4113,"RNCSlider",{"value":"<<NaN>>"}] is not usable as a native method argument

Code:

    <Slider
      style={styles.slider}
      step={1}
      minimumValue={0}
      maximumValue={10000}
      value={priceInNis}
      onValueChange={slideValue => setPriceInNis(parseInt(slideValue))}
      minimumTrackTintColor="#0074D9"
      maximumTrackTintColor="grey"
      thumbTintColor="#0074D9"
    />
    <Text style={styles.showMoney}>{priceInNis} ILS</Text>
    <View style={styles.label}>
      <TextInput
        keyboardType="number-pad"
        numeric
        style={styles.showMoney}
        placeholder="Enter Price"
        underlineColorAndroid="transparent"
        onChangeText={newSliderValue => {
          priceInNis === null
            ? setPriceInNis(0)
            : setPriceInNis(parseInt(newSliderValue));
        }}
        value={priceInNis}
        maxLength={10} //setting limit of input
      />
    </View>

Reproducible Demo

[BartoszKlonowski]

@Omer2041 I was able to reproduce this issue in the repro app and I will take a deeper look into it. Thank you for reporting!

[arkhvoid]

Isn't this is because priceInNis is NaN? Change value={priceInNis} to value={priceInNis || 0} should work.

[BartoszKlonowski]

@arkhvoid Yes, indeed - this will fix the issue in the code of the author 👍 I keep this open to implement some checking mechanism though, so I can avoid crashing the Slider in case of NaN or some other incorrect value. I have this in Backlog as this is quite a low hanging fruit, but as the same time I have some more higher-priority things to implement.

Thanks for your input here!

[fogg4444]

This code is full of points where it critically crashes if you accidentally pass NaN to a prop. Code defensively around this library

[arkhvoid]

I think it is good to have a panic or crash so that people know they are passing NaN. Silently changing the value is kind of bad behavior since people will think that there are no problems with their code. Or at least we should have some warning over this.

[BartoszKlonowski]

Well, this is something that could be considered, thanks @arkhvoid! I'm glad to hear from the community/users here, or through some reactions or even a new issue. For now, let's hold on a bit with releasing this change if so.