Element type is invalid . React Native - reactjs

I know there are so many questions about this Error. And I have faced so many times with this error and answers over here helped me so Much to get Over that Error. But now I just wanted to use react-native-maps and in the documentation of react-native-maps they gave us this sample of code to run and see how things work. I copied this code and paste it into my App.js and ı got this problem. I tried to something to solve that but ı couldnt figure it out.
I get this error:
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. 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`
And here is My code :
import * as React from 'react';
import MapView from 'react-native-maps';
import { StyleSheet, Text, View, Dimensions } from 'react-native';
export const App = () => {
return (
<View style={styles.container}>
<MapView style={styles.map} />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
map: {
width: Dimensions.get('window').width,
height: Dimensions.get('window').height,
},
});

As you said, this is a common error you can see while developing with React Native.
It occurs when the component name is wrong or the import path is entered incorrectly. To solve the problem, you need to check all the import statements and check if those are exported and imported correctly.
This usually happens when you export functions like the below.
export const HelloWorld = 'hello world';
Then import like below.
import HelloWorld from 'helloWorld';
I saw many people having similar mistakes. Hope you can check that out.

Related

Error "Element type is invalid" React component

Many times I've seen this error, and honestly I never know how to fix it, or how i fixed it in the past ...
Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Here's my component implementation, I'm trying to understand what's wrong.
import React from 'react';
import { SvgFromUri } from 'react-native-svg';
import { Image } from 'react-native';
import { AppColors } from '../constants';
const imgSize = 55;
const CompanyIcon = ({ url }) => {
return (
<>
{
url && !url.includes('favicon')
? <SvgFromUri uri={url} width={imgSize} height={imgSize} onError={console.error} />
: <Image source={require('../assets/app_icon48.png')} style={
{
borderWidth: 1,
borderColor: AppColors.LIGHT_BLUE,
borderRadius: 4,
width: imgSize,
height: imgSize
}
} />
}
</>
);
}
export default CompanyIcon;
Thanks so much for any help community
The options I found research about it said something about exporting the component as default, so I did, but no success :(
Update:
Looks like it's a bug within the svg component :|
https://github.com/software-mansion/react-native-svg/issues/1742
check your exports, if you have a default export you should import like this :
import FunctionName from '../location'; // without {}
or maybe you
forgot to export your component from the file it's defined in, or you might have mixed up default and named imports

Receiving error message in React Native I cannot figure out

I am currently working on a project in React Native and upon trying to create the first set of screens I began receiving this Error...
"Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports."
I am not a beginner in React Native, but am also not an expert and this is my first time working on a RN build on my Macbook. I am not sure if there is a typo I have missed somewhere, if my path is not defined correctly, or if I am simply in need of another coffee - either way, I would love another set of eyes on it and any help is greatly appreciated. I will post the code of my Welcome Screen component and App.js below. Aside from the assets, these are the only files I am working in. I will also post a screenshot of my file structure. Thank you again!
import React from 'react';
import { View } from 'react-native';
import WelcomeScreen from './app/screens/WelcomeScreen';
export default function App() {
return (
<WelcomeScreen />
);
};
import React from 'react';
import { ImageBackgroundComponent, StyleSheet, View } from 'react-native';
function WelcomeScreen(props) {
return (
<ImageBackgroundComponent style={styles.background} source={require('../assets/background.jpg')}>
<View style={styles.loginButton}>
</View>
</ImageBackgroundComponent>
);
}
const styles = StyleSheet.create({
background: {
flex: 1,
},
loginButton: {
width: '100%',
height: 70,
}
})
export default WelcomeScreen;
File Structure
Try to use ImageBackground instead of ImageBackgroundComponent

How to add 'requireNativeComponent' to exports?

This is my first ever React Native app. I am trying to use MapView from react-native-maps, but am running into this error: "Attempted import error: 'requireNativeComponent' is not exported from 'react-native-web/dist/index'." I am viewing my app in web view (if that matters). I have installed and linked react-native-maps. Here is my current code:
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import MapView from 'react-native-maps';
import { requireNativeComponent } from 'react-native';
export default function App() {
return (
<View style={styles.container}>
<Text>Open up App.js to start working on your app!</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
And the errors:
C:/React/AwesomeProject/node_modules/react-native-maps/lib/components/MapView.js
Attempted import error: 'requireNativeComponent' is not exported from 'react-native-web/dist/index'.
C:/React/AwesomeProject/node_modules/react-native-maps/lib/components/decorateMapComponent.js
Attempted import error: 'requireNativeComponent' is not exported from 'react-native-web/dist/index'.
C:/React/AwesomeProject/node_modules/react-native-maps/lib/components/decorateMapComponent.js
Attempted import error: 'requireNativeComponent' is not exported from 'react-native-web/dist/index'.
I had the same problem, and finally i realised that this is due to the compatibility of MapView with web browser, you can check it in Platform Compatibility.
Probably you are trying to run this code in the web browser, so you will have this error due to the MapView import.
I suggest two options:
1- try to add this script to your index.html, replace the API_KEY with your Google Maps API:
<script
async
defer
src="https://maps.googleapis.com/maps/api/js?key=API_KEY"
type="text/javascript"
></script>
2-Change the way you test and run the app in some mobile device using expo, normally it will work well.

How to move React-JSS styles to separate file?

My colleagues and I have successfully been using React-JSS: https://cssinjs.org/react-jss
However, to date the styles have been embedded in React component files. As the number of styles have grown, we'd like to move them out into either a styles.js or a styles.css file (we don't care which).
Trying this so far has not been successful.
Might anyone who has done it, be able to offer some tips?
It sounds like you have big files with big/many components and it looks like the amount of styles is the problem.
I would say split your components into separate files and keep styles close to components.
I don't recommend reusing styles without their components, because it leads to leaks.
Really late, but create a file with e.g exampleStyles.js extension:
import { createUseStyles } from 'react-jss';
const useStyles = createUseStyles({
<Your styles>
});
export default useStyles;
Then just import them where ever you want to use them but make sure after importing you declare them before using:
const navbar = () => {
const classes = <importedStyles()>;
return (
<div className={classes.navbar}>
);
};
OMG I don't know why things didn't work earlier today. I simply put my style code into styles.js like this:
const styleSheet = {
mainContainer: {
height: '100vh',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
},
backDrop: {
minHeight: '100vh',
},
// ... more styles here
};
export default styleSheet;
And then imported it into the React component file with: import styleSheet from './styles.js';
It all works great! Thank you all for the inspiration.

How to display MathML equation in React Native app using MathJax?

I tried to display MathML equation in my react native app using MathJax, but it is not showing. In the code below, the equation is not displayed, only "Helloworld".
import React, {Component} from 'react';
import {Text, View} from 'react-native';
import MathJax from 'react-native-mathjax'
export default class TipsAndTricksScreen extends Component {
static navigationOptions = {
title: 'Tips And Tricks',
};
render() {
return (
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<MathJax math={String.raw`<math xmlns="http://www.w3.org/1998/Math/MathML"><msqrt><mn>2</mn><mfrac bevelled="true"><mn>7</mn><mn>7</mn></mfrac></msqrt><mo>+</mo><mfrac><mn>5</mn><mn>8</mn></mfrac></math>this is just a string`} />
<Text>Helloworld</Text>
</View>
);
}
}
It seems quite straight forward to implement the dependency. Looking at the source code of the dependency it looks like it is just a wrapper around a Webview, so just be aware that it will probably only work if you are online.
The dependency has some default options already set for MathJax and you can pass further options using the mathJaxOptions prop. So if we pass
{
jax: ['input/MathML']
}
then it should tell MathJax that you are passing MathML as a input.
So here is a simple component that uses react-native-mathjax
import React, { Component } from 'react';
import { View, Text } from 'react-native';
import MathJax from 'react-native-mathjax';
const mmlOptions = {
jax: ['input/MathML'],
};
class MathView extends Component {
render () {
return (
<View style={{flex:1}}>
<MathJax
mathJaxOptions={mmlOptions}
html={'<math xmlns="http://www.w3.org/1998/Math/MathML"><msqrt><mn>2</mn><mfrac bevelled="true"><mn>4</mn><mn>7</mn></mfrac></msqrt><mo>+</mo><mfrac><mn>5</mn><mn>8</mn></mfrac></math> this is just a string'}
/>
</View>
);
}
}
export default MathView;
This would give you something like this
That should be enough to get you started. You can pass additional options via the mathJaxOptions prop. You just need to look at the MathJax documentation for all the different things that you can pass.
Caveat
On Android it doesn't look like the Android WebView can render MathML, there maybe a configuration that will make it work but I don't know it, however the Android WebView does render LaTex, so perhaps converting your MathML to LaTex could be a fallback option for you.
If you want to render MathML in React Native, you'll need some extensions and of course input and output method. After some research, I found this solution particular for MML to HTML:
<MathJax
html={`<math xmlns="http://www.w3.org/1998/Math/MathML"><msqrt><mn>2</mn><mfrac bevelled="true"><mn>7</mn><mn>7</mn></mfrac></msqrt><mo>+</mo><mfrac><mn>5</mn><mn>8</mn></mfrac></math>this is just a string`}
mathJaxOptions={{messageStyle: 'none',
extensions:
['mml2jax.js','MathMenu.js','MathZoom.js','AssistiveMML.js','a11y/accessibility-
menu.js',],
jax: ['input/MathML', 'output/CommonHTML'],
tex2jax: {
inlineMath: [['$', '$'], ['\\(', '\\)']],
displayMath: [['$$', '$$'], ['\\[', '\\]']],
processEscapes: true,},
TeX: {extensions:['AMSmath.js','AMSsymbols.js','noErrors.js','noUndefined.js'],},}} />

Resources