Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Attempting to swipe back but not actually swiping back causes undesirable blank view while text input is focused #89

Closed
itsramiel opened this issue Mar 30, 2022 · 10 comments
Labels

Comments

@itsramiel
Copy link

  • How did you link to the library (autolinking, manual, rn link, cocoapods)?
    I used eas build from expo
  • What version of React Native?
    0.64.3
  • What version of the library?
    6.5.4-4
  • iOS version?
    14.4
  • Did the problem happen after updating React Native?
    nope
  • Are you using the library for the first time?
    yes
  • It's a bug? Provide a link to a minimal reproduction case.
    The repro is in a private project. The setup just requires two screen(ScreenA, ScreenB) in a stack navigator. Navigate to ScreenB and let there be a textinput and focus on it, then partially swipe back but then give up swiping back, there should be a blank space. If you are not able to reproduce it. I will definitely provide a minimal repro.
ex1.mp4
ex2.mp4

I understand that this package depends on IQKeyboardManager, and this issue was opened a long time in https://github.com/hackiftekhar/IQKeyboardManager/issues/1361. It was mentioned that it was resolved but it doesnt seem to be.

Can you please confirm the bug and if possible suggest a solution if any?

@douglasjunior
Copy link
Owner

I've never encountered this problem in the projects I've worked on.

This seems to be a conflict related to the navigation library. Are you using React Navigation? react-native-screens? Because in React Navigation we have just one native screen, and then the internal screens are simulated with "Views" and animation.

Can you share a reproducible example with these libraries together?

@itsramiel
Copy link
Author

itsramiel commented Mar 30, 2022

sure. I will work one a reproducable demo compiled using eas build and share the result and the repo link. And yes I am using react navigation and react-native-screens

@itsramiel
Copy link
Author

Same results with the following minimal repo:

ex2.mp4
ex1.mp4

@douglasjunior
Copy link
Owner

douglasjunior commented Mar 31, 2022

Bingo, the problem is related to "@react-navigation/native-stack". Replacing to "@react-navigation/stack" the problem dont happens.

I will report to IQKeyboardManager and make myself available to help if necessary.

Let's follow the thread hackiftekhar/IQKeyboardManager#1361 and hackiftekhar/IQKeyboardManager#1422

@douglasjunior
Copy link
Owner

douglasjunior commented Mar 31, 2022

I created a native iOS Xcode project, with Storyboards and Navigation Controllers, and problem don't happen.

keyboard manager

This make me think that the "react-native-screens" uses some strategy to do a "native navigation" that's breaking the IQKeyboardManager.

Possible related issues: https://github.com/software-mansion/react-native-screens/issues?q=is%3Aissue+blank+ios

@itsramiel
Copy link
Author

yes confirmed that the bug is not there when using stack instead of native stack. thank you!!

@hirbod
Copy link

hirbod commented Apr 30, 2022

@ramiel1999 maybe worth an issue report at react-native-screens.

@landabaso
Copy link

For the moment, I think it's better to disable gestures when using the native-stack.

      <NativeStack.Navigator
        screenOptions={{
          //Disable goBack with gesture to prevent this issue:
          //https://github.com/douglasjunior/react-native-keyboard-manager/issues/89
          ...(Platform.OS === 'ios' ? { gestureEnabled: false } : {}),
        }}
      >

@itsramiel
Copy link
Author

For the moment, I think it's better to disable gestures when using the native-stack.

      <NativeStack.Navigator
        screenOptions={{
          //Disable goBack with gesture to prevent this issue:
          //https://github.com/douglasjunior/react-native-keyboard-manager/issues/89
          ...(Platform.OS === 'ios' ? { gestureEnabled: false } : {}),
        }}
      >

That's a behavior almost all ios user rely on. Definitely not a good solution. A solution I found was to use scrollviews instead of views for the parent component of the screen if possible because then it doesnt happen

@landabaso
Copy link

landabaso commented Jan 8, 2024

That's a behavior almost all ios user rely on. Definitely not a good solution. A solution I found was to use scrollviews instead of views for the parent component of the screen if possible because then it doesn't happen

It's a bad solution. However, when the bug occurs then the App gets broken in my case, which is even worse. I am already using <ScrollView> as the parent component of all the Screens. The bug shows up after the TextInput is blurred in my case.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

4 participants