This code works fine:
import React, { Component } from 'react';
import { Text, AppRegistry } from 'react-native';
export default class App extends Component {
render() {
return (
<Text>Hello World!</Text>
);
}
}
AppRegistry.registerComponent('SampleApp', () => App);
But I get the error when I do not export the App component:
import React, { Component } from 'react';
import { Text, AppRegistry } from 'react-native';
class App extends Component {
render() {
return (
<Text>Hello World!</Text>
);
}
}
AppRegistry.registerComponent('SampleApp', () => App);
Why do I need to export the App component to pass it to the registerComponent method? Is this because AppRegistry.registerComponent is not inside the App class component? Do I need to export class components even if there were in the same file?
Here is the error I get in the iOS simulator:
*I use expo.
Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. 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 `ExpoRootComponent`.
This error is located at:
in RootErrorBoundary (at registerRootComponent.js:34)
in ExpoRootComponent (at renderApplication.js:33)
in RCTView (at View.js:60)
in View (at AppContainer.js:102)
in RCTView (at View.js:60)
in View (at AppContainer.js:122)
in AppContainer (at renderApplication.js:32)
throwOnInvalidElementType
ReactNativeRenderer-dev.js:4705:2
createFiberFromElement
ReactNativeRenderer-dev.js:4663:16
reconcileSingleElement
ReactNativeRenderer-dev.js:8337:22
reconcileChildFibers
ReactNativeRenderer-dev.js:8421:12
reconcileChildrenAtExpirationTime
ReactNativeRenderer-dev.js:8621:29
finishClassComponent
ReactNativeRenderer-dev.js:8839:4
updateClassComponent
ReactNativeRenderer-dev.js:8761:11
beginWork
ReactNativeRenderer-dev.js:9580:15
performUnitOfWork
ReactNativeRenderer-dev.js:12924:15
Something needs to be exported in order for it to be imported later on by some other script.
According to MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export
The export statement is used when creating JavaScript modules to export functions, objects, or primitive values from the module so they can be used by other programs with the import statement.
My guess is the registerComponent method expects a module as one of the parameters.
Related
I am trying to render a HTML snippet in my React-Native app using react-native-webview
, I also tried react-native-render-html, but in this CSS is not work that much.
This is my Error Stack
ERROR TypeError: Cannot read property 'isFileUploadSupported' of null, js engine: hermes
at App (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.dbc&modulesOnly=false&runModule=true:93600:36)
at RCTView
at View
at RCTView
at View
at AppContainer (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.dbc&modulesOnly=false&runModule=true:85300:36)
at DBC(RootComponent) (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.dbc&modulesOnly=false&runModule=true:89907:28)
ERROR Error: Requiring module "node_modules/react-native-webview/index.js", which threw an exception: TypeError: Cannot read property 'isFileUploadSupported' of null, js engine: hermes
at App (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.dbc&modulesOnly=false&runModule=true:93600:36)
at RCTView
at View
at RCTView
at View
at AppContainer (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.dbc&modulesOnly=false&runModule=true:85300:36)
at DBC(RootComponent) (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.dbc&modulesOnly=false&runModule=true:89907:28)
ERROR TypeError: Cannot read property 'WebView' of undefined
This error is located at:
in App
in RCTView (created by View)
in View (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer
in DBC(RootComponent), js engine: hermes
And This is my code
import {SafeAreaView, ScrollView, useWindowDimensions} from 'react-native';
import {WebView} from 'react-native-webview';
import {getTemplate} from './template';
export default class App extends Component {
render() {
const template = getTemplate();
const source = {
html: template,
};
return (
<SafeAreaView>
<ScrollView>
<ScrollView horizontal={true}>
<WebView
ref={r => (this.webref = r)}
originWhitelist={['*']}
source={source}
/>
</ScrollView>
</ScrollView>
</SafeAreaView>
);
}
}
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';
The Polaris ResourcePicker component is not showing at all in my embedded app and I don't know why. Here is my code:
import React from "react";
import ReactDom from "react-dom";
import * as PropTypes from 'prop-types';
const session = require('express-session');
import {AppProvider, Page } from '#shopify/polaris';
import {ResourcePicker} from '#shopify/app-bridge/actions';
class ExchangeApp extends React.Component {
// This line is very important! It tells React to attach the `easdk`
// object to `this.context` within your component.
static contextTypes = {
easdk: PropTypes.object,
};
state = {
resourcePickerOpen: true,
};
render() {
return <ResourcePicker
resourceType="Product"
open={this.state.resourcePickerOpen}
onSelection={({selection}) => {
console.log('Selected products: ', selection);
this.setState({resourcePickerOpen: false});
}}
onCancel={() => this.setState({resourcePickerOpen: false})}
/>;
}
}
ReactDom.render(
<AppProvider apiKey="532cc1c7fa852e9bbf61c71bcbaa5a74">
<ExchangeApp />
</AppProvider>,
document.querySelector('#root'),
);
In the browser's console I'm getting the following error:
main.js:3584 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
Check the render method of `ExchangeApp`.
at invariant (main.js:3584)
at createFiberFromTypeAndProps (main.js:13629)
at createFiberFromElement (main.js:13650)
at reconcileSingleElement (main.js:17327)
at reconcileChildFibers (main.js:17384)
at reconcileChildren (main.js:17753)
at finishClassComponent (main.js:18080)
at updateClassComponent (main.js:18018)
at beginWork (main.js:18864)
at performUnitOfWork (main.js:21679)
Many thanks in advance for any help!
Import ResourcePicker from #shopify/polaris not from easdk.
Also your render return needs to be wrapped in parentheses
return (<ResourcePicker.../>);
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 just started React-Native and I came across a problem while dealing with the map of array.As it needs a unique key for all elements.
I have specified the key in the render method but I am still getting the warning.
Here is the code
import React, { Component } from 'react';
import {Text , ScrollView} from 'react-native';
import axios from 'axios';
import AlbumDetail from './AlbumDetail'
export default class AlbumList extends Component {
state = {albums: ['Fetching Data...']};
componentWillMount() {
console.log('fetching data');
// Make a request
axios.get('http://rallycoding.herokuapp.com/api/music_albums')
.then(response => this.setState({albums: response.data}));
}
renderAlbums() {
return this.state.albums.map(album =>
<AlbumDetail
key = {album.title}
album = {album}
/>
);
}
render() {
return(
<ScrollView>
{this.renderAlbums()}
</ScrollView>
);
}
}
And here is the warning I receive even after including the key
ExceptionsManager.js:73 Warning: Each child in an array or iterator should have a unique "key" prop.
Check the render method of `AlbumList`. See https://fb. me/react-warning-keys for more information.
in AlbumDetail (at AlbumList.js:16)
in AlbumList (at index.js:21)
in RCTView (at View.js:113)
in View (at index.js:19)
in FirstApp (at renderApplication.js:35)
in RCTView (at View.js:113)
in View (at AppContainer.js:102)
in RCTView (at View.js:113)
in View (at AppContainer.js:122)
in AppContainer (at renderApplication.js:34)
Look at your error. Its saying the error is in the render call of AlbumList. The code you specified is fine.