Привязка модального окна к компоненту | React Native

Question

День добрый, ещё новичок в разработке, не могу нигде найти информацию по привязке модального окна к компоненту, например: Чтобы модальное окно появлялось около нажатого элемента, не по середине экрана, где-то сбоку, а рядом с нажатым элементом. В интернете не могу найти никакой подобной информации, перебирал библиотеки на гитхабе, связанные с модальными окнами, - ничего , это возможно вообще?

Answer 1

* {
  box-sizing: border-box;
}

body {
  width: 100%;
  min-height: 100vh;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.block {
  position: relative;
  background-color: royalblue;
  display: inline-block;
  padding: 0 24px;
  margin: 12px;
}

.block:hover .overlay,
.overlay:hover {
  display: block;
}

.overlay {
  position: absolute;
  display: none;
  background-color: black;
  color: white;
  z-index: 99;
  padding: 12px 24px;
  width: 320px;
}

.overlay.right {
  right: 0;
  top: 0;
  transform: translateX(100%);
}

.overlay.left {
  left: 0;
  top: 0;
  transform: translateX(-100%);
}

.overlay.bottom {
  left: 0;
  bottom: 0;
  transform: translateY(100%);
}

.overlay.top {
  left: 0;
  top: 0;
  transform: translateY(-100%);
}

.overlay.left-top {
  left: 0;
  top: 0;
  transform: translateY(-100%) translateX(-100%);
}

.overlay.left-bottom {
  left: 0;
  bottom: 0;
  transform: translateY(100%) translateX(-100%);
}

.overlay.right-top {
  right: 0;
  top: 0;
  transform: translateY(-100%) translateX(100%);
}

.overlay.right-bottom {
  right: 0;
  bottom: 0;
  transform: translateY(100%) translateX(100%);
}

<div>
  <div class="block">
    <p>Справа</p>
    <div class="overlay right">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent egestas pretium lorem, et ornare diam maximus et. Duis tempor pretium felis a rhoncus.
    </div>
  </div>

  <div class="block">
    <p>Слева</p>
    <div class="overlay left">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent egestas pretium lorem, et ornare diam maximus et. Duis tempor pretium felis a rhoncus.
    </div>
  </div>

  <div class="block">
    <p>Снизу</p>
    <div class="overlay bottom">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent egestas pretium lorem, et ornare diam maximus et. Duis tempor pretium felis a rhoncus.
    </div>
  </div>

  <div class="block">
    <p>Сверху</p>
    <div class="overlay top">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent egestas pretium lorem, et ornare diam maximus et. Duis tempor pretium felis a rhoncus.
    </div>
  </div>
</div>
<div>
  <div class="block">
    <p>Справа-сверху</p>
    <div class="overlay right-top">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent egestas pretium lorem, et ornare diam maximus et. Duis tempor pretium felis a rhoncus.
    </div>
  </div>

  <div class="block">
    <p>Справа-снизу</p>
    <div class="overlay right-bottom">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent egestas pretium lorem, et ornare diam maximus et. Duis tempor pretium felis a rhoncus.
    </div>
  </div>

  <div class="block">
    <p>Слева-сверху</p>
    <div class="overlay left-top">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent egestas pretium lorem, et ornare diam maximus et. Duis tempor pretium felis a rhoncus.
    </div>
  </div>

  <div class="block">
    <p>Слева-снизу</p>
    <div class="overlay left-bottom">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent egestas pretium lorem, et ornare diam maximus et. Duis tempor pretium felis a rhoncus.
    </div>
  </div>
</div>

Answer 2

Судя по описанию ты хочешь добиться чего-то типо контестного меню. Не думаю что резонно использовать в данном случае именно модалку. Можно просто создать View с абсолютным позиционированием (который будет внутри View относительного которого нужно рендерить) и рендерить его по условию. Как вариант использовать уже готовые билиотеки с настраиваемым поведением: https://callstack.github.io/react-native-paper/menu.html https://www.npmjs.com/package/@react-native-menu/menu

Answer 3

Проблема решилась через ref компонента и применимого к нему метода measure(), полученные координаты я пихнул тупо в переменную/-ые, так я смог "привязать" модальное окно к компоненту – может это и костыль, но он работает.
Пример использования measure() в ref любого компонента (в моём случае вытаскивается местоположение относительно экрана):

ref={(ref) =>
    ref?.measure((x, y, width, height, pageX, pageY) => {
      X = pageX;
      Y = pageY;
    })

БЛОГ НА HUSL

Привязка модального окна к компоненту | React Native

Ответы (3 шт):