Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6214

Invariant Violation: React Native w/ Typescript trying to use Material UI

$
0
0

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:

enter image description here

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.


Viewing all articles
Browse latest Browse all 6214

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>