Exception :- Cannot find variable document

[ShashwatM3]

I am getting this error :- Exception Can't find variable: document

Code :-

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Fragment } from 'react';
import ReactDOM from "react-dom";

export default function App() {
  return (
    <Fragment>
      <View id="head" style={{
        backgroundImage: `url("https://i.postimg.cc/dVPkC3Y2/imageedit-2-8164670552.jpg")`,
        backgroundAttachment: "fixed",
        backgroundSize: "cover",
        backgroundPosition: "center",
        backgroundColor: "black",
        color: "white",
        padding: 50,
        textAlign: 'center',
        fontFamily: "Verdana",
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
      }}>
        <h1 style={{
          background: "black",
          padding: 50 ,
          color: "white"
        }}> Awareness Cafe </h1>
      </View>
      <View style={{
        backgroundImage: `url("https://image.freepik.com/free-photo/dark-black-soil-texture_196038-122.jpg")`,
        backgroundAttachment: "fixed",
        color: "white",
        padding: 50,
        textAlign: 'center',
        fontFamily: "Verdana",
      }}>
        <h3> “The key to growth is the introduction of higher dimensions of consciousness into our awareness.” - Lao Tzu </h3>
      </View>
      <View style={{
        backgroundColor: "black",
        color: "white",
        padding: 50,
        textAlign: 'center',
        fontFamily: "Verdana",
      }}>
        <h3> In this website, we show you news that have impacted the rest of the world and that helps you realize the importance of raising awareness </h3>
      </View>
      <View style={{
        backgroundImage: `url("https://www.who.int/images/default-source/searo---images/health-topics/corona-virus19/coronavirus-blue.tmb-1200v.jpg?Culture=en&sfvrsn=1bdbbe71_6")`,
        backgroundAttachment: "fixed",
        padding: 50,
        textAlign: "center",
        fontFamily: "Verdana",
        color: "white"
      }}>
        <h1 style={{
          padding: 50,
          background: 'black',
          fontSize: 20
        }}> The CoronaVirus Pandemic </h1>
      </View>
      <View style={{
        padding: 50,
        color: 'white',
        background: 'black',
        fontFamily: "Verdana",
      }}>
        <h2 style={{ color: "red" }}> What is Novel Coronavirus (COVID-19)? </h2>
        <h2 style={{ fontSize: 15 }}> Novel Coronavirus (COVID-19) is a new strain of coronavirus which may cause illness in animals or humans.  In humans, several coronaviruses are known to cause respiratory infections ranging from the common cold to more severe diseases. First identified in a cluster with pneumonia symptoms in Wuhan city, Hubei province of China. </h2><br />
        <h2 style={{ color: "red" }}> What are the symptoms of COVID-19 ? </h2>
        <h2 style={{ fontSize: 15 }}> The most common symptoms of COVID-19 are: <br /> - Fever <br /> -Ti"red"ness <br /> - Dry cough <br /> - Some patients may have aches and pains, nasal congestion, runny nose, sore throat or diarrhoea. These symptoms are usually mild and begin gradually. <br /><br /> Note: Not everyone with a cold or upper respiratory symptom needs to get tested for COVID-19. Only a person with a symptoms and travel history can do the test. Additionally, most people (about 80%) recover from the disease without needing special treatment. </h2><br />
        <h2 style={{ color: "red" }}> Is there any treatment for COVID-19? </h2>
        <h2 style={{ fontSize: 15 }}> The treatment of COVID-19 depends on enhancing the immunity level of patients, treating the symptoms and easing complications, as there is no specific treatment for the virus to date. </h2><br /><br />
        <h2 style={{ color: "red" }}> What are the ways to prevent the disease? </h2>
        <h2 style={{ fontSize: 15 }}> - Washing hands with soap and water or using alcohol-based hand rub kills viruses that may be on your hands.<br /><br /> - Maintain at least 1 metre (3 feet) distance between yourself and anyone who is coughing or sneezing. <br /><br /> - Covering mouth and nose with your bent elbow or tissue when you cough or sneeze. Then dispose of the used tissue immediately. <br /><br /> - Avoid touching your eyes, nose or mouth without washing your hands. <br /><br /> - Avoid shaking hands and wave. <br /><br /> - Avoid nose-to-nose greeting, hugging or kissing others. <br /><br /> - Avoid contact with animals (live or dead). <br /><br /> - Take enough rest and take a large amount of fluids. </h2>

      </View>
      <View style={{
        backgroundImage: `url("https://sm.mashable.com/mashable_me/article/1/12-free-an/12-free-and-printable-black-lives-matter-posters-from-black_57v7.jpg")`,
        backgroundPosition: "center",
        backgroundAttachment: "fixed",
        padding: 50,
        textAlign: "center",
        fontFamily: "Verdana",
        color: "white"
      }}>
        <h1 style={{
          padding: 50,
          background: 'black',
          fontSize: 20
        }}> Black Lives Matter Movement </h1>
      </View>
      <View style={{
        padding: 50,
        color: 'white',
        background: 'black',
        fontFamily: "Verdana",
      }}>
        <h3> You must have heard about the <span style={{color: "grey"}}>Black Lives Matter Movement</span> which was initiated in July 13 2013, however it has <span style={{color: "turquoise"}}> escalated </span> more during 2020. It has been escalated even more when the <span style={{color: "blue"}}>American hip-hop artist George Floyed </span> had been <span style={{color: "red"}}> killed </span> by the police. </h3>
        <h3> This movement has been intiated to <span style={{color: "orange"}}> fight for black men and women rights. </span> During the 19s, Black people had <span style={{color: "green"}}> lost certain privilages </span> , and they were <span style={{color: "blue"}}> considered as a very low class.</span> At that point of time, discrimination had been at it's <span style={{color: "gold"}}> peak.</span></h3>
        <h3> Until George Floyd's death, the world had not taken much notice to this movement, however, now the situation has been recognized by the rest of the world and this movement had been resumed in many other parts of the world. <br /><br /> In July 2013, the movement began with the use of the hashtag <span style={{color: "turquoise"}}> #BlackLivesMatter </span> on social media after the <span style={{color: "blue"}}> acquittal of George Zimmerman </span> in the <span style={{color: "red"}}> shooting death </span> of <span style={{color: "orange"}}> African-American teen Trayvon Martin </span> 17 months earlier in February 2012. </h3>
        <h3> An estimated <span style={{color: "yellow"}}> 15 million </span> to <span style={{color: "yellow"}}> 26 million people </span>, although not all are members or part of the organization, participated in the <span style={{color: "turquoise"}}> 2020 Black Lives Matter protests in the United States</span> , making Black Lives Matter <span style={{color: "pink"}}> one of the largest movements in United States history. </span></h3>
        <br />
        <br />
        <img src='https://media.newyorker.com/photos/5ed542a47204402b936444ca/4:3/w_2275,h_1706,c_limit/Wright-GlobalProtestsGeorgeFloyd.jpg' style={{height: 150 , display: "block", marginLeft: "auto", marginRight: "auto"}}></img>
        <br />
        <br />
        <center>
          <h3><u> Links :- </u></h3>
          <a href='https://blacklivesmatter.com/' id='b-a-tag' target="_blank" style={{
            fontSize: 15,
            color: "turquoise",
            textDecoration: "none" ,
            transition: 0.8
          }}> Homepage </a>
          <a id='no-trans'> &nbsp;| &nbsp; </a>
          <a href='https://secure.actblue.com/donate/ms_blm_homepage_2019' id='b-a-tag' target="_blank" style={{
            fontSize: 15,
            color: "turquoise",
            textDecoration: "none",
            transition: 0.8
          }}> Donate </a>
          <a id='no-trans'> &nbsp;| &nbsp; </a>
          <a href='https://blacklivesmatter.com/what-matters-2020/' id='b-a-tag' target="_blank" style={{
            fontSize: 15,
            color: "turquoise",
            textDecoration: "none",
            transition: 0.8
          }}> BLM'S #WHATMATTERS2020 </a>
          <a id='no-trans'> &nbsp;| &nbsp; </a>
          <a href='https://store.blacklivesmatter.com/store/' id='b-a-tag' target="_blank" style={{
            fontSize: 15,
            color: "turquoise",
            textDecoration: "none",
            transition: 0.8
          }}> Store </a>
          <a id='no-trans'> &nbsp;| &nbsp; </a>
          <a href='https://blacklivesmatter.com/global-actions/' id='b-a-tag' target="_blank" style={{
            fontSize: 15,
            color: "turquoise",
            textDecoration: "none",
            transition: 0.8
          }}> Global Actions <br /><br /></a>
      </center>
        <h3 style={{textAlign: "center", fontFamily: "Verdana", backgroundColor: "white", padding: 30, color: "black"}}> As you can see, a small change in the administration or a small cause of discrimintion or sexism can cause a globally-noticed situation, and these movements are the only way the countries can notice the faults and make some changes. </h3>
      </View>
      <View style={{
        backgroundImage: `url("https://www.who.int/images/default-source/searo---images/health-topics/corona-virus19/coronavirus-blue.tmb-1200v.jpg?Culture=en&sfvrsn=1bdbbe71_6")`,
        backgroundAttachment: "fixed",
        padding: 50,
        textAlign: "center",
        fontFamily: "Verdana",
        color: "white"
      }}>
        <h1 style={{
          padding: 50,
          background: 'black',
          fontSize: 20
        }}> The Beirut Explosion 2020 </h1>
      </View>
      <View style={{
        padding: 50,
        color: 'white',
        background: 'black',
        fontFamily: "Verdana",
      }}>

        <h2 style={{ fontSize: 15 }}> On 4 August 2020, a large amount of ammonium nitrate stored at the port of the city of Beirut, the capital of Lebanon, exploded, causing at least 203 deaths, 6,500 injuries, and US$15 billion in property damages, and leaving an estimated 300,000 people homeless. </h2>
        <br />
        <h2 style={{color: "red"}}> What was the cause? </h2>
        <h2 style={{fontSize: 15}}> Lebanon's Prime Minister, Hassan Diab, blamed the detonation on 2,750 tonnes of ammonium nitrate that he said had been stored unsafely at a warehouse in the port. </h2>
        <br />
        <h2 style={{color: "red"}}> Background :- </h2>
        <h2 style={{fontSize: 15}}> The economy of Lebanon was in a state of crisis before the explosions, with the government having defaulted on debt, the pound plunging, and a poverty rate that had risen past 50%. </h2>
        <br />
        <h2 style={{color: "red"}}> Casualties :- </h2>
        <h2 style={{fontSize: 15}}> 203 people were confirmed dead (with an additional three missing), and more than 6,500 people were injured. Foreigners from at least 22 countries were among the casualties. </h2>
        <h2 style={{color: "red"}}> Damage :- </h2><br />
        <br />
        <div style={{
          textAlign: "center"
        }}>
          <img src='https://i.kym-cdn.com/photos/images/original/001/880/118/af7.gif' style={{height: 150}}></img>
        </div>

      </View>
    </Fragment>
    /*
    <Fragment>
      <div style={{
        color: "white",
        backgroundColor: "black",
        textAlign: 'center',
        padding: 50,
      }}>
        <h1> Shashwat Mahalanobis </h1>

      </div>
      <div style={{
      color: "black",
      backgroundColor: "white",
      textAlign: 'center',
      padding: 50,
      }}>
        <h2> I am a developer aiming towards a career in the field of Data Science. I mostly specialize in the field of Machine learning and Artificial Intelligence and also in the field of Web Development. I also love to design certain aspects of apps or websites. <br /><br />The idea of working in a team fscinates me, since in a team, there will be more knowledge shared and learnt and the problem will be solver faster and efficiently. </h2>
        <br />
        <img src='https://cdn.business2community.com/wp-content/uploads/2018/01/how-to-develop-a-marketing-strategy-600x316.jpg'></img>
      </div>
    </Fragment>
    /*
    <View>
      <Text style={styles.text}>Shashwat Mahalanobis</Text>
      <StatusBar style="auto" />
    </View>
    */
  )
}

const styles = StyleSheet.create({
  header: {
    flex: 1,
    backgroundColor: 'red',
    alignItems: 'center',
    justifyContent: 'center',
  },

  mystyle: {
    backgroundColor: 'black',
    color: 'white',
    padding: 50 ,
    textAlign: 'center',
    fontWeight: 'bold',
    fontSize: 30 ,
  }
});

ReactDOM.render(<img />, document.getElementById("root"));
ReactDOM.render(<h1 />, document.getElementById("root"));
ReactDOM.render(<h2 />, document.getElementById("root"));
ReactDOM.render(<div />, document.getElementById("root"));
ReactDOM.render(<h3 />, document.getElementById("root"));

[FredrikOseberg]

Currently, this package does not support for react-native.