React-Native: TextInput cannot display the word when i'm typing

[monkeylau12]

Is this a bug report?

No

Have you read the Contributing Guidelines?

Yes

Environment

OS:  macOS Sierra 10.12.6
Node:  6.11.3
Yarn:  1.1.0
npm:  5.3.0
Watchman:  4.9.0
Xcode:  Xcode 8.3.3 Build version 8E3004b
Android Studio:  2.3 AI-162.4069837

Packages: (wanted => installed) react-native: 0.48.1 => 0.48.1 react: 16.0.0-alpha.12 => 16.0.0-alpha.12

Target Platform: iOS (10.3)

Steps to Reproduce

I go the search tab to input the keywords

Expected Behavior

I can see what im typing.

Actual Behavior

I cannot see what i had typed, but the search function is perfectly work!

(Write what happened. Add screenshots!)

Reproducible Demo

`render() { var spinner = this.state.isLoading ? ( <ActivityIndicator hidden='true' size='large'/> ) : ( ); return (

Search by book title and/or author Book Title: Author: Search {spinner} {this.state.errorMessage}

      );
  }
  bookTitleInput(text) {
      this.setState({ bookTitle: text });
  }
  bookAuthorInput(text) {
      this.setState({ bookAuthor: text });
  }`

Style: const styles = StyleSheet.create({ container: { flexDirection: 'column', justifyContent: 'center', marginTop: 65, padding: 10, flex:1 }, searchInput: { textAlign: 'left', color: 'black', margin: 5, height: 50, borderColor: '#60b7e2', borderWidth: 2, flex: 2, padding: 20

Screenshot:

(Paste the link to an example project and exact instructions to reproduce the issue.)

[HilSny]

Hi!

You need to provide a value to the TextInput and that value will update with state. See the example at the top of this page: https://facebook.github.io/react-native/docs/textinput.html

[sanketthanvi]

Hi @HilSny I don't think thats the case here. On https://facebook.github.io/react-native/docs/textinput.html, copy following code in first example. It works fine. Attaching screenshot as well.

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

export default class UselessTextInput extends Component {
  constructor(props) {
    super(props);
    this.state = { text: 'Initial Placeholder' , textTwo:'Initial Two'};
  }

  render() {
    return (
      <View>
      <Text>
        text: {this.state.text}
        </Text> 
              <Text>
        textTwo: {this.state.textTwo}
        </Text>
      <TextInput
        style={{height: 40, borderColor: 'gray', borderWidth: 1}}
        onChangeText={this.onChangeText.bind(this)}
      />
      <TextInput
        style={{height: 40, borderColor: 'gray', borderWidth: 1}}
        onChangeText={this.onChangeTextTwo.bind(this)}
      />
      </View>
    );
  }

  onChangeText(text){
    this.setState({text})
  }

  onChangeTextTwo(text){
    this.setState({textTwo:text})
  }
}

// skip this line if using Create React Native App
AppRegistry.registerComponent('AwesomeProject', () => UselessTextInput);

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. If you think this issue should definitely remain open, please let us know why. Thank you for your contributions.