How to disable keyboard in react native

Question

I created a screen keyboard component that I want to disable the platform's keyboard, how I can disable it?

<TextInput
 secureTextEntry
 ref="Pin"
 selectionColor="#656565"
 keyboardType="numeric"
 activeColor="#656565"
 inactiveColor="#fff"
 autoFocus={false}
 ignoreCase
 codeLength={4}
 inputPosition="center"
 size={50}
 onFulfill={isValid => this}
 codeInputStyle={{ borderWidth: 1.5 }}
/>

• Paolo Dell'Aguzzo: I think that you could study how it's done here: github.com/wix/react-native-keyboard-input

Answer 1

Just write showSoftInputOnFocus={false} in <TextInput> like this:

<TextInput showSoftInputOnFocus={false} />

Answer 2

I had issues also. No other solutions was working for me. This will display text input field and it will be clickable but not editable.

<TouchableOpacity onPress={this.openPinKeyboard}>
 <View pointerEvents="none">
 <Input editable={false} value="1234" />
 </View>
</TouchableOpacity>

• Dimitri Kopriwa: I can't use the input at all
• FDisk: That's the point. You can't edit but can click on it.
• Some Dev: He said 'disable keyboard' not 'can't edit it', those things very different
• FDisk: And exactly - on the press, you can show your custom keyboard. By disabling the input - the native keyboard will not show up and this is the primary goal.

Answer 3

I think you need to add something like:

<TextInput showSoftInputOnFocus={false} keyboardType="numeric" />

Answer 4

setting keyboardType to null worked for me

EDIT:

this only worked in the simulator, running it on an actual device the native keyboard still appeared.

wrapping the <TextInput /> in a <TouchableWithoutFeedback> element in the example below worked.

<TouchableWithoutFeedback onPress={Keyboard.dismiss} > <TextInput /> </TouchableWithoutFeedback>

Answer 5

You may try to set keyboardType to none, if it doesn't work another alternative is to set the editable prop to false.

Potential answers can be found here : https://github.com/facebook/react-native/issues/14045

Answer 6

<TextInput showSoftInputOnFocus={false}/>

This work for me, sometime I need onFocus action to navigate new screen, and don't need keyboard open animation. Prop Editable will disable textfield, can not pressable

Answer 7

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

1. Import Keyboard from ‘react-native’

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

2. 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

Answer 8

just put this under text input tag this worked for me in react-native

 <TextInput
 //this line 
 editable={false}
 /> 

Answer 9

try this solution i hope this will work for android and ios both...

// Step 1: Get Keyboard, TouchableWithoutFeedback from ‘react-native’;
 import { View, TextInput, StyleSheet, Keyboard, TouchableWithoutFeedback } from 'react-native';
 // Step 2: Create an arrow function to write dismiss keyboard code
 const DismissKeyboard = ({ children }) => (
 <TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
 {children}
 </TouchableWithoutFeedback>
 );
 // Step 3: Wrap all TextInput inside <DismissKeyboard> </DismissKeyboard>
 //Example
 <DismissKeyboard>
 <View style={styles.container}>
 <TextInput style={styles.input} placeholder="email" />
 <TextInput style={styles.input} placeholder="password" />
 </View>
 </DismissKeyboard>

Answer 10

you can do it by pointerEvents="none"

<View pointerEvents="none">
 <TextInput
 focusable={false}
 style={{color: '#00000000'}}
 onChangeText={setEmail}
 />
 </View>