Open dondino77 opened 6 years ago
Please provide a snippet of code and make sure to link the module using react-native link react-native-range-slider
.
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', }, });
I was not able to reproduce your case, Please try to use the demo example and see if you still get this error.
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
Please try to link the module following manual linking steps and your problem should be solved.
@brad-lasecke Please provide a link to a repo that I can use to reproduce your case.
@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
@piyushsharma10 @dondino77 @ismnoiet same issue in android.. how to solve it?
This module currently doesn't support android, may be in the future. PRs are always welcomed.
When I access the component that contains WheelPicker I get this error message: Invariant violation: requireNativeComponent: "RangeSlider" was not found in the UIManager