Взаимодействие курсора 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, или же хотя б чтоб когда я нажимал на определенное место, курсор который управляется с кнопок моей клавиатуры, перестраивался в место нажатия