CODEWITHSUNDEEP
react-native
matt93
matt93

Reputation: 366

multiline text input with newline and keyboard dismiss key buttons

So I've been struggling with this on iOS: I want a multiline text input that allows adding a new line:

// Now there's a "return" button, that adds a new line, perfect!

<TextInput
  multiline
  numberOfLines={2}
/>

And at the same time I want a multiline text input with a return key, that dismisses the keyboard (so the user can continue scrolling down the screen to the submit CTA):

// Now there's a "done" button, that dismisses the keyboard, yay!

<TextInput
  blurOnSubmit
  multiline
  numberOfLines={2}
  returnKeyType="done"
/>

However, I can't find a way how to combine these two. With other keyboard types (such as number) there is returnKey above the keyboard itself.

Is there a way to have multiline text input with both - new line button and keyboard dismiss key? Thanks!

Edit:

Expo snack: https://snack.expo.io/@mattz/77a2d1

Upvotes: 7

Views: 4372

Answers (2)

pfcodes
pfcodes

Reputation: 1086

You can create an InputAccessoryView with a "Done" Pressable that runs Keyboard.dismiss in it's onPress handler.

Upvotes: 0

Naren
Naren

Reputation: 4480

In case anyone is still looking for the answer, I'm posting it here

You could add a wrapper (TouchableOpacity or Pressable) similar to the solution given by James, for the TextInput and dismiss the keyboard with an outside click.

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

<TouchableOpacity onPress={Keyboard.dismiss}>
  <View>
     <TextInput
      blurOnSubmit
      multiline
      numberOfLines={2}
      returnKeyType="done"
      ....
    />
  </View>
</TouchableOpacity>

Upvotes: 1

Related Questions