I have a string of HTML which is to be displayed in a WebView. How do I set the text color of a React Native WebView?
<WebView source={{ html: this.props.content }}/>
To change the color of the text inside a HTML, wrap the html in a div tag and set the font color of the div in a style.
html = '<div style="color: white">' + html + '</div>';
<WebView source={{ html: html }} />
If there is a small amount of content (e.g., as a test), you could insert the html string directly with formatting e.g.
<WebView source={{ html: "<strong>This is my Webview</strong>" }} />
The other way would be import your styles into your code and then export the lot as a component:
import React, { Component } from 'react'
import {WebView} from 'react-native'
class ExternalWidget extends Component {
render()
{
<WebView source={{uri:'./external/widget/index.html'}}
scalesPageToFit/>
}
}
export default ExternalWidget
See the article here
If you haven't used styles in react before, it's quite simple. Export the styles that you reference into one component, or separately as text.js/colors.js etc, and reference the component class using a variable.
E.g if var s references your stylesheet then s.text1 will fetch the text1 class..
Good luck!
constructor(props){
super(props);
this.html = this.props.data.terms_and_conditions + '<style>body{color:#464647}p,li{text-align:justify}a{color:#444}<style>'
}
render() {
return (
<View style={[styles.flex, { marginHorizontal:15 }]}>
<WebView
source={{ html: this.html }}
/>
</View>
);
}
Use this, Resolved for me.
<HTMLView
stylesheet={htmlStyles}
textComponentProps={{ style: {color:'red'} }}
value={content} />
Related
I have created a function that returns WebView
const WebviewComponent = () => (
<webview id="test" src="https://www.google.com" style={{ height: "700px", width:"800px", autoSize:"on", minWidth:"576", minHeight:"432" }} />
)
and I called this function in app.js. When I try to launch the application the src url is not loading.
WebView source type is not a string. You should check WebView documentation or see the usage below to understand how it works.
Usage
import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { WebView } from 'react-native-webview';
class MyWebComponent extends Component {
render() {
return <WebView source={{ uri: 'https://reactnative.dev/' }} />;
}
}
In your case, It will be
const WebviewComponent = () => (
<WebView
style={{ flex: 1 }}
source={{ uri: 'https://www.google.com' }} />
)
I have a website written with React (https://new.sacatucita.com/).
On my website, I have a search bar using react-select (https://github.com/JedWatson/react-select).
I want to make an application showing my website with React Native, so I have this code:
import React from "react";
import { WebView } from "react-native-webview";
export default function App() {
return (
<WebView
originWhitelist={["*"]}
source={{ uri: "https://new.sacatucita.com/" }}
/>
);
}
The problem is that when I open my application and click on the search bar, the keyboard and results do not show. It appears that the click has no effect. I need to first click elsewhere (like on the title text for example), and then the search bah will work.
I already tried to select the webview with the ref:
ref={ref => {
const e = ref && ref.webViewRef && ref.webViewRef.current;
e && e.focus();
}}
And to click injecting HTML:
const js = `
const e = document.getElementsByTagName("h1")[0];
e.click();
`;
export default function App() {
return (
<WebView
originWhitelist={["*"]}
source={{ uri: url }}
injectedJavaScript={js}
/>
);
}
I found out that the problem is only present on android devices.
Is there a solution?
When you do this, the keyboard will come out normally.
I made a link so you could test it yourself.
import React, {Component} from 'react';
import {WebView} from 'react-native';
class App extends Component {
render() {
return (
<WebView
source={{uri: 'https://new.sacatucita.com/'}}
style={{marginTop: 20}}
/>
);
}
}
export default App;
Am trying to run some html tags am getting from an api but finding it difficult to make the performance as good as native
I have tried using react-native-webview but having serious performance issues with it.
I have also tried react-native-render-html but also had some issues with running some tags like , and inline styles same with react-native-htmlview. It renders every other tag correctly with native performance
This is an example of an html string am getting from an api (toRender)
import React, {Component} from 'react'
import HTML from 'react-native-render-html';
const toRender = "<p style='text-decoration: underline'>divide <sup>10<sup>/<sub>2</sub></p>"
class QuestionScreen extends Component{
render{
return(
<View style={{ flex: 1 }}>
<HTML
html={toRender}
/>
</View>
)
}
}
export default QuestionScreen
I wrote a Logout button component in my React app for which I wish to locate at the top right corner of the screen.
render() {
<LogoutButtonComponent height: , backgroudColor: />
}
It wouldn't let me assign any values for height and etc.
This is the Logout component:
import React, { Component } from 'react';
import PropTypes from 'prop-types';
export default class LogOutButton extends Component {
static contextTypes = {
store: PropTypes.object.isRequired,
};
handleClick = () => {
this.props.onLogout();
};
render() {
return <button type="button" onClick={this.handleClick}>Logout</button>;
}
}
Should I locate it by < col /> ?
To add inline styles, you should defined a style object as prop, and pass it values, like doniyor2109 mentioned. There are a few caveats to using this, however.
style={{ height: 100, height: '100px', height: '100%', minHeight: '100px'}}.
Not every value should be passed as integer, some need to be passed as a string
Not every css attribute gets passed as you would expect them to, the css min-height actually gets passed as minHeight, so replace all hyphens with lower camel case style
Inline styles get insanely difficult to manage. I suggest you at the very least create an object outside the component, and pass it in like:
const DivStyle = { minHeight: '100px' }
and then:
<LogoutButtonComponent style={DivStyle} />
You can prefix that DivStyle with an export if you want to import {DivStyle} from './somefile' in other places
I suggest you check out a library like styled-components as it makes styling much easier!
I suggest you check out this article which outlines your options
You don't really add styles to your component like that. It's better to add those styles in the source for the actual component. So how exactly do you want it displayed? I will provide a template kind of and you can change it to what you want.
Go to your source for your Logout Button Component. In the return of your render method try adding a div call it container. Then add styling in a css file to that div or if you are using react-bootstrap or reactstrap or #material/ui/core you can adjust the style according to their documentation.
You can add your css for the className .container to make it appear the way you would like.
import React, { Component } from 'react';
import PropTypes from 'prop-types';
export default class LogOutButton extends Component {
static contextTypes = {
store: PropTypes.object.isRequired,
};
handleClick = () => {
this.props.onLogout();
};
render() {
return (
<div className="container">
{* notice the className here *}
<button type="button" onClick={this.handleClick}>Logout</button>
</div>
)
}
}
Hope this helps.
I am using React Navigation and want to Hide/Show the header onScroll or onPress. Is this pseudo code the proper way to go about it? Also, could you please advice on what props do I need to pass and how do I pass them from the _handleHide and _handleShow functions?
import React, { Component } from 'react'
import { View, Text, StyleSheet, Button} from 'react-native'
class MyApp extends Component {
static navigationOptions = {
title: 'MyTitle' // this is the header I want to hide/show
}
constructor () {
super(props);
this.state = {
showHeader: false
}
this._handleHide = this._handleHide.bind(this);
this._handleShow = this._handleShow.bind(this);
}
_handleHide(){
// how do i code this to hide the header?
}
_handleShow(){
// how do i code this to show the header?
}
render(){
return(
<View style={styles.container}>
<Button onPress={this._handleHide} title="Hide Header" />
<Button onPress={this._handleShow} title="Show Header" />
</View>
)
}
}
const styles = StyleSheet.create({
container:{
flex: 1, justifyContent: 'center', alignItems: 'center'
}});
export default MyApp;
Many thanks.
UPDATE 1
_handleHide(){
this.setState({showHeader: false});
}
_handleShow(){
this.setState({showHeader: true});
}
There is no on state change for that post I mentioned. Not near a computer right now but I would add a state in the constructor called showHeader: true and in _handleHide and _handleShow, change the state of showHeader.
Then from the post Dynamically hide/show header in react-native:
this.props.navigation.setParams({
header: this.state.showHeader ? whatever-you-want : null
})