Text Input not showing up in iOS simulator

Question

I'm a newbie to React-Native, so I've been going through a tutorial to create a login screen. The code in the tutorial is out of date. I'm creating a login screen made up of a few components. However, a certain TextInput isn't showing up in the simulator. Here's the parent component "LoginForm" from LoginForm1.js:

export default class LoginForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      text: ''
    };
  }


  render() {
    return (
      <Card>
        <CardSection>
          <Input
          placeholder="[email protected]"
          label="Email"
          value={this.state.email}
          onChangeText={text => this.setState({ text })}
          />
        </CardSection>

The child component "Input" is wrapped in components "CardSection" and "Card" (these pass their props with a View displaying {this.props.children}, but here's the "Input" component from 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,
  },

This code doesn't throw any errors, but the TextInput from "Input" doesn't show up. I've given it some dimensions in the styling, so that can't be it. If I replace the TextInput with just normal Text, then the contents of that Text tag will appear in the simulator. Am I missing something to do with passing props? Any help would be much appreciated, thank you!

Matt Aft Matt Aft · Accepted Answer · 2017-03-09T22:42:00

You have the value being passed down as value={this.state.email}, but you're onChangeText is updating this.state.text so just change it to value={this.state.text}.

Text Input not showing up in iOS simulator

1 Answers