Is it possible to reproduce the iOS Action Sheet (formSheet, pageSheet) Modal style?

Ask your Question

I was wondering if it was possible to create the native iOS formSheet/pageSheet modal using react-native-modal since the default options have a lot of style applied to them.

This is how it looks using the default Modal component from react-native:

Only problem with this is, that it’s not possible to swipe down to dismiss (god knows why)

So I’ve tried using

<Modal
	presentationStyle="formSheet"
	hideModalContentWhileAnimating={true}
	useNativeDriver={true}
	isVisible={searchFilterModalShown}
	onDismiss={() => console.log('on dismiss')}>
	<SearchFilterView searchFilter={state.searchFilter} />
</Modal>

But

1. this give me the LogBox warning that a “Modal with ‘formSheet’ presentation style and ‘transparent’ value is not supported.”
2. Doesn’t look native at all. Has weird margins, has weird static shadow, has no borders and cannot be dragged down either.

I guess the styling can be fixed using style, but what I’m trying to do is make it dismissable by user gesture. Is this possible?

Thanks!

[nice2seeu]

   <Modal
      visible={modalVisible}
      animationType="slide"
      onDismiss={() => console.log("on ddismiss")}
      onRequestClose={() => console.log("on ddismiss")}
      presentationStyle={"pageSheet"}>
      <View style={{ flex: 1 }}>
          <TouchableWithoutFeedback onPressOut={(e) => {
              if (e.nativeEvent.locationY > 150) {
                setModalVisible(false)
              }}}>
            <View>
              <Icon type='material-icon' name='drag-handle' color='#ddd' />
            </View>
          </TouchableWithoutFeedback>
        <ModalContent / > // scrollable content works fine
      </View>
    </Modal>

Hope this works for you. I also like @mrousavy’s UI … nice!

[mwegener-com]

you could use the modal mode provided by react navigation. No need of any modal component.

https://user-images.githubusercontent.com/64470126/138456413-e27eb077-08cb-4f2b-a4e9-7be1ef5aeec5.mov