Uncontrolled input

Uncontrolled input in React Native is not really what it is in web development. In fact, TextInput cannot be uncontrolled entirely. You need to listen to a value change in some way:

• onChangeText fires every time the text input changes
• onSubmitEditing fires when the text input's submit button is pressed

Additionally, TextInput by itself is a controlled component. Check further for an explanation. A long time ago, it used to have a prop called controlled that allowed you to specify a Boolean value, but this has changed. The documentation at that time specified the following:

I realize that the React Native team did put a lot of effort into addressing these issues and they fixed TextInput. However, TextInput became a controlled input to some extent. For instance, selection on TextInput is managed by React Native within the componentDidUpdate function.

Unless you specify the onChangeText or value props, then your component does not appear to get any more overhead.

The fact is that you can still use refs. Check out the following example to learn how to use React's latest API:

// Chapter 2 / Example 10 / App.js

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

        this.inputRef = React.createRef();
    }

    render = () => (
        <TextInput style={{height:50}} ref={ref => this.inputRef = ref} />
    );

    componentDidMount() {
        this.inputRef.focus();
    }
}

However, there are some limitations. You cannot ask ref for the input value. Sadly, I find this unlikely to change. If you look at this from the other side, it feels more natural. You probably only need controlled components. The benefit from uncontrolled ones is performance that, as of now, does not differ much. Hence, I doubt that you need uncontrolled components in React Native. I couldn't even come up with a use case where you would need a lot of uncontrolled components because of performance issues.

The closest I could get to leaving a component on its own was by using onSubmitEditing or onEndEditing. Such callbacks can be used like the onChangeText prop. They do not fire until the user presses the Submit/Return button on the native keyboard. Unfortunately, you can probably imagine the case when the user, instead of pressing the expected button, presses the login button instead. In such a case, the state would not be updated with the latest data, because the native keyboard remains opened. Such nuances may lead to incorrect data submission and critical bugs. Be careful.