Custom Keyboard

[Haga14]

Ask us any question

I'm working on a project to create a custom keyboard for human languages that aren't officially supported by the phone and software vendors.

I wanted to use the RN library listed below, but it's deprecated and it says it was superseded by RNUILIB. However, I don't see any documentation for using RNUILIB to create a custom keyboard.

https://github.com/wix/react-native-keyboard-input

Is there any guide or documentation for this?

PS, I would also appreciate any resources in achieving this with RN or similar cross platform tech.

Thanks!

[ethanshar]

Hi @Haga14 You are right. There's still no proper documentation for the Keyboard components. Until we add some, I'd recommend checking out the relevant example screen for code reference see if this one helps https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/nativeComponentScreens/keyboardInput/KeyboardInputViewScreen.js

[bathejasumeet]

@ethanshar Thanks for the heads up on the example to follow. I have been also trying to create a custom keyboard, but it seems that the native module cannot be picked up in the android.js. The particular error is :

Invariant Violation: requireNativeComponent: "CustomKeyboardViewNativeTemp" was not found in the UIManager

Any pointers on how to resolve this? Manually registering the package in getPackages() of the MainApplication using the call packages.addAll(new UiLibPackageList(this.getApplication()).getPackageList()); does not seem to help as well.

[ethanshar]

Is the old keyboard-input library still installed? (https://github.com/wix/react-native-keyboard-input) Try removing it and build the native app on Android again.

[bathejasumeet]

@ethanshar

Thanks for the prompt response. No, the old library is not installed. Fiddling with a new project and just installing react-native-ui-lib and copy pasting the example still gives the same error.

Sincerely, Sumeet

[ethanshar]

@M-i-k-e-l Maybe you can assist here? Do yo u know what can trigger this error?

Invariant Violation: requireNativeComponent: "CustomKeyboardViewNativeTemp" was not found in the UIManager

I remember we had a similar issue..

[Haga14]

@ethanshar thanks

@bathejasumeet I'm doing the same thing. Would you be interested in working together. We can also create a possible example repo for this part of RNUILIB

[M-i-k-e-l]

Hi @Haga14 and @bathejasumeet,

I'm (not so?) sorry to say that I did not reproduce your problem. Steps taken (see setup instructions here):

1. react-native init <ProjectName>
2. npm install react-native-ui-lib
3. npm i react-native-gesture-handler react-native-reanimated @react-native-community/blur @react-native-community/datetimepicker @react-native-community/netinfo @react-native-community/picker
4. Change App.js file and add two files (KeyboardInputViewScreen.js and demoKeyboards.js) under CustomKeyboard folder (see this gist)
5. npm run android

The application is working with no errors.

Please let me us know if this helped or perhaps something I've done does not reflect your scenario(s).

[Haga14]

Hi @Haga14 You are right. There's still no proper documentation for the Keyboard components. Until we add some, I'd recommend checking out the relevant example screen for code reference see if this one helps https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/nativeComponentScreens/keyboardInput/KeyboardInputViewScreen.js

Thanks pointing me to this Ethan!

I went ahead and took the code from the demo to see if I could run it on my expo project, and it's throwing an error. Below is the stack for this error, and for replication the link to my repo is below the stack

Invariant Violation: requireNativeComponent: "CustomKeyboardViewNativeTemp" was not found in the UIManager.

This error is located at: in CustomKeyboardViewNativeTemp (at CustomKeyboardView.android.js:32) in IGNORE (at KeyboardAccessoryView.js:263) in RCTView (at View.js:34) in View (at KeyboardTrackingView.android.js:7) in IGNORE (at KeyboardAccessoryView.js:251) in KeyboardAccessoryView (at keyboard/index.js:207) in RCTView (at View.js:34) in View (at view/index.js:115) in View (at forwardRef.js:6) in View (at asBaseComponent.js:34) in View (at forwardRef.js:6) in View (at keyboard/index.js:189) in KeyboardInputViewScreen (at App.js:11) in RCTView (at View.js:34) in View (at App.js:9) in App (created by ExpoRoot) in ExpoRoot (at renderApplication.js:45) in RCTView (at View.js:34) in View (at AppContainer.js:106) in RCTView (at View.js:34) in View (at AppContainer.js:132) in AppContainer (at renderApplication.js:39)

https://github.com/Haga14/farTay

[daxaxelrod]

Just got this error in prod. Same stack trace as @Haga14

[bathejasumeet]

Sorry for the late response. Was caught up with the Corona (season).

I reckon for some reason the native bindings are not working for just the keyboard. Bindings for other elements such as date-time picker work without any problems.

@Haga14 Thanks for creating the repo. I just saw this thread, we can certainly work on it (and perhaps also discuss and come to a solution by ourselves).

@M-i-k-e-l If possible, I would like to troubleshoot by first looking at the dependencies. Could you share the package-lock.json of the working repo so as to verify the dependencies and their versions ?

Sincerely, Sumeet

[M-i-k-e-l]

Oh, expo... The missing piece :) Are you only testing on Android? Is iOS working?

[Haga14]

Just android

[M-i-k-e-l]

@ethanshar - did the native components work when you've added expo? - TBH, I thought it was not supported. Either way, this looks like a more than a small fix, we should add an internal task and prioritize it.

[Haga14]

Sorry for the late response. Was caught up with the Corona (season).

I reckon for some reason the native bindings are not working for just the keyboard. Bindings for other elements such as date-time picker work without any problems.

@Haga14 Thanks for creating the repo. I just saw this thread, we can certainly work on it (and perhaps also discuss and come to a solution by ourselves).

@M-i-k-e-l If possible, I would like to troubleshoot by first looking at the dependencies. Could you share the package-lock.json of the working repo so as to verify the dependencies and their versions ?

Sincerely, Sumeet

Hey Sumeet

Feel free to make a PR any time

You can also find me in the RNUILIB discord

[daxaxelrod]

Think I found it. an old pr was merged into master but seems to have missed the CustomKeyboardView.android.js file

https://github.com/wix/react-native-ui-lib/blob/c8d017f799677a98a2e2f1432dadd121bf884478/lib/components/Keyboard/KeyboardInput/CustomKeyboardView.android.js

vs master right now: https://github.com/wix/react-native-ui-lib/blob/master/lib/components/Keyboard/KeyboardInput/CustomKeyboardView.android.js

But then it was changed back for hermes? https://github.com/wix/react-native-ui-lib/pull/825

The actual KeyboardInputModule's react name is

private static final String REACT_CLASS = "CustomKeyboardInputTemp";

but changing my local lib from requireNativeComponent('CustomKeyboardViewNativeTemp'); to requireNativeComponent('CustomKeyboardInputTemp');

didnt work either

[ethanshar]

@ethanshar - did the native components work when you've added expo? - TBH, I thought it was not supported. Either way, this looks like a more than a small fix, we should add an internal task and prioritize it.

Only native packages that are included in Expo. Unfortunately, I don't think RNUI native is included in Expo yet :/

[M-i-k-e-l]

That's what I thought. So, it's possible that the other native components are simply included in expo and that's why they are working. Not sure we can do anything here, @ethanshar?

[ethanshar]

Unfortunately no :(

[M-i-k-e-l]

Sorry people, closing this one.

[daxaxelrod]

Wait no this should not be closed. I’ll look into it deeper today.

On Tue, Jan 5, 2021 at 6:31 AM Miki notifications@github.com wrote:

Closed #1072 https://github.com/wix/react-native-ui-lib/issues/1072.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/wix/react-native-ui-lib/issues/1072#event-4169306893, or unsubscribe https://github.com/notifications/unsubscribe-auth/ACTZMUA2JJ56G6RUDUXVQP3SYL2CJANCNFSM4UYWZTRA .

[daxaxelrod]

Looked into it and good news, it was completely my fault, not the repo's! My application.java file was missing packages related to react-native-ui-lib. Fixed by adding

packages.addAll(new UiLibPackageList(MainApplication.this).getPackageList());

to my application.java

[ethanshar]

Great news. Though I assumed we are talking about expo, which in this case you don't need to handle native parts, no?

Also, RNUI does provide auto link, as far as I remember you don't need to manually add the packages in application.java

[daxaxelrod]

Not using expo. My project was started with RN .58. Upgraded to latest a month or so ago but some packages are still manually linked in my settings.gradle and app.gradle

[ethanshar]

as far as I know, there's no need to manually link our library. I suggest you try creating a new project with latest version of react-native and see if it works.

[uihoh0]

Same issues with expo here, begging for solution or advice.

[M-i-k-e-l]

Same issues with expo here, begging for solution or advice.

Our native components are not working in expo AFAIK, it's not up to us whether to include them or not.