alantoa / react-native-awesome-slider

🚀 An anwesome <Slider/> that supports various features haptic, lottie, animation, ballon, etc.
MIT License
228 stars 28 forks source link

Fix crash on Android when using cache #53

Closed jacobmolby closed 6 months ago

jacobmolby commented 6 months ago

I've have an issue on Android (probably also iOS, but I haven't seen it) where it crashes when using the cache property.

When the cache property is set before the maximumValue is being set (to something other than 0), it causes a crash like:

Invariant Violation: [18607,"RCTView",21,{"height":"100%","left":0,"position":"absolute","backgroundColor":-2130706433,"width":"<<NaN>>","collapsable":false}] is not usable as a native method argument

My application code looks something like:

//expo-video
<Video
  onPlaybackStatusUpdate={(status) => {
       // rest omitted
       if (status.isLoaded && status.playableDurationMillis) {
        cache.value = status.playableDurationMillis / 1000;
      }
   }}
  onLoad={(data) => {
       // rest omitted
    if (data.isLoaded) {
      const seconds = (data.durationMillis || 0) / 1000;
      // Set the max value of the slider (the duration of the video)
      max.value = seconds;
      // Mark the video as not loading anymore
      setIsLoading(false); // this is what shows the slider in my case.
    }}
/>

{!isLoading && (
<Slider
 maximumValue={max}
 cache={cache}
 //...and more
/>
)}

On iOS they're called in the correct order, however on Android the onPlaybackStatusUpdate must fire before the onLoad.

This PR makes sure we have a sliderTotalValue !== 0, which is what causes a NaN as being used as the width style of the cache, which in turn causes the crash.

alantoa commented 6 months ago

hey, @jacobmolby thanks for your PR! LGTM, going to release it

alantoa commented 6 months ago

released in v2.4.6 !