I am newbie. Pls help with voice to text

i am learning by testing every example code i find in google.
so far did test asyc storage navigation qcode scanner. I am stuck with voice to text
i used this example as it said it work with expo.


Who can solve this voice to text problem?

Hi @alexk400

That article has a few deficiencies.

First, they start by running expo init ... which is deprecated. Their screenshot even shows that you should be using npx create-expo-app now. Their screenshot also shows that they are using node 17 when they should be using node 16.

So to start with, make sure you have node version 16 installed. e.g. if you’re using Homebrew on a Mac you can do:

brew install node@16

Then create the project like this:

npx create-expo-app --template

When the article talks about installing support for React Navigation it also includes @expo/vector-icons which are unrelated. So while there’s nothing wrong with installing it at the same time, I think it would have been better to do that as a separate step.

Also, if you go to the React Navigation installation instructions you will see that it tells you to do this:

npm install @react-navigation/native

and then for a managed Expo app you should also do this (Note: not npm install):

npx expo install react-native-screens react-native-safe-area-context

The article also installs support for bottom tabs and the installation instructions are as follows:

npm install @react-navigation/bottom-tabs

Since you want @expo/vector-icons you can install them as well, but with npx expo install instead of npm install to ensure you get the right version for the version of the Expo SDK that you are using:

npx expo install @expo/vector-icons

The article goes on to talk about running the app using expo start or npx expo run:ios / npx expo run:android.

First, expo start should be npx expo start these days.

Second, especially if you’re a beginner, you should probably avoid npx expo run:... because it has the side effect of generating the native projects in the ios and android directories which could cause you some problems down the line if you’re not expecting that or don’t understand the consequences.

So I suggest you avoid npx expo run and either stick with Expo Go, or else create a development build (which is like a custom version of Expo Go) if you need to install something that is not supported by Expo Go.

@react-native-voice/voice is something that won’t work on Expo Go, so create a development build after installing it:

e.g.:

eas build -p android --profile development

Then install that on an Android emulator or physical device and use it instead of Expo Go when you run npx expo start.

After talking about running the app, the article mentions an error related to react-native-safe-area-context, but if you followed the React Navigation installation instructions then you will already have installed this.

The installation instructions in the article again add in some unrelated stuff (react-native-web). Also, you no longer need to install react-native-gesture-handler manually with current versions of React Navigation.

If you want to try the web version of the app you can run npx expo start and press "w". That will tell you the following:

It looks like you're trying to use web support but don't have the required
dependencies installed.

Please install react-native-web@~0.18.10, react-dom@18.2.0, @expo/webpack-config@^18.0.1 by running:

npx expo install react-native-web@~0.18.10 react-dom@18.2.0 @expo/webpack-config@^18.0.1

If you're not using web, please ensure you remove the "web" string from the
platforms array in the project Expo config.

So, as per the above instructions, to add web support you can do this:

npx expo install react-native-web@~0.18.10 react-dom@18.2.0 @expo/webpack-config@^18.0.1

Note: Whenever you install new dependencies you should create a new development build and kill and restart npx expo start. (Technically, depending on what you’re installing you might not need to rebuild, but you still need to restart npx expo start.)

The article implements Record/index.tsx as a React Component class. While this is not wrong, it’s more common these days for people to use function components. I haven’t checked to see how much effort it would be to convert it to a function component.

I haven’t looked at the rest of the article.

That do not solve voice speech ios problem. There is no error with showing UI in web. So its something else. if you can make that example work in ios , let me know.

All packages are installed. No error except when run ios by scanned qbar code to load app… then those error pops up

Did you run it in a development build or Expo Go. As explained above, it will not work in Expo Go.
Did you run npx expo run:ios? If so, I suggest you remove the ios directory, avoid using npx expo run:ios and instead create a development build.

If it doesn’t work, perhaps try contacting the author of the article.