React-native-ui-kitten: Select component not working inside modal

[Frans-L]

🐛 Bug Report

Select component is not working inside react-native's modal. The options are rendered under the modal, so no items can be selected.

Select does not show options:

With opacity, the problem can be noticed:

To Reproduce

Put Select component inside a modal.

Expected behavior

Select component should work inside modal.

Link to runnable example or repository (highly encouraged)

import React from "react";
import { View, Modal } from "react-native";
import {
  ApplicationProvider,
  Layout,
  Text,
  Select,
} from "@ui-kitten/components";
import { mapping, light as lightTheme } from "@eva-design/eva";

const data = [{ text: "Option 1" }, { text: "Option 2" }, { text: "Option 3" }];

const HomeScreen = () => (
  <Layout>
    <Modal visible transparent>
      <View
        style={{
          flex: 0,
          padding: 100,
          backgroundColor: "red",
          opacity: 0.5,
        }}
      >
        <Select data={data} onSelect={() => 0}></Select>
        <Text style={{ marginTop: 10 }}>
          Cannot select modals. The options are rendered under the modal.
        </Text>
      </View>
    </Modal>
  </Layout>
);

const App = () => (
  <ApplicationProvider mapping={mapping} theme={lightTheme}>
    <HomeScreen />
  </ApplicationProvider>
);

export default App;

UI Kitten and Eva version

| Package | Version |
| ----------- | ----------- |
| @eva-design/eva | 1.4.0 |
| @ui-kitten/components | 4.4.1 |

[artyorsh]

UI Kitten uses it's own implementation of Modal which Select relies on.

[Frans-L]

That's unfortunate, since the native modal's (especially react-native-modal's) animation features outperform UI Kitten's version.

Would you @artyorsh be interested in a pull request that adds support to native modals? It would mean that you could add a separate component inside native modal that renders UI Kitten's modal inside native modal.

[artyorsh]

@Frans-L PRs are always welcome, I would be glad to review 👍

[CedThen]

What happened to the pull request? I'm also running into this problem, is it possible to see @Frans-L 's solution?

Edit: My workaround was to create a custom animation for the ui-kitten modal, since that was the main reason I was using react-native-modal. The select component works fine inside ui-kitten's modal