TextInput, unrecognized selector sent to instance XXX onChangeText

[awitherow]

Description

I have a text input,

<TextInput
 style={styles.input}
 onChangeText={text => this.setState({ username: text })}
 value={username }
 editable
 placeholder={!Boolean(username) && 'Username'}
 />

When I attempt to put in the first change of text, this error gets thrown for iOS.

I am using the create-react-native-app and am unsure if this is a react-native issue or an expo, or whatever else in this stack... not very easy to debug to me.

Reproduction Steps

https://github.com/awitherow/sales-admin-app/pull/3

Set up, run with Expo XDE and use iOS simulator. Go to IDENTITY tab and attempt to log in.

Sample Code

//@flow
import React from 'react';
import {
 KeyboardAvoidingView,
 View,
 Text,
 TouchableOpacity,
 StyleSheet,
 TextInput,
 Platform,
} from 'react-native';

import { components, metrics, colors } from '../../theme';

export default class Security extends React.Component {
 constructor(props) {
 super(props);

 this.state = {
 username: '',
 password: '',
 };
 }

 validateForm = () =>
 this.state.username.length > 0 && this.state.password.length > 0;

 render() {
 const { username, password } = this.state;

 return (
 <View style={styles.form}>
 <View style={styles.formHeader}>
 <Text style={[styles.heading, styles.text]}>
 Welcome to the Marketplace.
 </Text>
 <Text style={[styles.subHeading, styles.text]}>
 Login, or register, below.
 </Text>
 </View>
 <KeyboardAvoidingView style={styles.formBody}>
 <TextInput
 style={styles.input}
 onChangeText={text => this.setState({ username: text })}
 value={username || ''}
 editable
 placeholder={!Boolean(username) && 'Username'}
 />
 <TextInput
 style={styles.input}
 onChangeText={text => this.setState({ password: text })}
 value={password || ''}
 editable
 placeholder={!Boolean(password) && 'Password'}
 secureTextEntry
 />
 </KeyboardAvoidingView>
 <View style={styles.formFooter}>
 <TouchableOpacity style={styles.button}>
 <Text style={styles.buttonText}>Login</Text>
 </TouchableOpacity>
 <TouchableOpacity style={styles.button}>
 <Text style={styles.buttonText}>Register</Text>
 </TouchableOpacity>
 <TouchableOpacity style={styles.button}>
 <Text style={styles.buttonText}>Learn More</Text>
 </TouchableOpacity>
 </View>
 </View>
 );
 }
}

Solution

Not sure where this is coming from or if I need to make this ticket in another part of this stack.

Additional Information

• React Native version: 0.44
• Platform: iOS
• Development Operating System: OS X
• Build tools: Create-React-Native-App

[awitherow]

iOS does not play nicely with my pointless Boolean placeholder check. It was an implementation mistake 👍