React Native - WheelPicker : Invariant violation. Native component for 'WheelCurvedPicker' doesnot exist

0
votes

Installed WheelPicker by the following code

npm i react-native-wheel-picker --save

Added the following in settings.gradle

include ':react-native-wheel-picker'
project(':react-native-wheel-picker').projectDir = new File(settingsDir, '../node_modules/react-native-wheel-picker/android')

Added the following in app/build.gradle

compile project(':react-native-wheel-picker')

App.js

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


import Picker from 'react-native-wheel-picker'
var PickerItem = Picker.Item;

export default class App extends Component<{}> {

    constructor(props) {
        super(props);
        this.state = {
            selectedItem : 2,
            itemList: ['刘备', '张飞', '关羽', '赵云', '黄忠', '马超', '魏延', '诸葛亮']
        };
    }

    onPickerSelect (index) {
        this.setState({
            selectedItem: index,
        })
    }

    onAddItem = () => {
        var name = '司马懿'
        if (this.state.itemList.indexOf(name) == -1) {
            this.state.itemList.push(name)
        }
        this.setState({
            selectedItem: this.state.itemList.indexOf(name),
        })
    }

    render () {
        return (
            <View style={styles.container}>
                <Text style={styles.welcome}>
                    Welcome to React Native!
                </Text>
                <Picker style={{width: 150, height: 180}}
                    selectedValue={this.state.selectedItem}
                    itemStyle={{color:"white", fontSize:26}}
                    onValueChange={(index) => this.onPickerSelect(index)}>
                        {this.state.itemList.map((value, i) => (
                            <PickerItem label={value} value={i} key={"money"+value}/>
                        ))}
                </Picker>
                <Text style={{margin: 20, color: '#ffffff'}}>
                    你最喜欢的是：{this.state.itemList[this.state.selectedItem]}
                </Text>

                <Text style={{margin: 20, color: '#ffffff'}}
                        onPress={this.onAddItem}>
            怎么没有司马懿？
                </Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#1962dd',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
        color: '#ffffff',
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
});

I am getting an Error as below:

Invariant Violation: Native component for "WheelCurvedPicker" does not exist

This error is located at: in Item (at App.js:48) in WheelCurvedPicker (at WheelCurvedPicker.android.js:89) in WheelCurvedPicker (at App.js:43) in RCTView (at View.js:60) in View (at App.js:39) in App (at renderApplication.js:33) in RCTView (at View.js:60) in View (at AppContainer.js:102) in RCTView (at View.js:60) in View (at AppContainer.js:122) in AppContainer (at renderApplication.js:32) getViewConfig requireNativeComponent.js:107:6 get$1 ReactNativeRenderer-dev.js:14131:17 createInstance ReactNativeRenderer-dev.js:14295:27 completeWork ReactNativeRenderer-dev.js:10097:14 completeUnitOfWork ReactNativeRenderer-dev.js:12769:10 performUnitOfWork ReactNativeRenderer-dev.js:12941:32 workLoop ReactNativeRenderer-dev.js:12953:43 renderRoot ReactNativeRenderer-dev.js:12996:17 performWorkOnRoot ReactNativeRenderer-dev.js:13632:34 performWork ReactNativeRenderer-dev.js:13545:26 performSyncWork ReactNativeRenderer-dev.js:13506:16 requestWork ReactNativeRenderer-dev.js:13392:6 scheduleWorkImpl ReactNativeRenderer-dev.js:13259:24 scheduleWork ReactNativeRenderer-dev.js:13207:28 scheduleRootUpdate ReactNativeRenderer-dev.js:13930:17 _updateContainerAtExpirationTime ReactNativeRenderer-dev.js:13966:6 updateContainer ReactNativeRenderer-dev.js:13991:8 render ReactNativeRenderer-dev.js:14726:35 renderApplication renderApplication.js:49:21 run AppRegistry.js:102:10 runApplication AppRegistry.js:194:26 __callFunction MessageQueue.js:351:47 MessageQueue.js:116:26 __guardSafe MessageQueue.js:314:6 callFunctionReturnFlushedQueue MessageQueue.js:115:17

2
javascriptandroid-layoutreact-nativepicker

2 Answers

1
votes

This error is due to incomplete compilation of the project or the project has not been setup correctly.

Based on the installation steps provided by the library and you in the above question, i think you forgot to use the package.

Modify MainApplication

 import com.zyu.ReactNativeWheelPickerPackage;
    ......

    protected List<ReactPackage> getPackages() {
        return Arrays.<ReactPackage>asList(
            new MainReactPackage(), new ReactNativeWheelPickerPackage()
        );
    }

Rebuild and run after this

0
votes

The manual linking of WheelPicker in react native comes with these steps

add the following lines into their specific files:

settings.gradle :
path: gradle/setting.gradel 

include ':react-native-wheel-picker-android'
project(':react-native-wheel-picker-android').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-wheel-picker-android/android')

build.gradle :
path: app/build.gradel 

implementation project(':react-native-wheel-picker-android')

MainApplication.java :
path: app/src/main/java/MainApplication.java

in your List getPackages() method, add the following line just after new MainReactPackage(): new WheelPickerPackage() so your method should look like this: 

@Override
    protected List<ReactPackage> getPackages() {
      // Returning the Packages this way is better than calling the getPackages that was here
      //by default which overridden my FbModule
      return new ArrayList<>(Arrays.<ReactPackage>asList(
              new MainReactPackage(),
              new WheelPickerPackage()
      ));
    }

and then it should work