I am getting the html response from the api as shown below. I want to render the text and open the url on click of the text that is given in the response.
"Details": "<span style=\"font-family: Georgia; font-size: 24px;\"><em><span style=\"color: #0070c0;\">Click here to view News.</span></em></span>"
You can use WebView as HTML renderer like this,
import React, { Component } from 'react';
import { WebView } from 'react-native-webview';
class MyInlineWeb extends Component {
render() {
return (
<WebView
originWhitelist={['*']}
source={{ html: '<h1>Hello world</h1>' }}
/>
);
}
}
See official docs here
use this package react-native-render-html
extremely customizable and easy to use and aims at being able to render anything you throw at it.
import React, { Component } from 'react';
import { ScrollView, Dimensions } from 'react-native';
import HTML from 'react-native-render-html';
const htmlContent = `
<h1>This HTML snippet is now rendered with native components !</h1>
<h2>Enjoy a webview-free and blazing fast application</h2>
<img src="https://i.imgur.com/dHLmxfO.jpg?2" />
<em style="textAlign: center;">Look at how happy this native cat is</em>
`;
export default class Demo extends Component {
render () {
return (
<ScrollView style={{ flex: 1 }}>
<HTML html={htmlContent} imagesMaxWidth={Dimensions.get('window').width} />
</ScrollView>
);
}
}
Related
How to apply a bold weight to certain parts of the translation using the Trans component in React Native?
Since HTML tags like <strong></strong> don't work, we have to create our own custom <Strong/> component that applies certain text styling to the translation, but I don't know how to do that despite reading the docs?
Docs:
import { Trans } from 'react-i18next';
function MyComponent({ person, messages }) {
const { name } = person;
const count = messages.length;
return (
<Trans i18nKey="userMessagesUnread" count={count}>
Hello <strong title={t('nameTitle')}>{{name}}</strong>, you have {{count}} unread message. <Link to="/msgs">Go to messages</Link>.
</Trans>
);
}
i guess you can use <Text style={{fontWeight: 'bold'}}>{{name}}</Text> instead of <strong title={t('nameTitle')}>{{name}}</strong>.
or using useTranslation
import React from 'react';
import { useTranslation } from 'react-i18next';
export function MyComponent() {
const { t, i18n } = useTranslation();
// or const [t, i18n] = useTranslation();
return <Text style={{fontWeight: 'bold'}}>{t('my translated text')}</Text>
}
don't test yet
I have below webview component, I wanted the link to be opened in a mobile browser app rather than in inside current webview in my app.
return() {
<WebView source={{ html: `Google`}} />
}
This worked for me.
import { WebView, Linking, NavState } from 'react-native';
const html = `
Google
Twitter
`
class WebViewWrapper extends Component {
private webview;
handleNavigationStateChange = (event: NavState) => {
if (event.url) {
this.webview.stopLoading();
Linking.openURL(event.url);
}
};
render() {
return (
<WebView
originWhitelist={['*']}
ref={ref => {
this.webview = ref;
}}
source={{ html }}
onNavigationStateChange={this.handleNavigationStateChange}
/>
);
}
}
you can do this:
import { Linking } from 'react-native';
on you launch function
Linking.openURL( some_url );
For more details, follow this full example: Just what you want
Calling stopLoading freezes the WebView and links may stop working after pressing them once. Better to use onShouldStartLoadWithRequest (API Reference).
So the code could look something like this:
import { Linking } from 'react-native';
import { WebView } from 'react-native-webview';
const html = `
Google
Twitter
`;
const shouldStartLoadWithRequest = (req) => {
// open the link in native browser
Linking.openURL(req.url);
// returning false prevents WebView to navigate to new URL
return false;
};
const MyComponent = () => (
<WebView
originWhitelist={['*']}
source={{ html }}
onShouldStartLoadWithRequest={shouldStartLoadWithRequest}
/>
);
export default MyComponent;
Note that onShouldStartLoadWithRequest behaves a bit differently on iOS.
Try this one. This will save your time and patience :)
import HTML from 'react-native-render-html';
<HTML
html={this.state.content.description}
// imagesMaxWidth={Dimensions.get('window').width}
onLinkPress={(evt, href) => { Linking.openURL(href) }}
/>
Fully supportive of android, ios and Expo too. And has some cool customisations you can try with.
https://www.npmjs.com/package/react-native-render-html
I was wondering, is it possible to add a react component as the content?
I added the component inside the overlay like so -
this.player.overlay({
content: <SomeReactComponent />,
align: 'bottom-left',
overlays: [{
start: 'play',
end: 'end'
}]
});
and the SomeReactComponent is just a react component for a dynamic image renderer that looks like this
import like from './like.png';
import love from './love.png';
import neutral from './neutral.png';
class SomeReactComponent extends Component {
getImage(pic) {
const image = pic;
return image;
}
render() {
const pic = [love, like, neutral];
return (
<div>
{ sentimentsArray.map(sentiment =>
<img src={this.getImage(pic)} style={{ width: '75%', height: '75%', objectFit: 'scale-down' }} />
)}
</div>
);
}
}
When i call this.player.overlay in my console, it says the overlays.options.content is a Symbol of React.element, however, I'm not getting anything as an overlay
It's not possible to use React component for this property unfortunately, but only string or node element. Take a look to the doc for more information.
For a simple react native webview using the source.htmlfor content:
import * as React from 'react'
const contents =`
<h1 id="1">Section 1</h1>
<h1 id="2">Section 2</h1>
`;
class AboutView extends React.Component {
render() {
return <WebView source={{ html: contents, baseUrl: '' }} />
}
}
Is there a way to navigate the webview to a specific section using the named anchor, such as #1 or #2 like you would put in a url? I know this can be achieved with JS, but I would like to know if there is a cleaner solution
I'm using Native Base 2.0+, the themes are ejected and using StyleProvider I am able to tweak and customize any Native Base component according to my theme, no problem.
Following the docs, it's stated that to add themes to a custom component we should define a namespace for said component and merge it with the instantiated styling as well. Code example below:
import React, { Component } from 'react'
import { Header, Left, Body, Right, Button, Title, Text, connectStyle } from 'native-base'
import Colors from '../Themes/Colors'
import ApplicationStyles from '../Themes/ApplicationStyles'
class NBHeader extends Component {
render () {
const styles = this.props.style
return (
<Header style={styles.header}>
<Left>
<Button transparent>
<Text style={styles.headerBackButton}>
{'< Back'}
</Text>
</Button>
</Left>
<Body>
<Title>Login</Title>
</Body>
<Right />
</Header>
)
}
}
export default connectStyle('CustomComponents.Header', ApplicationStyles)(NBHeader)
In this case, namespace for the component is 'CustomComponents.Header'. Then, we use StyleProvider to connect the Theme:
import React, { Component } from 'react';
import { StyleProvider } from 'native-base';
class CustomComponent extends Component {
render() {
return (
// connect styles to props.style defined by the theme
const styles = this.props.style;
<StyleProvider style={customTheme}>
Your Custom Components
</StyleProvider>
);
}
}
// Define your own Custom theme
const customTheme = {
'yourTheme.CustomComponent': {
// overrides CustomComponent style...
}
};
Since I've ejected the theme, I entered the new namespace for the Custom Component in NB's Theme file, so it should already be added and cascaded using StyleProvider.
So for instance, if I want the header to be 'red' and have a padding of '10' due to theming rules, I add those as default props of 'CustomComponents.Header' and forget about it, it will always be applied to the component as long as the StyleProvider is cascading themes.
The problem is I cannot get this defined Custom Component's default theme to be applied. I don't know if it's a problem with my code or how Native Base works. Any help would be appreciated and I can provide further code if needed.