![]() You can either provide URLs to your WebView component or add some custom inline HTML. In this post, we reviewed how to embed WebViews into your React Native app. This is the final result of our demo app: Import React, ") Īnd line 45: ("you are now getting redirected!") The simplest way to embed a WebView into your React Native application is to provide a URL as a source to your WebView component: # App.js # navigate inside the newly created projectįor the sake of simplicity, we are going to add our code to the App.js file and we will not create any additional files. Here is a short overview of the terminal commands: # cd into the directory where to store your project This package will work both on Android and iOS devices. In order to do that, run the following command inside your project directory: expo install react-native-webview Expo lets you decide which kind of device you want to work with the device I used in the demo and the video above is an iPhone 12 Pro Max with iOS version 14.5 installed.īut before we start our app, we still need to install the React Native WebView package. Then, change to the newly created directory with cd my-project and run expo start to start the development server. You can replace “my-project” with whatever name you like. Inside this directory, run expo init my-project in order to initialize the Expo project. So, first, let’s initialize our project! Go to the directory where you want to store your project. Additionally, some basic knowledge in JavaScript, React/React Native, and HTML will help you follow this tutorial. ![]() I personally use Expo when developing React Native apps, so you should go ahead and install the Expo client by running this code on your machine: npm install -global expo-cliĪpart from using Expo, I can recommend working with Visual Studio Code or something similar. As you can see, we display random programming languages, and, in the end, we are redirected to the LogRocket Blog section!
0 Comments
Leave a Reply. |