Overlay style not working as expected

Trying to recreate the bottom half screen popup card you see on Google Maps when you tap on a pin but can’t make it work with Overlay. More specifically, I cannot seem to position the Overlay off-center at all. With the native Modal I am able to set justifyContent: ‘flex-end’ to generate something 90% similar (still haven’t figured out how to allow interaction with the content outside of the modal without closing the modal).

Code

        <Modal style={styles.bottomModal}
          backdropColor={'transparent'}
          transparent
        >
          {this._renderModalContent()}
        </Modal>
        <Overlay overlayStyle={styles.bottomModal}
          backdropColor={'transparent'}
        >
          {this._renderModalContent()}
        </Overlay>

Style

const styles = StyleSheet.create({
  bottomModal: {
    justifyContent: 'flex-end',
    margin: 0,
  },
});

Here’s the snack: https://snack.expo.io/rkJcCSZfL

[flyingcircle]

There is also the fact that RNE uses the react-native Modal but your snack uses the react-native-modal Modal. So you are using 2 different modals. In RNE 2.0.0, they added the prop ModalComponent to Overlay to pass in a custom Modal, but even with that, I haven’t been able to get the animation working. But I still don’t see this question answered. If you are already using react-native-modal, what is the value add from the Overlay component?

[seanfar]

@iqbalfaisal I can confirm that containerStyle is/was not being consumed as expected. Rather, it’s the style being applied to the backdrop. This isn’t useful, as the backdrop is not a parent/container to the actual View element containing the modal. See the commit HERE and you can see what I’m talking about, this prop was actually renamed to backdropStyle.

The container element you would expect the containerStyle prop to be applied to is actually only using the internal stylesheets container. This seems like an oversight, I would expect a containerStyle prop to be merged into the styles for that element on line 39