This library is stable for production? (expo & bare app)

[maoryadin]

This library is stable for production? i am wondering if it would work with expo/react native bare app.

[mhuynh5757]

Hi @maoryadin, thanks for reaching out! The library is stable and we're hard at work on a beta release, we don't expect the API to change in major ways. We haven't tested the SDK in Expo applications, but we have seen some of our customers getting it working on Expo. See related GitHub issues:
#102
#117
#128

[maoryadin]

Adding native code to Expo can be challenging, as it requires some expertise.

@interface AppDelegate ()

@property (nonatomic, strong) TwilioVoicePushRegistry *twilioVoicePushRegistry;

@end

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    // ...

    // Initialize PKPushRegistry at launch
    self.twilioVoicePushRegistry = [TwilioVoicePushRegistry new];
    [self.twilioVoicePushRegistry updatePushRegistry];

    return YES;
}

Do you have plans to offer support or develop an Expo module for this functionality?
It also necessary to add PushKit for iOS, which can be challenging to achieve with Expo.

[charliesantos]

Hi @maoryadin , we're currently evaluating whether we will support it, and if so, when. Feedback like yours definitely helps on prioritization. Let's keep this issue open and get a feel of the customer demand.

[ovidb]

@charliesantos
We would also be interested in support for Expo. I'm sure you're already familiar but probably the easiest way to go at it is to create a expo config plugin

[mhuynh5757]

Hi @ovidb, thanks for the feedback. We will take this into consideration when we align priorities as a team. It's on our radar!

[dwbelliston]

Does anyone have a POC of working with expo? Ive not had any luck yet, but also very unfamiliar with ios/android configs.

The root error im getting after adding to an expo project in expo go is that javascript is trying to access native code. Which makes sense since react-native-twilio is using native modules not provided by the expo go client.

So, im doing a custom dev client (still working on that), but I am not sure which native modules I am need to add?

Which file in the ios folder shows the modules being used?

Any tips would be awesome!

[maoryadin]

Does anyone have a POC of working with expo? Ive not had any luck yet, but also very unfamiliar with ios/android configs.

The root error im getting after adding to an expo project in expo go is that javascript is trying to access native code. Which makes sense since react-native-twilio is using native modules not provided by the expo go client.

So, im doing a custom dev client (still working on that), but I am not sure which native modules I am need to add?

Which file in the ios folder shows the modules being used?

Any tips would be awesome!

Yes, I was able to run the package with Expo, I will share the process when I get on my computer (probably on Sunday).

[dwbelliston]

I was able to make a bit more progress.

For others that might be trying to figure out the managed Expo path here is my journey so far:

After looking at this: #143

I realized that this project itself is doing the pushkit registration, so that is not something I need to try to add in manually.

So, what I did:

• From my expo project, i added the @twilio/voice-react-native-sdk package through yarn.
• Then, you need to create the 'custom dev client' through the expo, they have good docs on that but you run something like
  eas build --profile development --platform ios
• After that build works, you can install on your personal real device
• After that client is downloaded to your device, you should see your app icon
• The start the dev client server from your computer
  npx expo start --dev-client
• Opening up the app icon, I was able to run the app on my dev client, and make a call!

I need to setup the call handling and the incoming call notification still, but excited about being able to do an outbound call, without needed to 'eject' from expo

To all those building the project, thanks for the effort on this!

[MykolaKobetiakCloudGenie]

@dwbelliston Hi there, were you able to set up incoming calls? I have trouble with them. Outgoing works fine, but I am not receiving Voice.Event.CallInvite on IOS and Android.
I did expo development build and testing on real devices. With IOS I am receiving this error: "The specified device token is either malformed or not valid for the given environment." but Android is ok, with no errors, and at the same time no callInvite event.

Also, I am not sure how it has to work. Will the native incoming call screen/notification show by default on Android/IOS or do I have to do some additional setup?

[dwbelliston]

Hey @MykolaKobetiakCloudGenie - sorry for the delay, I didnt make any more progress on this.

A while back I reached out to the Twilio team and they mentioned they are going to be adding some more examples of how to handle incoming calls and so I decided to wait until those were available.

Not sure the status of it now

[MykolaKobetiakCloudGenie]

Thank you for your reply @dwbelliston
I did prebuild, and additional push notifications Java handler. Now it works. This info is helpful: #160

[mhuynh5757]

Hi all, thanks for the vibrant community discussion. As @dwbelliston mentioned, we were working on more examples for how to handle outgoing and incoming calls. Please see the Reference App for more details.

https://github.com/twilio/twilio-voice-react-native-app

[amitava82]

An example app with expo would be very helpful.

[dwbelliston]

Hey! Looks like this app has been making steady progress. Would one of the owners be willing to give a little update on stability/roadmap? Really eager to start building on this, but hesitant due to the beta tag. Seriously though, thanks for the effort!

[hawkinbj]

@dwbelliston PM here, we're preparing to remove the Beta tag and release to GA in the next week or so (very close!). This will be a first class SDK flavor in the Twilio Voice product suite. It's production ready as-is as well so hopefully that removes any concerns around deciding whether or not to start building on it. We'd love to hear your feedback on how to improve for future roadmap considerations as you and team get in there and start getting your hands dirty!

[MykolaKobetiakCloudGenie]

Hi @hawkinbj , thank you for the updates. Will this issue #341 be fixed in the next release you mentioned?

[hawkinbj]

@MykolaKobetiakCloudGenie yes it will be, it's currently baked into the GA release that is coming shortly

[amitava82]

@hawkinbj This library isn't usable without resolving #295
I've spent several hours and still clueless how to use this library.

[dwbelliston]

So excited to use it! Just in time for our roadmap priorities too. Will dive in and provide feedback, if you want/need a use case for a niche tech startup that is using it to offer compliance text/calls to financial advisors happy to talk.

[mhuynh5757]

Hey @amitava82 thanks for bringing up your concerns about our documentation. We're always looking for ways to help onboard and make our product as easy to use. We have a migration guide that's performing double duty as supplementary Android documentation:

https://github.com/twilio/twilio-voice-react-native/blob/main/docs/migration-guide-beta.4.md

But I understand it doesn't have very good visibility. As a customer, would you like to see this replaced or made more visible (i.e. through our readme), or is this document insufficient in your opinion? What other changes would you like to see in our docs?

[mhuynh5757]

Just FYI @amitava82 we saw your comment in #295 and we acknowledge and understand. Let's see what we can do to improve the user experience for everyone.

[mhuynh5757]

Hi all, thanks for your patience. We have released 1.0.0 and are proud to say that this project is considered GA. Please update at your earliest convenience.

We're still working on improving the docs, please stay tuned for that!

[dialmyline]

I was able to make a bit more progress.

For others that might be trying to figure out the managed Expo path here is my journey so far:

After looking at this: #143

I realized that this project itself is doing the pushkit registration, so that is not something I need to try to add in manually.

So, what I did:

• From my expo project, i added the @twilio/voice-react-native-sdk package through yarn.
• Then, you need to create the 'custom dev client' through the expo, they have good docs on that but you run something like
  eas build --profile development --platform ios
• After that build works, you can install on your personal real device
• After that client is downloaded to your device, you should see your app icon
• The start the dev client server from your computer
  npx expo start --dev-client
• Opening up the app icon, I was able to run the app on my dev client, and make a call!

I need to setup the call handling and the incoming call notification still, but excited about being able to do an outbound call, without needed to 'eject' from expo

To all those building the project, thanks for the effort on this!

Could help me am trying run it on android using expo, what are the steps you followed? your help is appreciated

[dwbelliston]

I was able to make a bit more progress.
For others that might be trying to figure out the managed Expo path here is my journey so far:
After looking at this: #143
I realized that this project itself is doing the pushkit registration, so that is not something I need to try to add in manually.
So, what I did:

• From my expo project, i added the @twilio/voice-react-native-sdk package through yarn.
• Then, you need to create the 'custom dev client' through the expo, they have good docs on that but you run something like
  eas build --profile development --platform ios
• After that build works, you can install on your personal real device
• After that client is downloaded to your device, you should see your app icon
• The start the dev client server from your computer
  npx expo start --dev-client
• Opening up the app icon, I was able to run the app on my dev client, and make a call!

I need to setup the call handling and the incoming call notification still, but excited about being able to do an outbound call, without needed to 'eject' from expo
To all those building the project, thanks for the effort on this!

Could help me am trying run it on android using expo, what are the steps you followed? your help is appreciated

Hey, so this video from the expo team is really helpful for learning how to do a dev build:

https://www.youtube.com/watch?v=LUFHXsBcW6w

Should be a solid start for getting things running

[amitava82]

There is something missing. With those steps and dev client, it throws error on app start

Attempt to read from field 'com.twiliovoicereactnative.JSEventEmitter com.twiliovoicereactnative.VoiceApplicationProxy.jsEventEmitter' on a null object reference

[dialmyline]

There is something missing. With those steps and dev client, it throws error on app start

Attempt to read from field 'com.twiliovoicereactnative.JSEventEmitter com.twiliovoicereactnative.VoiceApplicationProxy.jsEventEmitter' on a null object reference

are you running on android, cause i get the same on android

[amitava82]

There is something missing. With those steps and dev client, it throws error on app start
Attempt to read from field 'com.twiliovoicereactnative.JSEventEmitter com.twiliovoicereactnative.VoiceApplicationProxy.jsEventEmitter' on a null object reference

are you running on android, cause i get the same on android

Yes

[dialmyline]

There is something missing. With those steps and dev client, it throws error on app start
Attempt to read from field 'com.twiliovoicereactnative.JSEventEmitter com.twiliovoicereactnative.VoiceApplicationProxy.jsEventEmitter' on a null object reference

are you running on android, cause i get the same on android

Yes

check this #348 (comment)

am still trying to figure out, but he got to work

[amitava82]

That is for bare react native, not expo.

[dialmyline]

check this out https://docs.expo.dev/bare/installing-expo-modules/

maybe we have to manually edit android modules

[Victor-Sun]

I seem to be getting this issue as well. It was caused by the changes made from beta 3 to beta 4. Haven't found a way to fix the issue yet on React Native.

[ludvigbartholdsson]

Has anyone got incoming calls working with expo? Happy to pay for consultation.

[hueter]

Hi folks,

First off, this is a great library and very much needed for Twilio.

I just wanted to mention that without official library support for Expo via a config plugin, a lot of us reading this are probably doing redundant work by rolling our own. Scanning this repo, I haven't found any published code for a working plugin so I'm about to try building one myself, but I will post it here and/or make a PR if I'm successful.

For the maintainers

I think if you're a React Native library and you don't support Expo directly, your target audience is only a small minority of actual React Native users, since Expo is dominant in the RN space and is the recommendation from the actual RN docs!

The good news is, it's not a lot of effort to support Expo anymore. You just need to build a config plugin, as others have mentioned. It's a small amount of JS to inject this already-functional React Native library's code into Expo's hidden ios and android folders. The reason it's hard for us users is because it's literally all implementation details; I'm building this by reading your source code and trying to inject things one-by-one and follow the error messages.

Possibly Helpful Resources

• Here is a collection of config plugins written by the Expo team, that are functional examples of how to build them
  • In particular, here is one for React Native CallKeep, a similar library.
• react-native-permissions is an example of another library that maintains their own first party Expo plugin and simple instructions how to enable it.
• Expo Go (the platform app that Expo uses for standard workflows) will likely never support calling functionality due to its architectural limitations. Note that in order to test calling inbound and outbound (as others have mentioned), you'll have to do an on-device build. You can do this locally without signing up for Expo or their cloud-based EAS build tool, the docs are just buried a bit.

I will try to update here and keep this thread going. Thanks!

[charliesantos]

I completely agree with you, @hueter! I understand that Expo support is definitely needed for this SDK, and it is currently on our roadmap. Please stay tuned, and let's keep this thread going!

[hueter]

Updating as promised!

iOS works with a simple config plugin 🎉

I was able to get calling working for iOS, inbound and outbound, using a simple Expo config plugin. As mentioned above, I based my code off the official React Native Callkeep support from Expo. Here's a gist to demonstrate what worked for me.

Android is difficult because of custom native code setup 🤔

The Android setup is significantly more challenging, and I haven't figured it out yet. This is due to the "Native code" docs:

The native Android layer of the SDK exposes several helper classes that will need to be invoked in your existing native Android code.

For this, an Expo config plugin is not sufficient, and we need an Expo Module.

Luckily, Expo modules expose Android lifecycle listener callbacks, which should be enough to do the "native code" setup for this library. In fact, this might make this library easier to install in Expo projects than bare React Native projects because no native code editing would be necessary.

I wasn't able to create my own module, however, because I wasn't able to add com.twiliovoicereactnative as a dependency in build.gradle. I don't think this library is published on the maven registry or whatever, and I couldn't find a way to include a dependency from node_modules. Because I need to do something like this:

Click to expand!

package expo.modules.twiliovoicereactnative

import android.app.Application
import com.twiliovoicereactnative.VoiceApplicationProxy  // this line fails
import expo.modules.core.interfaces.ApplicationLifecycleListener

class TwilioVoiceReactNativeApplicationLifecycleListener : ApplicationLifecycleListener {
  private val voiceApplicationProxy: VoiceApplicationProxy

  override fun onCreate(application: Application) {
    voiceApplicationProxy = VoiceApplicationProxy(application)
    voiceApplicationProxy.onCreate();
    super.onCreate();
  }

  override fun onTerminate() {
    voiceApplicationProxy.onTerminate()
    super.onTerminate()
  }
}

I'm a bit out of my depth here with Android development, but I might have to fork this repo and make an Expo module within the source code here.

Conclusion

It shouldn't be too difficult to support Expo given that iOS works as a config plugin and Android can tap into the lifecycle callbacks provided by Expo. I'm going to visit the Expo discord to see if there is a workaround to have a local dependency.

[Liam1809]

Any idea how we intergrate with android guys? thank you

[dwbelliston]

@hueter so you are thinking if this project was put on Maven, then the expo module path would be possible?

Looks like twilio has put projects on maven, so seems like it could happen:
https://mvnrepository.com/artifact/com.twilio.sdk/twilio-java-sdk

[hueter]

@hueter so you are thinking if this project was put on Maven, then the expo module path would be possible?

Looks like twilio has put projects on maven, so seems like it could happen: https://mvnrepository.com/artifact/com.twilio.sdk/twilio-java-sdk

Possibly, if we cannot import the package already installed in node_modules. I don't know how to do that or if that's possible for Android.

But yeah we just need it so import com.twiliovoicereactnative.VoiceApplicationProxy works, then it's relatively trivial to build an Expo module I think.

[dwbelliston]

Okay, are you trying with a local expo module?

I dont know the android world well, so this may not be relevant.. but looking at the reference app here:

https://github.com/twilio/twilio-voice-react-native-app/blob/main/app/android/build.gradle#L32

Looks like there is an import from node_modules. Do you think that could be the 'import' we need in the modules build.gradle to get the twilio react native project installed?

[dwbelliston]

@hueter the module path seems like the right approach based on the docs page about the Android lifecycle listeners you shared above:

The React Native module API does not provide any mechanism to hook into these, and so setup instructions for React Native libraries often include steps to copy code into these files. To simplify and automate setup and maintenance, the Expo Modules API provides a mechanism that allows your library to hook into Activity or Application functions.

Just sharing this for others to easily see.

[dwbelliston]

Ive been trying to get a local expo module setup to do the setup mentioned here: https://github.com/twilio/twilio-voice-react-native/blob/main/docs/getting-started.md

I am running into same issue mentioned above by @hueter, the com.twiliovoicereactnative is not found when trying to import.

I tried many different configs with the build.gradle and settings.gradle... trying to get the package provided via the local node_modules. The code seemed to make sense, but just never got anywhere after trying for a while. I have never used gradle before, so could be a way off.

[dwbelliston]

I was able to do an expo prebuild to generate the android folder..

and then the files found here were helpful to reference to plug in VoiceApplicationProxy as mentioned in the docs.

#348 (comment)

Im hoping ill be able to keep working down this path, of using prebuild at least to get it working. But some help and guidance on how to do the expo module would be a big win. Thanks! Hopefully these comments are helpful to others find a path forward too.

Was able to place a call using this setup on Android. Have not tried inbound yet.

[dwbelliston]

@mhuynh5757 just checking if you saw the ask about putting this project into Maven, so we can explore working it into an expo module?

[mhuynh5757]

Hi @dwbelliston thanks for putting in the leg work and researching Expo support, this is great feedback/info and will help us tremendously down the line as we try to prioritize Expo support in our roadmap. We will be looking into all the requirements for Expo support with respect to Maven.