title: why can't i import my custom component in react native
body: <p>i created these components and i was trying to import them in App.js but it shows me an error message, i tried to change the export default class multiple times , i chaged the order of import lines to figure out if there'e an error in the importing of one of the components, but nothing changed and still shows me the same error message, how can i fix it</p>
  <p><strong>App.js</strong></p>
  <pre><code>import React, { Component } from &quot;react&quot;;
  import {ActivityIndicator,Keyboard,KeyboardAvoidingView,StyleSheet} from &quot;react-native&quot;;
  
  import { theme } from './constants';
  import  Block from './app/components' ; 
  import  Button from './app/components' ; 
  import  Text from './app/components' ; 
  import  Input from './app/components' ; 
  
  const VALID_EMAIL = &quot;contact@react-ui-kit.com&quot;;
  const VALID_PASSWORD = &quot;subscribe&quot;;
  
  export default class Login extends Component {
    state = {
      email: VALID_EMAIL,
      password: VALID_PASSWORD,
      errors: [],
      loading: false
    };
  
    handleLogin() {
      const { navigation } = this.props;
      const { email, password } = this.state;
      const errors = [];
  
      Keyboard.dismiss();
      this.setState({ loading: true });
  
      // check with backend API or with some static data
      if (email !== VALID_EMAIL) {
        errors.push(&quot;email&quot;);
      }
      if (password !== VALID_PASSWORD) {
        errors.push(&quot;password&quot;);
      }
  
      this.setState({ errors, loading: false });
  
      if (!errors.length) {
        navigation.navigate(&quot;Browse&quot;);
      }
    }
  
    render() {
      const { navigation } = this.props;
      const { loading, errors } = this.state;
      const hasErrors = key =&gt; (errors.includes(key) ? styles.hasErrors : null);
  
      return (
        &lt;KeyboardAvoidingView style={styles.login} behavior=&quot;padding&quot;&gt;
          &lt;Block padding={[0, theme.sizes.base * 2]}&gt;
            &lt;Text h1 bold&gt;
              Login
            &lt;/Text&gt;
            &lt;Block middle&gt;
              &lt;Input
                label=&quot;Email&quot;
                error={hasErrors(&quot;email&quot;)}
                style={[styles.input, hasErrors(&quot;email&quot;)]}
                defaultValue={this.state.email}
                onChangeText={text =&gt; this.setState({ email: text })}
              /&gt;
              &lt;Input
                secure
                label=&quot;Password&quot;
                error={hasErrors(&quot;password&quot;)}
                style={[styles.input, hasErrors(&quot;password&quot;)]}
                defaultValue={this.state.password}
                onChangeText={text =&gt; this.setState({ password: text })}
              /&gt;
              &lt;Button gradient onPress={() =&gt; this.handleLogin()}&gt;
                {loading ? (
                  &lt;ActivityIndicator size=&quot;small&quot; color=&quot;white&quot; /&gt;
                ) : (
                  &lt;Text bold white center&gt;
                    Login
                  &lt;/Text&gt;
                )}
              &lt;/Button&gt;
  
              &lt;Button onPress={() =&gt; navigation.navigate(&quot;Forgot&quot;)}&gt;
                &lt;Text
                  gray
                  caption
                  center
                  style={{ textDecorationLine: &quot;underline&quot; }}
                &gt;
                  Forgot your password?
                &lt;/Text&gt;
              &lt;/Button&gt;
            &lt;/Block&gt;
          &lt;/Block&gt;
        &lt;/KeyboardAvoidingView&gt;
      );
    }
  }
  
  const styles = StyleSheet.create({
    login: {
      flex: 1,
      justifyContent: &quot;center&quot;
    },
    input: {
      borderRadius: 0,
      borderWidth: 0,
      borderBottomColor: theme.colors.gray2,
      borderBottomWidth: StyleSheet.hairlineWidth
    },
    hasErrors: {
      borderBottomColor: theme.colors.accent
    }
  });
  </code></pre>
  <p><strong>Block.js</strong></p>
  <pre><code>import React, { Component } from &quot;react&quot;;
  import { StyleSheet, View, Animated } from &quot;react-native&quot;;
  
  import { theme } from &quot;./constants&quot;;
  
  export default class Block extends Component {
    handleMargins() {
      const { margin } = this.props;
      if (typeof margin === &quot;number&quot;) {
        return {
          marginTop: margin,
          marginRight: margin,
          marginBottom: margin,
          marginLeft: margin
        };
      }
  
      if (typeof margin === &quot;object&quot;) {
        const marginSize = Object.keys(margin).length;
        switch (marginSize) {
          case 1:
            return {
              marginTop: margin[0],
              marginRight: margin[0],
              marginBottom: margin[0],
              marginLeft: margin[0]
            };
          case 2:
            return {
              marginTop: margin[0],
              marginRight: margin[1],
              marginBottom: margin[0],
              marginLeft: margin[1]
            };
          case 3:
            return {
              marginTop: margin[0],
              marginRight: margin[1],
              marginBottom: margin[2],
              marginLeft: margin[1]
            };
          default:
            return {
              marginTop: margin[0],
              marginRight: margin[1],
              marginBottom: margin[2],
              marginLeft: margin[3]
            };
        }
      }
    }
  
    handlePaddings() {
      const { padding } = this.props;
      if (typeof padding === &quot;number&quot;) {
        return {
          paddingTop: padding,
          paddingRight: padding,
          paddingBottom: padding,
          paddingLeft: padding
        };
      }
  
      if (typeof padding === &quot;object&quot;) {
        const paddingSize = Object.keys(padding).length;
        switch (paddingSize) {
          case 1:
            return {
              paddingTop: padding[0],
              paddingRight: padding[0],
              paddingBottom: padding[0],
              paddingLeft: padding[0]
            };
          case 2:
            return {
              paddingTop: padding[0],
              paddingRight: padding[1],
              paddingBottom: padding[0],
              paddingLeft: padding[1]
            };
          case 3:
            return {
              paddingTop: padding[0],
              paddingRight: padding[1],
              paddingBottom: padding[2],
              paddingLeft: padding[1]
            };
          default:
            return {
              paddingTop: padding[0],
              paddingRight: padding[1],
              paddingBottom: padding[2],
              paddingLeft: padding[3]
            };
        }
      }
    }
  
    render() {
      const {
        flex,
        row,
        column,
        center,
        middle,
        left,
        right,
        top,
        bottom,
        card,
        shadow,
        color,
        space,
        padding,
        margin,
        animated,
        wrap,
        style,
        children,
        ...props
      } = this.props;
  
      const blockStyles = [
        styles.block,
        flex &amp;&amp; { flex },
        flex === false &amp;&amp; { flex: 0 }, // reset / disable flex
        row &amp;&amp; styles.row,
        column &amp;&amp; styles.column,
        center &amp;&amp; styles.center,
        middle &amp;&amp; styles.middle,
        left &amp;&amp; styles.left,
        right &amp;&amp; styles.right,
        top &amp;&amp; styles.top,
        bottom &amp;&amp; styles.bottom,
        margin &amp;&amp; { ...this.handleMargins() },
        padding &amp;&amp; { ...this.handlePaddings() },
        card &amp;&amp; styles.card,
        shadow &amp;&amp; styles.shadow,
        space &amp;&amp; { justifyContent: `space-${space}` },
        wrap &amp;&amp; { flexWrap: &quot;wrap&quot; },
        color &amp;&amp; styles[color], // predefined styles colors for backgroundColor
        color &amp;&amp; !styles[color] &amp;&amp; { backgroundColor: color }, // custom backgroundColor
        style // rewrite predefined styles
      ];
  
      if (animated) {
        return (
          &lt;Animated.View style={blockStyles} {...props}&gt;
            {children}
          &lt;/Animated.View&gt;
        );
      }
  
      return (
        &lt;View style={blockStyles} {...props}&gt;
          {children}
        &lt;/View&gt;
      );
    }
  }
  
  export const styles = StyleSheet.create({
    block: {
      flex: 1
    },
    row: {
      flexDirection: &quot;row&quot;
    },
    column: {
      flexDirection: &quot;column&quot;
    },
    card: {
      borderRadius: theme.sizes.radius
    },
    center: {
      alignItems: &quot;center&quot;
    },
    middle: {
      justifyContent: &quot;center&quot;
    },
    left: {
      justifyContent: &quot;flex-start&quot;
    },
    right: {
      justifyContent: &quot;flex-end&quot;
    },
    top: {
      justifyContent: &quot;flex-start&quot;
    },
    bottom: {
      justifyContent: &quot;flex-end&quot;
    },
    shadow: {
      shadowColor: theme.colors.black,
      shadowOffset: { width: 0, height: 2 },
      shadowOpacity: 0.1,
      shadowRadius: 13,
      elevation: 2
    },
    accent: { backgroundColor: theme.colors.accent },
    primary: { backgroundColor: theme.colors.primary },
    secondary: { backgroundColor: theme.colors.secondary },
    tertiary: { backgroundColor: theme.colors.tertiary },
    black: { backgroundColor: theme.colors.black },
    white: { backgroundColor: theme.colors.white },
    gray: { backgroundColor: theme.colors.gray },
    gray2: { backgroundColor: theme.colors.gray2 }
  });
  </code></pre>
  <p><strong>Text.js</strong></p>
  <pre><code>import React, { Component } from &quot;react&quot;;
  import { Text, StyleSheet } from &quot;react-native&quot;;
  
  import { theme } from &quot;./constants&quot;;
  
  export default class Typography extends Component {
    render() {
      const {
        h1,
        h2,
        h3,
        title,
        body,
        caption,
        small,
        size,
        transform,
        align,
        // styling
        regular,
        bold,
        semibold,
        medium,
        weight,
        light,
        center,
        right,
        spacing, // letter-spacing
        height, // line-height
        // colors
        color,
        accent,
        primary,
        secondary,
        tertiary,
        black,
        white,
        gray,
        gray2,
        style,
        children,
        ...props
      } = this.props;
  
      const textStyles = [
        styles.text,
        h1 &amp;&amp; styles.h1,
        h2 &amp;&amp; styles.h2,
        h3 &amp;&amp; styles.h3,
        title &amp;&amp; styles.title,
        body &amp;&amp; styles.body,
        caption &amp;&amp; styles.caption,
        small &amp;&amp; styles.small,
        size &amp;&amp; { fontSize: size },
        transform &amp;&amp; { textTransform: transform },
        align &amp;&amp; { textAlign: align },
        height &amp;&amp; { lineHeight: height },
        spacing &amp;&amp; { letterSpacing: spacing },
        weight &amp;&amp; { fontWeight: weight },
        regular &amp;&amp; styles.regular,
        bold &amp;&amp; styles.bold,
        semibold &amp;&amp; styles.semibold,
        medium &amp;&amp; styles.medium,
        light &amp;&amp; styles.light,
        center &amp;&amp; styles.center,
        right &amp;&amp; styles.right,
        color &amp;&amp; styles[color],
        color &amp;&amp; !styles[color] &amp;&amp; { color },
        // color shortcuts
        accent &amp;&amp; styles.accent,
        primary &amp;&amp; styles.primary,
        secondary &amp;&amp; styles.secondary,
        tertiary &amp;&amp; styles.tertiary,
        black &amp;&amp; styles.black,
        white &amp;&amp; styles.white,
        gray &amp;&amp; styles.gray,
        gray2 &amp;&amp; styles.gray2,
        style // rewrite predefined styles
      ];
  
      return (
        &lt;Text style={textStyles} {...props}&gt;
          {children}
        &lt;/Text&gt;
      );
    }
  }
  
  const styles = StyleSheet.create({
    // default style
    text: {
      fontSize: theme.sizes.font,
      color: theme.colors.black
    },
    // variations
    regular: {
      fontWeight: &quot;normal&quot;
    },
    bold: {
      fontWeight: &quot;bold&quot;
    },
    semibold: {
      fontWeight: &quot;500&quot;
    },
    medium: {
      fontWeight: &quot;500&quot;
    },
    light: {
      fontWeight: &quot;200&quot;
    },
    // position
    center: { textAlign: &quot;center&quot; },
    right: { textAlign: &quot;right&quot; },
    // colors
    accent: { color: theme.colors.accent },
    primary: { color: theme.colors.primary },
    secondary: { color: theme.colors.secondary },
    tertiary: { color: theme.colors.tertiary },
    black: { color: theme.colors.black },
    white: { color: theme.colors.white },
    gray: { color: theme.colors.gray },
    gray2: { color: theme.colors.gray2 },
    // fonts
    h1: theme.fonts.h1,
    h2: theme.fonts.h2,
    h3: theme.fonts.h3,
    title: theme.fonts.title,
    body: theme.fonts.body,
    caption: theme.fonts.caption,
    small: theme.fonts.small
  });
  </code></pre>
  <p><strong>Button.js</strong></p>
  <pre><code>import React, { Component } from &quot;react&quot;;
  import { StyleSheet, TouchableOpacity } from &quot;react-native&quot;;
  import { LinearGradient } from &quot;react-native-linear-gradient&quot;;
  import { theme } from &quot;./constants&quot;;
  
  class Button extends Component {
    render() {
      const {
        style,
        opacity,
        gradient,
        color,
        startColor,
        endColor,
        end,
        start,
        locations,
        shadow,
        children,
        ...props
      } = this.props;
  
      const buttonStyles = [
        styles.button,
        shadow &amp;&amp; styles.shadow,
        color &amp;&amp; styles[color], // predefined styles colors for backgroundColor
        color &amp;&amp; !styles[color] &amp;&amp; { backgroundColor: color }, // custom backgroundColor
        style
      ];
  
      if (gradient) {
        return (
          &lt;TouchableOpacity
            style={buttonStyles}
            activeOpacity={opacity}
            {...props}
          &gt;
            &lt;LinearGradient
              start={start}
              end={end}
              locations={locations}
              style={buttonStyles}
              colors={[startColor, endColor]}
            &gt;
              {children}
            &lt;/LinearGradient&gt; */
          &lt;/TouchableOpacity&gt;
        );
      }
  
      return (
        &lt;TouchableOpacity
          style={buttonStyles}
          activeOpacity={opacity || 0.8}
          {...props}
        &gt;
          {children}
        &lt;/TouchableOpacity&gt;
      );
    }
  }
  
  Button.defaultProps = {
    startColor: theme.colors.primary,
    endColor: theme.colors.secondary,
    start: { x: 0, y: 0 },
    end: { x: 1, y: 1 },
    locations: [0.1, 0.9],
    opacity: 0.8,
    color: theme.colors.white
  };
  
  export default Button;
  
  const styles = StyleSheet.create({
    button: {
      borderRadius: theme.sizes.radius,
      height: theme.sizes.base * 3,
      justifyContent: &quot;center&quot;,
      marginVertical: theme.sizes.padding / 3
    },
    shadow: {
      shadowColor: theme.colors.black,
      shadowOffset: { width: 0, height: 2 },
      shadowOpacity: 0.1,
      shadowRadius: 10
    },
    accent: { backgroundColor: theme.colors.accent },
    primary: { backgroundColor: theme.colors.primary },
    secondary: { backgroundColor: theme.colors.secondary },
    tertiary: { backgroundColor: theme.colors.tertiary },
    black: { backgroundColor: theme.colors.black },
    white: { backgroundColor: theme.colors.white },
    gray: { backgroundColor: theme.colors.gray },
    gray2: { backgroundColor: theme.colors.gray2 },
    gray3: { backgroundColor: theme.colors.gray3 },
    gray4: { backgroundColor: theme.colors.gray4 }
  });
  </code></pre>
  <p><strong>Input.js</strong></p>
  <pre><code>import React, { Component } from &quot;react&quot;;
  import { StyleSheet, View, Animated } from &quot;react-native&quot;;
  
  import { theme } from &quot;./constants&quot;;
  
  export default class Block extends Component {
    handleMargins() {
      const { margin } = this.props;
      if (typeof margin === &quot;number&quot;) {
        return {
          marginTop: margin,
          marginRight: margin,
          marginBottom: margin,
          marginLeft: margin
        };
      }
  
      if (typeof margin === &quot;object&quot;) {
        const marginSize = Object.keys(margin).length;
        switch (marginSize) {
          case 1:
            return {
              marginTop: margin[0],
              marginRight: margin[0],
              marginBottom: margin[0],
              marginLeft: margin[0]
            };
          case 2:
            return {
              marginTop: margin[0],
              marginRight: margin[1],
              marginBottom: margin[0],
              marginLeft: margin[1]
            };
          case 3:
            return {
              marginTop: margin[0],
              marginRight: margin[1],
              marginBottom: margin[2],
              marginLeft: margin[1]
            };
          default:
            return {
              marginTop: margin[0],
              marginRight: margin[1],
              marginBottom: margin[2],
              marginLeft: margin[3]
            };
        }
      }
    }
  
    handlePaddings() {
      const { padding } = this.props;
      if (typeof padding === &quot;number&quot;) {
        return {
          paddingTop: padding,
          paddingRight: padding,
          paddingBottom: padding,
          paddingLeft: padding
        };
      }
  
      if (typeof padding === &quot;object&quot;) {
        const paddingSize = Object.keys(padding).length;
        switch (paddingSize) {
          case 1:
            return {
              paddingTop: padding[0],
              paddingRight: padding[0],
              paddingBottom: padding[0],
              paddingLeft: padding[0]
            };
          case 2:
            return {
              paddingTop: padding[0],
              paddingRight: padding[1],
              paddingBottom: padding[0],
              paddingLeft: padding[1]
            };
          case 3:
            return {
              paddingTop: padding[0],
              paddingRight: padding[1],
              paddingBottom: padding[2],
              paddingLeft: padding[1]
            };
          default:
            return {
              paddingTop: padding[0],
              paddingRight: padding[1],
              paddingBottom: padding[2],
              paddingLeft: padding[3]
            };
        }
      }
    }
  
    render() {
      const {
        flex,
        row,
        column,
        center,
        middle,
        left,
        right,
        top,
        bottom,
        card,
        shadow,
        color,
        space,
        padding,
        margin,
        animated,
        wrap,
        style,
        children,
        ...props
      } = this.props;
  
      const blockStyles = [
        styles.block,
        flex &amp;&amp; { flex },
        flex === false &amp;&amp; { flex: 0 }, // reset / disable flex
        row &amp;&amp; styles.row,
        column &amp;&amp; styles.column,
        center &amp;&amp; styles.center,
        middle &amp;&amp; styles.middle,
        left &amp;&amp; styles.left,
        right &amp;&amp; styles.right,
        top &amp;&amp; styles.top,
        bottom &amp;&amp; styles.bottom,
        margin &amp;&amp; { ...this.handleMargins() },
        padding &amp;&amp; { ...this.handlePaddings() },
        card &amp;&amp; styles.card,
        shadow &amp;&amp; styles.shadow,
        space &amp;&amp; { justifyContent: `space-${space}` },
        wrap &amp;&amp; { flexWrap: &quot;wrap&quot; },
        color &amp;&amp; styles[color], // predefined styles colors for backgroundColor
        color &amp;&amp; !styles[color] &amp;&amp; { backgroundColor: color }, // custom backgroundColor
        style // rewrite predefined styles
      ];
  
      if (animated) {
        return (
          &lt;Animated.View style={blockStyles} {...props}&gt;
            {children}
          &lt;/Animated.View&gt;
        );
      }
  
      return (
        &lt;View style={blockStyles} {...props}&gt;
          {children}
        &lt;/View&gt;
      );
    }
  }
  
  export const styles = StyleSheet.create({
    block: {
      flex: 1
    },
    row: {
      flexDirection: &quot;row&quot;
    },
    column: {
      flexDirection: &quot;column&quot;
    },
    card: {
      borderRadius: theme.sizes.radius
    },
    center: {
      alignItems: &quot;center&quot;
    },
    middle: {
      justifyContent: &quot;center&quot;
    },
    left: {
      justifyContent: &quot;flex-start&quot;
    },
    right: {
      justifyContent: &quot;flex-end&quot;
    },
    top: {
      justifyContent: &quot;flex-start&quot;
    },
    bottom: {
      justifyContent: &quot;flex-end&quot;
    },
    shadow: {
      shadowColor: theme.colors.black,
      shadowOffset: { width: 0, height: 2 },
      shadowOpacity: 0.1,
      shadowRadius: 13,
      elevation: 2
    },
    accent: { backgroundColor: theme.colors.accent },
    primary: { backgroundColor: theme.colors.primary },
    secondary: { backgroundColor: theme.colors.secondary },
    tertiary: { backgroundColor: theme.colors.tertiary },
    black: { backgroundColor: theme.colors.black },
    white: { backgroundColor: theme.colors.white },
    gray: { backgroundColor: theme.colors.gray },
    gray2: { backgroundColor: theme.colors.gray2 }
  });
  </code></pre>
  <p>the error</p>
  <pre><code>Error: Unable to resolve module ./components from C:\Users\DELL\wan_way_service_app\App.js:
  
  None of these files exist:
    * components(.native|.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)
    * components\index(.native|.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)
    3 |
    4 | import { theme } from './constants';
  &gt; 5 | import  Button from './components' ;
      |                      ^
    6 | import  Block from './components' ;
    7 | import  Text from './components' ;
    8 | import  Input from './components' ;
  </code></pre>