[Suggestions Needed] How would you render dynamic components in the bottomsheet ?

[roshangm1]

I want to render components in bottomsheet dynamically. For example, I have a list of vendors which I can follow or unfollow. A user can follow the vendor by clicking Follow button inside bottomsheet. The button will change to Unfollow now when the user opens bottomsheet.

I know, we can use states to manage the content inside bottomsheet. How would you perform this behavior also minimizing the number of renders ?

[iamolegga]

@roshangm1 I use something like that:

// define renderContent func with useCallback hook and don't forget to set dependencies
const renderContent = useCallback(() => <SomeJSX />, [...dependenciesForSomeJSX])

<BottomSheet
  // BottomSheet will get new `renderContent` prop and rerender if dependenciesForSomeJSX will change
  renderContent={renderContent}
/>

[iamolegga]

@osdnk I think this issue can be closed

[satya164]

useCallback is unnecessary here and won't change anything because the BottomSheet component is not a PureComponent

[iamolegga]

all right, than you can use wrapper like:

const PureBottomSheet = React.memo((props) => <BottomSheet {...props} />)

[satya164]

It's very likely that render will be called when you're changing something. If you're not changing something and your component is being re-rendered, it's probably good idea to add memo higher on the tree

[iamolegga]

Agree, but if parent component render something besides BottomSheet and it's content, I would recommend to make a pure wrapper if one care about performance

[arberkryeziu]

can someone share a "best-practice" here on how to dynamically render content on BottomSheet ?

@satya164 Im using navigation v5. Would you recommend to place a global BottomSheet (with dynamic content) beside Stack.Navigator ?

[nkbhasker]

This is how I have done it. It covers both dynamic content and react navigation bottom tab.

• Create bottom sheet provider

• Create main stack navigator(somehow bottom sheet doesn't work if tab navigator is not wrapped in a stack navigator)

• Create tab navigator and wrap it inside the bottom sheet provider

Have created a repository for reference: https://github.com/nkbhasker/react-navigation-bottomsheet

[TriPSs]

@nkbhasker i'm trying your solution but i'm having issues with the fact that onOpenStart and onCloseEnd are not being called, i'm also unable to close the bottom sheet after it opened. Did you also encounter these issues?

Edit: I figured it out, the amount of snap points need to stay the same, I had default 2 snap points and updated it to 3, now I changed the default to 3 and everything works nice.