How to access js files from components folder in React Native ios project
Solution 1
I have tried this so far and got the solution for this.
One mistake I did in App.js:
I have replaced var Login = require('./Login');
by
import Login from './Login';
The js files under components folder also changed as follows, except App.js
Changes in Login.js:
class Login extends Component {
}
changed to
class Login extends React.Component {
}
Solution 2
Well I did this way to import js
files from 1 back root directory and root directory of entire project structure.
I have following directory structure.
App.js
file at root directory
Splash.js
file at MyApp -> Splash -> Splash.js
Home.js
file at MyApp -> Home -> Home.js
TextViewComponent
file at MyApp -> CustomComponents -> TextViewComponent.js
How I accessed all files across the all files.
Hope this would help you too.
Done.
BK19
Android developer by profession, I am passionate about designing and developing mobile applications.
Updated on July 09, 2022Comments
-
BK19 almost 2 years
I am unable to access components folder in React Native Project IOS.
I am getting following error:
Unable to resolve module ./Login from ....../ReactNative/ReactNativeProject/components/App.js: Unable to find this module in its module map or any of the node_modules directories under ......./ReactNative/ReactNativeProject/components/Login.j and its parent directories.
I have referred following link: http://caroaguilar.com/post/react-native-navigation-tutorial/
index.ios.js (ReactNativeProject/index.ios.js)
"use strict"; import React, { AppRegistry } from 'react-native'; import App from './components/App'; AppRegistry.registerComponent('ReactNativeProject', () => App);
App.js (ReactNativeProject/components/App.js)
'use strict' import React, {Component} from 'react'; import { AppRegistry, StyleSheet, NavigatorIOS, } from 'react-native'; var Login = require('./Login'); class App extends Component { render() { return ( <NavigatorIOS style={styles.navigationContainer} initialRoute={{ title: "Login Page", component: Login, }} /> ); } } var styles = StyleSheet.create({ navigationContainer: { flex: 1 } }); export default App;
Login.js (ReactNativeProject/components/Login.js)
"use strict"; import React, {Component} from 'react'; import { StyleSheet, Text, TextInput } from 'react-native'; import Button from 'react-native-button'; import styles from './login'; class Login extends Component { constructor(props) { super(props); this.state = { username: "", password: "", }; } render() { return ( <View style={styles.container}> <View style={styles.textContainer}> <TextInput style={styles.inputUsername} placeholder="Enter email ID" value={this.state.username} clearButtonMode = 'while-editing'/> <TextInput style={styles.inputPassword} placeholder="Enter Password" value={this.state.password} password={true} secureTextEntry={true} clearButtonMode = 'while-editing' /> <Button style={styles.login} styleDisabled={{color: 'red'}}> Login </Button> </View> </View> ); } module.exports = Login;