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?
`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>
);
}
}`
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?
`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
},
meta: {
marginTop: 16,
marginHorizontal: 16,
}
}
export default class Post extends Component {
webview = null;
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)}
);
}
}`