Android doesn’t have a MainBundle directory, so it requires a different path.

react-native-static-server doesn’t let you serve assets from the asset directory.

Our server needs a directory to serve content.

Now, add the following code above your App component in App.jsĪwait RNFS.mkdir(RNFS.DocumentDirectoryPath + '/+ '/' + file) Īnd change your componentDidMount method to this: To do this, run the following commands: yarn add react-native-fs

That’s it! If you open up your android directory in Android Studio and view your directory in Android mode, it should look something like this:Īfter you have linked your assets, we need to add react-native-fs so we can move our files and get the directories where our content is located. Once your dependencies are installed, put the following code into your App.js file: React-native link react-native-static-server # NOTE: At the time of writing this article, the latest release of react-native-static-server's release process is broken. Next, install the necessary project dependencies with the following commands: Setupįor the sake of this tutorial, we are going to start with a fresh React Native project, so let’s run react-native init & cd. This post will focus on serving HTML, JavaScript, and CSS using react-native-static-server, along with viewing that content in a WebView in both Android and iOS. First, we only needed to serve static assets. We landed on the library react-native-static-server for hosting our web app for two reasons. In order to do this, we needed a way to host our web application from within React Native. We quickly eliminated this option since PWAs have several limitations, most importantly storage size.Įventually, we decided to embed our web application into a WebView within a React Native application since we could take advantage of the device’s file system and keep re-implementation to a minimum. Initially, we considered making a progressive web app.

One of my recent projects required us to make an existing web application work offline.

Yarn react native android studio