Select component not working inside modal

🐛 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

[jaredswenson]

Is there a solution for this?

[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.