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 👍