[Android] "RNSketchView" does not exits

[tienlm1509]

[keshavkaul]

@tienlm1509 Please provide more information like:

1. React-Native version.
2. Steps to reproduce the issue.
3. Description

[minhnhatspk]

The same problem!

"react-native": "0.47.2",

[vccabral]

$ create-react-native-app AwesomeProject
$ cd AwesomeProject
$ npm run eject
$ yarn add react-native-sketch-view
$ react-native link react-native-sketch-view

import React, { Component } from 'react';
import {
    View,
    Text,
    TouchableHighlight
} from 'react-native';
import SketchView from 'react-native-sketch-view';

const sketchViewConstants = SketchView.constants;

const tools = {};

tools[sketchViewConstants.toolType.pen.id] = {
    id: sketchViewConstants.toolType.pen.id,
    name: sketchViewConstants.toolType.pen.name,
    nextId: sketchViewConstants.toolType.eraser.id
};
tools[sketchViewConstants.toolType.eraser.id] = {
    id: sketchViewConstants.toolType.eraser.id,
    name: sketchViewConstants.toolType.eraser.name,
    nextId: sketchViewConstants.toolType.pen.id
};


export default class HandNote extends Component {
    constructor(props) {
        super(props);
        this.state = {
            toolSelected: sketchViewConstants.toolType.pen.id
        };
    }

    isEraserToolSelected() {
        return this.state.toolSelected === sketchViewConstants.toolType.eraser.id;
    }

    toolChangeClick() {
        this.setState({toolSelected: tools[this.state.toolSelected].nextId});
    }

    getToolName() {
        return tools[this.state.toolSelected].name;
    }

    onSketchSave(saveEvent) {
        this.props.onSave && this.props.onSave(saveEvent);
    }

   render() {
        return (
            <View style={{flex: 1, flexDirection: 'column'}}>
                <SketchView style={{flex: 1, backgroundColor: 'red'}} ref="sketchRef" 
                selectedTool={this.state.toolSelected} 
                onSaveSketch={this.onSketchSave.bind(this)}
                localSourceImagePath={this.props.localSourceImagePath}/>
        
                <View style={{ flexDirection: 'row', backgroundColor: '#EEE'}}>
                    <TouchableHighlight underlayColor={"#CCC"} style={{ flex: 1, alignItems: 'center', paddingVertical:20 }} onPress={() => { this.refs.sketchRef.clearSketch() }}>
                        <Text style={{color:'#888',fontWeight:'600'}}>CLEAR</Text>
                    </TouchableHighlight>
                    <TouchableHighlight underlayColor={"#CCC"} style={{ flex: 1, alignItems: 'center', paddingVertical:20, borderLeftWidth:1, borderRightWidth:1, borderColor:'#DDD' }} onPress={() => { this.refs.sketchRef.saveSketch() }}>
                        <Text style={{color:'#888',fontWeight:'600'}}>SAVE</Text>
                    </TouchableHighlight>
                    <TouchableHighlight underlayColor={"#CCC"} style={{ flex: 1, justifyContent:'center', alignItems: 'center', backgroundColor:this.isEraserToolSelected() ? "#CCC" : "rgba(0,0,0,0)" }} onPress={this.toolChangeClick.bind(this)}>
            <Text style={{color:'#888',fontWeight:'600'}}>ERASER</Text>
                    </TouchableHighlight>
                </View>
            </View>
        );
    }
}

Warning: Native component for "RNSketchView" does not existI

[ahaus]

Check the installation steps at described in the Getting Started section. The native library has to be linked properly.

....

1. $ npm install react-native-sketch-view --save or $ yarn add react-native-sketch-view
2. $ react-native link react-native-sketch-view
3. For iOS, open Application Project in Xcode and find RNSketchView project under Libraries Folder. Drag SketchViewContainer.xib into your application project, adding a folder reference instead of copying. ....

[ahaus]

I had to rename the Java package name (com.reactlibrary) because it clashed with the RNSqlite2 module. Maybe this is an issue.

[vccabral]

OK, I had trouble with the react-native-sketch as well. My guess was that it was the injection process. Are there steps to the injections process I should take or do you recommend not using expo?

[keshavkaul]

@vccabral create-react-native-app has a limitation on using only native libraries provided by react. You will have to eject your app and try linking this package. You can read the docs for eject in the create-react-native-app repo

[vccabral]

I am ejecting the project as per the docs but I am still receiving this error. I hypothesize that there something different about an ejected projected compared to a "normal" project using "react-init" that makes this library not work.

[vccabral]

After creating a new app, ejecting, and installing the dependencies, I ran through xcode:

2017-10-11 16:09:38.484130-0400 AwesomeProject[11628:628399] *** Terminating app due to uncaught exception 'NSInternalInconsistencyException', reason: 'Could not load NIB in bundle: 'NSBundle </Users/bracero/Library/Developer/CoreSimulator/Devices/B3311989-ED08-4655-BC8D-0A2A82428FCD/data/Containers/Bundle/Application/8AA6B160-3296-429B-8197-CD28103A7909/AwesomeProject.app> (loaded)' with name 'SketchViewContainer''

[keshavkaul]

@vccabral Did you do this mentioned in README?

For iOS, open Application Project in Xcode and find RNSketchView project under Libraries Folder.
Drag SketchViewContainer.xib into your application project, adding a folder reference instead of copying.

[vccabral]

I don't see RNSketchView in the Libraries folder.

[Mactub07]

@minhnhatspk , you should manually change node-module: add these strings in index.js inside node-module import React, { Component } from 'react'; import PropTypes from 'prop-types';

instead of import React, { Component, PropTypes } from 'react';

it will fix the problem

[rori4]

@Mactub07 Have the same problem as the issue. The suggested solution does not solve the problem for me. I am trying to run tge application on Android

[Mactub07]

@rori4 , could you provide screen with error and react-native version? did you run "link" module?

[rori4]

@Mactub07 react-native: 0.52.0

I changed the prototype import to import PropTypes from 'prop-types'; as you suggested. Also I have ran the react-native link command. I got this as message:

rnpm-install info iOS module react-native-sketch-view is already linked

However it linked only the iOS it seems. There was no message for the android. Is this normal?

[Mactub07]

pls try run "react-native link react-native-sketch-view" like in module description

[rori4]

@Mactub07 Yes I did the same command as in the description react-native link react-native-sketch-view

[Mactub07]

could you able manually link module for Android side?

[rori4]

@Mactub07 Any idea how can I do that? I am searching for 2 hours now and I can find only tutorials for iOS manual linking. Even in the documentation it is explained only for iOS

[Mactub07]

I didn't test in on RN-0.52 (now I'm on RN-0.49.5) but it should be smth like that

first step : make sure that you add in settings.gradle include ':react-native-sketch-view' project(':react-native-sketch-view').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-sketch-view/android') http://prntscr.com/ie4ae0

[Mactub07]

second step : http://prntscr.com/ie4ebp

add this string "import com.reactlibrary.RNSketchViewPackage;" in MainApplication.java

[Mactub07]

third step http://prntscr.com/ie4f6u

add this one "new RNSketchViewPackage()"

[Mactub07]

add this one http://prntscr.com/ie4fxd

compile project(':react-native-sketch-view')

[rori4]

@Mactub07 This was very helpful. It helped me realise that I was creating expo projects that are not linking the packages correctly. I created a new project with react-native init and did everything as in the readme and it worked! Thanks a lot for the help :)

[chulijimmi]

Hi guys hope this one help you.

1. If you find error some PropTypes bla bla bla .number is about PropTypes is not use in React since version 16 so you should install manually with npm install --save prop-types.

2. Edit Your_Project_Folder/node_modules/react-native-sketch-view/index.js

Remove PropTypes from import React {...... Add it PropTypes from 'prop-types'

So It's looks like

import React, { Component } from 'react';
import PropTypes from 'prop-types';

3. Based on react-native build life cycle you should clean the build first when you are find error on the library that you install on it. To clean you can use cd android && ./gradlew clean

4. The last build again your project with react-native run-android

I hope this one help you, @keshavkaul Hi dude, I think the branch master still use PropTypes from React, would you like to change it.

[ajaykumarbl]

Hi guy’s, did anyone has the same issue? Building an app for Android with React-Native fails with this error : more than one library with package name com.reactlibrary. react-native": "0.55.4”

How to change the package name.

Thanks in advance.

[Mactub07]

@ajaykumarbl , you should just replace default name 'com.reactlibrary.' to other one, for ex , it could be 'com.reactlibraryScatch', then http://prntscr.com/k1zvog : you should change folder to your name , and then replace everywhere 'com.reactlibrary.' on 'com.reactlibraryScatch' http://prntscr.com/k1zwe4