react-native-actions-sheet

react-native-actions-sheet copied to clipboard

I tried to insert two action sheets in my screen, here is my code:

export class HomeScreen extends React.Component {
  actionSheetRef;
  plainActionSheetRef;

  constructor(props: any) {
    super(props);
    this.actionSheetRef = createRef<ActionSheet>();
    this.plainActionSheetRef = createRef<ActionSheet>();
  }

  render() {
    return (
      <View
        style={{
          justifyContent: 'center',
          flex: 1,
        }}
      >
        <TouchableOpacity
          onPress={() => {
            this.actionSheetRef.current?.setModalVisible();
          }}
        >
          <MFText>Open First ActionSheet</MFText>
        </TouchableOpacity>
        <TouchableOpacity
          onPress={() => {
            this.plainActionSheetRef.current?.setModalVisible();
          }}
        >
          <MFText>Open Second ActionSheet</MFText>
        </TouchableOpacity>

        <ActionSheet
          ref={this.actionSheetRef}
          extraScroll={34}
          gestureEnabled={true}
        >
          <MFText>first action sheet - row 1</MFText>
          <MFText>first action sheet - row 2</MFText>
          <MFText>first action sheet - row 3</MFText>
          <MFText>first action sheet - row 4</MFText>
        </ActionSheet>

        <ActionSheet
          key="asd"
          ref={this.plainActionSheetRef}
          extraScroll={34}
          gestureEnabled={true}
        >
          <MFText>second action sheet - row 1</MFText>
          <MFText>second action sheet - row 2</MFText>
          <MFText>second action sheet - row 3</MFText>
          <MFText>second action sheet - row 4</MFText>
        </ActionSheet>
      </View>
    );
  }
}

I tried also in functional component and class based component. The issue is that the extraScroll parameter doesn't work for the secondly opened action sheet:

extra info: It's the same issue, if i don't use the extraScroll parameter, so in case of the first action sheet i can scroll up, but for the second the scrolling up doesn't work. (scrolling down -> hiding the action sheet always works).

Can I ask you help, what could be wrong? Or I can't use two ActionSheet components in one screen?

@ammarahm-ed if you could take a look at the issue I would really appreciate it! Thank you in advance!

@mateattilabarna what are you trying to achieve here. i don't see a problem. can you share a video to demonstrate the problem. You can simply use containerStyle prop to add bottom padding to ActionSheet so the content doesn't hide.

@ammarahm-ed

Sorry for the late answer, here is a video:

https://user-images.githubusercontent.com/19281761/121666362-723fce00-caa9-11eb-9703-cb31de69596b.mov

Extra info: I currently resolved with hiding totally one of the action sheets, so this is not blocking me.

Looks like this issue can be resolved @ammarahm-ed 🎉

Fixed.