Enabling only for certain screens

[JeremyBradshaw7]

• What version of React Native? 0.59.10

• What version of the library? 4.0.13-12

• iOS version? 10.14.6 Mojave

• Did the problem happen after updating React Native? No

• Are you using the library for the first time? Yes

We want to use this library on a screen-by-screen basis, because until now we've been using other solutions for keyboard management, and when this library is installed it impacts the way those existing solutions work, sometimes with adverse effects. Therefore we want to migrate over to it gradually but build new screens with it.

However, if I do this in my index file:

if (Platform.OS === 'ios') {
  // since we introduced this after other solutions, have to turn it on/off per screen that uses it, else it will impact globally
  KeyboardManager.setEnable(false);
}

and enable it on the startup of specific screens, it is still impacting everywhere (as evidenced by the extra line above the keyboard containing the placeholder and the "Done" link). Is there a workaround? Is there more than just setEnable to set to false to disable all functionality?

[douglasjunior]

How are you enabling and disabling the KeyboardManager on screens?

[JeremyBradshaw7]

I've refined it a bit with a helper class (typescript) to turn the manager off & on:

import KeyboardManager from 'react-native-keyboard-manager';
import { Platform } from 'react-native';

// keyboard helper class
// since we introduced this after other solutions, have to turn it on/off per screen that uses it, else it will impact globally
export default class KB {
  public static DisableManager() {
    if (Platform.OS === 'ios') {
      KeyboardManager.setToolbarPreviousNextButtonEnable(false);
      KeyboardManager.setEnable(false);
      KeyboardManager.setEnableAutoToolbar(false);
      KeyboardManager.setToolbarPreviousNextButtonEnable(false);
      KeyboardManager.setShouldShowToolbarPlaceholder(false);
      KeyboardManager.setOverrideKeyboardAppearance(false);
    }
  }
  public static EnableManager() {
    if (Platform.OS === 'ios') {
      KeyboardManager.setToolbarPreviousNextButtonEnable(true);
      KeyboardManager.setEnable(true);
      KeyboardManager.setEnableDebugging(__DEV__);
      KeyboardManager.setKeyboardDistanceFromTextField(20); // 10 default
      KeyboardManager.setEnableAutoToolbar(true);
      KeyboardManager.setToolbarPreviousNextButtonEnable(true);
      KeyboardManager.setShouldToolbarUsesTextFieldTintColor(true);
      KeyboardManager.setShouldShowToolbarPlaceholder(true);
      KeyboardManager.setOverrideKeyboardAppearance(true);
    }
  }
}

We call KB.DisableManager() from the main index file, then turn it on for specific screens:

  componentWillMount() {
    KB.EnableManager();
  }
  componentWillUnmount() {
    KB.DisableManager();
  }

This seems to work for us, so I'll close this ticket.

[pie6k]

I've created some hook that disables manager while some component is rendered

import { Platform } from 'react-native';
import KeyboardManager from 'react-native-keyboard-manager';
import { useEffect } from 'react';

export function initializeKeyboardManager() {
  if (Platform.OS === 'ios') {
    KeyboardManager.setEnable(true);
    KeyboardManager.setEnableDebugging(false);
    KeyboardManager.setKeyboardDistanceFromTextField(200);
    KeyboardManager.setPreventShowingBottomBlankSpace(true);
    KeyboardManager.setEnableAutoToolbar(false);
    // KeyboardManager.setToolbarDoneBarButtonItemText('Done');
    // KeyboardManager.setToolbarManageBehaviour(0);
    KeyboardManager.setToolbarPreviousNextButtonEnable(false);
    // KeyboardManager.setShouldToolbarUsesTextFieldTintColor(false);
    // KeyboardManager.setShouldShowToolbarPlaceholder(false);
    // KeyboardManager.setShouldShowTextFieldPlaceholder(true); // deprecated, use setShouldShowToolbarPlaceholder
    KeyboardManager.setOverrideKeyboardAppearance(false);
    KeyboardManager.setShouldResignOnTouchOutside(true);

  }
}

export function disableKeyboardManager() {
  if (Platform.OS === 'ios') {
    KeyboardManager.setToolbarPreviousNextButtonEnable(false);
    KeyboardManager.setEnable(false);
    KeyboardManager.setEnableAutoToolbar(false);
    KeyboardManager.setToolbarPreviousNextButtonEnable(false);
    KeyboardManager.setShouldShowToolbarPlaceholder(false);
    KeyboardManager.setOverrideKeyboardAppearance(false);
  }

  return initializeKeyboardManager;
}

export function useDisableKeyboardManager() {
  useEffect(() => {
    return disableKeyboardManager();
  }, []);
}