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)
