So I have installed #material-ui/icons library along with npm install #mui/material library as suggested. but my issue is when I am importing any icons from the website and implementing it in my app.js return statement I'm getting this error log.
Invariant Violation: View config getter callback for component style must be a function (received undefined). Make sure to start component names with a capital letter.
This error is located at:
in style (created by Insertion)
in Insertion (created by MuiSvgIconRoot)
in MuiSvgIconRoot
in SvgIcon
in CancelIcon
in RCTView (created by View)
in View (created by App)
in App
in RCTView (created by View)
in View (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer
in MaterialIconDemo(RootComponent), js engine: hermes
ERROR Invariant Violation: View config getter callback for component path must be a function (received undefined). Make sure to start component names with a capital letter.
This error is located at:
in path
in svg (created by MuiSvgIconRoot)
in MuiSvgIconRoot
in SvgIcon
in CancelIcon
in RCTView (created by View)
in View (created by App)
in App
in RCTView (created by View)
in View (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer
in MaterialIconDemo(RootComponent), js engine: hermes
ERROR Invariant Violation: View config getter callback for component style must be a function (received undefined). Make sure to start component names with a capital letter.
This error is located at:
in style (created by Insertion)
in Insertion (created by MuiSvgIconRoot)
in MuiSvgIconRoot
in SvgIcon
in CancelIcon
in RCTView (created by View)
in View (created by App)
in App
in RCTView (created by View)
in View (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer
in MaterialIconDemo(RootComponent), js engine: hermes
I want to know what I'm doing is wrong while installing or importing the library.
I tired the installation guide as well as searching solutions but there are no solutions for this particular library which I was able to find.
I know about vector-icons library and I have used it in my previous projects but I want to use this particular library.
Related
I'm getting the following error
Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check the render method of `ExpoRoot`.
in ExpoRoot
in RCTView (created by View)
in View (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer
followed by
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check the render method of `ExpoRoot`.
This error is located at:
in ExpoRoot
in RCTView (created by View)
in View (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer
when on the home screen of my application. It doesn't happen all the time but only during development when the app refreshes to apply the changes from the code, and also not all the time but like once every 10-20 times that it refreshes. I've looked into the imports/exports on my app and commented out everything so my application is very simple but it is still happening so I guess that they are not the issue.
My code is currently like this:
import React from 'react';
import { View, Text } from 'react-native';
export default function App() {
return(
<View>
<Text>test</Text>
</View>
);
}
Anyone got any idea what the issue may be?
Reloading the application on Android emulator (google pixel 5), I am receiving the following error:
screenshot of android emulator with error
TypeError: undefined is not an object (evaluating 'config.props')
This error is located at:
in NativeStackNavigator (created by wrappedComponent)
in wrappedComponent (created by AppNavigator)
in EnsureSingleNavigator
in BaseNavigationContainer
in ThemeProvider
in NavigationContainerInner (created by AppNavigator)
in AppNavigator (created by App)
in ErrorBoundary (created by App)
in RNCSafeAreaProvider (created by SafeAreaProvider)
in SafeAreaProvider (created by App)
in ThemeProvider (created by App)
in QueryClientProvider (created by App)
in App (created by ExpoRoot)
in ExpoRoot
in RCTView (created by View)
in View (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer
at node_modules/#sentry/utils/dist/instrument.js:111:20 in <anonymous>
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:104:6 in reportException
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:172:19 in handleException
at node_modules/react-native/Libraries/Core/ReactFiberErrorDialog.js:43:2 in showErrorDialog
I've tried to update to the latest compatible version of react navigation.
expo install #react-navigation/native-stack
expo install #react-navigation/native
expo install #react-navigation/stack
...and expo doctor didn't find any issues with the project.
my setup:
expo: v44
#react-navigation/native: ^6.0.10
#react-navigation/native-stack: ^6.0.2
#react-navigation/stack: ~6.0.1
Looking at the source code:
const config = screens[route.name];
const screen = config.props;
Either screens is not containing what you expect it to contain, or route.name is not what you expect.
// In case you are unfamiliar with JS
// screens[route.name]
let screens = {'hello': 33};
console.log(screens['hi']); // undefined
screens = {'hi': 33};
console.log(screens['hello']) // undefined
There is a lot of checks for screens here, so we may assume that screens is not empty.
If you are in production, you have a slightly different behavior for routes.
You are probably trying to access a route that doesn't exist.
My team uses a general RenderErrorWrapper component everywhere. Looks basically like this
export class RenderErrorWrapper extends React.PureComponent<RenderErrorWrapperProps, RenderErrorWrapperState> {
constructor(props: RenderErrorWrapperProps) {
super(props)
this.state = { renderComponentSuccessful: true }
}
componentDidCatch(error: Error) {
this.setState({ renderComponentSuccessful: false })
}
render() {
if (!this.state.renderComponentSuccessful) {
this.props.fallbackComponent
}
return this.props.children
}
}
Now the thing is, this thing works. We know it works, it's a standard pattern for us, we see the errors this is catching, see the fallback UIs it displays.
Except.
We're also using the SvgUri component from react-native-svg-uri. Specifically the call we're doing is like
<SvgUri width={width} height={height} svgXmlData={xmlString} />
Now, if that xmlString isn't invalid, crazy things happen. We get an exception that bubbles all the way up, straight through our RenderErrorWrapper. We literally see the RenderErrorWrapper in the stack trace, but its ComponentDidCatch never gets called!
Invariant Violation: Text strings must be rendered within a <Text> component.
This error is located at:
in RNSVGGroup (at G.js:23)
in G (at Svg.js:127)
in RNSVGSvgView (at Svg.js:116)
in Svg (at react-native-svg-uri/index.js:168)
in RCTView (at View.js:45)
in View (at react-native-svg-uri/index.js:288)
in SvgUri (created by MyComponent)
in RenderErrorWrapper (created by MyComponent)
in RCTView (at View.js:45)
<< etc >>
I know react-native-svg-uri is an abandoned library at this point, unfortunately we're basically stuck with it. What I'm more concerned about is how this exception manages to miss our error handling framework entirely, since that could happen with other issues as well.
What makes this error special that it can bypass our error handling?
Figured out what's going on here: The problem is that RNSVGGroup is a Native component called by the SVG renderer, and Native errors skip your React Native error catch layers.
You can still catch and log the error but you have to use a native error handler to catch the native error first, and it won't save you from the Red Screen of Death. Alternatively, newer versions of react-native-svg might not have this issue, ours is pretty old.
We have been investigating issues in our app where we just see a white screen and no crash is logged. Goes for both Android and iOS
The issue seem to be related to the use of async/await or promises.
We have found that we can reproduce the white screen issue locally when using async/await or promises.
The issue can be reproduced with the following code (tried to simplify it as much as possible). Replace App.js in a new project with the following:
import React, {Fragment} from 'react';
import {Text} from 'react-native';
class App extends React.Component {
state = {isMounted: false};
async componentDidMount() {
await Promise.resolve(1);
this.setState({isMounted: true});
}
render() {
if (this.state.isMounted) {
this.state.isMounted.test();
}
return (
<Fragment>
<Text>test</Text>
</Fragment>
);
}
}
export default App;
I also pushed a test project on github
I would expect the app to crash as isMounted does not contains a test method.
When running locally I get the red box stating that an error occurred as expected
TypeError: this.state.isMounted.test is not a function. (In 'this.state.isMounted.test()', 'this.state.isMounted.test' is undefined)
This error is located at:
in App (at renderApplication.js:40)
in RCTView (at View.js:35)
in View (at AppContainer.js:98)
in RCTView (at View.js:35)
in View (at AppContainer.js:115)
in AppContainer (at renderApplication.js:39)
...
but when running a release build the app does not crash and no error is reported. This makes it very hard for us to find and fix issues like this as we are totally blind.
If I comment out
await Promise.resolve(1);
It crash as expected in a release build
React Native version: 0.60.5
Are we wrong in assuming that the above code should result in an app crash?
Found that error-boundaries was the missing piece. Implementing an error boundary on the root level allows us to manually log these errors to our crash handling system.
As a side note I can also mention that if you use redux-saga and you throw an error, the error by default seem to be swallowed. So if you want to handle these uncaught errors you can implement the onError option in createSagaMiddleware
This is my first time using react native. I am following a tutorial but my results are different than the tutorial. I've triple checked my code and its exactly as its shown but I'm getting this error. Any ideas?
// Import a library to help create a Component
import React from 'react';
import { Text, AppRegistry } from 'react-native';
// Create a Component
const App = () => (
<Text>Some Text</Text>
);
// Render it to the device
AppRegistry.registerComponent('albums', () => App);
The error is
Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in.
Check the render method of `AwakeInDevApp`.
in AwakeInDevApp (at registerRootComponent.js:21)
in ExponentRootComponent (at renderApplication.js:35)
in RCTView (at View.js:128)
in View (at AppContainer.js:93)
in RCTView (at View.js:128)
in View (at AppContainer.js:92)
in AppContainer (at renderApplication.js:34)
Screenshot of Error in Simulator
Try to change 'albums' to 'AwakeInDevApp', it must be your project name when you run react-native init YourProjectName