Error UIManager

[dondino77]

When I access the component that contains WheelPicker I get this error message: Invariant violation: requireNativeComponent: "RangeSlider" was not found in the UIManager

[ismnoiet]

Please provide a snippet of code and make sure to link the module using react-native link react-native-range-slider.

[dondino77]

import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View } from 'react-native';
import RangeSlider from 'react-native-range-slider';

export default class App extends Component {
render() {
return (
<View style={{ flex: 1, flexDirection: 'row' }}>
<RangeSlider
minValue={0}
maxValue={100}
tintColor={'#da0f22'}
handleBorderWidth={1}
handleBorderColor="#454d55"
selectedMinimum={20}
selectedMaximum={40}
style={{ flex: 1, height: 70, padding: 10, backgroundColor: '#ddd' }}
onChange={(data) => { console.log(data); }}
/>

);
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
});

[ismnoiet]

I was not able to reproduce your case, Please try to use the demo example and see if you still get this error.

[brad-lasecke]

I'm experiencing the same issue, I can import RangeSlider just fine, but when adding the component in the render, I get the error:

"Invariant Violation: requireNativeComponent: "RangeSlider" was not found in the UIManager.
This error is located at:
in RangeSlider (at index.js:13)"

I'm running React Native 0.56.0

Code Snippet (RangeSlider component copied and pasted from https://www.npmjs.com/package/react-native-range-slider):
`
import React from 'react';
import {Text, View} from 'react-native';
import RangeSlider from 'react-native-range-slider'

export class CustomRange extends React.Component {
render() {
return (
<View style={{flex: 1, flexDirection: 'row'}}>
<RangeSlider
style={{flex: 1, height: 70, padding: 10, backgroundColor: '#ddd', ...style}}
minValue={0}
maxValue={100}
tintColor={'#da0f22'}
handleBorderWidth={1}
handleBorderColor="#454d55"
selectedMinimum={20}
selectedMaximum={40}
onChange={ (data)=>{ console.log(data);} }
/>

)
}
}
`

Edit: For some reason I had to quit my simulator and terminal window running metro builder, re-run react-native run-ios and it began working

[ismnoiet]

Please try to link the module following manual linking steps and your problem should be solved.

[ismnoiet]

@brad-lasecke Please provide a link to a repo that I can use to reproduce your case.

[Ann1995]

[piyushsharma10]

@ismnoiet can you please help me. In IOS it working fine

IOS

ANDROID
But in android getting the error RangeSlider was not found in the UIManager

Here is the code

import RangeSlider from 'react-native-range-slider'

<RangeSlider
  disableRange={true}
  minValue={0}
  maxValue={350}
  tintColor='#d1d1d1'
  handleColor="#3977e3"
  handleBorderWidth={0}
  handleDiameter={15}
  lineHeight={5}
  hideLabels={true}
  handleBorderColor="#454d55"
  selectedMinimum={0}
  selectedMaximum={233}
  style={{flex: 1, height: 40}}
  onChange={ (data)=>{ console.log(data);} }
 />

Thanks

[adirzoari]

@piyushsharma10 @dondino77 @ismnoiet same issue in android.. how to solve it?

[ismnoiet]

This module currently doesn't support android, may be in the future. PRs are always welcomed.