I recently started learning React-Native and decided to follow a tutorial to create a login screen. I encountered an issue where the code in the tutorial was outdated. I am working on a login screen that consists of multiple components. However, one specific TextInput component is not showing up in the simulator. Below is the parent component, "LoginForm," from the file LoginForm1.js:
export default class LoginForm extends Component {
constructor(props) {
super(props);
this.state = {
text: ''
};
}
render() {
return (
<Card>
<CardSection>
<Input
placeholder="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e095938592a0878d81898cce838f8f8d">[email protected]</a>"
label="Email"
value={this.state.email}
onChangeText={text => this.setState({ text })}
/>
</CardSection>
The "Input" child component is encapsulated by the "CardSection" and "Card" components, which pass their props with a View displaying {this.props.children}. Here is the "Input" component from the file Input.js:
export default class Input extends Component {
render() {
return (
<View style={styles.containerStyle}>
<Text style={styles.labelStyle}>{this.props.label}</Text>
<TextInput
placeholder={this.props.placeholder}
autoCorrect={false}
style={styles.inputStyle}
value={this.props.value}
onChangeText={this.props.onChangeText}
/>
</View>
);
}
}
const styles = StyleSheet.create({
inputStlye: {
color: '#000',
paddingRight: 5,
paddingLeft: 5,
fontSize: 18,
Height: 50,
Width: 50,
flex: 2,
},
While this code does not produce any errors, the TextInput component within the "Input" component does not appear. I have specified dimensions in the styling, so that is not the issue. When I replace the TextInput with normal Text, the contents of that Text tag are displayed in the simulator. Am I overlooking something related to prop passing? Any assistance would be greatly appreciated. Thank you!