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.
Related
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';
As I know about it, This checks and gives warnings for React-Native code and its lifecycles.
I read about it from What is StrictMode in react?
How can I use it in react native ?
Here is a simple example to use StrictMode in React Native
StrictMode can be directly imported from React and can used like wrapping up View inside it.
import React, {Component, StrictMode} from 'react';
import {View} from 'react-native';
class Example extends Component {
render() {
return (
<StrictMode>
<View />
</StrictMode>
);
}
}
export default Example;
I have design header, footer video player view, etc as a separate files.
How do I include those in every pages?
I tried this method. but doesn't work.
Follow the below steps:
Create a file eg: Header.js
import React, { Component } from 'react'
import { Text, View } from 'react-native'
class Header extends Component {
render() {
return (
<View>
<Text> Header Component </Text>
</View>
)
}
}
export that component or function to reuse that in other files.
export default Header;
by exporting that function or class you can import that in any js file by using this:
import Header from './Header.js'
OR
import Header from './Header'
Here is how you can use that imported component in other files:
import React, { Component } from 'react'
import { Text, View } from 'react-native'
import Header from './Header' // import that
class App extends Component {
render() {
return (
<View>
<Header /> // use like this
<Text> textInComponent </Text>
</View>
)
}
}
If you have multiple components or function to export in a single file you can't use export default in all of that. you just have to use export only.
like this: Common.js file
export Header;
export Button;
or you can use that like this.
import { Header, Button } from './Common';
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>
)
}