Unable to import files

I have been trying to import a component that contains my custom input component into my profile screen.I have tried import both the ProfTab.js(container of my custom textInput component) and the FlexibleInput.js(custome TextInput.js) into my profileScreen.js separately to make sure there was nothing wrong with the files. I have tried deleting the app and restarting the bundle but nothing seems to be working, but i keep getting thrown this error instead.

Failed to load bundle(http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minigy=false) with error: (Unable to resolve module ../Components/profScreenComp/FlexInput from /Users/apple/Documents/Vscode/React-Native/Fluffy/src/Componensts/profScreenComp/ProfTabs.js: The module ../Components/profScreenComp/FlexInput could not be found from /Users/apple/Documents/Vscode/React-Native/Fluffy/src/Components/profScreenComp/ProfTab.js.

Indeed, none of these files exists)

Below is my profileScreen.js

    import React, { Component } from 'react';
import {View, Text, StyleSheet,Dimensions, ImageBackground,Button} from "react-native"
import Auth from "../Components/authComp/auth"
import ProfileTab from '../Components/profScreenComp/ProfTab'
// import FlexibleInput from '../Components/profScreenComp/flexInput'

import {connect} from 'react-redux'


const Width= Dimensions.get('window').width



 class ProfileScreen extends Component {
  static navigatorStyle = {
    navBarHidden: true,
    drawUnderNavBar: true,
    // navBarTranslucent: true
  };

  handleNavigation= ()=>{
    this.props.navigator.push({
      screen: "fluffy.ProfileInfoScreen",
      animated: true,
      animationType: "ease-in"
    })
  }
  render() {

    // let display= (<Auth/>)

    if(!this.props.auth){
      return(
        <Auth/>
      )
    }else{
      return (
        <View style={{flex: 1}}>

        <ImageBackground style={styles.background}>
        <View style= {styles.header}>
          <Text style={{color: "white", fontSize: 20,}}>PROFILE</Text>
        </View>

        <View style={styles.pointsBox}>
          </View>
        </ImageBackground>
        {/* <View style={styles.circle}><Text>M</Text></View> */}

          <View style= {styles.activity}>

          <View style={styles.tabsContainer}>
          <View style={styles.tabs}>
          <Text>Profile</Text>
          <Text>My Orders</Text>
          <Text>Support</Text>
          </View>
          </View>


          <View style={styles.body}>
         <ProfileTab/>
         {/* <FlexibleInput/> */}
          </View>

         </View> 

        </View>



      )
    }


  }
}

const styles= StyleSheet.create({
  header:{
    width: Width,
    height:50,
    alignItems: 'center',
    justifyContent: "center"
    ,backgroundColor: "#20265c",
    justifyContent: "flex-end",
    paddingBottom: 10,
  },


  background:{
    backgroundColor: "maroon",
    height: '50%',
    flex: 4,
    justifyContent:'space-between'

  },
  pointsBox:{
    height: 40,
    width: '60%',
    backgroundColor: "gray",
    borderRadius: 5,
    alignSelf: 'center',
  },
  // circle:{
  //   alignItems: 'center',
  //   justifyContent:"center",
  //   height: 100,
  //   width: 100,
  //   backgroundColor: "white",
  //   position: "absolute",
  //   borderRadius: 50,
  //   top: 240,
  //   left: 140,
  //   zIndex:2

  // },
  activity:{
    backgroundColor: "gray",
    flex: 6,
    // justifyContent: "center",
    // alignItems: 'center',
  },

tabs:{
    // marginTop: 10,
    // padding: 10,
    backgroundColor:'white',
    borderRadius: 50,
    height: '90%',
    width: '90%',
    flexDirection: 'row',
    justifyContent:'space-around',
    alignItems: 'center',

  },
  tabsContainer:{
    flex:1,
    justifyContent:'center',
    alignItems:'center',
    backgroundColor: 'orange'
  },
  body:{
    flex: 9,
    backgroundColor: 'beige'
  }

})

const mapStateToProps = state => {
  return{
    auth: state.auth.login
  }
}

export default connect(mapStateToProps)(ProfileScreen)

This is the component that contains my custom TextInput component

import React, { Component } from 'react';
import { View, StyleSheet, ScrollView} from 'react-native';
import FlexibleInput from '../Components/profScreenComp/FlexInput'

 class profTab extends Component {

  render() {
    return (

      <ScrollView contentContainerStyle={styles.container}>
      <View style={styles.content}>
      <FlexibleInput styles={styles.input} />
      </View>
      </ScrollView>

    );
  }
}

const styles= StyleSheet.create({
 container:{
     flex:1,
    margin: 10,
    padding: 10,
    justifyContent:'center',
    alignItems: 'center',
 },
 content:{
     height: '100%',
     width: '100%'
 },
 input:{
     borderColor: 'red',
 }
})

export default profTab

And finally my custom TextInput component

import React  from 'react'
import {TextInput, StyleSheet} from 'react-native'

const flexibleInput = (props) => (
    <TextInput
    {...props}
    style={[styles.input,props.styles]}
    />
)

const styles= StyleSheet.create({
    input: {
        width: "100%",
        borderWidth: 1,
        borderColor: "#eee",
        padding: 5,
        marginTop: 8,
        marginBottom: 8
      },
})

export default flexibleInput