Develop Reference

Unable to import images: InvalidCharacterError: Failed to execute 'createElement' on 'Document': The tag name provided is not a valid name

I'm very new to React Native, and I'm trying to import an image into my app but I keep gettin this error:
InvalidCharacterError: Failed to execute 'createElement' on 'Document': The tag name provided ('/static/media/logo.ab75c327.png') is not a valid name.
This is my code right now:
import React from 'react';
import {Text, View, Image} from 'react-native';
import style from './styles';
import Logo from '../../../assets/images/logo.png';
export default () => {
return (
<View>
<Logo />
</View>
);
}
It should be something super simple, but for some reason it isn't working for me.
I also tried using <Image source={Logo} /> as well, but still doesn't work.
I then decided not to import the Logo and tried <Image source='../../../assets/images/logo.png' />.
When I do this, I no longer get any errors, but the image simply doesn't show up.
I have tried with other images and other formats as well, and in all cases I end up getting the same results.
What am I doing wrong?

You need to import the image using the <img> tag, like:
<img src={Logo} alt='logo'/>
Your code corrected:
import React from 'react';
import {Text, View, Image} from 'react-native';
import style from './styles';
import Logo from '../../../assets/images/logo.png';
export default () => {
return (
<View>
<img src={Logo} alt='logo'/>
</View>
);
}

I'm not a react programmer but I see the javascript import statement is for modules, not images locations. That might have something to do with it and gels with your errors.
See mozilla javascript docs here for more info on the javascript import syntax.
Cheers.

React Native Error: Element type is invalid: expected a string or a class/functionbut got: undefined. But where?

I am the first person to have this error when putting an overlay in my code
const HomeScreen = ({ navigation }) => {
const [modal, setModal] = useState(true);
return (
<View>
<Button
buttonStyle="moreBtn"
title="aaa"
onPress={() =>
navigation.navigate('Profile', { name: 'Jane' })
}
/>
<Overlay>
<Text>Hello from verlay!</Text>
</Overlay>
<Modal
animationType="slide"
transparent={true}
visible={modal}
style={styles.modal}
onPress={() => {
setModal(false)
}}
>
<View style={{height:500}}>
<Text>aaaaa</Text>
<Button onPress={() => {
setModal(false)
}}>Bouton</Button>
</View>
</Modal>
</View>
);
};
When I put overlay component JSX inside my render function, i Have 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.
Why ?
I edited my post to add my following imports at the top of the file.
import { StatusBar } from 'expo-status-bar';
import React, { useState } from 'react';
import { TouchableOpacity, StyleSheet, Text, View, Button, FlatList, ScrollView, Modal } from 'react-native';
import Overlay from 'react-native';
import 'react-native-gesture-handler';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
The "HomeScreen" is inside an "App" BottomTabNavigator element
export default App;

You are importing Overlay wrongly react-native doesn't have an Overlay component, you can use Overlay from react-native-elements
change
import Overlay from 'react-native';
to
import { Overlay } from 'react-native-elements';
check this:https://react-native-elements.github.io/react-native-elements/docs/overlay.html

Even though #user12129132 has already answered the question here, I'm leaving this as an answer for future finders with a little more information.
First, this error, at least as far as I know, ALWAYS means you imported something incorrectly. In the case you are importing your own component/function you may have exported it incorrectly.
For this specific example you messed up the import 2 times.
First: Overlay is not a part of react-native, so that fails.
Second: Overlay is not the default export of the package it comes from.
Imports take the following form: `import DefaultExport, { NamedExport1, NamedExport2 ...} from 'package-name/file-path';
When looking at errors like this, first check your exports, if it is your own file you are importing from, and then check your import to make sure it fits the above format, frequently you swapped the named export and default export around. Sometimes the actual error is in the file you imported, and IT has a broken import - those can be fun to trace down and fix.
Simple mistake to make, easy to fix once you learn this.
So, given the above information, your import should look like this:
import { Overlay } from 'react-native-elements';

Warning: isMounted(...) is deprecated in plain Javascript Classes

I am implementing 2 screens using react-navigation. But I got the warning below while navigating to the second page:
Warning: isMounted(...) is deprecated in plain Javascript Classes. Instead, make sure to clean up subscriptions and pending requests in componentWillUnmount to prevent memory leaks.
Versions:
react: 16.3.1
react-native: 0.55.2
react-navigation: 1.5.11
util: 0.10.3
Login.js
import React, { Component } from 'react';
import { Text, View, Image, TextInput, TouchableOpacity } from 'react-native';
import styles from "./styles";
export default class Login extends Component {
constructor(props) {
super(props);
}
render() {
const { navigate } = this.props.navigation;
return (
<View style={styles.container}>
<View style={styles.formContainer}>
<TouchableOpacity style={styles.button} onPress={()=> navigate('Home')} >
<Text style={styles.buttonText}>LOGIN</Text>
</TouchableOpacity>
</View>
</View>
)
}
Home.js
import React, { Component } from 'react';
import { Text, View } from 'react-native';
import styles from "./styles";
export default class Home extends Component {
constructor(props) {
super(props);
}
render() {
const { navigate } = this.props.navigation;
return(
<View style={styles.container}>
<Text>Home Screen</Text>
</View>
)
}
}
What am I missing here?

This is a problem with latest React Navigation and React Native. To silence it add:
import { YellowBox } from 'react-native';
YellowBox.ignoreWarnings(['Warning: isMounted(...) is deprecated', 'Module RCTImageLoader']);
I expect it will be fixed in React Navigation within next few weeks.

Is is actually a React-Native issue
You can wait and check when a fix is available here:
https://github.com/facebook/react-native/issues/18868
Or in the meantime you can hide the warning like suggested.

Use this statement in index.js:
import { YellowBox } from 'react-native';
YellowBox.ignoreWarnings(['Warning: isMounted(...) is deprecated', 'Module RCTImageLoader']);

The following solution works for me:
import { YellowBox } from 'react-native';
YellowBox.ignoreWarnings(['Warning: isMounted(...) is deprecated', 'Module RCTImageLoader']);

react-navigation issue is now closed, you can look here
They are stating that it is a problem somewhere inside of react-native

This is not from react-navigation as i looked into the node_modules and react-navigation doesn't use isMounted, Its coming from somewhere within React-Native,
I have also done same hack used by #Romsun
import { YellowBox } from 'react-native';
YellowBox.ignoreWarnings(['Warning: isMounted(...) is deprecated', 'Module RCTImageLoader']);

Ignoring this message is the wrong way for a good developer
If we remove this problem then the memory leakage is decreased.

If you are using EXPO for RN development then this issue is now fixed in expo 27.0.2.
See https://forums.expo.io/t/warnings-after-upgrade-to-expo-27/9579/12

The answers above didn't work for me, but adding the following to index.js did the trick:
console.ignoreYellowBox = ['Warning: isMounted(...) is deprecated'];
Or upgrade to expo 27.0.2 which basically adds the above to Expo.js. See more information here: https://forums.expo.io/t/warnings-after-upgrade-to-expo-27/9579/10
As some of the other answers stated, it's a react-native issue so hopefully it will be fixed soon there and then in the following version of Expo.

This is what i did for this problem for the time being:
step 1:Tap on the warning
step 2: In the yellow window click on the stack trace option in top right
step 3: Find the path where the warning has occured,ex:C:\Users\username\projectname\node_modules\react\cjs\react.development.js
step 4: Open the path in editor
step 5: Find the key word isMounted under the deprecated api's and delete the deprecated function and warning related under it.
step 6: Save and reload your app!!thats it

If you are using an expo client, update your version to expo#27.0.2 which fixes this warning. . .

Element type is invalid: expected a string (for built-in components) or a class/function but got: object.

I know this question has been asked for a number of times, but solutions I read don't work out in my case. My codes are super simple and straightforward:
// Import a library to help create a component
import React from 'react';
import { AppRegistry, Text } from 'react-native';
//Only access text and AppRegistry from React-native lib
//Create a component
const App = () => (
<Text>Some Text</Text>
);
//Render it to the device
AppRegistry.registerComponent('myapp2_albums', () => App);
I am using expo to develop ios app. It keeps showing Element type is invalid: expected a string (for built-in components) or a class/function but got: object. You likely forgot to export your component from the file it's defined in.
Check the render method of ‘AwakeInDevApp’
Any insight would be appreciated:)

React native can sometimes be picky about wrapping your fields within a view and give it a flex of 1.
import React from 'react';
import { AppRegistry, Text } from 'react-native';
//Only access text and AppRegistry from React-native lib
//Create a component
export default const App = () => {
return (
<View style={{ flex: 1}}>
<Text>Some Text</Text>
</View>
);
};
//Render it to the device
AppRegistry.registerComponent('myapp2_albums', () => App);

Can't find variable React - Even though it is not used in file

I am getting a "Can't find variable: React" error in my react native project. But, what baffles me is that I am not at all using React in that file, although, I am importing a custom component which uses it though. Here is a MCVE of my problem.
First up construction.js:
import React from 'react';
import { View, Text } from 'react-native';
class UnderConstruction extends React.Component {
render() {
return (
<View>
<Text style={{ padding: 75 }}>
This page is under construction :(
</Text>
</View>
);
}
}
export default UnderConstruction;
Next up, render.js:
import UnderConstruction from './construction';
export function render() {
return (
<UnderConstruction />
);
}
And lastly, index.ios.js:
import React from 'react';
import { AppRegistry } from 'react-native';
import * as Factory from './render';
class Demo extends React.Component {
render() {
return Factory.render();
}
}
AppRegistry.registerComponent('Demo', () => Demo);
Running this app will cause the error Can't find variable: React on render.js line number 5, which is:
<UnderConstruction />
I found out the problem can be solved by just adding an import statement for React on render.js like:
import React from 'react';
import UnderConstruction from './construction';
...
I am curious as to why should I import React even though I am not using it in render.js, hence this question. So, what causes Can't find variable: React error in my render.js file?

To use render function you need to import React in your file because react creates your elements. I would suggest you go through your transpiled Javascript file once, you will understand what I mean.
I was myself facing this issue sometime back and when I saw the transpiled JS file and I then I saw how it works.
So in your transpiled file it would be something similar to this:-
(0, _reactDom.render)(_react2.default.createElement(_Root2.default, { store: store, history: history }), document.getElementById('app'));