React Native: Refs in ListView

Question

It looks like the refs of views in is hard to be directly accessed.

Now I have a list view with a cells. In the renderRow function I have something like

Answer 1

The ref attribute on a React Component can either be a string or a callback function, which will be called with the component in its first argument.

So passing a function to a ref attribute will execute it when the component is mounted, with the component itself in the first argument.

What the github code you pasted is doing is adding the component to a two-dimensional array when it's mounted via the ref callback attribute. The row argument is essentially the <TextInput/> itself.

What do you want to achieve ? There might be an easier and cleaner solution.

---

EDIT: Regarding what you're trying to achieve, this would work :

render: function() {

    return (
        <ListView
            dataSource={this.state.dataSource}
            renderRow={(rowData) => {
                var inputRefs = [];

                var _focusInput = function(name) {
                    inputRefs[name].focus();
                };

                var input1 =
                    <TextInput 
                        ref={(input) => {
                            inputRefs['input1'] = input;
                        }}
                        onSubmitEditing={_focusInput.bind(null, 'input2')}
                        onEndEditing={_focusInput.bind(null, 'input2')} />;


                var input2 =
                    <TextInput 
                        ref={(input) => {
                            inputRefs['input2'] = input;
                        }} />;

                return (
                    <View>
                        {input1}
                        {input2}
                    </View>
                );
            }}/>
    );
}

You can dive more into TextInput events there https://facebook.github.io/react-native/docs/textinput.html#content.