Showing static data inside bottom sheet

[martynasd123]

Hello,

I have been playing around with this library, and I enjoyed it very much. Though I have a question. Is it possible achieve scrollview-like behavior with this library? I want to render a certain pre-defined amount of items inside the bottom sheet, so I do not really need lazy loading behavior. So the only way to achieve this right now would be to pass an array of size 1 to the data prop, and render the views inside renderItem prop function.

I was wondering if I could do something like this:

< ScrollBottomSheet ...props> { / Views I want to render / } </ ScrollBottomSheet>

Initially I thought componentType="ScrollView" would allow me to specify child views, which would be rendered inside the ScrollBottomSheet. Since ScrollBottomSheet still takes renderItem and data props, even though it is in ScrollView mode, how are ScrollView and FlatList modes different? In what case would one use ScrollView mode instead of FlatList?

[rgommezz]

Hey @martynasd123,

Glad to hear it's being useful for you! 🙂

Initially I thought componentType="ScrollView" would allow me to specify child views, which would be rendered inside the ScrollBottomSheet

That's indeed correct. Quoting from the docs:

Depending on the value of componentType chosen, the bottom sheet component will inherit its underlying props, being one of FlatListProps, ScrollViewProps or SectionListProps, so that you can tailor the scrollable content behaviour as per your needs.

The componentType prop acts like a switch. That means once you use componentType="ScrollView", you can use all the props from ScrollView as well, specifically children to specify child views.

how are ScrollView and FlatList modes different? In what case would one use ScrollView mode instead of FlatList?

In a nutshell, virtualisation. FlatList keeps in memory only the items that are visible on the screen (plus some top/bottom offset to avoid flickering) and it's recommended for large data sets. ScrollView, on the other hand, renders all the child views upfront, so you'll encounter performance issues on first mount if the data set is large.

Hope that clarifies it!

[martynasd123]

Thank you for your response.

I am sorry, I am not sure I follow, could you provide a minimal example? The way I tried is the following:

<ScrollBottomSheet
        componentType="ScrollView"
        snapPoints={[128, '50%', windowHeight - 200]}
        initialSnapIndex={2}
        renderHandle={() => (
          <View style={styles.header}>
            <View style={styles.panelHandle} />
          </View>
        )}
        contentContainerStyle={styles.bottomSheetContainer}
      >
        <Text>
          Text, displayed inside the bottom sheet
        </Text>
</ScrollBottomSheet>

However, the text component does not appear inside the bottom sheet. What am I doing wrong exactly? To my understanding, all of the views I specify inside the ScrollBottomSheet element (in this case < Text/>) should be parsed as children prop, and passed onto the underlying scrollview.

[joe-goodall-ticketmaster]

We have the same problem.

As @martynasd123 mentioned in his 1st comment, is it possible to do this?

<ScrollBottomSheet ...props>
  <ScrollView>
    .....
  </ScrollView>
</ScrollBottomSheet>

All the examples I can see (such as the example here) show items being mapped over and displayed within the content like this

< ScrollBottomSheet
    ...otherProps
    renderItem={({ item }) => (
         <View style={styles.item}>
            <Text>{`Item ${item}`}</Text>
         </View>
        )}
/>

@rgommezz I think the tl;dr is, what's the best way to display a standard ScrollView (in our case it's just a ScrollView with a few TextInputs and a Button) in the bottom sheet?

[martynasd123]

As a workaround, flatlist's ListHeaderComponent prop could be used for this purpose. So you can put all the components (TextInput and Button in your case) inside it, and they will render.

[BCarroll524]

We have the same problem.

As @martynasd123 mentioned in his 1st comment, is it possible to do this?

<ScrollBottomSheet ...props>
  <ScrollView>
    .....
  </ScrollView>
</ScrollBottomSheet>

@joe-goodall-ticketmaster it is possible to do the above. I am currently doing this in a project where I am using this library