How to handle ScrollView inside a Pressable in React-Native?

Question

Right now, I am creating a modal with items inside the modal to scroll. However, I am noticing the touch function is being extremely obscured and not passing through appropriately. With this current implementation, scrolling on the ScrollView is not working. I am just trying to have this scrollview inside the modal, I have set it up so that the modal can be pressable inside and an outside press of the modal will cause it to close. So I need to pass the proper touchable properties down.

Some resources and previous stack overflow pages I was looking at was:

React-Native, Scroll View Not Scrolling

 return (
    <Container {...props}>
      <BottomModal
        animationType="slide"
        transparent={true}
        visible={modalVisible}
        onRequestClose={() => {
          setModalVisible(!modalVisible);
        }}>
        <CenterView onPress={() => setModalVisible(!modalVisible)}>
          <ModalContent>
            <ModalHeader>
              <CloseButtonContainer>
                <Pressable onPress={() => setModalVisible(!modalVisible)}>
                  <CloseButton
                    name="times-circle"
                    type={vectorIconTypes.MEDIUM}
                  />
                </Pressable>
              </CloseButtonContainer>
              <TitleContainer>
                <TitleText>{title}</TitleText>
              </TitleContainer>
            </ModalHeader>
            <ModalList>
              <ScrollContainer>
                <LeftTextRightCheckBox>
                  <TitleText>Newest</TitleText>
                  <CheckBox />
                </LeftTextRightCheckBox>
                <LeftTextRightCheckBox>
                  <TitleText>Points High to Low</TitleText>
                  <CheckBox />
                </LeftTextRightCheckBox>
                <LeftTextRightCheckBox>
                  <TitleText>Brands A to Z</TitleText>
                  <CheckBox />
                </LeftTextRightCheckBox>
                <LeftTextRightCheckBox>
                  <TitleText>Brands A to Z</TitleText>
                  <CheckBox />
                </LeftTextRightCheckBox>
                <LeftTextRightCheckBox>
                  <TitleText>Brands A to Z</TitleText>
                  <CheckBox />
                </LeftTextRightCheckBox>
                <LeftTextRightCheckBox>
                  <TitleText>Brands A to Z</TitleText>
                  <CheckBox />
                </LeftTextRightCheckBox>
                <LeftTextRightCheckBox>
                  <TitleText>Brands A to Z</TitleText>
                  <CheckBox />
                </LeftTextRightCheckBox>
                <LeftTextRightCheckBox>
                  <TitleText>Brands A to Z</TitleText>
                  <CheckBox />
                </LeftTextRightCheckBox>
              </ScrollContainer>
            </ModalList>
          </ModalContent>
        </CenterView>
      </BottomModal>
</Container>


...  

const Container = styled.View`
  flex-direction: column;
  background-color: white;
  padding: 10px;
`;

const BottomModal = styled.Modal`
  flex-direction: row;
  height: 100%;
`;

const CenterView = styled.Pressable`
  justify-content: flex-end;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.3);
  height: 100%;
`;

const ModalContent = styled.Pressable`
  flex-direction: column;
  background-color: white;
  width: 100%;
  border-top-left-radius: 50px;
  border-top-right-radius: 50px;
  padding-bottom: 30px;
  height: 300px;
`;

const ModalHeader = styled.View`
  flex-direction: row;
  width: 100%;
  padding: 20px;
  height: 60px;
`;

const ModalList = styled(ScrollView).attrs(() => ({
  contentContainerStyle: {
    flexDirection: 'column',
    justifyContent: 'center',
    flexGrow: 1,
  },
  showsVerticalScrollIndicator: true,
  persistentScrollbar: true,
}))`
  border: solid pink 5px;
  width: 100%;
  height: 200px;
  padding: 10px;
`;

score 3 · Answer 1 · answered Aug 31 '21 at 15:00

My question was answered perfectly in the same link I had in my question. All credit goes to freddrivett.

If your ScrollView is within something that handles touch (Pressable, TouchableWithoutFeedback etc) then you either need to stop the touch event propagating up to that parent handler or else the ScrollView won't handle the touch event and therefore won't scroll.

This can be done either with onStartShouldSetResponder={() => true} or by wrapping the children in an element which itself handles the touch event (e.g. Pressable):
    <Pressable>
      <Text>This is scrollable</Text>
    <Pressable>
    <Pressable>
      <Text>As is this</Text>
    <Pressable>   </ScrollView> );

If that's the case, you should probably close your question as a duplicate of that one — camille, Aug 31 '21 at 15:48

How to handle ScrollView inside a Pressable in React-Native?

1 Answers1