How to use the IQKeyboardManager Plugin with Vue.js


#1

Hi, guys.

I tried to use the NativeScript IQKeyboardManager Plugin in my Vue.js application without success. I followed the docs, registered the plugin adding the line Vue.registerElement("PreviousNextView", () => require("nativescript-iqkeyboardmanager").PreviousNextView) in my app.js file, built on my iPhone and nothing happened. Am I missing something?

Thanks in advance.


#2

Are you saying the PreviousNextView component was not working Or the keyboard toolbar itself never appears?


#3

I have the same issue I believe, however I also got an error in the console:

JS ERROR ReferenceError: Can’t find variable: IQKeyboardManager

I registered the plugin the same way you did, perhaps there is an issue with the plugin itself?


#4

Thats simply the usual, try deleting your platforms folder and run the again.


#5

Thanks for your suggestion, the problem persists though after deleting platforms and rebuilding the project :confused:


#6

The only reason it can say that error is your native iOS library (via POD) not installed properly and not a issue with plugin. When you do tns run ... after deleting platforms folder, you must see pods being installed through the logs.


#7

Hi, @manojdcoder!

The keyboard appears but keeps hiding the TextField when I only register the plugin. If I try to use the tag <PreviousNextView> in my page, then the app crashes.

Here’s the code in main.js:


import Vue from 'nativescript-vue';
import router from './router';
import './styles.scss';

Vue.registerElement("PreviousNextView", () => require("nativescript-iqkeyboardmanager").PreviousNextView)

// Uncommment the following to see NativeScript-Vue output logs
// Vue.config.silent = false;

new Vue({

  router,

}).$start();

Here’s the code in my .vue file:

  <Page>
    <ActionBar title="Login"/>

      <ScrollView>
        <StackLayout class="container">
            <Label textWrap="true" text="Type your name and e-mail:"  />

            <PreviousNextView>
                 <FloatLabel v-model="user.name" placeholder="Name" />
                 <FloatLabel v-model="user.email" placeholder="E-mail" />
            </PreviousNextView>
            
            <Button text="Send" @tap="onButtonTap" />
        </StackLayout>
      </ScrollView>    

  </Page> 

Notice that my TextFields are actually custom components.

This is the error in Xcode console while trying to run the project on my iPhone:

file:///app/app.js:1:169767: JS ERROR ReferenceError: Can't find variable: IQPreviousNextView
warning: could not execute support code to read Objective-C class data in the process. This may reduce the quality of type information available.
(lldb) 

Thanks in advance!


#8

Can you try reproducing the issue with playground?


#9

In Playground it works like a charm, it doesn’t need to install any plugin. That’s why is so frustrating. :frowning:


#10

The plugin is pre-installed in Playground app so you don’t have to explicitly install it. I’m using that plugin in every app, it works always.


#11

It works only on Android or on iPhone as well? Did you make something different of what I’ve shown you in my code?

It’s weird because @Reached has faced the same problem.


#12

IQKeyboardManager is for iOS only, Android by default have options to handle scrolling / screen resizing when keyboard is open.


#13

Yeah, I know about that on Android. But did you have tested this plugin on an iOS physical device yet? It doesn’t work on my iPhone. Do I need to make something different on my code?

Are you using NS with Vue?

Thanks in advance for your time and support.


#14

Fixed the problem by running npm run clean. Thanks.


#15

I will try that as well, thanks!