I am trying to load a logo from the response of an API in my app using the react-native-svg library. There are no errors of any kind, and when including the component in my code other elements of the screen are moving out of the way, there is just no visible image.
import { SvgUri } from "react-native-svg";
...
<TouchableInfoContainer>
<TouchableBar onPress={() => {}}>
<SvgUri
uri={data.operating_carrier.logo_symbol_url}
height={20}
width={20}
/>
<DataText>
{flightInfo[0].segments[0].operating_carrier.name}{" "}
{flightInfo[0].segments[0].operating_carrier.iata_code}{" "}
{flightInfo[0].segments[0].operating_carrier_flight_number}
</DataText>
<InfoSection>
<Icon size={20} name="airplane-clock" color={theme.colors.white} />
<DataText color={theme.colors.highlight}> 2:32</DataText>
</InfoSection>
</TouchableBar>
</TouchableInfoContainer>
I've been following the documentation here: https://github.com/software-mansion/react-native-svg/blob/main/USAGE.md. I've attempted to install and use both react-native-svg 13.4.0 and react-native-svg 13.6.0 but neither work. I've also attempted to add a hardcoded link to an SVG file that I'm visited manually in my browser to ensure that it actually exists. No images will display, just blank space.
I'm working with react-native-webview to show an external site in my app, but the following warning message is showing each time the webview is loaded.
The code of the component is not complex, just <WebView source={{ uri: 'example.com' }} />
I couldn't find any reference to this. Does anyone know what can I do to remove the message?
Edit: After some tests, the webview only shows the message when it loads our website public pages, with other urls it works fine. Can it be any configuration in our site that I'm missing?
I have created a very minimal expo project with react-native-webview (v11.17.1) and it's working absolutely fine.
import { WebView } from 'react-native-webview';
export default function App() {
return (
<WebView source={{ uri: 'https://reactnative.dev/' }} />
);
}
Working screenshot: here
I understand that in order to add static image resources in react native, the images have to be statically known. This is done by:
var icon = this.props.active
? require('./my-icon-active.png')
: require('./my-icon-inactive.png');
<Image source={icon} />;
In vue native, like in react native, using
<image
:source="{require('./my-icon.png')}"
/>
will not work since the static image isn't statically known.
How do I make the image statically known in Vue Native?
In Vue-Native you need to write it like this:
<image
:source="require('./my-icon.png')"
/>
Drop the {} between ""
I want to turn this section of code into a reusable component so I don't have to write the same thing out 5 times.
<TouchableOpacity onPress={console.log('pressed')}>
<Image
source={require('../img/button_australia.png')}
/>
</TouchableOpacity>
The new component I made to mirror this is as follows:
import React from 'react';
import { Image, TouchableOpacity } from 'react-native';
const ImgButton = ({ onPress, img }) => {
return (
<TouchableOpacity onPress={onPress}>
<Image
source={require(img)}
/>
</TouchableOpacity>
);
};
export { ImgButton };
After importing this component ImgButton I call it with this block of code:
<ImgButton
onPress={console.log("pressed")}
img={'../img/button_australia.png'}
/>
I get the error: "Requiring unknown module '../img/button_australia.png'"
I assume I've gone wrong when passing the string down as a prop but from the examples I've looked I don't see what's wrong with what I've done. Thanks :)
As discussed in this react-native issue, it's not possible to require assets or javascript modules with dynamically generated names, e.g. variables.
This is because the React Native packager uses require (and import) statements to generate the module and asset bundles at compile-time, so the value of the variable is not known.
The simplest way is to just pass the image source to the component directly:
<ImgButton
onPress={console.log("pressed")}
img={require('../img/button_australia.png')}
/>
In my React Native app, I am pulling in JSON data that has raw HTML elements like this: <p>This is some text. Let’s figure out...</p>
I've added the data to a view in my app like this:
<Text>{this.props.content}</Text>
The problem is that the HTML comes out raw, it does not render like it would in a browser. Is there a way to get my JSON data to look like it would in a browser, inside my app view?
Edit Jan 2021: The React Native docs currently recommend React Native WebView:
<WebView
originWhitelist={['*']}
source={{ html: '<p>Here I am</p>' }}
/>
https://github.com/react-native-webview/react-native-webview
If you don't want to embed a WebView, there are also third party libraries to render HTML into native views:
react-native-render-html
react-native-htmlview
Edit March 2017: the html prop has been deprecated. Use source instead:
<WebView source={{html: '<p>Here I am</p>'}} />
https://facebook.github.io/react-native/docs/webview.html#html
Thanks to Justin for pointing this out.
Edit Feb 2017: the PR was accepted a while back, so to render HTML in React Native, simply:
<WebView html={'<p>Here I am</p>'} />
Original Answer:
I don't think this is currently possible. The behavior you're seeing is expected, since the Text component only outputs... well, text. You need another component that outputs HTML - and that's the WebView.
Unfortunately right now there's no way of just directly setting the HTML on this component:
https://github.com/facebook/react-native/issues/506
However I've just created this PR which implements a basic version of this feature so hopefully it'll land in some form soonish.
I found this component. https://github.com/jsdf/react-native-htmlview
This component takes HTML content and renders it as native views, with customisable style and handling of links, etc.
A pure JavaScript react-native component that renders your HTML into 100% native views. It's made to be extremely customizable and easy to use and aims at being able to render anything you throw at it.
react-native-render-html
Using this component will improve your application memory footprint and performance when compared to embedded WebViews.
Install
npm install react-native-render-html --save or yarn add react-native-render-html
Basic usage
import React from "react";
import { ScrollView, useWindowDimensions } from "react-native";
import RenderHTML from "react-native-render-html";
const html = `
<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 function App() {
// Allow images to scale to available width
// with contentWidth prop.
const { width } = useWindowDimensions();
return (
<ScrollView style={{ flex: 1 }}>
<RenderHTML contentWidth={width} source={{ html }} />
</ScrollView>
);
}
RenderHTML Props reference
You may customize the style of elements via class names, tags, and you can even register custom renders for tags. More info on the official website.
i uses Js function replace simply.
<Text>{item.excerpt.rendered.replace(/<\/?[^>]+(>|$)/g, "")}</Text>
React Native has updated the WebView component to allow for direct html rendering. Here's an example that works for me
var htmlCode = "<b>I am rendered in a <i>WebView</i></b>";
<WebView
ref={'webview'}
automaticallyAdjustContentInsets={false}
style={styles.webView}
html={htmlCode} />
<WebView ref={'webview'} automaticallyAdjustContentInsets={false} source={require('../Assets/aboutus.html')} />
This worked for me :) I have html text aboutus file.
import HTML from "react-native-render-html";
var htmlCode = "<b>I am <i>Italic</i></b>";
<HTML source={{html: htmlCode}}/>
The WebView component was not rendering for me HTML snippets, like
<b>hello</b>, world!
But if I would enclose the HTML snippet in a document, like the example below, then it did actually render the document:
<View style={styles.accContent}>
<WebView source={{html: `<!DOCTYPE html><html><body style="font-size: 3rem">${data.content}</body></html>`}} />
</View>