Select items is not visible using react-native-navigation

[rnyschyi]

🐛 Bug Report

To Reproduce

Steps to reproduce the behavior:

Expected behavior

I open select in one app screen, but see items on other.

Link to runnable example or repository (highly encouraged)

UI Kitten and Eva version

Package	Version
@eva-design/eva	2.0.0
@ui-kitten/components	5.0.0

Environment information

 System:
    OS: macOS 11.0.1
    CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
  Binaries:
    Node: 12.14.1 - ~/.nvm/versions/node/v12.14.1/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.13.4 - ~/.nvm/versions/node/v12.14.1/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 14.2, DriverKit 20.0, macOS 11.0, tvOS 14.2, watchOS 7.1
  IDEs:
    Android Studio: 4.0 AI-193.6911.18.40.6626763
    Xcode: 12.2/12B45b - /usr/bin/xcodebuild
  npmPackages:
    react: 16.13.1 => 16.13.1 
    react-native: 0.63.3 => 0.63.3 

[SreevatsaAcharya]

@rnyschyi , hey i am facing the same issue, did you figure out any fix?

[rnyschyi]

@SreevatsaAcharya hi, we just moved to react navigation and it works well

[SreevatsaAcharya]

@SreevatsaAcharya hi, we just moved to react navigation and it works well

@rnyschyi . Hmmmm, our project is deeply integrated with React native navigation and ui kitten right now.

I have a form that has varied components like select and autocomplete which work fine right now.
I introduced a new component that requires me to open a modal or a new screen to select values.

The observation is that if i move to a new screen >> close it and come back to continue fill rest of the data in the form all components having a popover stop working .

Any suggestions?

[whitestranger7]

@SreevatsaAcharya hi, we just moved to react navigation and it works well

@rnyschyi . Hmmmm, our project is deeply integrated with React native navigation and ui kitten right now.

I have a form that has varied components like select and autocomplete which work fine right now.
I introduced a new component that requires me to open a modal or a new screen to select values.

The observation is that if i move to a new screen >> close it and come back to continue fill rest of the data in the form all components having a popover stop working .

Any suggestions?

Hey, @SreevatsaAcharya. Im trying to help you right now with your case. Unfortunately, I can't reproduce the issue. Can you please provide more information about the issue? It also would be great if you can attach some code related to both screens you're dealing with and navigation stack implementation.

[fdelacruzsoto]

@whitestranger7 you can do this to reproduce the issue:

1. Create a new react native project with the cli.
2. Follow the instructions here to add react native navigation to the project https://wix.github.io/react-native-navigation/docs/installing
3. Add two screens with bottom tabs following this example https://wix.github.io/react-native-navigation/docs/bottomTabs
4. Add ui-kitten to the project and follow its recommendations for performance improvement https://akveo.github.io/react-native-ui-kitten/docs/guides/improving-performance#improving-performance
5. In one of the screens add select, datepicker or a modal, the issue should be reproducible there.
6. You can add a button and push another screen, then there you can add select, datepicker or a modal and the issue should be reproducible there too.

I have the exact same issue with those popover components, for now I moved to use some other components, but I'd really like to continue using ui kitten components in my app.

[MateWW]

As a workaround, you can wrap modal content with another ApplicationProvider but it's not perfect as the position of popovers is wrong. In my opinion, problems are caused by rendering popovers in the root of the application, and when react-navigation is using native modals that are by default over the root app.