React-native-slider: Invariant Violation: requireNativeComponent: "RNCSlider" was not found in the UIManager.

[codler]

Environment

System:
OS: macOS 10.14.6
CPU: (4) x64 Intel(R) Core(TM) i5-5257U CPU @ 2.70GHz
Memory: 279.09 MB / 8.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 12.10.0 - /usr/local/bin/node
npm: 6.10.3 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 12.4, macOS 10.14, tvOS 12.4, watchOS 5.3
Android SDK:
API Levels: 23, 28
Build Tools: 28.0.3
System Images: android-28 | Google APIs Intel x86 Atom
IDEs:
Android Studio: 3.3 AI-182.5107.16.33.5199772
Xcode: 10.3/10G8 - /usr/bin/xcodebuild
npmPackages:
react: 16.8.6 => 16.8.6
react-native: 0.60.5 => 0.60.5
npmGlobalPackages:
react-native-cli: 2.0.1
react-native-git-upgrade: 0.2.7

Description

Im getting this error after npm install @react-native-community/[email protected] in iOS

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

This error is located at:
in RNCSlider (at Slider.js:247)
in ForwardRef(Slider) (at App.tsx:64)
in RCTText (at Text.js:159)
in TouchableText (at Text.js:283)
in Text (at App.tsx:62)
in RCTView (at View.js:35)
in View (at card.tsx:5)
in Card (at App.tsx:40)
in HomeScreen (at SceneView.tsx:93)
in StaticContainer
in StaticContainer (at SceneView.tsx:85)
in EnsureSingleNavigator (at SceneView.tsx:84)
in SceneView (at useDescriptors.tsx:109)
in RCTView (at View.js:35)
in View (at ResourceSavingScene.tsx:42)
in RCTView (at View.js:35)
in View (at ResourceSavingScene.tsx:26)
in ResourceSavingScene (at BottomTabView.tsx:212)
in RCTView (at View.js:35)
in View (at screens.native.js:124)
in ScreenContainer (at BottomTabView.tsx:202)
in RCTView (at View.js:35)
in View (at BottomTabView.tsx:201)
in BottomTabView (at createBottomTabNavigator.tsx:43)
in BottomTabNavigator (at App.tsx:103)
in EnsureSingleNavigator (at NavigationContainer.tsx:223)
in ForwardRef(NavigationContainer) (at NavigationNativeContainer.tsx:30)
in ForwardRef(NativeContainer) (at App.tsx:102)
in App (at renderApplication.js:40)
in RCTView (at View.js:35)
in View (at AppContainer.js:98)
in RCTView (at View.js:35)
in View (at AppContainer.js:115)
in AppContainer (at renderApplication.js:39)

getNativeComponentAttributes
getNativeComponentAttributes.js:29:4
get
ReactNativeViewConfigRegistry.js:104:25
renderRoot
[native code]:0
runRootCallback
[native code]:0
renderApplication
renderApplication.js:67:52
run
AppRegistry.js:114:10
runApplication
AppRegistry.js:213:26
callFunctionReturnFlushedQueue
[native code]:0

Reproducible Demo

import Slider from '@react-native-community/slider';
onValueChange={belaningsgrad =>
setState({
...state,
belaningsgrad,
})
}
value={state.belaningsgrad}
minimumValue={50}
maximumValue={85}
/>

[jefferson-docway]

Same here

[btechgroup]

same here :-(

[michalchudziak]

Thanks for reporting that, I'll check it out.

[mohmmd-ishtiaq]

Any update on this ?

[evelinamihailova]

I'm experiencing the same issue

[fredyonge]

Same issue, any update?

[wojteg1337]

Did you guys run pod install?

[ablankenship10]

Did you guys run pod install?

This is only for mac right? What about linux? I imagine we're all using Expo with this issue, does this module work with Expo?

EDIT: Seems #83 answers this question, and that is no, not without ejecting. I was under the impression native stuff worked if you just used react-native link packagename. Apparently this is also not the case?

[fredyonge]

Same Problem: Mac, No Expo:

cd "ios Folder"
pod install

solved it for me

[hzburki]

I had to quit the terminal and start it again after pod install to make it work for me.

[geka412315]

guys, you can use this slider from react native documentation instead.
https://facebook.github.io/react-native/docs/0.9/slider

[wmonecke]

@geka412315 We are all using this library because that one is deprecated and will eventually leave React Native Core.

I checked my Podfile and nothing was added after npm install @react-native-community/slider --save. Doing pod install will then do nothing.

Please make sure that you see this in your Podfile before doing pod install:

pod 'react-native-slider', :path => '../node_modules/@react-native-community/slider/react-native-slider.podspec'

This will actually install the pod. Please restart npm and build again.

[geka412315]

@geka412315 We are all using this library because that one is deprecated and will eventually leave React Native Core.

I checked my Podfile and nothing was added after npm install @react-native-community/slider --save. Doing pod install will then do nothing.

Please make sure that you see this in your Podfile before doing pod install:

pod 'react-native-slider', :path => '../node_modules/@react-native-community/slider/react-native-slider.podspec'

This will actually install the pod. Please restart npm and build again.

"react-native": "https://github.com/expo/react-native/archive/sdk-35.0.0.tar.gz",

"@react-native-community/slider": "^2.0.3",

.podspec file
require 'json'

package = JSON.parse(File.read(File.join(__dir__, 'package.json')))

Pod::Spec.new do |s|
s.name = "react-native-slider"
s.version = package['version']
s.summary = package['description']
s.license = package['license']

s.authors = package['author']
s.homepage = package['homepage']
s.platform = :ios, "9.0"

s.source = { :git => "https://github.com/react-native-community/react-native-slider.git", :tag => "v#{s.version}" }
s.source_files = "ios/*/.{h,m}"

s.dependency 'React'
end

what am I need to see in this file?

[wmonecke]

@geka412315

No, not that file. Go to ios/Podfile and open it.

````
target 'myReactNativeApp' do
pod 'React', :path => '../node_modules/react-native/'
pod 'React-Core', :path => '../node_modules/react-native/React'
pod 'React-DevSupport', :path => '../node_modules/react-native/React'
pod 'React-fishhook', :path => '../node_modules/react-native/Libraries/fishhook'
pod 'React-RCTActionSheet', :path => '../node_modules/react-native/Libraries/ActionSheetIOS'
pod 'React-RCTAnimation', :path => '../node_modules/react-native/Libraries/NativeAnimation'
pod 'React-RCTBlob', :path => '../node_modules/react-native/Libraries/Blob'
pod 'React-RCTImage', :path => '../node_modules/react-native/Libraries/Image'
pod 'React-RCTLinking', :path => '../node_modules/react-native/Libraries/LinkingIOS'
pod 'React-RCTNetwork', :path => '../node_modules/react-native/Libraries/Network'
pod 'React-RCTSettings', :path => '../node_modules/react-native/Libraries/Settings'
pod 'React-RCTText', :path => '../node_modules/react-native/Libraries/Text'
pod 'React-RCTVibration', :path => '../node_modules/react-native/Libraries/Vibration'
pod 'React-RCTWebSocket', :path => '../node_modules/react-native/Libraries/WebSocket'
pod 'React-cxxreact', :path => '../node_modules/react-native/ReactCommon/cxxreact'
pod 'React-jsi', :path => '../node_modules/react-native/ReactCommon/jsi'
pod 'React-jsiexecutor', :path => '../node_modules/react-native/ReactCommon/jsiexecutor'
pod 'React-jsinspector', :path => '../node_modules/react-native/ReactCommon/jsinspector'
pod 'yoga', :path => '../node_modules/react-native/ReactCommon/yoga'
pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec'
pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'

// make sure this one exists
pod 'react-native-slider', :path => '../node_modules/@react-native-community/slider/react-native-slider.podspec'
end
````

then do pod install

(There might be a case where you don't have a Podfile in the ios folder. If that is the case let me know)

[geka412315]

@wmonecke i have windows OS

[wmonecke]

@geka412315 I think we are misunderstanding each other. What version of React Native are you using? If it is 0.59 or lower, then just import { Slider } from 'react-native' as you said. When upgrading to 0.60 and above you will see the Podfile.

[geka412315]

@wmonecke thanks for explanation

[nikbelikov]

I had the same issue with RN < 60.
I solved with:
npm i @react-native-community/[email protected]
react-native link @react-native-community/slider
cd ios
pod install

thats all 😉

[fortydegrees]

Are there any plans to make this work with Expo 37?

[JaliJuhola]

Same error occured for me initial situation was was:

abstract_target 'application_pods' do

  target 'production_pods' do
   pod 'react-native-slider', :path => '../node_modules/@react-native-community/slider'
  end

  target 'local_pods' do
  end

  target 'staging_pods' do
  end

Solution was to move pod under abstract level:

abstract_target 'application_pods' do
  pod 'react-native-slider', :path => '../node_modules/@react-native-community/slider'
  target 'production_pods' do
  end

  target 'local_pods' do
  end

  target 'staging_pods' do
  end

[NischayaSharma]

For android users npx react-native link @react-native-community/slider and then rebuild the app using npx react-native run-android or yarn android solves the problem.