Working in React Native, trying to use Material UI with typescript. Everything I've looked up says "Use a capital letter for your component name" and well... I've got that. I'm not sure what else this could be stemming from. I thought it might be the typescript possibly, but I uninstalled and reinstalled it all. Below are my dependencies in case I may be missing any?
dependencies:
"dependencies": {"@material-ui/core": "^4.11.0","@material-ui/icons": "^4.9.1","expo": "~38.0.9","expo-splash-screen": "^0.5.0","expo-status-bar": "^1.0.0","expo-updates": "~0.2.8","react": "~16.11.0","react-dom": "~16.11.0","react-native": "~0.62.2","react-native-gesture-handler": "~1.6.0","react-native-reanimated": "~1.9.0","react-native-screens": "~2.9.0","react-native-unimodules": "~0.10.0","react-native-web": "~0.11.7" },"devDependencies": {"@babel/core": "~7.9.0","@types/material-ui": "^0.21.8","@types/react": "~16.9.23","@types/react-dom": "~16.9.8","@types/react-native": "~0.61.23","babel-preset-expo": "~8.2.0","jest-expo": "~38.0.0","typescript": "~3.9.5" },"jest": {"preset": "react-native" },
Am I missing anything in the dependencies maybe?
Trying to make a simple date/time picker component, but I can't import a material UI icon. Below is the code for the component (I'll be breaking views into sub components eventually):
import React from 'react';import Background from './components/background';import { StyleSheet, View, Text, StatusBar } from 'react-native';import CalendarTodayIcon from '@material-ui/icons/CalendarToday';export default function App() { return (<View style={styles.container}><View style={styles.calApptComponentContainer}><View style={styles.calHeader}><Text style={{ borderColor: "green", borderWidth: 1, flex: 1 }}> Tues, Jan 14</Text><View style={{ borderColor: "purple", borderWidth: 1, flex: 1, alignItems: "flex-end", }}><CalendarTodayIcon /></View></View><View style={styles.calWeekdaySelector}><Text style={styles.calWeekdayItemText}>S</Text><Text style={styles.calWeekdayItemText}>M</Text><Text style={styles.calWeekdayItemText}>T</Text><Text style={styles.calWeekdayItemText}>W</Text><Text style={styles.calWeekdayItemText}>T</Text><Text style={styles.calWeekdayItemText}>F</Text><Text style={styles.calWeekdayItemText}>S</Text></View><View style={styles.calMeetingTimeSelectorContainer}><Text>CalMeetingTimeSelector</Text></View><View style={styles.calFooter}><Text>CalFooter</Text></View></View><Background /><StatusBar /></View> );}
and then finally I get this error:
To make things even stranger, it works when I run expo via the web, but not on my phone or a phone emulator. Help please?
The picture shows the error on line 22 of App.tsx
, that's where <CalendarTodayIcon />
is being called, because the lines aren't listed here.