CODEWITHSUNDEEP
react-native
IC_
IC_

Reputation: 1789

Prevent keyboard dismiss. React native

How to keep keyboard opened when i have TextInput and Touchable near input that sends message. So i want to send message without double tap on touchable. First to hide keyboard, second to send message. How to do that?

Upvotes: 26

Views: 25611

Answers (4)

faery
faery

Reputation: 101

just only wrap you submit button with scrollview and then make sure u need to add two props keyboardShouldPersistTaps="always" and keyboardDismissMode="on-drag" like this ...

<TextInput/> 
<ScrollView
            contentContainerStyle={{
              width: SIZES.width / 6,
              height: 60,
            }}
            keyboardShouldPersistTaps="always"
            keyboardDismissMode="on-drag">
<TouchableOpacity onPress={}>
</TouchableOpacity>
</ScrollView>

Upvotes: 0

GollyJer
GollyJer

Reputation: 26662

Check out keyboardShouldPersistTaps.

The following keeps the keyboard open when content is tapped but closes the keyboard when dragged.

<ScrollView keyboardShouldPersistTaps="always" keyboardDismissMode="on-drag">

  {/* Content containing interactive elements such as <Touchable /> */}

</ScrollView>

Note
Any parent ScrollViews/VirtualizedLists/Flatlists/SectionLists will also need to set keyboardShouldPersistTaps="always"

Here are some gory details if you're interested.

Upvotes: 7

csath
csath

Reputation: 1316

Use keyboardShouldPersistTaps to handle this.

Example:- 

<ScrollView
        keyboardDismissMode="on-drag"
        keyboardShouldPersistTaps={'always'} >
</ScrollView>

Deprecated Properties:-

false, deprecated, use 'never' instead

true, deprecated, use 'always' instead

source

Upvotes: 31

WayneC
WayneC

Reputation: 5740

Have a look at the keyboardShouldPersistTaps property of ScrollView. Setting it to "handled" should do what you are looking for.

Upvotes: 3

Related Questions