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

Question

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

Answer 1

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