Why won't my Index.js file be recognized?

Question

I made a separate Index.js file to hold all the components that I want to export throughout the app I'm creating. I thought the file path I'm taking would be correct but instead...

I'm getting an error that says:

Could not resolve
'/User/user/projects/Something/src/components/components' as a file
nor as a folder (null)

How can I fix this?

Here's LoginForm.js :

import React, { Component } from 'react';
import { TouchableOpacity, StyleSheet, View, Text ,Button } from 'react-native';
import { UserInput } from './components';

class LoginForm extends Component {
  render() {
    return(
      <View style={styles.container}>
        <UserInput/>
          <TouchableOpacity style={styles.button}>
            <Button
              title="Press Me"
            />
          </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingHorizontal: 10
  },

  button: {
    alignItems: 'center',
    backgroundColor: '#DDDDDD',
    padding: 10
  }
});

export default LoginForm;

Here's Index.js :

export * from './UserInput';
export * from './LoginForm';

Answer 1

In the current working directory of LoginForm.js , there is no components folder. From your script, you want UserInput component in the LoginForm component.

You can simply do it

import { UserInput } from './UserInput';

Right use of index.js of components folder is when you want to import the selected component of folder's in other directory's component's

update :

in the LoginForm component do

import  UserInput  from './UserInput'; //default  export