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 pletely 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 './mon';

class LoginForm extends Component {

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

  render() {
    return (
      <Card>
        <CardSection>
          <Input
            label="Email"
            placeHolder="[email protected]"
            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 };

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 pletely 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 './mon';

class LoginForm extends Component {

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

  render() {
    return (
      <Card>
        <CardSection>
          <Input
            label="Email"
            placeHolder="[email protected]"
            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 };

• javascript
• reactjs
• react-native

• shouldn't it be onChangeText={e => this.setState({ password: e.target.value })} ? – Sagiv b.g Commented Feb 17, 2018 at 18:56
• sorry just noticed you are using TextInput from react-native – Sagiv b.g Commented Feb 17, 2018 at 18:57
• @Sagivb.g No problem. Let me know if the question has any misleading content or tags. – Gautam Mandsorwale Commented Feb 17, 2018 at 18:59
• I would extract onChangeText to a class method and debug / log the changes, just to be sure you are getting back the proper value and be sure the problem is with the state not being updated – Sagiv b.g Commented Feb 17, 2018 at 19:01
• found your problem, your Input ponent is written in a wrong way. i'll explain with an answer – Sagiv b.g Commented Feb 17, 2018 at 19:10

2 Answers 2

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}

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

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