Dynamic resizing

[lkoehl]

I started working with your bottom sheet but right know I am facing a problem I can't get the expected result. I have changing content which is varying in height. Is there a way to use something like flexGrow: 1 on wrapper or container to get the desired effect?

[rgordon95]

+1

[pwaweru]

Any update on this? @nysamnang

[ManuEpi]

I'm using this library too with changing content which Is varying in height. And I solve the problem by using height: 'auto' value in the customStyles props.

So I have a View which contain the RBSheet component :

<View> <RBSheet ref={(ref) => { currentRef = ref }} duration={0} closeOnDragDown={true} closeOnPressMask={true} animationType={'none'} currentModalOpened={props.type} onClose={() => props.hideModalCallback(currentRef)} customStyles={{ container: { borderTopRightRadius: 15, borderTopLeftRadius: 15, height: 'auto', maxHeight: height - 50, backgroundColor: 'rgba(255,255,255,1)' }, wrapper: { backgroundColor: "transparent" }, draggableIcon: { width: 45, backgroundColor: Color.darkGrey } }}> {getModalContentWithType(props.type)} </RBSheet></View>

Now when my content in the modal change, the height will automatically adjust

EDIT : Otherwise , using flexGrow: 1 like this, seems to work :

customStyles={{ container: { borderTopRightRadius: 15, borderTopLeftRadius: 15, flexGrow: 1, maxHeight: height - 50, backgroundColor: 'rgba(255,255,255,1)' },

[pwaweru]

Ahh, thank you! Although, the animation seems to disappear when using either height: 'auto;' or flexGrow: 1

EDIT: Animation works fine using animationType="slide", but there is a weird behaviour with the animation; the shadow (behind the bottom sheet) seems to slide up also

[pwaweru]

Sorry, I mean I would still like the animation, but the shadow behind the bottom sheet seems to animate with the sheet when it scrolls up. Any idea on how to prevent the shadow from animating with the bottom sheet?

[ManuEpi]

No problem !

For me I used a transparent background as you can see in my part of code before :

wrapper: { backgroundColor: "transparent" }

So I no longer have black background. And even with a black background I don't have your problem so :/

[yunuseskisan]

+1

Dynamic determining of the sheet height would make this lib 100*

The work around by setting height to auto does work, but does not work well with the animations.

[dagan-arbox]

any updates on this issue, looks bad on slide animation ;( great library.. weird bug for that level of usage

[anhquan291]

any updates on this issue, looks bad on slide animation ;( great library.. weird bug for that level of usage

Same problem here. any update? thanks a lot

[skrcode]

This might help

function RBActionSheet(props) { 
    const ITEM_HEIGHT = 0.075*DEVICE_HEIGHT 
    const OFFSET=25 ;
    let cnt = 0; 
    props.options.forEach(option => { 
        cnt = cnt + (option.show === true?1:0) // checking which option to be shown dynamically 
    }) 
    return ( 
        <RBSheet closeOnDragDown={true} closeOnPressMask={true} height={ITEM_HEIGHT*cnt+OFFSET}> 
            <List style={{height:cnt*ITEM_HEIGHT}}> 
            { props.options && props.options.map(item => renderRow(item)) } 
            </List> 
        </RBSheet> 
        ); 
}

[shubhambathe1]

I have got a workaround for making Dynamic Bottomsheet and also not losing on the opening/closing animations. Have tested it on both platforms(android, iOS). React Native Version 0.62.2 & Bottomsheet Version 2.2.0. Here are the steps that I have followed:-

Import Package For Responsive Screens, its optional

import {
  heightPercentageToDP as hp,
} from 'react-native-responsive-screen';

Setting the RB Sheet Reference const refRBSheet = useRef();

Need to add these three additional states for Dynamic behaviour

BottomSheet Initial height state const [height, setHeight] = useState(hp(50));

BottomSheet visible state const [visible, setVisible] = useState(false);

Conditionally Rendering RB-Sheet Content const [component, setComponent] = useState('bottomsheet_content_1');

Adding a useEffect for tracking refRBSheet & height

useEffect(() => {
    if (visible) {
      refRBSheet.current.open();
    } else {
      refRBSheet.current.close();
    }
  }, [refRBSheet, height]);

toggleDrawer method to open bottomsheet with specified component/content

const toggleDrawer = (componentName) => {
   // Setting Component to be displayed
   setComponent(componentName);

   // Switch case for dynamic height based on component selected
   switch (componentName) {
     case 'bottomsheet_content_1':
       setHeight(hp(100));
       break;
     case 'bottomsheet_content_2':
       setHeight(hp(85));
       break;
     case 'bottomsheet_content_3':
       setHeight(hp(60));
       break;
     case 'bottomsheet_content_4':
       setHeight(hp(45));
       break;
     default:
       setHeight(hp(50));
   }

   // Setting Visible state & Opening RBSheet
   setVisible(!visible);
   refRBSheet.current.open();
 };

Now the code for Dynamic RB Bottomsheet

        <RBSheet
        ref={refRBSheet}
        height={height}
        openDuration={500}
        closeOnDragDown={false}
        closeOnPressMask
        closeOnPressBack
        closeOnSwipeDown={false}
        customStyles={{
          container: styles.rbSheetContainer,
          wrapper: styles.rbSheetWrapper,
          draggableIcon: styles.rbSheetDragIcon,
        }}
        onClose={() => setVisible(false)}
      >
        {component === 'bottomsheet_content_1' ? (
          <Component1
            props={props}
            drawerClose={() => refRBSheet.current.close()}
          />
        ) : component === 'bottomsheet_content_2' ? (
          <Component2
            props={props}
            drawerClose={() => refRBSheet.current.close()}
          />
        ) : component === 'bottomsheet_content_3' ? (
          <Component3
            props={props}
            drawerClose={() => refRBSheet.current.close()}
          />
        ) : component === 'bottomsheet_content_4' ? (
          <Component4
            props={props}
            drawerClose={() => refRBSheet.current.close()}
          />
        ) : (
          <DefaultComponent
            props={props}
            drawerClose={() => refRBSheet.current.close()}
          />
        )
        }
      </RBSheet>

Finally to open the RB Sheet for any click event use the toggleDrawer method and pass it appropriate component name to render height dynamically based on it.

onPress={() => toggleDrawer('bottomsheet_content_1')} To open component with height as hp(100) full window height.

onPress={() => toggleDrawer('bottomsheet_content_2')} To open component with height as hp(80) 80% of window height.

Hope this helps...!!

[mir1198yusuf]

Simple solution to resize according to content is customStyles={{ container: {height: 'auto', maxHeight: 300}, }}

[guswls1846]

my solution

  const [height, setHeight] = useState(0);
  const [isOpenSortRBS, setIsOpenSortRBS] = useState(false);
  const RBSheetRef = useRef<any>();
  
useEffect(() => {
    if (isOpenSortRBS) {
      RBSheetRef?.current.open();
    }
  }, [isOpenSortRBS, height]);
  
  useEffect(() => {
      const h = somthing ? 433 : 357 ;
      setHeight(h);
 
  }, [somthing]);

  <RBSheet
      ref={RBSheetRef}
      height={height}
      openDuration={500}
      closeDuration={500}
      ...

do not need to use customStyles

[shubhambathe1]

Simple solution to resize according to content is customStyles={{ container: {height: 'auto', maxHeight: 300}, }}

@mir1198yusuf This surely does work. But in this case we lose the opening/closing animation effect for the bottom-sheet. If there is any way we can fix this issue then it would be really a great solution.

[mir1198yusuf]

@shubhambathe1 I am using this and it works animated as well. Are you using openDuration closeDuration props ?

[shubhambathe1]

@mir1198yusuf Yes I have both these props with value of 500 for each. Here is my complete code for bottom-sheet:-

<RBSheet
   ref={refRBSheet}
   openDuration={500}
   closeDuration={500}
   closeOnDragDown={false}
   closeOnPressMask
   closeOnPressBack
   closeOnSwipeDown
   customStyles={{
      container: [styles.rbSheetContainer, { height: 'auto', minHeight: 300 }],
      wrapper: styles.rbSheetWrapper,
      draggableIcon: styles.rbSheetDragIcon,
   }}
   onClose={() => setVisible(false)}
>
     // Bottom-sheet content
</RBSheet>

Here styles.rbSheetContainer only contains one property i.e. backgroundColor: '#FFFFFF'.

[mir1198yusuf]

Can you send the gif ? What isn't working for me is swipe down to close the sheet. Pressing outside sheet to close is working for me.

while opening it is swiping up animation. Are you not getting this ?

[shubhambathe1]

No no the bottom sheet is closing/opening, that's not the issue. Just the animation delay that we specify is not working. Even when I increase the delay to 1000ms, it will still open/close instantly. The opening/closing process is very instant which doesn't look like a good UX.

[mir1198yusuf]

Just for testing purpose try to increase both durations to 3 seconds (3000) and see if it's slowing down or not. and revert

[shubhambathe1]

already tried it, even with 5000ms no luck. If you are comfortable we can do a screen share. Just ping me, will share meet link with you.

[mir1198yusuf]

I am out actually so cannot connect soon. Meanwhile can you send a gif of what actually is happening. Also convert minHeight to maxHeight & see.

[nysamnang]

Resolved #82