react-native style iframe to fit webview

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}

I'm trying to implement various embed in a react-native application;

They have these structures

Twitter

<blockquote class="twitter-tweet" data-width="500"><p lang="en" dir="ltr">i recorded my calc professor for an entire semester, I hope he never sees this but... GOOOD MORNINGGGG <a href="">pic.twitter.com/lTXGcd1Jf0</a></p>— Edward Chai (@edwardchaii) <a href="https://twitter.com/edwardchaii/status/1020733530362425344?ref_src=twsrc%5Etfw">July 21, 2018</a></blockquote>n<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>n

Spotify

<iframe src="https://open.spotify.com/embed/track/2dgrYdgguVZKeCsrVb9XEs%3Fsi%3DQ7ihpJ__RCSHIgTzf1_QBA" width="300" height="380" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>

Using react-native-webview module and this structure in my Component

    <View style={{flex: 1, height: 300, width: 350, marginVertical: 10, position: "relative"}}>

    <WebView

      originWhitelist={["*"]}

      style={{width: "100%"}}

      onLoad={this.onLoad}

      onLoadEnd={this.onLoad}

      javaScriptEnabled={true}

      // useWebKit={false}

      injectedJavascript={this.state.injectedJavaScript}

      source={{html: this.state.html}}

      startInLoadingState={true}

    />

  </View>

The result is (on iOS simulator)

embed in ios simulator

As you can see there are a couple of problems:

Since the container View must have a width and a height value it does not respect the embed size; sometimes it's taller sometimes it's smaller sometimes it's wider

The embed doesn't fit its container; I tried to put width: 100% but even if it fits the width I still have the container height fixed which leaves a lot of blank space.

I don't know where to put my hands, I tried a lot of hacky solution but it doesn't seem to work at all

asked Jan 3 at 15:58

steo

3,53622453

add a comment |

I'm trying to implement various embed in a react-native application;

They have these structures

Twitter

<blockquote class="twitter-tweet" data-width="500"><p lang="en" dir="ltr">i recorded my calc professor for an entire semester, I hope he never sees this but... GOOOD MORNINGGGG <a href="">pic.twitter.com/lTXGcd1Jf0</a></p>— Edward Chai (@edwardchaii) <a href="https://twitter.com/edwardchaii/status/1020733530362425344?ref_src=twsrc%5Etfw">July 21, 2018</a></blockquote>n<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>n

Spotify

<iframe src="https://open.spotify.com/embed/track/2dgrYdgguVZKeCsrVb9XEs%3Fsi%3DQ7ihpJ__RCSHIgTzf1_QBA" width="300" height="380" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>

Using react-native-webview module and this structure in my Component

    <View style={{flex: 1, height: 300, width: 350, marginVertical: 10, position: "relative"}}>

    <WebView

      originWhitelist={["*"]}

      style={{width: "100%"}}

      onLoad={this.onLoad}

      onLoadEnd={this.onLoad}

      javaScriptEnabled={true}

      // useWebKit={false}

      injectedJavascript={this.state.injectedJavaScript}

      source={{html: this.state.html}}

      startInLoadingState={true}

    />

  </View>

The result is (on iOS simulator)

embed in ios simulator

As you can see there are a couple of problems:

Since the container View must have a width and a height value it does not respect the embed size; sometimes it's taller sometimes it's smaller sometimes it's wider

The embed doesn't fit its container; I tried to put width: 100% but even if it fits the width I still have the container height fixed which leaves a lot of blank space.

I don't know where to put my hands, I tried a lot of hacky solution but it doesn't seem to work at all

asked Jan 3 at 15:58

steo

3,53622453

add a comment |

I'm trying to implement various embed in a react-native application;

They have these structures

Twitter

<blockquote class="twitter-tweet" data-width="500"><p lang="en" dir="ltr">i recorded my calc professor for an entire semester, I hope he never sees this but... GOOOD MORNINGGGG <a href="">pic.twitter.com/lTXGcd1Jf0</a></p>— Edward Chai (@edwardchaii) <a href="https://twitter.com/edwardchaii/status/1020733530362425344?ref_src=twsrc%5Etfw">July 21, 2018</a></blockquote>n<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>n

Spotify

<iframe src="https://open.spotify.com/embed/track/2dgrYdgguVZKeCsrVb9XEs%3Fsi%3DQ7ihpJ__RCSHIgTzf1_QBA" width="300" height="380" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>

Using react-native-webview module and this structure in my Component

    <View style={{flex: 1, height: 300, width: 350, marginVertical: 10, position: "relative"}}>

    <WebView

      originWhitelist={["*"]}

      style={{width: "100%"}}

      onLoad={this.onLoad}

      onLoadEnd={this.onLoad}

      javaScriptEnabled={true}

      // useWebKit={false}

      injectedJavascript={this.state.injectedJavaScript}

      source={{html: this.state.html}}

      startInLoadingState={true}

    />

  </View>

The result is (on iOS simulator)

embed in ios simulator

As you can see there are a couple of problems:

Since the container View must have a width and a height value it does not respect the embed size; sometimes it's taller sometimes it's smaller sometimes it's wider

The embed doesn't fit its container; I tried to put width: 100% but even if it fits the width I still have the container height fixed which leaves a lot of blank space.

I don't know where to put my hands, I tried a lot of hacky solution but it doesn't seem to work at all

asked Jan 3 at 15:58

steo

3,53622453

I'm trying to implement various embed in a react-native application;

They have these structures

Twitter

<blockquote class="twitter-tweet" data-width="500"><p lang="en" dir="ltr">i recorded my calc professor for an entire semester, I hope he never sees this but... GOOOD MORNINGGGG <a href="">pic.twitter.com/lTXGcd1Jf0</a></p>— Edward Chai (@edwardchaii) <a href="https://twitter.com/edwardchaii/status/1020733530362425344?ref_src=twsrc%5Etfw">July 21, 2018</a></blockquote>n<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>n

Spotify

<iframe src="https://open.spotify.com/embed/track/2dgrYdgguVZKeCsrVb9XEs%3Fsi%3DQ7ihpJ__RCSHIgTzf1_QBA" width="300" height="380" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>

Using react-native-webview module and this structure in my Component

    <View style={{flex: 1, height: 300, width: 350, marginVertical: 10, position: "relative"}}>

    <WebView

      originWhitelist={["*"]}

      style={{width: "100%"}}

      onLoad={this.onLoad}

      onLoadEnd={this.onLoad}

      javaScriptEnabled={true}

      // useWebKit={false}

      injectedJavascript={this.state.injectedJavaScript}

      source={{html: this.state.html}}

      startInLoadingState={true}

    />

  </View>

The result is (on iOS simulator)

embed in ios simulator

As you can see there are a couple of problems:

Since the container View must have a width and a height value it does not respect the embed size; sometimes it's taller sometimes it's smaller sometimes it's wider

The embed doesn't fit its container; I tried to put width: 100% but even if it fits the width I still have the container height fixed which leaves a lot of blank space.

I don't know where to put my hands, I tried a lot of hacky solution but it doesn't seem to work at all

css reactjs react-native webview

asked Jan 3 at 15:58

steo

3,53622453

asked Jan 3 at 15:58

steo

3,53622453

asked Jan 3 at 15:58

steo

3,53622453

asked Jan 3 at 15:58

steo

3,53622453

asked Jan 3 at 15:58

steo

3,53622453

add a comment |

1 Answer
1

active

oldest

votes

Did you tried using scalepagetofit property ?, it should match the view

answered Jan 3 at 16:07

ValdaXD

1,165317

the default value is true

– steo
Jan 3 at 16:22

but the problem is that when useWebKit={false} the webview doesn't even load

– steo
Jan 3 at 16:47

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54025762%2freact-native-style-iframe-to-fit-webview%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

Did you tried using scalepagetofit property ?, it should match the view

answered Jan 3 at 16:07

ValdaXD

1,165317

the default value is true

– steo
Jan 3 at 16:22

but the problem is that when useWebKit={false} the webview doesn't even load

– steo
Jan 3 at 16:47

add a comment |

Did you tried using scalepagetofit property ?, it should match the view

answered Jan 3 at 16:07

ValdaXD

1,165317

the default value is true

– steo
Jan 3 at 16:22

but the problem is that when useWebKit={false} the webview doesn't even load

– steo
Jan 3 at 16:47

add a comment |

Did you tried using scalepagetofit property ?, it should match the view

answered Jan 3 at 16:07

ValdaXD

1,165317

Did you tried using scalepagetofit property ?, it should match the view

answered Jan 3 at 16:07

ValdaXD

1,165317

answered Jan 3 at 16:07

ValdaXD

1,165317

answered Jan 3 at 16:07

ValdaXD

1,165317

answered Jan 3 at 16:07

ValdaXD

1,165317

the default value is true

– steo
Jan 3 at 16:22

but the problem is that when useWebKit={false} the webview doesn't even load

– steo
Jan 3 at 16:47

add a comment |

the default value is true

– steo
Jan 3 at 16:22

but the problem is that when useWebKit={false} the webview doesn't even load

– steo
Jan 3 at 16:47

the default value is true

– steo
Jan 3 at 16:22

but the problem is that when useWebKit={false} the webview doesn't even load

– steo
Jan 3 at 16:47

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

Search This Blog

Ufyukyu