# Live streams on react-native app

**URL:** <https://discuss.dev.twitch.com/t/live-streams-on-react-native-app/42738>\
**Category:** API\
**Created:** [January 9, 2023, 11:58am UTC](https://discuss.dev.twitch.com/t/live-streams-on-react-native-app/42738 "2023-01-09T11:58:29Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![yafta](https://d3ovvz0v2ajtpu.cloudfront.net/user_avatar/discuss.dev.twitch.com/yafta/32/21878_2.png) [@yafta](https://discuss.dev.twitch.com/u/yafta)\
**Post date:** [January 9, 2023, 11:58am UTC](https://discuss.dev.twitch.com/t/live-streams-on-react-native-app/42738/1 "2023-01-09T11:58:29Z")

</div>

Hi guys, I’m developing react-native expo app. I want to show live stream of our company in our app. I’m trying to “Embedding Twitch” but it needs parent which is domain. As you know mobile apps has no domain and I’m getting “ERR\_BLOCKED\_BY\_RESPONSE”. Is there any way to handle this.

---

<div class="post-metadata">

**Author:** ![BarryCarlyon](https://d3ovvz0v2ajtpu.cloudfront.net/user_avatar/discuss.dev.twitch.com/barrycarlyon/32/253_2.png) [@BarryCarlyon](https://discuss.dev.twitch.com/u/BarryCarlyon)\
**Post date:** [January 9, 2023, 12:55pm UTC](https://discuss.dev.twitch.com/t/live-streams-on-react-native-app/42738/2 "2023-01-09T12:55:40Z")

</div>

I’ll give you the same answer I gave someone else in Discord.

See if you can adapt the electron solution - [twitch\_misc/player/electron at main · BarryCarlyon/twitch\_misc · GitHub](https://github.com/BarryCarlyon/twitch_misc/tree/main/player/electron)

Or use a webview to open an iFrame to your website with the required Stream/played.

---

<div class="post-metadata">

**Author:** ![mia-z](https://d3ovvz0v2ajtpu.cloudfront.net/user_avatar/discuss.dev.twitch.com/mia-z/32/22273_2.png) [@mia-z](https://discuss.dev.twitch.com/u/mia-z)\
**Post date:** [January 31, 2023, 11:45pm UTC](https://discuss.dev.twitch.com/t/live-streams-on-react-native-app/42738/3 "2023-01-31T23:45:36Z")

</div>

Cant apply your electron suggestion to Ionic (unless I’m missing something?).  
Ionic itself is a WebView, so you can’t open a webview in a webview – the closest to this would be loading an external site which has an iframe of the twitch embed, which ultimately gets blocked anyway.  
You can open an in-app browser, but that’s a fullscreen thing that cannt be resized and thus wont be used (realistically) to embed a stream in the app.

One person mentioned that it works on Android, but not on iOS, but didn’t elaborate further.

> [@Embedded Player within iOS Web Based mobile app (e.g. Ionic) not working](https://discuss.dev.twitch.com/t/embedded-player-within-ios-web-based-mobile-app-e-g-ionic-not-working/36227):
>
> I’d like to reiterate this subject: [Embedded Player within ios webbased mobile app (e.g. Ionic) not working](https://discuss.dev.twitch.com/t/embedded-player-within-ios-webbased-mobile-app-e-g-ionic-not-working/32268) from @SleeplessFox . On Android its working perfect but in the iOS App the iframe will not be shown and no player is available. Just a white screen. “Localhost” web content cannot be served with “[http://localhost](http://localhost)” on iOS, that’s just a limitation of iOS’ WKWebView. It has to be a custom scheme other than http/https/file. The popular Ionic framework uses ionic://localhost by default. Howe…

Second paragraph

> On Android its working perfect but in the iOS App the iframe will not be shown and no player is available. Just a white screen.

The only workaround, and I say that as a stretch, would be to create a custom plugin for capacitor which would resize the main capacitor webview to make space and stack another WebView in the UI stack - but this is far from ideal. That has to be some sort of workaround for this.

---

<div class="post-metadata">

**Author:** ![BarryCarlyon](https://d3ovvz0v2ajtpu.cloudfront.net/user_avatar/discuss.dev.twitch.com/barrycarlyon/32/253_2.png) [@BarryCarlyon](https://discuss.dev.twitch.com/u/BarryCarlyon)\
**Post date:** [February 1, 2023, 12:05am UTC](https://discuss.dev.twitch.com/t/live-streams-on-react-native-app/42738/4 "2023-02-01T00:05:53Z")

</div>

> [@mia-z](#):
>
> the closest to this would be loading an external site which has an iframe of the twitch embed, which ultimately gets blocked anyway.

This works for me, (on droid and iOS), but I’m not using ionic as my framework so unable to test that solution.

---

<div class="post-metadata">

**Author:** ![mia-z](https://d3ovvz0v2ajtpu.cloudfront.net/user_avatar/discuss.dev.twitch.com/mia-z/32/22273_2.png) [@mia-z](https://discuss.dev.twitch.com/u/mia-z)\
**Post date:** [February 1, 2023, 12:13am UTC](https://discuss.dev.twitch.com/t/live-streams-on-react-native-app/42738/5 "2023-02-01T00:13:01Z")

</div>

Yeah, it seems like it should work, but I’m getting ERR\_BLOCKED\_BY\_RESPONSE.  
I have an iframe which is loading in the page [https://linode.miaz.xyz/twp/](https://linode.miaz.xyz/twp/) (personal site with twitch embed iframe).  
So it looks like Capacitor Webview → iframe with my site → iframe with Twitch embed.

---

<div class="post-metadata">

**Author:** ![BarryCarlyon](https://d3ovvz0v2ajtpu.cloudfront.net/user_avatar/discuss.dev.twitch.com/barrycarlyon/32/253_2.png) [@BarryCarlyon](https://discuss.dev.twitch.com/u/BarryCarlyon)\
**Post date:** [February 1, 2023, 12:14am UTC](https://discuss.dev.twitch.com/t/live-streams-on-react-native-app/42738/6 "2023-02-01T00:14:17Z")

</div>

the iframe on this page has the wrong parent it should be `linode.miaz.xyz` it shouldn’t need a `localhost` parent (but you could always specify both)

---

<div class="post-metadata">

**Author:** ![mia-z](https://d3ovvz0v2ajtpu.cloudfront.net/user_avatar/discuss.dev.twitch.com/mia-z/32/22273_2.png) [@mia-z](https://discuss.dev.twitch.com/u/mia-z)\
**Post date:** [February 1, 2023, 12:20am UTC](https://discuss.dev.twitch.com/t/live-streams-on-react-native-app/42738/7 "2023-02-01T00:20:37Z")

</div>

Just updated it now - even with the correct parent it’s the same result unfortunately.

---

<div class="post-metadata">

**Author:** ![BarryCarlyon](https://d3ovvz0v2ajtpu.cloudfront.net/user_avatar/discuss.dev.twitch.com/barrycarlyon/32/253_2.png) [@BarryCarlyon](https://discuss.dev.twitch.com/u/BarryCarlyon)\
**Post date:** [February 1, 2023, 12:21am UTC](https://discuss.dev.twitch.com/t/live-streams-on-react-native-app/42738/8 "2023-02-01T00:21:28Z")

</div>

Your page is still showing one parent of `localhost`  
The page needs to work on it’s own before trying it inside you app

---

<div class="post-metadata">

**Author:** ![mia-z](https://d3ovvz0v2ajtpu.cloudfront.net/user_avatar/discuss.dev.twitch.com/mia-z/32/22273_2.png) [@mia-z](https://discuss.dev.twitch.com/u/mia-z)\
**Post date:** [February 1, 2023, 12:25am UTC](https://discuss.dev.twitch.com/t/live-streams-on-react-native-app/42738/9 "2023-02-01T00:25:30Z")

</div>

Through chrome a hard-refresh updated it to the correct parent.

But I can see on the iframe on my mobile app the iframe source has the correct twitch iframe embed:

 ![Screenshot_20230201-012411](https://d2opxh93rbxzdn.cloudfront.net/original/3X/e/2/e2e224241102e9206bbacceeda431fa4ad99f266.png)

---

<div class="post-metadata">

**Author:** ![system](https://d2opxh93rbxzdn.cloudfront.net/original/2X/0/05909729875cce3b53e59d5561c4d23bb14948fc.png) [@system](https://discuss.dev.twitch.com/u/system)\
**Post date:** [March 3, 2023, 12:26am UTC](https://discuss.dev.twitch.com/t/live-streams-on-react-native-app/42738/10 "2023-03-03T00:26:18Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
