CODEWITHSUNDEEP
cssreactjsreact-native
Dres
Dres

Reputation: 1499

React Native Modal Transparent Not Working

So I want to use a Modal to disable all interactions on a screen but I still want everything on the screen to be visible. It's odd because it was working just fine for me earlier, then I tried to make the Modal its own component, but as soon as I did that, it stopped working properly. I then went back to what I originally did but still having the same issue. I should've committed it when it worked.

Any idea where I went wrong?

Here's my code:

import React, { Component } from 'react';
import { View, Image, Modal, Text, Button, TouchableHighlight } from 'react-native';

  constructor(props) {
    super(props);
    this.state = {
      modalVisible: true,
    };
  }

  openModal() {
    this.setState({modalVisible: true});
  }

  closeModal() {
    this.setState({modalVisible: false});
  }



  render() {
      return (
        <View style={styles.container}>
          <Modal
            visible={this.state.modalVisible}
            onRequestClose={() => this.closeModal()}
          >
            <TouchableHighlight
            style={styles.modalContainer}
            onPress={() => this.closeModal()}
            >
              <Text>"Words n stuff"</Text>
            </TouchableHighlight>
          </Modal>
          <View
            style={styles.upperContainer}
          />
          <View
            style={styles.lowerContainer}
          />
        </View>
      );
    }
  }
}

Styles:

 modalContainer: {
    flexGrow: 1,
    justifyContent: 'center',
    flexDirection: 'row',
    backgroundColor: 'transparent',
  },


 container: {
    flexGrow: 1,
    justifyContent: 'space-around',
    flexDirection: 'column',
    alignItems: 'center',
  },
  upperContainer: {
    flexGrow: 2,
    alignItems: 'center',
    justifyContent: 'flex-end',
    paddingBottom: 18,
    width: screenWidth,
    marginTop: -140,
  },
lowerContainer: {
    flexGrow: 2,
    alignItems: 'center',
    justifyContent: 'space-around',
    width: screenWidth,
  },

Upvotes: 6

Views: 29217

Answers (3)

Mahdi Movassagh
Mahdi Movassagh

Reputation: 19

<Modal transparent></Modal>

This just work with presentationStyle="overFullScreen"

For other options you are going to face with this error:

Modal with 'formSheet' presentation style and 'transparent' value is not supported

Upvotes: 0

Alessandro Macanha
Alessandro Macanha

Reputation: 711

Try transparent={true} on <Modal />

Upvotes: 1

Th&#233;o dvn
Th&#233;o dvn

Reputation: 940

Try to add transparentproperty to your Modal.

Example:

<Modal
  transparent
  ...>
...
</Modal>

Doc: https://facebook.github.io/react-native/docs/modal.html#transparent

Upvotes: 20

Related Questions