Взаимодействие курсора textview с пользовательской клавиатурой в expo

Есть калькулятор, у него своя клавиатура, не ту что предлагает react native, однако если сделать поле ввода значений калькулятора textinput , т.е возможным для изменения , то курсор который появляется при нажатии на поле, взаимодействует только с клавиатурой самого react native , а не с моей созданной, есть ли способ убрать всплывающую клавиатуру самого react native при нажатии на textinput , и заставить курсор взаимодействовать с моей собственной клавиатурой?

нажатие цифры

const numPressed = (val, tip = "") => {
    setTooltip(tip);
    Vibrate();
    if (expr.join() === "0") {
        setExpr([val]);
    } else {
        let ret = [...expr]
        ret.splice(caretPosition, 0, val)
        setExpr([...ret])
    }
    setEqualled(false);

    setCaretPositon(caretPosition + 1)
}

нажатие кнопки

 const buttonPressed = (val, tip = "") => {
    let fact = '';

    let ret = [...expr]
    ret.splice(caretPosition, 0, val)
    setExpr([...ret])

    setEqualled(false);
    setCaretPositon(caretPosition + 1)
}

удаление

   const deleteHandler = () => {
    //Vibrate();
    if (expr.length > 0) {
        let _expr = [...expr];
        _expr.splice(caretPosition - 1, 1);
        if (_expr.length === 0) _expr.push(0)
        // }
        setExpr(_expr);
        if (caretPosition <= 1) {
            return
        }
        setCaretPositon(caretPosition - 1)
    }

}

сам textinput

const [caretPosition, setCaretPositon] = useState(0)

const NO_WIDTH_SPACE = "";

const highlight = string =>
    string.map((word, i) => (
        <Text key={i}>
            <Text style={i === caretPosition - 1 ? { backgroundColor: 'yellow' } : { backgroundColor: '#FFFF' }}>{word}</Text>
            {NO_WIDTH_SPACE}
        </Text>
    ));


const getResult = () => {


    return (<TextInput
        onContentSizeChange={x => {
        }}
        style={styles.expression}
        multiline={true}

        textAlign="right"
        textAlignVertical="bottom"
        editable={false}

    >{highlight(expr)}</TextInput>

    )

}

const Display = () =>
    <View style={styles.display}>
        {}
        <ScrollView showsVerticalScrollIndicator>
            {getResult()}
        </ScrollView>
        {}
    </View>

пример самой клавиатуры

 <View style={styles.row}>
            <TouchableOpacity style={styles.button} onPressIn={() => functionPressed("cbrt(", "cube root = ∛x")}>
                <StyledText style={styles.button}>∛</StyledText>
            </TouchableOpacity>
            <TouchableOpacity style={styles.buttonNumber} onPressIn={() => numPressed("7")}>
                <StyledText style={styles.buttonNumber}>7</StyledText>
            </TouchableOpacity>
            <TouchableOpacity style={styles.buttonNumber} onPressIn={() => numPressed("8")}>
                <StyledText style={styles.buttonNumber}>8</StyledText>
            </TouchableOpacity>
            <TouchableOpacity style={styles.buttonNumber} onPressIn={() => numPressed("9")}>
                <StyledText style={styles.buttonNumber}>9</StyledText>
            </TouchableOpacity>
            <TouchableOpacity style={styles.button} onPressIn={() => buttonPressed("*")}>
                <StyledText style={styles.button}>×</StyledText>
            </TouchableOpacity>
        </View>

пока что взаимодействие textinput и кнопок удаление и тд произвожу с помощью кнопок стрелочек которые определяют и двигают положение курсора

   const buttonCarretNavigare = (side) => {
    if (side > 0 && caretPosition >= expr.length || (side > 0 && expr.length === 1)) {
        return
    }
    else if (side < 0 && caretPosition <= 1) {
        return
    }

    setCaretPositon(caretPosition + side)
}

Помогите пожалуйста добавить взаимодействие курсора с пользовательской клавиатурой, и убрать при нажатии на textinput всплывающую клавиатуру reactnative, или же хотя б чтоб когда я нажимал на определенное место, курсор который управляется с кнопок моей клавиатуры, перестраивался в место нажатия


Ответы (0 шт):