Modal doesn't work properly

Issue type

I’m submitting a … (check one with “x”)

• bug report
• feature request

Issue description

Current behavior: Modal won’t show up unless set isBackDropAllowed to true

Expected behavior: Modal should show up.

Steps to reproduce: Set up Modal to be like… ApplicationProvider > Layout > Modal but it’s not showing. Found out adding isBackDropAllowed will display it.

Related code:

export class HomeScreen extends React.Component {
  // ... incomplete code snippet
  styles = StyleSheet.create({
    container: {
      flex: 1,
      alignItems: 'center',
      justifyContent: 'center',
      padding: 20
    },
    text: {
      marginVertical: 16,
    },
    modalBackdrop: {
      flex: 1,
      alignItems: 'center',
      justifyContent: 'center',
      backgroundColor: '#000000AA',
      padding: 20,
      alignSelf: 'stretch'
    },
    modalInner: {
      backgroundColor: 'white',
      padding: 40,
      paddingTop: 32,
      paddingBottom: 16,
      borderRadius: 10,
    }
  });

  render() {
    return (
        <ApplicationProvider mapping={mapping} theme={lightTheme}>
          <Layout style={this.styles.container} level='4'>
            <Text style={this.styles.text} category='h5'>...</Text>
            <Input label={"Type in here"} multiline height={120}/>
            <Button size={"small"} style={{"marginTop":20}}>Send!</Button>
            <Modal
                visible={this.state.modalVisible}
                isBackDropAllowed
                style={this.styles.modalBackdrop}
            >
              <Layout>
                <View style={this.styles.modalInner}>
                  <Text style={{'textAlign':'center'}}>...</Text>
                  <Button size={"small"} style={{"marginTop":20}}>...</Button>
                  <Button appearance="ghost" size={"small"} style={{"marginTop":5,"paddingBottom":0}}>...</Button>
                </View>
              </Layout>
            </Modal>
          </Layout>
        </ApplicationProvider>
    )
  }
}

Other information:

OS, device, package version

OS: MacOS
Device: Expo + xCode Emulator

[artiya4u]

“cannot press the “Hide Modal” button” Your live example on snack won’t work either. Please check my screen record

[artiya4u]

@artyorsh I’m using expo example project from “expo init my-new-project” with tabs and added react-native-ui-kitten v4.2.0 like in Add into existing project . Code in home screen like this:

import React from 'react';
import {
  StyleSheet,
} from 'react-native';

import {Button, Modal, Text, Layout} from 'react-native-ui-kitten';

export default class HomeScreen extends React.Component {
  state = {
    modalVisible: false,
  };

  setModalVisible = () => {
    const modalVisible = !this.state.modalVisible;
    this.setState({ modalVisible });
  };

  renderModalElement = () => {
    return (
      <Layout
        level='3'
        style={styles.modalContainer}>
        <Text>This is modal</Text>
        <Button onPress={this.setModalVisible}>Hide Modal</Button>
      </Layout>
    );
  };

  render() {
    return (
      <Layout style={styles.container}>
        <Button onPress={this.setModalVisible}>Show Modal</Button>
        <Modal
          visible={this.state.modalVisible}>
          {this.renderModalElement()}
        </Modal>
      </Layout>
    );
  }
}

HomeScreen.navigationOptions = {
  header: null,
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
  },
  modalContainer: {
    width: 200,
    height: 200,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

My first attempt was a month ago (not sure the version) and it did not show at all. Now it shows but cannot press the “Hide Modal” button on the modal and it can press the tabs under the modal. Using allowBackdrop={true} will mitigate the issue.