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’;
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.
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';
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 have a react-native app where I have developed a scanner feature using react-native-qrcode-scanner.However, when I try to scan the data, I get the below error-
error: can't find variable navigation
I see this error in onSuccess method at line authorizationToken.
My code-
import React, { Component } from 'react';
import {
Text,
View,
Image,
TouchableOpacity,
Linking
} from 'react-native';
import styles from '../assets/style';
import QRCodeScanner from 'react-native-qrcode-scanner';
export default class ScanScreen extends Component {
onSuccess(scanEvent) {
this.props.navigation.navigate("Result", {
'accessKey': scanEvent.data,
'authorizationToken':navigation.getParam('authorizationToken', undefined),
"userData": navigation.getParam('userData', undefined),
"methodName": "fetchData"
});
}
render() {
return (
<View style={styles.container}>
<QRCodeScanner
onRead={this.onSuccess.bind(this)}
/>
</View>
);
}
}
Any idea what I m missing here. Any help is much appreciated.Thanks in advance.
Make sure that Your Screen is registered in react-navigation config (follow this guide: can't find variable navigation).
Or pass navigation prop to it with HOC withNavigation: https://reactnavigation.org/docs/en/with-navigation.html. Instead export default class ScanScreen extends Component do class ScanScreen extends Component and at end of file do
export default withNavigation(ScanScreen);
Don't forget about importing Higher Order Component: import { withNavigation } from 'react-navigation';
Also be sure that all native parts are properly linked. For example react-native-gesture-handle (https://kmagiera.github.io/react-native-gesture-handler/docs/getting-started.html#linking).
navigation has to be part of props so accessing navigation using this.props.navigation solves this issue.
I am trying to create a counter with react-native and redux, but i'm getting the error Expected a component class, got [object Object].
This is my index.android.js
import React, { Component } from 'react';
import { AppRegistry } from 'react-native';
import Root from './src/containers/Root';
import configureStore from './configureStore';
export default class CounterReactNativeRedux extends Component {
render() {
return (<Root store={configureStore()} />)
}
}
AppRegistry.registerComponent('CounterReactNativeRedux', () => CounterReactNativeRedux);
My code can be found here.
Found answers about this saying that it might be because of the class name not being capitalize but this is not the case.
Anyone any idea?
Look inside of your Counter.js. You have used div tags there which do not exist in React Native.
So import View tag from React Native and use that.
import {View} from 'react-native'
const Counter = ({ value }) => (
<View>{value}</View>
);