Props.payload state updates DO NOT re-render bottom sheet.

[AyoCodess]

Having to create separate state to mimic the state controlled outside the action sheet is a very difficult experience, the props.paylaod are not re-rendering the UI on the fly, we literally need to unmount the action sheet and remount it to see state updates.

tldr: anything that gets passed to the sheets as a prop "props.payload" does not re-render the UI in the bottom sheet when updated. You have to close the sheet to see the update that has successfully already ran.

work-around: using a global state manager, and importing state directly into the sheet file (not ideal), id rather localise state.

[Kavosh-m]

same

[richardshaw700]

Same issue. I found re-renders work with the "Basic usage" method (i.e. direct refs) but you can't open a second sheet from the first one.

Docs:💡 While the above is fully functional it's not scalable when you have many ActionSheets in the app, it is recommended that you implement ActionSheets in your app using Sheet Manager for more scalability.

const LocalActionSheet = forwardRef((props, ref) => {
  return (
    <ActionSheet
      ref={ref}
      <View>{props.children}</View>
    </ActionSheet>
    
export default LocalActionSheet;

 const openLocalSheet = () => {
    localSheetRef.current?.show();
  };
  
// Button calling openLocalSheet();
  
  <LocalActionSheet ref={localSheetRef}>
  <View>
     <Text>This is a local sheet</Text>
  </View>
  </LocalActionSheet>

Unfortunately I do need to open a sheet from a sheet, but hopefully this helps someone.

[richardshaw700]

Honestly this SheetManager is unlike anything I've ever experienced in react native. Where in the ether does this payload exist? Nothing will get it to re-render

[richardshaw700]

⭐️ Found a solution: JSX payload has to be in a separate component and imported into the file.

import {SheetComponentJSX} from './SheetComponents.js';

const openSheet = () => {
    SheetManager.show('test-sheet', {
      payload: {
        value: <SheetComponentJSX />,
      },
    });
  };

If the JSX component is defined in the same file that the openSheet function is called, state will not update.