JavaScript – How to fade and pop in the modal background when modal is enabled?

I am using React and TypeScript. I am not using the reaction modal library. I have a custom modal that blurs my background when activated, but slides with the modal as the background dimns. I want the modal to slide but the dimness to appear. I tried to fix the background dimming according to this link however, I don’t want this slide in the animation for background dimming.

How can I do this? Is there any way for me to do this as easily as I would like to add a separate view for the background as opposed to the one that appears on click with the modal. Also, I don’t want to import React-Neddy-Modal Addon.

My code is:

<Container {...props}>
      <BottomModal
        animationType="slide"
        transparent={true}
        visible={modalVisible}
        onRequestClose={() => {
          setModalVisible(!modalVisible);
        }}>
        <CenterView onPress={() => setModalVisible(!modalVisible)}>
          <ModalContent>
            <ModalTitle>
              <TitleText>{title}</TitleText>
            </ModalTitle>
            <ModalBody>
              <LeftTextRightCheckBox>
                <TitleText>Newest</TitleText>
                <CheckBox />
              </LeftTextRightCheckBox>
              <LeftTextRightCheckBox>
                <TitleText>Points High to Low</TitleText>
                <CheckBox />
              </LeftTextRightCheckBox>
              <LeftTextRightCheckBox>
                <TitleText>Brands A to Z</TitleText>
                <CheckBox />
              </LeftTextRightCheckBox>
            </ModalBody>
            <Pressable onPress={() => setModalVisible(!modalVisible)}>
              <TitleContainer>
                <TitleText>Close</TitleText>
              </TitleContainer>
            </Pressable>
          </ModalContent>
        </CenterView>
      </BottomModal>
      <TopContainer>
        <TitleContainer>
          <TitleText>{title}</TitleText>
        </TitleContainer>
        <ButtonContainers>
          <LeftTextRightIcon
            onPress={() => setModalVisible(true)}
            text="Sort"
            icon="chevron-down"
          />
          <LeftTextRightIcon text="Filter" icon="chevron-down" />
          <LeftTextRightIcon text="Category" icon="chevron-down" />
        </ButtonContainers>
      </TopContainer>
      <BottomContainer />
    </Container>


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

const TopContainer = styled.View`
  flex-direction: column;
`;

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

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

const ModalContent = styled.Pressable`
  flex-direction: column;
  background-color: white;
  align-items: center;
  margin: auto;
  width: 100%;
  margin-bottom: 0;
  height: 350px;
  border-top-left-radius: 50px;
  border-top-right-radius: 50px;
`;