React Native Focus Programmatically

[abudel]

The Problem

Can't focus programmatically a Text Input.

Steps to Reproduce

I tried using getRef={(input) => this.refs.input = input } but is always null

I tried to use action to focus the model <Control.TextInput .... onSubmitEditing={() => dispatch(actions.focus('user.lastName'))} ... /> In this case the state is successfully changed, but the focus remain in the current control. By trying blur and focus <Control.TextInput .... onSubmitEditing={() => { dispatch(actions.blur('user.firstName')); dispatch(actions.focus('user.lastName')); }} ... /> Same here, the state is updated but the focus remain.

Expected Behavior

Get reference of the input component by using getRef and call method focus()

Use actions to programmatically set the focus to a specific model

Actual Behavior

Focus not changed.

[davidkpiano]

Can you try removing line 385 of control-component.js in RRF, which is:

// ...
            if (isNative) return;
// ...

and seeing if focusing works as expected?

[abudel]

Thanks for the quick replay. I tried but it's not working either. It fails a couple rows after, when it tries to access to this.node prop ( it's undefined ). I think the problem is beacause it can not attach the node when the component is mount:

`attachNode() { const node = findDOMNode && findDOMNode(this);

  if (node) this.node = node;
}`

findDOMNode is null because is not supported on RN.

There is another way where i can access to the node?

Thanks

[davidkpiano]

Can you try installing RRF in your React Native from the master branch? (Let me know if you don't know how to do that) I just pushed a commit that uses findNodeHandle in React Native, so it should work.

[abudel]

Hi Again

Finally got it work! i used findNodeHandle in combination with TextInputState.focusTextInput(this.node)

Thanks for the tips

[davidkpiano]

@abudel May I see a bigger code example? I'd like to have this work automatically in RRF.

[abudel]

@davidkpiano here you are

import TextInputState from 'TextInputState' ..... //if (isNative) return; const focused = fieldValue.focus; if ((focused && this.node) && ( !this.isToggle() || typeof intent.value === 'undefined' || intent.value === controlProps.value )) { if(isNative) { TextInputState.focusTextInput(this.node) } else { input.focus(); } dispatch(actions.clearIntents(model, intent)); } ....

i did not check if the element to focus in is not a TextInput...

[davidkpiano]

I don't see findNodeHandle in that code :/

[abudel]

findNodeHandle is taking from your last commit

[nbiles]

Any update on this?