CODEWITHSUNDEEP
react-nativetextinput
Rohit Aggarwal
Rohit Aggarwal

Reputation: 1188

Hide keyboard in Android and iOS without loosing focus

I am having a text-input in react-native and I want to apply my custom keyboard on input field and hide the soft keyboard on focus. I tried by setting the showSoftInputOnFocus to false, but this prop is available only on Android. How can I achieve this? My textinput looks something like this


    <Text style={styles.symbol}>$</Text>
                  <TextInput
                    onFocus={() => onFocus('salesPrice')}
                    value={tabDetails.salesPrice}
                    onChangeText={value => onStateChange('salesPrice', value)}
                    placeholderTextColor={colors.placeholderColor}
                    placeholder={constants.common.zeroPlaceholder}
                    showSoftInputOnFocus={false}
                    style={styles.textInput}
                    onEndEditing={event =>
                      onEndEditing('salesPrice', event.nativeEvent.text)
                    }
                  />

Upvotes: 1

Views: 1625

Answers (2)

Ridwan Ajibola
Ridwan Ajibola

Reputation: 1089

The easiest solution is to use the onFocus prop on TextInput.

  1. Import Keyboard from ‘react-native’

import {Keyboard, TextInput} from 'react-native'

  1. Then pass Keyboard.dismiss() to TextInput onFocus prop, to stop the keyboard from popping up when focused.

<TextInput onFocus = {()=> Keyboard.dismiss()} .../>

Now test the input field by pressing it to see if the keyboard will pop up

Upvotes: 0

Rohit Aggarwal
Rohit Aggarwal

Reputation: 1188

To anyone still looking for answer, you can hide keyboard on Android like this
In your android\app\src\main\java\com\yourappname create this files
1. KeyboardModule.java

package com.costsfirst;

import android.app.Activity;
import android.view.View;
import android.view.inputmethod.InputMethodManager;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import java.util.Map;
import java.util.HashMap;

public class KeyboardModule extends ReactContextBaseJavaModule {

    public KeyboardModule(ReactApplicationContext reactContext) {
        super(reactContext);
    }

    @Override
    public String getName() {
        return "KeyboardFunctionalities";
    }

    @ReactMethod
    public void hideKeyboard() {
        final Activity activity = getCurrentActivity();
        InputMethodManager imm = (InputMethodManager) activity.getSystemService(Activity.INPUT_METHOD_SERVICE);
        View view = activity.getCurrentFocus();
        if (view == null) {
            view = new View(activity);
        }
        imm.hideSoftInputFromWindow(view.getWindowToken(), 0);
    }
}

2. KeyboardPackage.java

package com.costsfirst;

import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;
import java.util.ArrayList;
import java.util.Collections;
import java.util.List;

public class KeyboardPackage implements ReactPackage {

    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }

    @Override
    public List<NativeModule> createNativeModules(
            ReactApplicationContext reactContext) {
        List<NativeModule> modules = new ArrayList<>();

        modules.add(new KeyboardModule(reactContext));

        return modules;
    }

}

3. In your MainApplication.java do this changes

@Override
        protected List<ReactPackage> getPackages() {
          @SuppressWarnings("UnnecessaryLocalVariable")
          List<ReactPackage> packages = new PackageList(this).getPackages();
          // Packages that cannot be autolinked yet can be added manually here, for example:
          // packages.add(new MyReactNativePackage());
          packages.add(new RNCustomKeyboardPackage());
          packages.add(new KeyboardPackage());
          return packages;
        }

Now you can call this on focus of textInput like

import { TextInput, NativeModules } from "react-native"

render(){
  return(
    <TextInput onFocus={() => NativeModules.KeyboardFunctionalities.hideKeyboard() } />
  )
}

Upvotes: 1

Related Questions