React native :Unable to resolve module Indeed, none of these files exist:

Issue

I'm following this medium article to use FloatingTitleTextInputField in my react-native project

below is my project structure

Here is my code for HomeScreen.js

import React, {Component} from 'react';
import {Text, View, TextInput, StyleSheet} from 'react-native';
import FloatingTitleTextInputField from './customComponents/floating_title_text_input_field';



export default class HomeScreen extends Component {
  render() {
    return (
      // <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      //   <Text>My First React App</Text>
      //   <TextInput style={{height: 40, borderColor: 'gray', borderWidth: 1}} />
      // </View>

      <View style={styles.container}>
        <View style={styles.container}>
          <Text style={styles.headerText}>Its Amazing</Text>
          <FloatingTitleTextInputField
            attrName="firstName"
            title="First Name"
            value={this.state.firstName}
            updateMasterState={this._updateMasterState}
          />
          <FloatingTitleTextInputField
            attrName="lastName"
            title="Last Name"
            value={this.state.lastName}
            updateMasterState={this._updateMasterState}
          />
        </View>
      </View>
    );
  }
}
var styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 65,
    backgroundColor: 'white',
  },
  labelInput: {
    color: '#673AB7',
  },
  formInput: {
    borderBottomWidth: 1.5,
    marginLeft: 20,
    borderColor: '#333',
  },
  input: {
    borderWidth: 0,
  },
});

When i try to use FloatingTitleTextInputField inside HomeScreen.js I'm getting below error

    error Unable to resolve module `./floating_title_text_input_field` from `React Native/AwesomeProject/screens/

HomeScreen.js`: The module `./floating_title_text_input_field` could not be found from `/React Native/AwesomeProject/screens/HomeScreen.js`. Indeed, none of these files exist:


  * `/React Native/AwesomeProject/screens/floating_title_text_input_field(.native||.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)`


  * `/React Native/AwesomeProject/screens/floating_title_text_input_field/index(.native||.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)`. Run CLI with --verbose flag for more details.


Error: Unable to resolve module `./floating_title_text_input_field` from `React Native/AwesomeProject/screens/HomeScreen.js`: The module `./floating_title_text_input_field` could not be found from `/React Native/AwesomeProject/screens/HomeScreen.js`. Indeed, none of these files exist:

Can anybody help me to solve this issue

If need more information please do let me know. Thanks in advance. Your efforts will be appreciated.

Solution

You're referencing it from the HomeScreen component which is in the screens directory. Because you're using the local ./ path, it's trying to find it in screens/customComponents. Using ../customComponents/floating_title_text_input_field should fix it.

Answered By - Mike M