react-native: TextInput clear() doesn't work at v0.54.2

@charpeni, on RN version 0.55.4 The defect is still reproduce. clear does not work in iOS

I’m using this:

if (Platform.OS === 'ios') this. textInputRef.setNativeProps({ text: ' ' });
setTimeout(() => { this. textInputRef.setNativeProps({ text: '' }) }, 5)

I had this problem too. But found out that using value={this.state.myValue} will clear it.

<TextInput 
    onChangeText={myValue => this.setState({myValue})}
    onSubmitEditing={this.handleSubmit}
    value={this.state.myValue}
/>

handleSubmit = () => {
    this.setState({myValue ''})
}

Add Ref. to your textInput Like: <TextInput ref={input => { this.textInput = input }} /> And Call this.textInput.clear() to clear your input field.

I am having the same issue as .clear() and setState({input: ‘’}) do not work.

Try this.refs[textInput]._root.clear(). I’m using Native Base’s Input component and I realized the clear() function got put into the _root object. Hopefully that fixes it for some people.

That’s the point, I’ve provided a reproducible example on Snack instead of plain text.

You can run this Snack on an older expo SDK version, everything will be fine.

same issue to me. I just init an entire new React Native app, no require any other third package.

Environment

Environment:
  OS: macOS High Sierra 10.13.4
  Node: 9.10.1
  Yarn: 1.5.1
  npm: 5.6.0
  Watchman: 4.9.0
  Xcode: Xcode 9.3 Build version 9E145
  Android Studio: Not Found

Packages: (wanted => installed)
  react: 16.3.1 => 16.3.1
  react-native: 0.55.2 => 0.55.2

the code in App.js:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  TextInput,
  TouchableOpacity,
  Button
} from 'react-native';

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
  android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

type Props = {};
export default class App extends Component<Props> {
  doClear() {
    console.log("doClear...");
    let textInput = this.refs["textInput"];
    console.log(textInput);
    textInput.clear();
  }
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit App.js
        </Text>
        <Text style={styles.instructions}>
          {instructions}
        </Text>
        <TextInput ref="textInput" style={{height: 40, width: "100%", margin: 20, padding: 10, backgroundColor: "#eee"}} />
        <Button title="clear" onPress={() => this.doClear()} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

what’s wrong ?Are you guys all OK ?