CODEWITHSUNDEEP
javascriptandroidreact-nativenpmslider
Deaner117
Deaner117

Reputation: 106

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

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!

Upvotes: 7

Views: 8561

Answers (7)

Anna Danilova
Anna Danilova

Reputation: 1

restart metro with clear cache helped

react-native start --clear-cache

Upvotes: 0

Brimby
Brimby

Reputation: 922

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.

Upvotes: 2

Usman NAzir
Usman NAzir

Reputation: 11

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)}
            />

Upvotes: 1

Tanzeel Ur Rehman
Tanzeel Ur Rehman

Reputation: 39

run command in vs code terminal

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

Upvotes: 0

Deaner117
Deaner117

Reputation: 106

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.

Upvotes: 1

talha_ah
talha_ah

Reputation: 376

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.

Upvotes: -3

Californium
Californium

Reputation: 601

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!

Upvotes: 8

Related Questions