RNCSlider was not found in the UI Manager when trying to use @react-native-community/slider

Question

I'm trying to create a slider in my react native Android App, and relatively new to React Native. The React Native documentation says their Slider component is deprecated (https://reactnative.dev/docs/slider.html) and directs us to use @react-native-community/slider instead (https://github.com/react-native-community/react-native-slider/blob/master/README.md).

I installed the library in my project directory using npm install @react-native-community/slider --save.

The install succeeded and my versions in my package.json are as follows:

"dependencies": {
    "@react-native-community/slider": "^3.0.3",
    "react": "16.13.1",
    "react-native": "0.63.0" },

I am including the Slider in my source file with import Slider from '@react-native-community/slider';, however when ever I try to actually create a slider in my code with the <Slider> ... </Slider> tags, I get the following compile error:

ERROR Invariant Violation: requireNativeComponent: "RNCSlider" was not found in the UIManager.

I've been banging my head against the wall and can't figure out how to clear the error. I am on Windows 10 x64 developing for Android. Thanks in advance!

Sheik

Answer 1

The solution for me was to just run "npx react-native run-android" in my project directory rather than trying to use "npx react-native start". I'm not sure why this works, but it launches the metro server in another console window (using cli.js) rather than in powershell itself. This seems to solve the problem.

Historically I had been launching the app directly from my emulated phone OS, but this didn't work even if I had the metro server running in powershell.

Sheik

Answer 2

I've also faced this issue and if you've followed the setup instructions word by word, the solution should be:

1. Stop the Metro Bundler.
2. Stop the app on the simulator/physical device.
3. Run react-native-start.
4. Run react-native run-android or run the app on your physical device.
5. Done!

This is what fixed it for me for development on iOS. Hope this can be of help to you on Android as well!

Abdias

Thanks, but this didn't work for me. Turns out I had to avoid running react-native-start at all and just run react-native run-android. – Sheik

Spent a couple of hours whit this issue and I don't know why, but this answer worked for me! Thanks! – Esoteric

Answer 3

i found a solution that is working 100% delete node-modules folder and then install npm or yarn....

import Slider from '@react-native-community/slider';
 <Slider
              // value={100}
              maximumValue={40}
              minimumValue={20}
              step={4}
              minimumTrackTintColor={colors.chart.medium}
              maximumTrackTintColor={colors.primary.main}
              thumbTintColor={colors.primary.main}
              // onValueChange={(value: number) =>                                 setSliderValue(value)}
              onValueChange={(value: number) => console.log(value)}
            />

Kimkimball

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Encaenia

Answer 4

run command in vs code terminal

cd ios
pod install
cd ..
react-native run-ios
or
react-native android

Steak

Answer 5

For Expo users, if you're using a development build (rather than using Expo Go), don't forget to rebuild your dev build in order to include the native slider in the package. That was my issue.

Calendre

Answer 6

I tried @Californium's method to stop the Metro Bundler, Simulator, and re-run everything, but that didn't work for me. I also tried to link Slider, but that even didn't work for me.

react-native link @react-native-community/slider

I think You need to just

Import Slider form 'react-native'

This worked for me.

You can try all the steps, provided and if those didn't work. Use the slider from react-native.

Anikaanil

I want to avoid using the react-native slider as it's been deprecated. That's the whole reason for using react-native-community components. – Sheik