The 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.
The code:
import React, { Component } from "react";
import { TouchableOpacity, Text } from "react-native-gesture-handler";
class Logout extends Component {
render() {
return (
<TouchableOpacity>
<Text>Logout</Text>
</TouchableOpacity>
);
}
}
export default Logout;
I am trying to import it in another file but the error above occur. This is how I import it:
import Logout from "../components/Logout";
please double check if "react-native-gesture-handler" library has Text
component. you might have mistakenly import {Text} from
"react-native-gesture-handler". try:
import {Text} from 'react-native';
Related
I have imported the component of Name StoryBook that is exported default name.
But is also works as StoryBookX.
e.g
import StoryBook from 'storybook', // This is default name.
import StoryBookX from 'storybook, //This is not default name but it also work.
Can anybody explain that what the reason of it.
<View>
<StoryBook />
</View>
<View>
<StoryBookX />
</View>
Both are wokring while there is no default component of name StoryBookX
I tried it .Because i was expecting that this will not work.But it works.
yes. if we have a component Like
import React from 'react';
import {View} from 'react-native';
const AdView = () => {
return <View></View>;
};
export default AdView;
then we can export it with different names like this,
import AdView from "./AdView"
import CustomAdView from "./AdView"
import MyAdView from "./AdView"
import YourAdView from "./AdView"
When you export component as default then you can import it by different name also.
I'm trying to use Formik for React Native. I basically copy pasted the plain documentation example which does not work for me, and don't find any other relevant examples to help.
https://formik.org/docs/guides/react-native
I just tried also to use a functional component :
import React, { useState, useRef } from 'react';
import {
Text, StyleSheet
} from 'react-native';
import { Formik} from "formik";
import { Card, Button, TextInput, View } from 'react-native-elements';
function AddActivityScreen() {
return(
<Formik
initialValues={{ email: '' }}
onSubmit={values => console.log(values)}
>
{({ handleChange, handleBlur, handleSubmit, values }) => (
<View>
<TextInput
onChangeText={handleChange('email')}
onBlur={handleBlur('email')}
value={values.email}
/>
<Button onPress={handleSubmit} title="Submit" />
</View>
)}
</Formik>
)
}
export default AddActivityScreen;
I keep having 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.
Check the render method of `Formik`.
I don't understand what the problem is with Formik as I am just executing the code sample provided in the doc. Please someone help
The problem is not related to Formik but the import of your other components
you are importing TextInput and View from react-native-elements which does not exist in that package these are part of react-native itself.
When you do this and try to render, the above error comes up.
Change your imports like below
import React, { useState, useRef } from 'react';
import {
Text, StyleSheet,TextInput, View
} from 'react-native';
import { Formik} from "formik";
import { Card, Button } from 'react-native-elements';
I'm starting with react native and I find the next mistake, I'm a little disoriented.
From App.js I import the component Home.js, but I get the following error:
### ERROR #################
Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components)
but got: %s.%s%s, 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.
#### App.js #############
import React, { Component } from 'react';
import { StyleSheet, Text, View, TextInput, TouchableOpacity } from 'react-native';
import { Home } from './componentes/Home';
export default class App extends Component {
render(){
return(
<View>
<Home />
</View>
);
}
### ./componentes/Home.js ###########
import React, { Component } from 'react';
import { StyleSheet, Text, View, TextInput, TouchableOpacity } from 'react-native';
export default class Home extends Component{
render() {
return (
<Text>Home</Text>
);
}
}
Just in your App.js change your way of importing Home to ,
import Home from './componentes/Home';
AND NOT THE ONE BELOW
import { Home } from './componentes/Home';
hope it helps , feel free for doubts
I'm new to React Native and I am currently trying to create a custom component called OpButton. It's just a button so that I can try to import and export components. However everytime I try to import it, I keep getting errors like "Imvariant Violation" and I have no idea how to fix it.
import React, { Component } from 'react';
import { Button, Alert } from 'react-native';
export default class OpButton extends Component {
render() {
return (
<Button
onPress={() => Alert.alert("Hello World")}
title= "Hello World"
color="#841584"
accessibilityLabel="Learn more about this purple button"
/>
);
}
}
My button.js
import React, { Component } from 'react';
import { StyleSheet, Text, View, AppRegistry } from 'react-native';
import { OpButton } from "./src/components/button";
export default class App extends Component {
render() {
return (
<OpButton></OpButton>
);
}
}
My App.js
Try import OpButton from "./src/components/button"
Curly braces are used on an import when the file you're importing from is exporting the variable as a const (export const OpButton . . .) but when you export default OpButton, then when you import from that file without curly braces, you always import the default thing, no matter what you call it in your import. So you could do import AnyNameYouWant from "./src/components/button" and then use <AnyNameYouWant /> in your App.js
Though the answer was already accepted. I want to make you clear on few things. You need to understand two things here
export default class
export class
When you use export default class which means that component is exported by default and you can import that like below
import component from ‘./Component’;
When you use export class without default, you can import that like below
import {component, component1} from ‘./Component’;
I'm bizarrely getting an error that a local file import can't be resolved by React Native.
Unable to resolve module `./components/MyComponent" from ".//App.js`: could not resolve `/Users/myusername/Desktop/mylibrary/components/MyComponent' as a file nor as a folder","name":"UnableToResolveError","type":"UnableToResolveError","errors":[{}]},"type":"bundling_error"}"
mylibrary/App.js:
import React from 'react';
import {
View,
Text,
StyleSheet,
ScrollView,
AsyncStorage,
} from 'react-native';
import MyComponent from './components/MyComponent';
mylibrary/components/MyComponent.jsx:
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default class MyComponent extends React.Component {
render() {
<View>
{this.props.children}
</View>
}
}
I tried renaming the file to be lowercase (mycomponent.jsx), and it didn't make a difference. I also tried restarting my simulator and resetting the cache, and it also didn't help.
The import statement by default try to import .js files, try renaming MyComponent.jsx to MyComponent.js.
Quoting the MDN:
The module to import from. This is often a relative or absolute path name to the .js file containing the module, excluding the .js extension. Certain bundlers may permit or require the use of the extension; check your environment. Only single quotes and double quotes Strings are allowed.
The component is wrong. You are not returning anything in the render method. Try this:
render() {
return(
<View>
{this.props.children}
</View>
)
}