Embed another navigator inside a modal in react native

Question

I have create a modal using react-native-modal which display a component A('Cart' in my case) (having multiple child components and so on.)

This modal opens upto to half the screen while the other contents of the app is visible behind the overlay in the remaining part. However, my requirement is such that on the tap of a button inside the modal, I want another screen (B) to be pushed over A (inside the modal only and not over the whole app).

How can I achieve this flow. As currently a new screen which is pushed covers the entire screen and not the modal only.

class CartModal extends Component {
  state = {
    isVisible: false,
  };

  onCartDismiss = () => {
    const { onCartDismiss } = this.props;
    onCartDismiss();
  };

  render() {
    const { navigation, isVisible, onCartDismiss } = this.props;
    return (
      <Modal
        isVisible={isVisible}
        onBackdropPress={onCartDismiss}
        style={CartStyles.cartModal}
        onSwipeComplete={this.onCartDismiss}
        swipeDirection="down"
        swipeThreshold={50}
        propagateSwipe
      >
        <View
          style={styles.container}
        >
          <Cart navigation={this.props.navigation} onCartDismiss={this.onCartDismiss} />
        </View>
      </Modal>
    );
  }
}