Invariant Violation: requireNativeComponent: "RCTDigitalInkView" was not found in the UIManager. react-native-digital-ink

23 Views Asked by At

i am having this error when using react-native-digital-ink in my react native expo project i have come already a longway in my expo project now i have to add a feature draw to text in my app and i am struggling with it and i could only found a single package for this "react-native-digital-ink" this error is consistent on android and ios both platforms.

ERROR Invariant Violation: requireNativeComponent: "RCTDigitalInkView" was not

found in the UIManager.

enter image description here

import * as React from 'react';
import { useRef } from 'react';
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import DigitalInk, { DigitalInkView } from 'react-native-digital-ink';

const Canvas = () => {
    const [result, setResult] = React.useState<void>();
    const [status, setStatus] = React.useState(true);
    const digitalInkView1: any = useRef();

    const onClick = (e: any) => {
        setStatus(!status);
        console.log('onClick', e.nativeEvent);
    };

    const onDrawStart = (e: any) => {
        console.log('onDrawStart', e.nativeEvent);
    };

    const onDrawEnd = (e: any) => {
        console.log('onDrawEnd', e.nativeEvent);
    };

    React.useEffect(() => {
        DigitalInk.show('Hello', DigitalInk.SHORT);
    }, []);

    const clearDigitalInkViewHandler = async () => {
        const languageTag = 'af';
        const result = await DigitalInk.downloadModel(languageTag);
        setResult(result);
    };

    return (
        <View style={styles.container}>
            <Text style={styles.resultText}>Result: {result}</Text>
            <DigitalInkView
                ref={digitalInkView1}
                status={status}
                onClick={onClick}
                onDrawStart={onDrawStart}
                onDrawEnd={onDrawEnd}
                style={{
                    width: '90%',
                    height: 400,
                    backgroundColor: '#dcdcdc',
                }}
            />
            <TouchableOpacity
                style={styles.button}
                onPress={clearDigitalInkViewHandler}
            >
                <Text style={styles.buttonText}>Recognize2</Text>
            </TouchableOpacity>
        </View>
    );
}

export default Canvas;
const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    },
    button: {
        width: '80%',
        height: 45,
        marginTop: 20,
        backgroundColor: '#0387AC',
        borderRadius: 15,
        justifyContent: 'center',
        alignItems: 'center',
    },
    buttonText: {
        fontSize: 20,
        color: 'white',
    },
    resultText: {
        fontSize: 30,
        marginBottom: 15,
    },
});

i have tried the package with both the platforms.

0

There are 0 best solutions below