'Multiple Bottom Sheets not opening in react native Ios

Hey folks I'm using react native raw bottom sheet in react native project.I'm showing a bottom sheet when the user click on an icon.It's working fine on both android and ios, when he selects an element from the bottom sheet I'm trying to close that sheet and open a brand new sheet with subcategories and its opening on android but not on ios, I don't know whats the issue on ios,kindly help me out to tackle this. Here is my code

Button to open first BottomSheet

<TouchableOpacity
            style={{
              height: 27,
              width: 20,
            }}
            onPress={() => optionSheet.current.open()}>
            <Image
              source={more}
              style={{height: 17, width: 17, tintColor: 'black'}}
            />
          </TouchableOpacity>

First BottomSheet

<RBSheet
    ref={optionSheet}
    height={360}
    openDuration={250}
    customStyles={{
      container: {
        borderTopRightRadius: 30,
        borderTopLeftRadius: 30,
        paddingTop: 20,
      },
    }}>
    <TouchableOpacity
      onPress={() => {
        Snackbar.show({
          text: ' Saved to playlist',
          duration: Snackbar.LENGTH_LONG,
          action: {
            text: 'Change',
            textColor: 'tomato',
            onPress: () => {
              handleAction();
              optionSheet.current.close();
              playListRef.current.open();
            },
          },
        });
      }}
      style={[styles.horizontalContainer, {marginLeft: 4, padding: 10}]}>
     
      <Text
        style={[
          styles.large,
          {alignSelf: 'center', fontSize: 18, margin: 5},
        ]}>
        Save to playlist
      </Text>
    </TouchableOpacity>
   
  </RBSheet>

Here is my 2nd sheet which will open when I will click on Snackbar action button

    <RBSheet
    ref={playListRef}
    height={420}
    openDuration={250}
    customStyles={{
      container: {
        borderTopRightRadius: 30,
        borderTopLeftRadius: 30,
        paddingTop: 10,
      },
    }}>
    <TouchableOpacity
      onPress={() => {
        setBilal(!bilal);
      }}
      style={[styles.horizontalContainer, {marginLeft: 14, padding: 10}]}>
      <CheckBox
        center
        checked={bilal}
        checkedColor="red"
        onPress={() => {
          setNudity(!nudity);
        }}
        containerStyle={{padding: 0}}
      />
      <Text
        style={[
          styles.large,
          {alignSelf: 'center', fontSize: 18, margin: 5},
        ]}>
        Bilal
      </Text>
    </TouchableOpacity>
    <Divider style={styles.dividerStyle} />
    <TouchableOpacity
      onPress={() => {
        setmyFav(!myFav);
      }}
      style={[styles.horizontalContainer, {marginLeft: 14, padding: 10}]}>
      <CheckBox
        center
        checked={myFav}
        checkedColor="red"
        onPress={() => {
          setmyFav(!myFav);
        }}
        containerStyle={{padding: 0}}
      />
      <Text
        style={[
          styles.large,
          {alignSelf: 'center', fontSize: 18, margin: 5},
        ]}>
        My Favourites
      </Text>
    </TouchableOpacity>
    <Divider style={styles.dividerStyle} />
    <TouchableOpacity
      onPress={() => {
        setDaring(!daring);
      }}
      style={[styles.horizontalContainer, {marginLeft: 14, padding: 10}]}>
      <CheckBox
        center
        checked={daring}
        checkedColor="red"
        onPress={() => {
          setDaring(!daring);
        }}
        containerStyle={{padding: 0}}
      />
      <Text
        style={[
          styles.large,
          {alignSelf: 'center', fontSize: 18, margin: 5},
        ]}>
        Daring
      </Text>
    </TouchableOpacity>
    <Divider style={styles.dividerStyle} />
    <TouchableOpacity
      onPress={() => {
        setBest(!best);
      }}
      style={[styles.horizontalContainer, {marginLeft: 14, padding: 10}]}>
      <CheckBox
        center
        checked={best}
        checkedColor="red"
        onPress={() => {
          setBest(!best);
        }}
        containerStyle={{padding: 0}}
      />
      <Text
        style={[
          styles.large,
          {alignSelf: 'center', fontSize: 18, margin: 5},
        ]}>
        Best
      </Text>
    </TouchableOpacity>
    <Divider style={styles.dividerStyle} />
    <TouchableOpacity
      onPress={() => {
        Snackbar.show({
          text: 'New playlist added',
        });
      }}
      style={[styles.horizontalContainer, {marginLeft: 14, padding: 10}]}>
      <MaterialIcons
        name="playlist-add"
        size={23}
        color={'gray'}
        style={{alignSelf: 'center', margin: 5}}
      />
      <Text
        style={[
          styles.large,
          {alignSelf: 'center', fontSize: 18, margin: 5},
        ]}>
        Add new playlist
      </Text>
    </TouchableOpacity>
    <Divider style={styles.dividerStyle} />
    <TouchableOpacity
      style={styles.smallButton}
      onPress={() => {
        playListRef.current.close();
      }}>
      <Text
        style={[styles.largeText, {color: 'white', alignSelf: 'center'}]}>
        Save
      </Text>
    </TouchableOpacity>
  </RBSheet>

On clicking the Change button in Snackbar the 2nd bottom sheet is not opening on ios butt opening on the android,I am using useRef from React

Solution 1:^[1]

If you want to open another RBSheet then You must write the code of second RBsheet in the first RBSheet like

<RBSheet
ref={optionSheet}
height={360}
openDuration={250}
customStyles={{
  container: {
    borderTopRightRadius: 30,
    borderTopLeftRadius: 30,
    paddingTop: 20,
  },
}}>
<TouchableOpacity
  onPress={() => {
    Snackbar.show({
      text: ' Saved to playlist',
      duration: Snackbar.LENGTH_LONG,
      action: {
        text: 'Change',
        textColor: 'tomato',
        onPress: () => {
          playListRef.current.open();
        },
      },
    });
  }}
  style={[styles.horizontalContainer, {marginLeft: 4, padding: 10}]}>
 
  <Text
    style={[
      styles.large,
      {alignSelf: 'center', fontSize: 18, margin: 5},
    ]}>
    Save to playlist
  </Text>
</TouchableOpacity>

//Second RBsheet
    <RBSheet
    ref={playListRef}
    height={360}
    openDuration={250}
    customStyles={{
      container: {
        borderTopRightRadius: 30,
        borderTopLeftRadius: 30,
        paddingTop: 20,
      },
    }}>
         </RBSheet>
  </RBSheet>

Solution 2:^[2]

This is not currently possible on iOS for the react-native-raw-bottom-sheet library. Take a look at this issue.

https://github.com/nysamnang/react-native-raw-bottom-sheet/issues/35

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	M YASIN
Solution 2	Elijah Hampton

'Multiple Bottom Sheets not opening in react native Ios

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]