React Native and React Native Web- document is not defined error

I am trying to create a currency converter app. I am trying to create 2 dropdowns for selecting currencies. During that, I figured out that the library I am using, “react native material dropdown”, does not work on web. This is the Error that I am getting with react native material dropdown on web:
screenshot of error

So, I added react native web to my app and used the docs to add the following 2 lines of code to the react native app:

AppRegistry.registerComponent('App', () => App);
AppRegistry.runApplication('App', {rootTag: document.getElementById('react-root')});

This is my entire “App.js”:

import React from 'react';
import {
  View,
  StyleSheet,
  TextInput,
  Text,
  TouchableOpacity,
  AppRegistry
} from 'react-native';
import { Header } from 'react-native-elements';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import {Dropdown} from 'react-native-material-dropdown';

export default class App extends React.Component {
  constructor() {
    super();
  }

  render() {
    return (
      <SafeAreaProvider>
        <View style={styles.appContainer}>
          <Header
            backgroundColor={'#2CC779'}
            centerComponent={{
              text: 'Currency Converter',
              style: {
                color: '#fff',
                fontSize: 20,
              },
            }}
          />
          <Text style={{ marginTop: 20 }}>Enter currency to convert from:</Text>


          <Text style={{ marginTop: 50 }}>Enter currency to convert to:</Text>
          

          
        </View>
      </SafeAreaProvider>
    );
  }
}

const styles = StyleSheet.create({
  appContainer: {
    flex: 1,
    backgroundColor: '#18C6C9',
  },
  currencyInput: {
    marginTop: 50,
    width: '80%',
    alignSelf: 'center',
    height: 40,
    textAlign: 'center',
    borderWidth: 4,
    outline: 'none',
  },
  convertButton: {
    width: '50%',
    height: 55,
    alignSelf: 'center',
    padding: 10,
    margin: 100,
  },
  convertButtonText: {
    textAlign: 'center',
    fontSize: 30,
    fontWeight: 'bold',
  },
});

AppRegistry.registerComponent('App', () => App);
AppRegistry.runApplication('App', {rootTag: document.getElementById('react-root')});

This is my “package.json”:

{
  "dependencies": {
    "expo-constants": "~12.1.3",
    "@expo/vector-icons": "^12.0.0",
    "react-native-paper": "4.9.2",
    "react-native-elements": "*",
    "react-native-safe-area-context": "3.3.2",
    "react-native-material-dropdown": "*"
  }
}

But now, after that, expo is saying that “document is not defined”: screenshot of second error

What do I do next and how should I proceed?
(P.S. Keep in mind that this is inside an online Expo environment in the Snack editor)