Popover implementation

[corysimmons]

Here's a simple headless Popover implementation.

Compound Component

import React, { useRef, useState, useEffect } from 'react'
import { TouchableOpacity, Dimensions, View } from 'react-native'
import { Portal } from '@gorhom/portal'

export default function Popover({
  position,
  children,
  offset = { top: 0, left: 0 },
}: {
  position: 'top' | 'bottom' | 'left' | 'right'
  children: React.ReactNode
  offset?: { top?: number; left?: number }
}) {
  const popoverRef = useRef(null)
  const triggerRef = useRef<TouchableOpacity>(null)
  const contentRef = useRef<View>(null)
  const [triggerCoords, setTriggerCoords] = useState({
    width: 0,
    height: 0,
    pageX: 0,
    pageY: 0,
  })
  const [contentCoords, setContentCoords] = useState({
    width: 0,
    height: 0,
    pageX: 0,
    pageY: 0,
  })
  const [isOpen, setIsOpen] = useState(false)
  const [left, setLeft] = useState(-999_999)
  const [top, setTop] = useState(-999_999)

  const toggleOpen = () => {
    setIsOpen(!isOpen)
  }

  const handlePress = (event) => {
    triggerRef.current?.measure((x, y, width, height, pageX, pageY) => {
      setTriggerCoords({ width, height, pageX, pageY })
    })
    contentRef.current?.measure((x, y, width, height, pageX, pageY) => {
      setContentCoords({ width, height, pageX, pageY })
    })
    toggleOpen()
  }

  const [viewportSize, setViewportSize] = useState(Dimensions.get('window'))
  useEffect(() => {
    const handleResize = () => {
      setViewportSize(Dimensions.get('window'))
    }
    const subscription = Dimensions.addEventListener('change', handleResize)
    return () => {
      subscription.remove()
    }
  }, [])

  useEffect(() => {
    switch (position) {
      case 'bottom':
        setLeft(
          triggerCoords.pageX -
            contentCoords.width / 2 +
            triggerCoords.width / 2 +
            (offset.left || 0)
        )
        setTop(
          triggerCoords.pageY + triggerCoords.height + contentCoords.height >
            viewportSize.height
            ? triggerCoords.pageY - contentCoords.height + (offset.top || 0)
            : triggerCoords.pageY + triggerCoords.height + (offset.top || 0)
        )
        break
      case 'top':
        setLeft(
          triggerCoords.pageX -
            contentCoords.width / 2 +
            triggerCoords.width / 2 +
            (offset.left || 0)
        )
        setTop(
          triggerCoords.pageY - contentCoords.height < 0
            ? triggerCoords.pageY + triggerCoords.height + (offset.top || 0)
            : triggerCoords.pageY - contentCoords.height + (offset.top || 0)
        )
        break
      case 'left':
        setLeft(
          triggerCoords.pageX - contentCoords.width > 0
            ? triggerCoords.pageX - contentCoords.width + (offset.left || 0)
            : triggerCoords.pageX + triggerCoords.width + (offset.left || 0)
        )
        setTop(
          triggerCoords.pageY -
            contentCoords.height / 2 +
            triggerCoords.height / 2 +
            (offset.top || 0)
        )
        break
      case 'right':
        setLeft(
          triggerCoords.pageX + triggerCoords.width + contentCoords.width >
            viewportSize.width
            ? triggerCoords.pageX - contentCoords.width + (offset.left || 0)
            : triggerCoords.pageX + triggerCoords.width + (offset.left || 0)
        )
        setTop(
          triggerCoords.pageY -
            contentCoords.height / 2 +
            triggerCoords.height / 2 +
            (offset.top || 0)
        )
        break
    }
  }, [contentCoords, triggerCoords, position, offset, viewportSize])

  let trigger, content

  React.Children.forEach(children, (child) => {
    if (child?.type.name === 'Trigger') {
      trigger = child
    } else if (child?.type.name === 'Content') {
      content = child
    }
  })

  return (
    <View ref={popoverRef}>
      <TouchableOpacity onPress={handlePress} ref={triggerRef}>
        {trigger}
      </TouchableOpacity>

      <Portal hostName="CustomPortalHost">
        <View
          ref={contentRef}
          style={{
            position: 'absolute',
            left: isOpen ? left : -999_999,
            top: isOpen ? top : -999_999,
          }}
        >
          {content}
        </View>
      </Portal>
    </View>
  )
}

const Trigger = ({ children }: { children: React.ReactNode }): JSX.Element =>
  children as JSX.Element
const Content = ({ children }: { children: React.ReactNode }): JSX.Element =>
  children as JSX.Element

Popover.Trigger = Trigger
Popover.Content = Content

Usage

import { View } from 'app/design/view'
import Popover from 'app/Popover/Popover'
import { Text } from 'app/design/typography'

export function HomeScreen() {
  return (
    <View className="flex-1 items-center justify-center p-3">
      <Text>Home screen feature</Text>

      <Popover position='bottom' offset={{
        top: 4
      }}>
        <Popover.Trigger>
          <Text>Click me</Text>
        </Popover.Trigger>

        <Popover.Content>
          <View className="overflow-hidden rounded">
            <Text className="bg-red-500 p-2 text-white">
              {`Ahoy there! I'm a popover! Ahoy there!`}
            </Text>
          </View>
        </Popover.Content>
      </Popover>
    </View>
  )
}

Web screenshot

iPhone screenshot

This isn't as nice as FloatingUI or anything, but it's a start.

Let me know if I'm on the right track or if I'm overlooking something before I go much further on it. I'm not super familiar with the RNW ecosystem or if I'm causing massive perf problems. 😬

[nandorojo]

So on the Web side I’d want to use Radix, and on native, ideally some sort of native library like this: https://github.com/dominicstop/react-native-ios-popover

This is how Zeego currently works

[corysimmons]

Is there any lib for Android you like?

[nandorojo]

i actually haven’t looked much for android, curious what’s out there (that ideally also has RN support)

[corysimmons]

I didn't find anything in the RN ecosystem, and any searches for "Android popover" took me to some weird PopupWindow implementation.

Honestly, I'm simply unsure if I agree with the goals of Zeego. The whole appeal of the Solito stack for me is the 1-codebase thing.

That said, stuff like NativeBase/Tamagui/etc is plagued by opinions and prebuilt styles. I think the RNW ecosystem needs something like https://headlessui.com/ so I'm going to look into that approach + NativeWind. I'll ping you if I come up with anything I think is good.

[nandorojo]

Honestly, I'm simply unsure if I agree with the goals of Zeego. The whole appeal of the Solito stack for me is the 1-codebase thing.

I understand this sentiment. But I've been down this road before, so I have some biases.

https://twitter.com/FernandoTheRojo/status/1368981343460331530?s=20

All I can say is, my assumption is that you'll eventually land at the same conclusion: it's better to use native UI primitives.

If you open a custom menu on iOS, and then try to scroll behind it, does the menu close with a nice animation and the scroll view still work? or does it just sit there stuck and force someone to tap the background? Little things like this compound to a poor UX that feels "React Native"-y.

At this point, I don't believe in rebuilding native primitives that are low-level using JS. I've never seen a popover or bottom sheet built with JS that feels like it would be in the GitHub or Airbnb iOS apps.

With all that said, obviously the top goal is just to ship. If using a Floating UI-like experience works for you, definitely go for it. But I plan on using Zeego / Burnt as ways to bring native primitives into JS land.

[corysimmons]

I definitely reconsidered immediately after writing my last comment, but the RN ecosystem is super hit or miss.

There is a -100% chance I am going to learn both Swift and Kotlin, so there is a -100% chance I am going to be able to bespoke native stuff that is missing from the RN ecosystem (e.g. no Android popover lib), so I think my new approach is to convert Radix to be RN friendly (it seems pretty close already, I'm going through making a list of all the things that need fixed right now—I'll ping you if I actually do this or not), then make Radix the base layer and ✨ progressively enhance ✨ when there are native libs like dominicstop/react-native-ios-popover.

That way I can have a full cross-platform UI kit today and add native upgrades as they become available (or remove them and downgrade that component back to the Radix version if the native lib becomes unmaintained or broken).

lol the lengths I go to to avoid learning Swift and Kotlin. :D

[nandorojo]

First off, my bad for not replying on the thread lol.

I won't be learning Swfit/Kotlin either really (although I took a stab with Burnt).

For what it's worth, with trial-and-error, I've managed to hack together basic Expo modules with Swift and ChatGPT. I literally copy and paste what I have into chat GPT, tell it to fix it, try it a few times, and it works.

My ideal scenario is to use native libraries where React Native versions already exist, such as react-native-ios-popover-view. Building them in Swift, unless it's a simple mapping like Burnt, sucks. I'm more willing to use JS scenarios for Android, where the quality difference is less noticeable IMO and the native side can be a mess with bugs. But for iOS, it's too hard for me to compromise.

The Burnt code is just mapping functions onto another iOS library that already exists. I think this is a pretty feasible situation. But view-based modules are more complicated typically. I might try them out, though.

https://github.com/nandorojo/burnt/blob/master/ios/BurntModule.swift

[corysimmons]

First off, my bad for not replying on the thread lol.

No worries I'm in a kinda manic state right now so I wouldn't blame anyone for just straight up ignoring me. If you get bored just thumbs up and afk. I won't be offended.

For what it's worth, with trial-and-error, I've managed to hack together basic Expo modules with Swift and ChatGPT. I literally copy and paste what I have into chat GPT, tell it to fix it, try it a few times, and it works.

I've made a Sketch plugin with Objective-C and have tinkered around in Android Studio with making a simple UI, but yeah... it's a whole thing.

I, too, am happily a ChatGPT user. I feel my brain atrophying a bit more every day.

---

Out of curiosity, does BeatGig have enough funding & have you considered just straight-up hiring iOS and Android devs to write RN plugins all day?

I feel like if I had a company with any funding that would be my first hire, but maybe that's why I'm broke. 🤔 I tried to convince my Swift + Kotlin co-workers at a company I used to work for to do that and they were ready to resign on the spot, but maybe hiring people with that as their explicitly stated purpose would work.

[fobos531]

Hey @nandorojo , for popovers this might be a good approach: https://github.com/alantoa/universal-tooltip/

[nandorojo]

agreed, looks like he used the zeego approach (& code)

[corysimmons]

Yeah, that's very nice! Nice find! These people who know (even basic) Swift, Kotlin, React/TS/Radix, impress me so much. 🤤

aheze/Popovers looks amazing for your use-case Fernando, but without Android I'm reaching for universal-tooltip. Is Zeego's intention to merge web/iOS stuff only, or does it have to support Android as well before something can get merged?

[nandorojo]

https://github.com/aheze/Popovers

this looks promising