Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

React Native webview (Video) #21775

Closed
mnoandh opened this issue Oct 13, 2018 · 1 comment
Closed

React Native webview (Video) #21775

mnoandh opened this issue Oct 13, 2018 · 1 comment
Labels
Component: WebView Related to the WebView component. Ran Commands One of our bots successfully processed a command. Resolution: Locked This issue was locked by the bot.

Comments

@mnoandh
Copy link

mnoandh commented Oct 13, 2018

Hi Guys!!
I am quite new in react native as well as the programming. I am using expo and I am trying to read data from WordPress. but the problem appeared when the post contains a video. .

the video is running well but the video size showed inside the is bigger than the screen size.
I have tried scalesPageToFit={true}, However it did not working for me.
Is there any way to solve this issue?

1464840430

`import React, { Component } from 'react'
import { View,WebView, Dimensions, Image, Text } from 'react-native'
import HTML from 'react-native-render-html'
import moment from 'moment'
import Entities from 'html-entities'
import sanitizeHtml from 'sanitize-html'
import { Grid, Row, Col, Button} from 'native-base';
import Config from '../Config'
import PostImage from './PostImage'
import PostMeta from './PostMeta'
import PostVideo from './PostVideo'
//import Video from 'react-native-video';
const window = Dimensions.get('window')
const entities = new Entities.AllHtmlEntities()

const styles = {
featuredImage: {
backgroundColor: 'black',
width: window.width,
height: 200
},
title: {
fontFamily: 'roboto-slab-regular',
fontSize: 20,
lineHeight: 22,
marginTop: 16,
marginHorizontal: 16
},

content: {
    flex: 1,
    height: 400, 
    alignItems: 'center'

},

meta: {
marginTop: 16,
marginHorizontal: 16,

}
}

export default class Post extends Component {
webview = null;

constructor(props) {
    super(props);

    this.state = {
        tamanho: 122,
        post: props.post,
     scalesPageToFit: true,

    };
}

_postMessage = ( ) => {
    this.webview.postMessage( "Hello" );
    console.log( "Posted message" );
    scalesPageToFit=true
}

_receivedMessage = ( e )  => {
    console.log("Received message");
    this.setState( { tamanho: parseInt(e.nativeEvent.data)} );
            scalesPageToFit=true

}

componentDidMount() {
    this._postMessage();
}

render() {
let post = this.state.post;

let HTML ='' +
'' +
'<title></title>' +
'' +
'' +
post.content.rendered +
'' +
'';

let javascript = 'window.location.hash = 1;' +
'document.title = document.body.scrollHeight;' +
'window.postMessage( document.body.scrollHeight );';

return (


{entities.decode(post.title.rendered)}

         <Grid>

            <Row>
                <Col>

                    <WebView 
                    scrollEnabled={false}
                
                        ref={webview => { this.webview = webview; }}
                        injectedJavaScript={javascript}
                        javaScriptEnabled={true}
                        javaScriptEnabledAndroid={true}
                        onMessage={this._receivedMessage} 
                        scalesPageToFit={true}
                        allowsInlineMediaPlayback={true}
                        decelerationRate="normal"
                        automaticallyAdjustContentInsets={false}
                        style={styles.content}    
                        domStorageEnabled={true}
                        startInLoadingState={true}
                        source={{html: HTML}} 

                         />

                </Col>
            </Row>
        </Grid>

</View>

);
}

}`

@react-native-bot react-native-bot added Component: WebView Related to the WebView component. 🔶Components labels Oct 13, 2018
@react-native-bot
Copy link
Collaborator

We are automatically closing this issue because it does not appear to follow any of the provided issue templates.

Please make use of the bug report template to let us know about a reproducible bug or regression in the core React Native library.

If you'd like to propose a change or discuss a feature request, there is a repository dedicated to Discussions and Proposals you may use for this purpose.

@react-native-bot react-native-bot added Ran Commands One of our bots successfully processed a command. 📋No Template labels Oct 13, 2018
@facebook facebook locked as resolved and limited conversation to collaborators Oct 13, 2019
@react-native-bot react-native-bot added the Resolution: Locked This issue was locked by the bot. label Oct 13, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Component: WebView Related to the WebView component. Ran Commands One of our bots successfully processed a command. Resolution: Locked This issue was locked by the bot.
Projects
None yet
Development

No branches or pull requests

2 participants