Import/Export Components - react-native

Question

I'm trying to build a custom input component, and render it on another page
Here is my code
import React from "react";
import { View, TextInput, StyleSheet, Text } from "react-native";
import {
widthPercentageToDP as wp,
heightPercentageToDP as hp,
} from "react-native-responsive-screen";
import { MaterialCommunityIcons } from "#expo/vector-icons";
class RegisterTextBox extends React.Component {
render() {
const RegisterTextInput = ({
value,
placeholder,
onChangeText,
onBlur,
secureTextEntry,
inputStyle,
viewStyle,
eyeIcon = false,
}) => {
return (
<View style={[styles.container, viewStyle]}>
<TextInput
style={[styles.main, inputStyle]}
value={value}
onChangeText={onChangeText}
onBlur={onBlur}
placeholder={placeholder}
secureTextEntry={secureTextEntry}
/>
{eyeIcon ? (
<MaterialCommunityIcons
name="eye-off"
size={24}
color="black"
style={{ paddingTop: 5 }}
/>
) : (
<View />
)}
</View>
);
};
const styles = StyleSheet.create({
container: {
height: hp(5.4),
width: wp(65.2),
borderBottomColor: "grey",
borderBottomWidth: 1,
flexDirection: "row",
justifyContent: "space-between",
},
main: {},
});
}
}
export default RegisterTextBox;
I want const RegisterTextInput to be rendered and use dynamic data, but I seem to get an error when trying to use it "Error: RegisterTextBox(...): Nothing was returned from render.
this is how I'm trying to use it:
...
import RegisterTextInput from "../components/registerInput";
<View style={styles.emailInputsContainer}>
<RegisterTextInput
style={styles.emailInput}
placeholder="Email"
value={"email"}
onChangeText={}
/>
</View>
...
Where Is my problem?
Note: I want to use states on this component

Answer 1

Try with this...
import React from "react";
import { View, TextInput, StyleSheet, Text } from "react-native";
import {
widthPercentageToDP as wp,
heightPercentageToDP as hp,
} from "react-native-responsive-screen";
import { MaterialCommunityIcons } from "#expo/vector-icons";
class RegisterTextBox extends React.Component {
constructor(props) {
super(props);
}
render() {
const {
value,
placeholder,
onChangeText,
onBlur,
secureTextEntry,
inputStyle,
viewStyle,
eyeIcon = false,
} = this.props;
return (
<View style={[styles.container, viewStyle]}>
<TextInput
style={[styles.main, inputStyle]}
value={value}
onChangeText={onChangeText}
onBlur={onBlur}
placeholder={placeholder}
secureTextEntry={secureTextEntry}
/>
{eyeIcon ? (
<MaterialCommunityIcons
name="eye-off"
size={24}
color="black"
style={{ paddingTop: 5 }}
/>
) : (
<View />
)}
</View>
);
}
}
const styles = StyleSheet.create({
container: {
height: hp(5.4),
width: wp(65.2),
borderBottomColor: "grey",
borderBottomWidth: 1,
flexDirection: "row",
justifyContent: "space-between",
},
main: {},
});
export default RegisterTextBox;