ReactNative TextInput not letting me type

Question

For both iOS and Android simulators

The text just disappears/flickers when I start typing. I tried having an initial state of texts with some value instead of keeping it empty. With this the TextInput sticks to this initial state and does not update itself with new text entered.

I think the state is not updating with 'onChangeText' property, but I am not completely sure.

People have seem to solve this, as they had few typos or missing pieces in code. However I have checked mine thoroughly.

Please help if I have missed anything in the below code.

LoginForm.js

import React, { Component } from 'react';
import { Card, Button, CardSection, Input } from './common';

class LoginForm extends Component {

  state = { email: '', password: '' }

  render() {
    return (
      <Card>
        <CardSection>
          <Input
            label="Email"
            placeHolder="user@gmail.com"
            onChangeText={text => this.setState({ email: text })}
            value={this.state.email}
          />
        </CardSection>

        <CardSection>
          <Input
            secureTextEntry
            label="Password"
            placeHolder="password"
            onChangeText={text => this.setState({ password: text })}
            value={this.state.password}
          />
        </CardSection>

        <CardSection>
          <Button>
            Log In
          </Button>
        </CardSection>
      </Card>
    );
  }
}

export default LoginForm;

Input.js

import React from 'react';
import { TextInput, View, Text } from 'react-native';

const Input = ({ label, value, onChangeText, placeholder, secureTextEntry }) => {
  const { inputStyle, labelStyle, containerStyle } = styles;

  return (
    <View style={containerStyle}>
      <Text style={labelStyle}>{label}</Text>
      <TextInput
        secureTextEntry={secureTextEntry}
        placeholder={placeholder}
        autoCorrect={false}
        style={inputStyle}
        value={value}
        onChangeText={onChangeText}
      />
    </View>
  );
};

const styles = {
  inputStyle: {
    color: '#000',
    paddingRight: 5,
    paddingLeft: 5,
    fontSize: 18,
    lineHeight: 23,
    flex: 2
  },
  labelStyle: {
    fontSize: 18,
    paddingLeft: 20,
    flex: 1
  },
  containerStyle: {
    height: 40,
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center'
  }
};

export { Input };

Answer 1

The only way to solve this was to change the way the values of TextInput fields are updated, with this code below.

value={this.state.email.value}
value={this.state.password.value}

Answer 2

You problem is how the Input component is written.
There is a render function written inside the stateless component which is not a React class component:

const Input = ({ label, value, onChangeText, placeHolder, secureTextEntry }) => ( // ← remove the wrapping parentheses 
  {
    render() { // <--- this should not be here
      ↑
      const { inputStyle, labelStyle, containerStyle } = styles;
      return (
        <View style={containerStyle} >
          <Text style={labelStyle}>{label}</Text>
          <TextInput
            secureTextEntry={secureTextEntry}
            autoCorrect={false}
            placeholder={placeHolder}
            style={inputStyle}
            onChangeText={onChangeText}
            value={value}
            underlineColorAndroid="transparent"
          />
        </View>
      );
    }

  }
);

Change it to this:

const Input = ({ label, value, onChangeText, placeHolder, secureTextEntry }) => {
  const { inputStyle, labelStyle, containerStyle } = styles;
  return (
    <View style={containerStyle} >
      <Text style={labelStyle}>{label}</Text>
      <TextInput
        secureTextEntry={secureTextEntry}
        autoCorrect={false}
        placeholder={placeHolder}
        style={inputStyle}
        onChangeText={onChangeText}
        value={value}
        underlineColorAndroid="transparent"
      />
    </View>
  );
};

See running example