value change does not change StepMarker position

package/package.json

@@ -35,6 +35,7 @@
     "@react-native/eslint-config": "0.76.3",
     "@react-native/metro-config": "0.76.3",
     "@react-native/typescript-config": "0.76.3",
+    "@testing-library/react-native": "^13.2.0",
     "@types/jest": "^28.1.8",
     "@types/react": "^18.2.6",
     "@types/react-test-renderer": "^18.0.0",

package/src/Slider.tsx

@@ -278,6 +278,10 @@ const SliderComponent = (
 
   const passedValue = Number.isNaN(value) || !value ? undefined : value;
 
+  useEffect(() => {
+    setCurrentValue(value);
+  }, [value]);
+
   useEffect(() => {
     if (lowerLimit >= upperLimit) {
       console.warn(

package/src/__tests__/Slider.test.tsx

@@ -1,89 +1,112 @@
+import {render, screen} from '@testing-library/react-native';
 import * as React from 'react';
-import renderer from 'react-test-renderer';
+import {MarkerProps} from '../../typings';
 import Slider from '../Slider';
-import {View} from 'react-native';
+import {Text, View} from 'react-native';
 
 describe('<Slider />', () => {
   it('renders enabled slider', () => {
-    const tree = renderer.create(<Slider />).toJSON();
+    render(<Slider />);
 
-    expect(tree).toMatchSnapshot();
+    expect(screen).toMatchSnapshot();
   });
 
   it('renders disabled slider', () => {
-    const tree = renderer.create(<Slider disabled />).toJSON();
+    render(<Slider disabled />);
 
-    expect(tree).toMatchSnapshot();
+    expect(screen).toMatchSnapshot();
   });
 
   it('accessibilityState disabled sets disabled={true}', () => {
-    const tree = renderer
-      .create(<Slider accessibilityState={{disabled: true}} />)
-      .toJSON();
+    render(<Slider accessibilityState={{disabled: true}} />);
 
-    expect(tree).toMatchSnapshot();
+    expect(screen).toMatchSnapshot();
   });
 
   it('disabled prop overrides accessibilityState.disabled', () => {
-    const tree = renderer
-      .create(<Slider disabled accessibilityState={{disabled: false}} />)
-      .toJSON();
+    render(<Slider disabled accessibilityState={{disabled: false}} />);
 
-    expect(tree).toMatchSnapshot();
+    expect(screen).toMatchSnapshot();
   });
 
   it('disabled prop overrides accessibilityState.enabled', () => {
-    const tree = renderer
-      .create(<Slider disabled={false} accessibilityState={{disabled: true}} />)
-      .toJSON();
+    render(<Slider disabled={false} accessibilityState={{disabled: true}} />);
 
-    expect(tree).toMatchSnapshot();
+    expect(screen).toMatchSnapshot();
   });
 
   it('renders a slider with custom props', () => {
-    const tree = renderer
-      .create(
-        <Slider
-          value={0.5}
-          minimumValue={-1}
-          maximumValue={2}
-          step={0.25}
-          minimumTrackTintColor={'blue'}
-          maximumTrackTintColor={'red'}
-          thumbTintColor={'green'}
-          onSlidingComplete={() => {}}
-          onValueChange={() => {}}
-          lowerLimit={0}
-          upperLimit={1}
-        />,
-      )
-      .toJSON();
-
-    expect(tree).toMatchSnapshot();
+    render(
+      <Slider
+        value={0.5}
+        minimumValue={-1}
+        maximumValue={2}
+        step={0.25}
+        minimumTrackTintColor={'blue'}
+        maximumTrackTintColor={'red'}
+        thumbTintColor={'green'}
+        onSlidingComplete={() => {}}
+        onValueChange={() => {}}
+        lowerLimit={0}
+        upperLimit={1}
+      />,
+    );
+
+    expect(screen).toMatchSnapshot();
   });
 
   it('renders a slider with custom stepMaker', () => {
-    const tree = renderer
-      .create(
+    render(
+      <Slider
+        value={2}
+        minimumValue={0}
+        maximumValue={4}
+        StepMarker={({stepMarked}) => {
+          return stepMarked ? (
+            <View>
+              <View style={{width: 10, backgroundColor: 'red'}} />
+            </View>
+          ) : (
+            <View>
+              <View style={{width: 10, backgroundColor: 'green'}} />
+            </View>
+          );
+        }}
+      />,
+    );
+
+    expect(screen).toMatchSnapshot();
+  });
+
+  it('Set custom thumbImage and stepMarker when value is changed', () => {
+    const {rerender} = render(<TestSlider value={2} />);
+    expect(screen.getByTestId('marked')).toHaveTextContent('C:2 I:2');
+
+    rerender(<TestSlider value={0} />);
+    expect(screen.getByTestId('marked')).toHaveTextContent('C:0 I:0');
+
+    expect(screen).toMatchSnapshot();
+
+    function TestSlider({value}: {value: number}) {
+      return (
         <Slider
-          value={2}
+          value={value}
           minimumValue={0}
           maximumValue={4}
-          StepMarker={({stepMarked}) => {
-            return stepMarked ? (
-              <View>
-                <View style={{width: 10, backgroundColor: 'red'}} />
-              </View>
-            ) : (
-              <View>
-                <View style={{width: 10, backgroundColor: 'green'}} />
-              </View>
-            );
-          }}
-        />,
-      )
-      .toJSON();
-
-    expect(tree).toMatchSnapshot();
+          StepMarker={TestStepMarker}
+        />
+      );
+    }
+
+    function TestStepMarker({index, currentValue, stepMarked}: MarkerProps) {
+      return (
+        <View>
+          <Text
+            testID={
+              stepMarked ? 'marked' : `marker_${index}`
+            }>{`C:${currentValue} I:${index}`}</Text>
+        </View>
+      );
+    }
   });
 });