Getting Next / Previous using IQKeyboardManager

ios
uiux

#1

I’m trying to get the Previous / Next toolbar buttons working in nativescript-IQKeyboardManager, when my <TextField/> components are not next to each other.

Something like:

<StackLayout>
    <StackLayout>
        <Label text="Username"></Label>
        <TextField></TextField>
    </StackLayout>
    <StackLayout>
        <Label text="Password"></Label>
        <TextField></TextField>
    </StackLayout>
</StackLayout>

There is an issue that seems to talk about this, but the resolution leaves me wondering how to use it: https://github.com/tjvantoll/nativescript-IQKeyboardManager/issues/19

I thought it might be more appropriate to discuss here instead of in the GH issue.
(Maybe @tjvantoll can shed some light :wink: )

PS - I am using Angular, in case that means something.


#2

Hey @jzgoda,

Yeah good question. I actually hit this in an app recently so I need to come up with a good sample myself. I’ll ping some people to see if we can help you out here, otherwise I’ll get this on my TODO list. (I’m traveling this week and a bit short on time.)

TJ


#3

Hey @tjvantoll, thanks for responding!
I look forward to hearing about the solution (and can appreciate a busy schedule).


#4

@tjvantoll, sorry to bother you, but do you have any tips to just point me in the right direction on hooking the code from https://github.com/tjvantoll/nativescript-IQKeyboardManager/issues/19#issuecomment-308180255 into my {N}+ng app?

I’m guessing that I’m supposed to be extending some visual component that can get wrapped around either a TextField, or their parent StackLayout. And that this same component needs to somehow get passed to IQKeyboardManager using toolbarPreviousNextAllowedClasses.addObject().

I tried doing something like this, but addObject() complains that my component (which is extending ContentView) isn’t an NSObject.

Any push in the right direction would be greatly appreciated.
Thanks!


#5

@Eddy By chance have you gotten this working in one of your samples at one point?

If not no worries.


#6

@tjvantoll Nope, but I could add some wrapper to enable it, so you can use it like this:

      <IQKbMgr:PreviousNextView>
        <StackLayout>
          <StackLayout>
            <TextField hint="Email"/>
          </StackLayout>
          <StackLayout>
            <TextField hint="Password"/>
          </StackLayout>
        </StackLayout>
     </IQKbMgr:PreviousNextView>

#7

PR pending! https://github.com/tjvantoll/nativescript-IQKeyboardManager/pull/32


#8

Wow!! Many thanks, @Eddy!


#9

@jzgoda You can grab version 1.3.0 from npm now and enjoy this new feature! Check this doc for details: https://github.com/EddyVerbruggen/nativescript-IQKeyboardManager/tree/2644737b6c70dd33774c90a5ad7081c3a116fdd8#grouping-related-textfields-previous--next-buttons


#10

Thanks again @Eddy and @tjvantoll!
(That was more than I could have hoped for! :blush: )