Patch Suggestion for Slider component, Cannot read property 'onTrackLayout' of undefined and Invariant Violation "left": "<NaN>"

[margderaedt]

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch react-native-ui-lib@7.6.2 for the project I'm working on.

I was receiving the following error Cannot read property 'onTrackLayout' of undefined. I traced this down to the Slider component. This patch fixes this error in my project by passing onTrackLayout to the renderTrack() function call.

Here is the diff that solved my problem:

diff --git a/node_modules/react-native-ui-lib/src/components/slider/index.js b/node_modules/react-native-ui-lib/src/components/slider/index.js
index c9b6718..e4a0eec 100644
--- a/node_modules/react-native-ui-lib/src/components/slider/index.js
+++ b/node_modules/react-native-ui-lib/src/components/slider/index.js
@@ -561,7 +561,7 @@ export default class Slider extends PureComponent {
     return _isFunction(renderTrack) ? <View style={[styles.track, {
       backgroundColor: maximumTrackTintColor
     }, trackStyle]} onLayout={this.onTrackLayout}>
-          {renderTrack()}
+          {renderTrack({ onTrackLayout: this.onTrackLayout })}
         </View> : <View>
           <View style={[styles.track, trackStyle, {
         backgroundColor: disabled ? INACTIVE_COLOR : maximumTrackTintColor

I also received this error Invariant Violation: [1197,"RCTView",{"left":"<<NaN>>"}] is not usable as a native method argument which was coming from the Slider, I am not suggesting this fix in the patch because I hardcoded a value being used for my project. However, it seems like this.minInitialValue is NaN. The fix for this was:

  _minThumbStyles = {
-    left: this.minInitialValue
+    left: 0
  };

This issue body was partially generated by patch-package.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.