Suppose a mobile app receives an equipment notice from a CMS. A heading, a paragraph, and a list can fit a controlled content renderer. If the same response contains a working booking form with browser scripts, preserving that behavior requires a different route.
Use a small article fixture first
After installing react-native-render-html according to its documentation, a minimal component can pass known HTML and a content width. This example assumes the component occupies the available window width:
import { useWindowDimensions } from 'react-native';
import RenderHtml from 'react-native-render-html';
const source = {
html: '<h2>Equipment desk</h2><p>Collection closes at 5 p.m.</p>'
};
export default function EquipmentNotice() {
const { width } = useWindowDimensions();
return <RenderHtml contentWidth={width} source={source} />;
}
If the component sits inside a padded panel or a narrower column, use that container's available width. A width copied from the whole device can misrepresent the space the content actually receives.
The snippet demonstrates integration, not a tested native application. Run it in the project's supported iOS and Android environments before treating the notice as ready for users.
Define what the CMS is allowed to send
Write down the expected content: headings, paragraphs, links, lists, and the image forms you actually support. Test those with representative CMS responses. A renderer suitable for those articles may still fail to reproduce a full website with navigation, custom scripts, and complex CSS.
For the equipment notice, compare the exact closing time, heading hierarchy, and any contact link with the CMS source. Then add a long paragraph and a long link label. Check whether text wraps within the real content area at a narrow device size and larger text settings.
Do not solve a lost interaction by repeatedly changing paragraph styles. First determine whether that interaction depends on a browser runtime.
Use a WebView when the result is a web page
react-native-webview accepts a URL through its source prop. In an existing project with that package configured, the basic route looks like this:
import { WebView } from 'react-native-webview';
<WebView source={{ uri: 'https://example.com/equipment' }} />
Replace the fixture URL with the actual page. The WebView guide distinguishes URL sources from inline HTML and documents platform-specific considerations. Check the installed package's setup and navigation behavior for your application.
A public page address does not resolve every app concern. Verify loading and failure states, permitted navigation, and what happens when someone follows an external link. An article renderer and a WebView have different integration boundaries even if their first paragraph looks similar.
For browser-based sharing outside the app, the HTML viewer serves a different purpose: inspecting a prepared page in a browser. Keep the app's native checks in the app. Before release, reopen the real CMS notice on each supported platform and confirm both its wording and the actions users can actually take.