Possible to use redux in registered keyboard?

[davidpaulsson]

I'm trying to use a redux connected component as a custom keyboard, is this possible or do I need to pass everything down the tree as initialProps onto the keyboard component?

[artald]

it is very much possible to do it, redux is just an implementation detail of your component and the keyboard system is not aware of it, so the component in your generator function that you register using KeyboardRegistry.registerKeyboard can be a component wrapped with a redux Provider.

see if this works for you, if not - let me know and i'll try to send an example later

[davidpaulsson]

Ok, so I need to wrap it with a Provider and pass the store? Right now I just try to register a component that uses connect from react-redux but it just throws. Any example you have would be most helpfull :)

[artald]

create a function for registering a wrapped component with a redux Provider and your store. it would look something like this:

const registerWrappedKeyboard = (keyboardName, generator, params, store) => {
  const {KeyboardRegistry} = require('react-native-keyboard-input');
  const generatorWrapper = function () {
    const InternalComponent = generator();
    const React = require('react');
    const {Provider} = require('react-redux');
    return class extends React.Component {
      render() {
        return (
          <Provider store={store}>
            <InternalComponent {...this.props}/>
          </Provider>
        );
      }
    };
  };
  KeyboardRegistry.registerKeyboard(keyboardName, generatorWrapper, params);
};

registering a keyboard component using this method looks like this:

registerWrappedKeyboard('MyKeyboardComponent', () => {
    return require('./path/to/keyboard/component/MyKeyboardComponent').default;
  }, {icon: require('./path/to/keyboard/icon/keyboardIcon.png')}, store);

in the above example, require('./path/to/keyboard/component/MyKeyboardComponent').default is the import to your connected redux component.

[davidpaulsson]

Thank you @artald! ❤️ That works perfectly! Closing.