@gorhom bottom sheet as a separate component

Question

Is it possible to create a separate modal component that will be reused with different content on different screens?

I created a bottom sheet in a main index.js component and I can pass different content into the BottomSheet as an example below:

<BottomSheet
  ref={bottomSheetRef}
  snapPoints={snapPoints}
  index={0}
  containerHeight={height}
  onChange={handleSheetChanges}
  handleComponent={() => {
    return <View style={styles.container}></View>;
  }}>
  <View style={styles.contentContainer}>{content}</View>
</BottomSheet>

However, I was not able to move the Bottom Sheet into a separate component: which was quite of a struggle, because the ref is coming undefined for me.

is there any update on this @alba – Rahman Haroon Jul 11 '23 at 09:55 — Rahman Haroon, Jul 11 '23 at 09:55

score 0 · Answer 1 · answered Sep 20 '21 at 20:34

0

You need to forward the ref to your custom component if it needs one. Check this one Forwarding Refs

answered Sep 20 '21 at 20:34

Yüce Kılıç

59
4

1

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. – Matt Ke Sep 21 '21 at 01:16

@gorhom bottom sheet as a separate component

1 Answers1