Example does not work on windows and the slider renders nothing.

[miniwangdali]

Environment

Windows 11 23H2

react-native info output

// react-native info
System:
  OS: Windows 11 10.0.22631
  CPU: (20) x64 Intel(R) Core(TM) i9-10900X CPU @ 3.70GHz
  Memory: 58.85 GB / 95.71 GB
Binaries:
  Node:
    version: 20.12.2
    path: C:\Program Files\nodejs\node.EXE
  Yarn:
    version: 1.22.19
    path: C:\Program Files (x86)\Yarn\bin\yarn.CMD
  npm:
    version: 10.5.0
    path: C:\Program Files\nodejs\npm.CMD
  Watchman: Not Found
SDKs:
  Android SDK: Not Found
  Windows SDK:
    AllowDevelopmentWithoutDevLicense: Enabled
    AllowAllTrustedApps: Enabled
    Versions:
      - 10.0.17763.0
      - 10.0.18362.0
      - 10.0.19041.0
      - 10.0.22000.0
      - 10.0.22621.0
IDEs:
  Android Studio: Not Found
  Visual Studio:
    - 17.10.35027.167 (Visual Studio Enterprise 2022)
    - 15.9.34930.103 (Visual Studio Enterprise 2017)
    - 16.11.34931.43 (Visual Studio Enterprise 2019)
Languages:
  Java: 11.0.1
  Ruby: Not Found
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.73.5
    wanted: 0.73.5
  react-native-windows:
    installed: 0.73.11
    wanted: 0.73.11
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

• are you using the new architecture?
  no

• which version of react & react-native are you using?

    "react": "18.2.0",
    "react-native": "0.73.5",

Description

I noticed that the slider renders nothing on Windows after upgrading to 4.5.2. It works on version 4.4.2.

Then I try to use the example app to see if it's my setup causing the problem.

But the example app does not work on Windows. I follow the readme to run example app and it throws error "RNCViewPager" was not found in the UIManager.. It seems react native view pager fails to autolink in RNW. So I went ahead and delete the references related to the view pager since I was just testing slider itself. This time the app runs, but the slider renders nothing, no handle to grab and no track to see.

I start example app by:
cloning the repo -> npm install -> npm run example-windows.

Reproducible Demo

Just run example app in Windows 11.

[tero-paananen]

Same issue on Windows 10. No rendering no errors.

@react-native-community/slider: 4.5.2
react-native: "0.74.6
react-native-windows: 0.74.26,

import React from 'react';
import {
  AppRegistry,
  View,
} from 'react-native';

import Slider from '@react-native-community/slider';

const App = () => {
  const [value, setValue] = React.useState(15);

  return (
    <View style={{ flex: 1, padding: 40 }}>
      <View style={{ width: 400, height: 100 }}>
        <Slider
          value={value}
          disabled={false}
          step={1}
          minimumValue={1}
          maximumValue={30}
          onValueChange={setValue}
          style={{ width: 400, height: 80 }}
        ></Slider>
      </View>
    </View>
  );
};

AppRegistry.registerComponent('MyApp', () => App);

[tero-paananen]

When setting height into defaultSlider start it to be visible also on Windows

// @react-native-community\slider\src\utils\styles.ts 
defaultSlider: { height: Platform.OS === 'windows' ? 30 : 40 },

Style is build in prepare into @react-native-community\slider\dist\utils\styles.js. So i actually add height into this file to test this.

[tero-paananen]

@react-native-community+slider+4.5.2.patch

@draggie @BartoszKlonowski

[tero-paananen]

This PR #615 try to give posibility to adjust height via props.sliderStyle

[ashish3408]

is it working for anyone? this does not render anything on RNW.

[tero-paananen]

is it working for anyone? this does not render anything on RNW.

Works us with the patch above. Tested on RNW 0.76.x. Try give some height for the component in @react-native-community\slider\src\utils\styles.ts