title: First React Native app: Open web shows blank website
body: <p>I am trying to build a websaite/app using Rect Native. I've installed Visual Studio Code for programming.</p>
  <p>I am running Windows 10.</p>
  <p>When I start npm with command &quot;npm start&quot; I get the following option:</p>
  <pre><code>› Press a │ open Android
  › Press w │ open web
  
  › Press r │ reload app
  › Press m │ toggle menu
  › Press d │ show developer tools
  › shift+d │ toggle auto opening developer tools on startup (disabled)
  
  › Press ? │ show all commands
  </code></pre>
  <p>Now I open web using &quot;w&quot;. After few seconds a blank website appears with the apps Icon and Title, but no content.</p>
  <p><strong>App.js</strong></p>
  <pre><code>import { StatusBar } from 'expo-status-bar';
  import { StyleSheet, Text, View } from 'react-native';
  
  export default function App() {
    return (
      &lt;View style={styles.container}&gt;
        &lt;Text&gt;Open up App.js to start working on your app!&lt;/Text&gt;
        &lt;StatusBar style=&quot;auto&quot; /&gt;
      &lt;/View&gt;
    );
  }
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: '#fff',
      alignItems: 'center',
      justifyContent: 'center',
    },
  });
  </code></pre>
  <p><strong>app.json</strong></p>
  <pre><code>{
    &quot;expo&quot;: {
      &quot;name&quot;: &quot;Whois&quot;,
      &quot;slug&quot;: &quot;Whois&quot;,
      &quot;version&quot;: &quot;1.0.0&quot;,
      &quot;orientation&quot;: &quot;portrait&quot;,
      &quot;icon&quot;: &quot;./assets/icon.png&quot;,
      &quot;splash&quot;: {
        &quot;image&quot;: &quot;./assets/splash.png&quot;,
        &quot;resizeMode&quot;: &quot;contain&quot;,
        &quot;backgroundColor&quot;: &quot;#ffffff&quot;
      },
      &quot;updates&quot;: {
        &quot;fallbackToCacheTimeout&quot;: 0
      },
      &quot;assetBundlePatterns&quot;: [
        &quot;**/*&quot;
      ],
      &quot;ios&quot;: {
        &quot;supportsTablet&quot;: true
      },
      &quot;android&quot;: {
        &quot;adaptiveIcon&quot;: {
          &quot;foregroundImage&quot;: &quot;./assets/adaptive-icon.png&quot;,
          &quot;backgroundColor&quot;: &quot;#FFFFFF&quot;
        }
      },
      &quot;web&quot;: {
        &quot;favicon&quot;: &quot;./assets/favicon.png&quot;
      }
    }
  }
  </code></pre>
  <p><strong>babel.config.json</strong></p>
  <pre><code>module.exports = function(api) {
    api.cache(true);
    return {
      presets: ['babel-preset-expo'],
    };
  };
  </code></pre>
  <p><strong>package.json</strong></p>
  <pre><code>{
    &quot;name&quot;: &quot;whois&quot;,
    &quot;version&quot;: &quot;1.0.0&quot;,
    &quot;main&quot;: &quot;node_modules/expo/AppEntry.js&quot;,
    &quot;scripts&quot;: {
      &quot;predeploy&quot;: &quot;expo build:web&quot;,
      &quot;deploy&quot;: &quot;gh-pages -d web-build&quot;,
      &quot;start&quot;: &quot;expo start&quot;,
      &quot;android&quot;: &quot;expo start --android&quot;,
      &quot;ios&quot;: &quot;expo start --ios&quot;,
      &quot;web&quot;: &quot;expo start --web&quot;,
      &quot;eject&quot;: &quot;expo eject&quot;
    },
    &quot;dependencies&quot;: {
      &quot;expo&quot;: &quot;^41.0.0&quot;,
      &quot;expo-status-bar&quot;: &quot;~1.2.0&quot;,
      &quot;react&quot;: &quot;17.0.1&quot;,
      &quot;react-dom&quot;: &quot;17.0.1&quot;,
      &quot;react-native&quot;: &quot;^0.67.2&quot;,
      &quot;react-native-web&quot;: &quot;0.17.1&quot;
    },
    &quot;devDependencies&quot;: {
      &quot;@babel/core&quot;: &quot;^7.12.9&quot;
    },
    &quot;private&quot;: true
  }
  </code></pre>
  <p><strong>Websites code that is generated when I press &quot;w&quot;</strong></p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
    &lt;head&gt;
      &lt;meta charset=&quot;utf-8&quot; /&gt;
      &lt;meta httpEquiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot; /&gt;
      &lt;!-- 
        This viewport works for phones with notches.
        It's optimized for gestures by disabling global zoom.
       --&gt;
      &lt;meta
        name=&quot;viewport&quot;
        content=&quot;width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1.00001, viewport-fit=cover&quot;
      /&gt;
      &lt;title&gt;Whois&lt;/title&gt;
      &lt;style&gt;
        /**
         * Extend the react-native-web reset:
         * https://github.com/necolas/react-native-web/blob/master/packages/react-native-web/src/exports/StyleSheet/initialRules.js
         */
        html,
        body,
        #root {
          width: 100%;
          /* To smooth any scrolling behavior */
          -webkit-overflow-scrolling: touch;
          margin: 0px;
          padding: 0px;
          /* Allows content to fill the viewport and go beyond the bottom */
          min-height: 100%;
        }
        #root {
          flex-shrink: 0;
          flex-basis: auto;
          flex-grow: 1;
          display: flex;
          flex: 1;
        }
  
        html {
          scroll-behavior: smooth;
          /* Prevent text size change on orientation change https://gist.github.com/tfausak/2222823#file-ios-8-web-app-html-L138 */
          -webkit-text-size-adjust: 100%;
          height: calc(100% + env(safe-area-inset-top));
        }
  
        body {
          display: flex;
          /* Allows you to scroll below the viewport; default value is visible */
          overflow-y: auto;
          overscroll-behavior-y: none;
          text-rendering: optimizeLegibility;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
          -ms-overflow-style: scrollbar;
        }
        /* Enable for apps that support dark-theme */
        /*@media (prefers-color-scheme: dark) {
          body {
            background-color: black;
          }
        }*/
      &lt;/style&gt;
    &lt;link rel=&quot;manifest&quot; href=&quot;\manifest.json&quot;&gt;&lt;link rel=&quot;icon&quot; type=&quot;image/png&quot; sizes=&quot;16x16&quot; href=&quot;\favicon-16.png&quot;&gt;&lt;/link&gt;&lt;link rel=&quot;icon&quot; type=&quot;image/png&quot; sizes=&quot;32x32&quot; href=&quot;\favicon-32.png&quot;&gt;&lt;/link&gt;&lt;link rel=&quot;shortcut icon&quot; href=&quot;\favicon.ico&quot;&gt;&lt;/link&gt;&lt;/head&gt;
  
    &lt;body&gt;
      &lt;!-- 
        A generic no script element with a reload button and a message.
        Feel free to customize this however you'd like.
      --&gt;
      &lt;noscript&gt;
        &lt;form
          action=&quot;&quot;
          style=&quot;
            background-color: #fff;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 9999;
          &quot;
        &gt;
          &lt;div
            style=&quot;
              font-size: 18px;
              font-family: Helvetica, sans-serif;
              line-height: 24px;
              margin: 10%;
              width: 80%;
            &quot;
          &gt;
            &lt;p&gt;Oh no! It looks like JavaScript is not enabled in your browser.&lt;/p&gt;
            &lt;p style=&quot;margin: 20px 0;&quot;&gt;
              &lt;button
                type=&quot;submit&quot;
                style=&quot;
                  background-color: #4630eb;
                  border-radius: 100px;
                  border: none;
                  box-shadow: none;
                  color: #fff;
                  cursor: pointer;
                  font-weight: bold;
                  line-height: 20px;
                  padding: 6px 16px;
                &quot;
              &gt;
                Reload
              &lt;/button&gt;
            &lt;/p&gt;
          &lt;/div&gt;
        &lt;/form&gt;
      &lt;/noscript&gt;
      &lt;!-- The root element for your Expo app. --&gt;
      &lt;div id=&quot;root&quot;&gt;&lt;/div&gt;
    &lt;script src=&quot;/static/js/bundle.js&quot;&gt;&lt;/script&gt;&lt;/body&gt;
  &lt;/html&gt;
  </code></pre>