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

Environment

System: OS: macOS 10.14.6 CPU: (4) x64 Intel® Core™ 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/slider@2.0.0 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’; <Slider onValueChange={belaningsgrad => setState({ …state, belaningsgrad, }) } value={state.belaningsgrad} minimumValue={50} maximumValue={85} />

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Reactions: 14
  • Comments: 22

Commits related to this issue

Most upvoted comments

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

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

@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.

Same Problem: Mac, No Expo:

cd “ios Folder” pod install

solved it for me

@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.

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

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.

@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)