why can't i import my custom component in react native - react-native

Question

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
App.js
import React, { Component } from "react";
import {ActivityIndicator,Keyboard,KeyboardAvoidingView,StyleSheet} from "react-native";
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 = "contact#react-ui-kit.com";
const VALID_PASSWORD = "subscribe";
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("email");
}
if (password !== VALID_PASSWORD) {
errors.push("password");
}
this.setState({ errors, loading: false });
if (!errors.length) {
navigation.navigate("Browse");
}
}
render() {
const { navigation } = this.props;
const { loading, errors } = this.state;
const hasErrors = key => (errors.includes(key) ? styles.hasErrors : null);
return (
<KeyboardAvoidingView style={styles.login} behavior="padding">
<Block padding={[0, theme.sizes.base * 2]}>
<Text h1 bold>
Login
</Text>
<Block middle>
<Input
label="Email"
error={hasErrors("email")}
style={[styles.input, hasErrors("email")]}
defaultValue={this.state.email}
onChangeText={text => this.setState({ email: text })}
/>
<Input
secure
label="Password"
error={hasErrors("password")}
style={[styles.input, hasErrors("password")]}
defaultValue={this.state.password}
onChangeText={text => this.setState({ password: text })}
/>
<Button gradient onPress={() => this.handleLogin()}>
{loading ? (
<ActivityIndicator size="small" color="white" />
) : (
<Text bold white center>
Login
</Text>
)}
</Button>
<Button onPress={() => navigation.navigate("Forgot")}>
<Text
gray
caption
center
style={{ textDecorationLine: "underline" }}
>
Forgot your password?
</Text>
</Button>
</Block>
</Block>
</KeyboardAvoidingView>
);
}
}
const styles = StyleSheet.create({
login: {
flex: 1,
justifyContent: "center"
},
input: {
borderRadius: 0,
borderWidth: 0,
borderBottomColor: theme.colors.gray2,
borderBottomWidth: StyleSheet.hairlineWidth
},
hasErrors: {
borderBottomColor: theme.colors.accent
}
});
Block.js
import React, { Component } from "react";
import { StyleSheet, View, Animated } from "react-native";
import { theme } from "./constants";
export default class Block extends Component {
handleMargins() {
const { margin } = this.props;
if (typeof margin === "number") {
return {
marginTop: margin,
marginRight: margin,
marginBottom: margin,
marginLeft: margin
};
}
if (typeof margin === "object") {
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 === "number") {
return {
paddingTop: padding,
paddingRight: padding,
paddingBottom: padding,
paddingLeft: padding
};
}
if (typeof padding === "object") {
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 && { flex },
flex === false && { flex: 0 }, // reset / disable flex
row && styles.row,
column && styles.column,
center && styles.center,
middle && styles.middle,
left && styles.left,
right && styles.right,
top && styles.top,
bottom && styles.bottom,
margin && { ...this.handleMargins() },
padding && { ...this.handlePaddings() },
card && styles.card,
shadow && styles.shadow,
space && { justifyContent: `space-${space}` },
wrap && { flexWrap: "wrap" },
color && styles[color], // predefined styles colors for backgroundColor
color && !styles[color] && { backgroundColor: color }, // custom backgroundColor
style // rewrite predefined styles
];
if (animated) {
return (
<Animated.View style={blockStyles} {...props}>
{children}
</Animated.View>
);
}
return (
<View style={blockStyles} {...props}>
{children}
</View>
);
}
}
export const styles = StyleSheet.create({
block: {
flex: 1
},
row: {
flexDirection: "row"
},
column: {
flexDirection: "column"
},
card: {
borderRadius: theme.sizes.radius
},
center: {
alignItems: "center"
},
middle: {
justifyContent: "center"
},
left: {
justifyContent: "flex-start"
},
right: {
justifyContent: "flex-end"
},
top: {
justifyContent: "flex-start"
},
bottom: {
justifyContent: "flex-end"
},
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 }
});
Text.js
import React, { Component } from "react";
import { Text, StyleSheet } from "react-native";
import { theme } from "./constants";
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 && styles.h1,
h2 && styles.h2,
h3 && styles.h3,
title && styles.title,
body && styles.body,
caption && styles.caption,
small && styles.small,
size && { fontSize: size },
transform && { textTransform: transform },
align && { textAlign: align },
height && { lineHeight: height },
spacing && { letterSpacing: spacing },
weight && { fontWeight: weight },
regular && styles.regular,
bold && styles.bold,
semibold && styles.semibold,
medium && styles.medium,
light && styles.light,
center && styles.center,
right && styles.right,
color && styles[color],
color && !styles[color] && { color },
// color shortcuts
accent && styles.accent,
primary && styles.primary,
secondary && styles.secondary,
tertiary && styles.tertiary,
black && styles.black,
white && styles.white,
gray && styles.gray,
gray2 && styles.gray2,
style // rewrite predefined styles
];
return (
<Text style={textStyles} {...props}>
{children}
</Text>
);
}
}
const styles = StyleSheet.create({
// default style
text: {
fontSize: theme.sizes.font,
color: theme.colors.black
},
// variations
regular: {
fontWeight: "normal"
},
bold: {
fontWeight: "bold"
},
semibold: {
fontWeight: "500"
},
medium: {
fontWeight: "500"
},
light: {
fontWeight: "200"
},
// position
center: { textAlign: "center" },
right: { textAlign: "right" },
// 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
});
Button.js
import React, { Component } from "react";
import { StyleSheet, TouchableOpacity } from "react-native";
import { LinearGradient } from "react-native-linear-gradient";
import { theme } from "./constants";
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 && styles.shadow,
color && styles[color], // predefined styles colors for backgroundColor
color && !styles[color] && { backgroundColor: color }, // custom backgroundColor
style
];
if (gradient) {
return (
<TouchableOpacity
style={buttonStyles}
activeOpacity={opacity}
{...props}
>
<LinearGradient
start={start}
end={end}
locations={locations}
style={buttonStyles}
colors={[startColor, endColor]}
>
{children}
</LinearGradient> */
</TouchableOpacity>
);
}
return (
<TouchableOpacity
style={buttonStyles}
activeOpacity={opacity || 0.8}
{...props}
>
{children}
</TouchableOpacity>
);
}
}
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: "center",
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 }
});
Input.js
import React, { Component } from "react";
import { StyleSheet, View, Animated } from "react-native";
import { theme } from "./constants";
export default class Block extends Component {
handleMargins() {
const { margin } = this.props;
if (typeof margin === "number") {
return {
marginTop: margin,
marginRight: margin,
marginBottom: margin,
marginLeft: margin
};
}
if (typeof margin === "object") {
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 === "number") {
return {
paddingTop: padding,
paddingRight: padding,
paddingBottom: padding,
paddingLeft: padding
};
}
if (typeof padding === "object") {
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 && { flex },
flex === false && { flex: 0 }, // reset / disable flex
row && styles.row,
column && styles.column,
center && styles.center,
middle && styles.middle,
left && styles.left,
right && styles.right,
top && styles.top,
bottom && styles.bottom,
margin && { ...this.handleMargins() },
padding && { ...this.handlePaddings() },
card && styles.card,
shadow && styles.shadow,
space && { justifyContent: `space-${space}` },
wrap && { flexWrap: "wrap" },
color && styles[color], // predefined styles colors for backgroundColor
color && !styles[color] && { backgroundColor: color }, // custom backgroundColor
style // rewrite predefined styles
];
if (animated) {
return (
<Animated.View style={blockStyles} {...props}>
{children}
</Animated.View>
);
}
return (
<View style={blockStyles} {...props}>
{children}
</View>
);
}
}
export const styles = StyleSheet.create({
block: {
flex: 1
},
row: {
flexDirection: "row"
},
column: {
flexDirection: "column"
},
card: {
borderRadius: theme.sizes.radius
},
center: {
alignItems: "center"
},
middle: {
justifyContent: "center"
},
left: {
justifyContent: "flex-start"
},
right: {
justifyContent: "flex-end"
},
top: {
justifyContent: "flex-start"
},
bottom: {
justifyContent: "flex-end"
},
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 }
});
the error
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';
> 5 | import Button from './components' ;
| ^
6 | import Block from './components' ;
7 | import Text from './components' ;
8 | import Input from './components' ;

Answer 1

Are you exporting your component correctly?
OPTION 1 - if you are exporting one component per file, you can use the "export default" Example:
export default Class ClassName = () => {
return <View />;
}
and to import use
import ClassName from './app/components'
OPTION 2 - If there are several components, you have to export as a constant in this way
export Class ClassName = () => {
return <View />;
}
export Class OtherClassName = () => {
return <View />;
}
and to import use
import {ClassName, OtherClassName} from './app/components'
it depends on the way your folder structure is being created, by default and for a cleaner code the ideal is like this:
myAwesomeProject
src
| components
| | ComponentOne
| | | index.js
| | ComponentTwo
| | | index.js
and that way you can use the default export