React native Question posted in
The official React Native documentation can be found here.

How to Show Local Web code on IOS side in React Native

How to Show Local Web Code on the iOS side in React Native
I try many things but don’t work anything.

Tags:

2

Answers


  1. 0

    • Platform-Specific Code : https://reactnative.dev/docs/platform-specific-code

    • React Native WebView: A complete guide : https://blog.logrocket.com/react-native-webview-a-complete-guide/

    • First you have to create a new file in your project directory called LocalWebPage.html and add some HTML code to it

      <!-- LocalWebPage.html -->
<html>
 <body>
  <h1>This is a local web page</h1>
  <p>This HTML code is stored in a local file and is being displayed in a WebView on the iOS side of a React Native app.</p>
 </body>
</html>

    • Next you have to create a new component in your project directory called LocalWebPage.js

      // LocalWebPage.js
import React from 'react';
import { WebView } from 'react-native-webview';

const LocalWebPage = () => {
 return (
  <WebView
   style={{ flex: 1 }}
   source={{ uri: 'file:///android_asset/LocalWebPage.html' }}
  />
 );
};

export default LocalWebPage;

    • finally you can use the LocalWebPage component in your app

      // App.js
import React from 'react';
import LocalWebPage from './LocalWebPage';

const App = () => {
 return (
  <LocalWebPage />
 );
};

export default App;
    Login or Signup to reply.
  2. 0

    Your post needs to be clarified. Because it is not obvious your need is serving an HTML string or an HTML file. By the way, for both I’ll suggest you the following:

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search