Focus() in Input!

[leommh-zz]

Is your feature request related to a problem? Please describe.
The inputs do not pass the functions of focus (), blur (), among others of the TextInput of React Native.

Describe the solution you'd like
I would like these functions to be passed so that I could control focus and transfer from one input to another after I finish entering the value.

Describe alternatives you've considered
When the line:
ref = {input => (this.input = input)}
is added to the TextInput automatically the Input class wins the properties.

When creating the function:
function focusOnTextInput () {
return this.input.focus ()
};
It automatically causes the input to be focused, if it were to pass that function forward when the Input was imported, it was just to use it and the input would be focused.

But I tried to do this and the input does not show this function in its this, I do not know if it is because of the "withGalio" that is doing something, but the function does not come when using the input.

Additional context
Here is an example I could do by creating a customizable TextInput of mine!

[iamshrikantjha]

Image 1

Image 2

When we are using expo application then in Login Screen option there is an issue with input.
Sorry I am not very much experienced but can I try to fix this?

[iamshrikantjha]

Same issue with register screen

[leommh-zz]

Man, since it's an open library, I think you can try to sort and upload a pull request here in the project.

To try to give you a help and believe that this is happening because of the "KeyboardAvoidingView", this component has a property called keyboardVerticalOffset that defines how much effect it will apply when the input is selected.

Doc Official: https://facebook.github.io/react-native/docs/keyboardavoidingview

[hetmann]

@leommh maybe you can try using: https://reactjs.org/docs/forwarding-refs.html

[sam1463]

Another option, much like ref forwarding, but that would allow refs to either the galio input or the react-native textinput, would be to just add an onRef (or otherwise named) prop to the galio input component, which is then just passed to the text input.

// when you render the galio component
<Input
    onRef={input => { this.input = input }}
    ....
/>

// proposed changes to the galio component (in render method)
<TextInput
            ref={this.props.onRef} // passes the ref fn on to the text input
            style={inputStyles}
            keyboardType={type}
            secureTextEntry={isPassword}
            placeholderTextColor={placeholderTextColor}
            underlineColorAndroid="transparent"
            {...props}
          />

If that would be ok, I can open a PR. I've just changed it locally and it's working

[palingheorghe]

@sam1463 's solution is now included in v0.6

Thanks for your help!

[initzx]

Hello, is there an example of how to get galio working with focus(). It doesn't seem to work for me, when i set onRef on the input i wish to focus on

[sam1463]

@initzx It should work to use it like this:

// in method where you want to focus on the input
this.input.focus();

...

// in render method
return (
  ...other stuff
  <Input
    onRef={(ref) => { this.input = ref; }}
    ...other input props
  />
  ...more stuff
);

[palingheorghe]

Thank you for explaining @sam1463 ! Just noticed the new Input misses that prop so it might not work. This needs to be updated asap so I'll reopen the issue.

[sam1463]

@palingheorghe oh yeah good catch! It looks like in this commit when that component was changed from a class component to a functional one, the onRef prop got removed, probably just a bad merge resolution since that prop had only just barely made it into the repo before that.
e487742

[palingheorghe]

You think you can push another PR for this issue? @sam1463

[sam1463]

Yep, fixed it locally last night but haven't had time to open a PR yet. I should be able to when I get home later today.

[palingheorghe]

Thank you for your help! Looking forward to the PR!

[ammar-sheikh]

hey @sam1463
kindly can you push the PR!

[sam1463]

I already created one. For me, it's linked right above your comment, but in case that's not visible to you for some reason, it's here: #145

[palingheorghe]

Hi @ammar-sheikh ! I'll push the PR to the master server as soon as possible, I'm just trying to collect more PRs because some developers already invested into a workaround for lots of bugs we had so any new version could break their apps.

[gamingumar]

When the merge is expected?

[palingheorghe]

@gamingumar next week we'll clean the repo so we'll merge this PR as well because we're getting ready for v1.0.

[shiroze]

@initzx It should work to use it like this:

// in method where you want to focus on the input
this.input.focus();

...

// in render method
return (
  ...other stuff
  <Input
    onRef={(ref) => { this.input = ref; }}
    ...other input props
  />
  ...more stuff
);

I try using like this but give me null is not an object Package.json (v.0.6.3)

[palingheorghe]

Closed because we've merged the PR into the dev branch. Thank you!