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>
)
}
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 have a folder called "app" which contains a "views" folder. Inside views I have a "Home.js" file in which I've defined a class component "Home". I want to use the Home class in another file "App.js".
The following code is what's in the Home.js file.
import React from 'react';
import {View, Text} from 'react-native';
export class Home extends React.Component {
render () {
return (
<View>
<Text> Some text </Text>
<Text> Some other random text </Text>
</View>
);
}
}
And this is what's in the App.js file.
import React from 'react';
import { Home } from '.app/views/Home.js';
export default class App extends React.Component {
render () {
return (
<Home />
);
}
}
When I try and run it with expo, I get an error "Error: undefined Unable to resolve module '.app/views/Home.js'"
No matter the path I try to bring Home from, I get the same error, even if I copy and paste the path directly from the Home.js file. I'm curious, I wanna know if this is a code error, or maybe the way I'm bringing up the path is wrong? Any ideas as to how to solve this? Thanks a lot.
You need to get in your folder like this:
'./app/views/Home.js';
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 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'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’;