react-native-tab-view icon indicating copy to clipboard operation
react-native-tab-view copied to clipboard

TextInput Keyboard does not work with tabs

Open SupriyaPKalghatgi opened this issue 4 years ago • 8 comments

Current behavior

iOS: TextInput hides behind Keyboard image

Android: Need to click twice on textInput

Expected behavior

iOS: TextInput should be scrolled when Keyboard is open Android: TextInput should remain open on 1st click

Reproduction

https://snack.expo.dev/qhAuLMpOh

Platform

  • [X] Android
  • [X] iOS
  • [ ] Web
  • [ ] Windows
  • [ ] MacOS

Environment

package version
react-native-tab-view ^3.1.1
react-native-pager-view 5.4.6
react-native 0.64.3
expo ^43.0.0
node 16.13.0
npm or yarn 8.1.0, 1.22.17

SupriyaPKalghatgi avatar Dec 07 '21 13:12 SupriyaPKalghatgi

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

  • react-native-pager-view (found: 5.4.6, latest: 5.4.9)
  • react-native (found: 0.64.3, latest: 0.66.3)
  • expo (found: 43.0.0, latest: 43.0.3)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

github-actions[bot] avatar Dec 07 '21 13:12 github-actions[bot]

The issue is with latest versions too

SupriyaPKalghatgi avatar Dec 07 '21 13:12 SupriyaPKalghatgi

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

  • react-native-pager-view (found: 5.4.6, latest: 5.4.9)
  • react-native (found: 0.64.3, latest: 0.66.3)
  • expo (found: 43.0.0, latest: 43.0.4)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

github-actions[bot] avatar Dec 08 '21 05:12 github-actions[bot]

@satya164 Can you please confirm on this?

SupriyaPKalghatgi avatar Dec 08 '21 05:12 SupriyaPKalghatgi

Hey @SupriyaPKalghatgi please check this snack I think it might help you. Let me know if it fixed the issue for you.

okwasniewski avatar Sep 08 '22 19:09 okwasniewski

@okwasniewski Hey! Thanks for taking a look over this I checked your snack, Textbox doesn't take input

SupriyaPKalghatgi avatar Sep 13 '22 06:09 SupriyaPKalghatgi

Textbox doesn't take input

@SupriyaPKalghatgi I've updated the snack, my point was that it now avoids the keyboard both on iOS and Android.

okwasniewski avatar Sep 13 '22 07:09 okwasniewski

It finally works for me by offsetting the size of the view with keyboardVerticalOffset

<KeyboardAvoidingView style={{ flex: 1 }} keyboardVerticalOffset={bottomTabHeight + 100} // where 100 is the size of the view behavior={Platform.OS === "ios" ? "padding" : "height"}> <KlubFeedMessage /> </KeyboardAvoidingView>

yoann84 avatar Oct 03 '22 15:10 yoann84