share ref with update method (#204)

* share ref with update method
callstack · Jul 14, 2020 · 5ceb08b · 5ceb08b
1 parent 01342b8
commit 5ceb08b
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -86,6 +86,7 @@ Check out the [example project](example) for more examples.
 - [`minimumTrackImage`](#minimumtrackimage)
 - [`thumbImage`](#thumbimage)
 - [`trackImage`](#trackimage)
+- [`ref`](#ref)
 
 ---
 
@@ -266,6 +267,16 @@ Assigns a single image for the track. Only static images are supported. The cent
 | ---------------------- | -------- | -------- |
 | Image.propTypes.source | No       | iOS      |
 
+---
+
+### `ref`
+
+Reference object.
+
+| Type             | Required | Platform |
+| ---------------- | -------- | -------- |
+| MutableRefObject | No       | web      |
+
 ## Contributing
 
 This project uses [yarn workspaces](https://classic.yarnpkg.com/en/docs/workspaces/) to handle its internal dependencies.

diff --git a/src/js/RNCSliderNativeComponent.web.js b/src/js/RNCSliderNativeComponent.web.js
@@ -310,6 +310,16 @@ const RCTSliderWebComponent = React.forwardRef(
       }
     };
 
+    React.useImperativeHandle(
+      forwardedRef,
+      () => ({
+        updateValue: val => {
+          updateValue(val);
+        },
+      }),
+      [updateValue],
+    );
+
     return (
       <View
         ref={containerRef}

diff --git a/src/typings/index.d.ts b/src/typings/index.d.ts
@@ -8,6 +8,10 @@ export interface SliderPropsAndroid extends ReactNative.ViewProps {
   thumbTintColor?: string;
 }
 
+export interface SliderRef {
+  updateValue(value: number): void;
+}
+
 export interface SliderPropsIOS extends ReactNative.ViewProps {
   /**
    * Assigns a maximum track image. Only static images are supported.
@@ -123,6 +127,11 @@ export interface SliderProps extends SliderPropsIOS, SliderPropsAndroid {
    * Should be a plural word, as singular units will be handled.
    */
   accessibilityIncrements?: Array<string>;
+
+  /**
+   * Reference object.
+   */
+  ref: React.MutableRefObject<SliderRef>;
 }
 
 /**