Tcomb-form-native: affect behavior of return key - tab to next field?

[andrewljohnson]

I am using react native 0.14 and tcomb-form-native 0.3.2. I am testing on an iPad simulator, iOS9.

I can't figure out how to make the Next/Done key on the keyboard go to the next form field. I am able to set the options to show Next, by doing returnKeyType: "next," but the button always just hides the keyboard.

I tried to read the docs but couldn't make headway on this. I tried to set the order of the fields, but that did not work.

[remcoanker]

You can use the onSubmitEditing property on React Native's TextInput.

Set it in the options like this:

options: {
  fields: {
    email: {
      onSubmitEditing: () => this.refs.form.getComponent('password').refs.input.focus()
    }
  },
}

If you can find the field in onSubmitEditing, you could use your field order to focus the next.

[alvaromb]

@remcoanker is right. This is more a TextInput issue: http://facebook.github.io/react-native/docs/textinput.html#content

[Mikaila94]

I could not use this solution since my options are defined outside the class. this.refs.form.getComponent... syntax is undefined at that point. Is there any way you could refer to the next input-field without having to use "this.refs.form"-syntax?

[danyalalizahid]

@Mikaila94 got the same problem, options defined outside the field. Any luck?

[AlmogRnD]

Having the same issue, getting undefined for this.refs

[dekkofilms]

+1

[celso-henrique]

+1

[pallavbakshi]

Hi @Mikaila94, did you find a way?

[mtx62]

I think this is non-professional solution
but I defined this to variable that outside the class like this

var self;
then

  constructor(props) {
    super(props);
    self = this;
  }

finally:

        username_or_email: {
          returnKeyType:"next",
          onSubmitEditing: (event) => self.refs.form.getComponent('password').refs.input.focus()
        },

Best regards.

[ishigamii]

@mtx62 working but killing the app later like fetch not available anymore gotta be very very careful with this

[tonycoco]

To fix this issue you should just save yourself the hassle and define options inline on the Form component so you have the context and access to this.

Example:

const { Form } = t.form;

const formModel = t.struct({
  username: t.String,
  password: t.String,
});

...

<Form
  ref={(c) => { this.formRef = c; }}
  type={formModel}
  options={{
    fields: {
      username: {
        autoCapitalize: 'none',
        autoCorrect: false,
        autoFocus: true,
        returnKeyType: 'next',
        onSubmitEditing: () => this.formRef.getComponent('password').refs.input.focus(),
      },
      password: {
        secureTextEntry: true,
        returnKeyType: 'done',
        onSubmitEditing: () => this.onPress(),
      },
    },
  }}
/>

[nobady90]

yep @tonycoco method works! but is not there really a way to continue using a variable or constant? thanks for now!