ismnoiet / react-native-range-slider

The high-quality native iOS range slider for react native.
64 stars 10 forks source link

Error UIManager #5

Open dondino77 opened 6 years ago

dondino77 commented 6 years ago

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

ismnoiet commented 6 years ago

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

dondino77 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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

ismnoiet commented 5 years ago

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

Ann1995 commented 5 years ago

screenshot_1548257239

piyushsharma10 commented 5 years ago

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

IOS

screenshot 2019-02-08 11 08 58

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

screenshot 2019-02-08 11 02 43

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 commented 5 years ago

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

ismnoiet commented 5 years ago

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