Split into two modal and scrollview components

Is your feature request related to a problem? Please describe. I want to try and embed a stack navigator inside a modalize component (with react-native-screens). This pattern happens in Apple Maps

Describe the solution you’d like If we could split the modal component into a modal container and scroll view component, this would be possible

There could be a combined <ScrollableModal /> that has the stuff you couldn’t do by default with the two component setup like size to content

Describe alternatives you’ve considered None. I don’t think what I want to do is yet possible

[Abdulrahman91kh]

I want to use a normal View as the container of the content in modalize rather than a ScrollView, FlatList or SectionList so i can use my own FlatList along with react-navigation’s tab navigator. This is giving me a the Cannot use Virtualized List inside scrollView warning otherwise.

According to the documentation, you can use “customRenderer”

Simply you can do something like const AnimatedComponent = ( <Animated.View style={{flex: 1}}> <FlatList .../> <AnotherComponent /> </Animated.View> )

Then you can do <Modalize ref={_modalRef} modalHeight={200} modalStyle={styles.modalStyle} overlayStyle={styles.overlayStyle} panGestureAnimatedValue={animated} customRenderer={AnimatedComponent} />

[joeyfigaro]

…I managed to get the bottomsheet to finally render, but it throws an error every time.

and the return of my component:

const animated = React.useRef(new Animated.Value(0)).current

return (
    <Modalize
      ref={ref}
      panGestureAnimatedValue={animated}
      HeaderComponent={() => (
        <Header
          goBack={currentStep > 1}
          step={currentStepName}
          onGoBack={handleGoBack}
          onNext={handleNext}
        />
      )}
      customRenderer={<ContactsList contacts={device.contacts} />}
    />
  )

@jeremybarbet can you shed some light here?