0

Hello there,  I'm working on a Mendix Native Mobile app, and I encountered the following error when tapping a button that triggers a nanoflow. Here's the error code.   I’m building a mobile application where I create a custom Mendix Native widget that integrates TTS (Text-to-Speech) and STT (Speech-to-Text) functionalities using React Native libraries. The goal is to use these voice features seamlessly within my Mendix app. As a beginner in Mendix, I would be very grateful for any help or advice from the community.  // src/components/SttsComponent.tsx import { createElement, useEffect, useState, ReactElement } from "react"; import { mergeNativeStyles } from "@mendix/pluggable-widgets-tools"; import { Text, View } from "react-native"; import Tts from "react-native-tts"; import Voice from "@react-native-voice/voice"; import { CustomStyle } from "../SttsReactTest"; interface SttsComponentProps { name?: string; style: CustomStyle[]; textToRead?: string; onSpeechResult?: (text: string) => void; } const defaultStyle: CustomStyle = { container: {}, label: {} }; export function SttsComponent({ style = [], textToRead, onSpeechResult }: SttsComponentProps): ReactElement { const [isListening, setIsListening] = useState(false); const [partialResult, setPartialResult] = useState(""); const styles = mergeNativeStyles(defaultStyle, Array.isArray(style) ? style : []); useEffect(() => { Tts.setDefaultLanguage("ko-KR"); Tts.setDefaultVoice("com.apple.ttsbundle.Moira-compact"); Tts.setDefaultRate(0.6); Tts.setDefaultPitch(1.5); if (textToRead) { Tts.stop(); const speakOptions = { iosVoiceId: "com.apple.ttsbundle.Moira-compact", rate: 0.5, androidParams: { KEY_PARAM_STREAM: "STREAM_MUSIC" as const, KEY_PARAM_VOLUME: 1.0, KEY_PARAM_PAN: -1 } }; console.warn("textToRead :: ", textToRead); Tts.getInitStatus().then(() => Tts.speak(textToRead, speakOptions)); // getInitStatus : 초기화후 실행 함수 } const handleTtsFinish = () => { startListening(); }; Tts.addEventListener("tts-finish", handleTtsFinish); Voice.onSpeechResults = e => { const text = e.value?.[0]; if (text && onSpeechResult) { onSpeechResult(text); } setIsListening(false); }; Voice.onSpeechPartialResults = e => { const partial = e.value?.[0]; if (partial) { setPartialResult(partial); } console.warn("Final STT result", e); }; return () => { Tts.removeEventListener("tts-finish", handleTtsFinish); Voice.destroy().then(Voice.removeAllListeners); }; }, [onSpeechResult, textToRead]); const startListening = async () => { setIsListening(true); setPartialResult(""); // 이전 결과 초기화 try { await Voice.start("ko-KR"); } catch (err) { console.error("STT error:", err); } }; return ( <View style={styles.container}> <Text style={styles.label}>TTS: {textToRead}</Text> <Text style={styles.label}>Status: {isListening ? "🎙️ Listening..." : "Idle"}</Text> {isListening && partialResult && <Text style={styles.label}>🗣️ Partial: {partialResult}</Text>} </View> ); } //SttsReactTest.tsx import { createElement, ReactElement } from "react"; import { SttsReactTestProps } from "../typings/SttsReactTestProps"; import { SttsComponent } from "./components/SttsComponent"; import { Style } from "@mendix/pluggable-widgets-tools"; import { TextStyle, ViewStyle } from "react-native"; export interface CustomStyle extends Style { container: ViewStyle; label: TextStyle; } export function SttsReactTest({ textToRead, onSpeechResult, style }: SttsReactTestProps<CustomStyle>): ReactElement { console.warn("style prop:", style); return ( <SttsComponent textToRead={textToRead?.value || "Empty textToRead"} onSpeechResult={text => { if (onSpeechResult?.setValue) { onSpeechResult.setValue(text); } }} style={Array.isArray(style) ? style : []} /> ); } //SttsReactTestProps.d.ts /** * This file was generated from SttsReactTest.xml * WARNING: All changes made to this file will be overwritten * @author Mendix Widgets Framework Team */ import { CSSProperties } from "react"; import { EditableValue } from "mendix"; export interface SttsReactTestProps<Style> { name: string; style: Style[]; textToRead?: EditableValue<string>; onSpeechResult?: EditableValue<string>; } export interface SttsReactTestPreviewProps { /** * @deprecated Deprecated since version 9.18.0. Please use class property instead. */ className: string; class: string; style: string; styleObject?: CSSProperties; readOnly: boolean; renderMode: "design" | "xray" | "structure"; translate: (text: string) => string; textToRead: string; onSpeechResult: string; }  

asked 2025-05-21

0 answers