React Native v0.76 not supported

[arpitdalal-hp]

Describe the bug
Use of NativeModules.UIManager.measure in Utility.ts is not working in the new architecture.

Device/Setup Info:

• Device: Android & iOS
• OS: Multiple versions
• react-native version: 0.76.1
• react-native-popover-view version: 5.1.9

Screenshots
Popover doesn't open

Debug Output

calculateRectFromRef - waiting for ref
calculateRectFromRef - waiting for ref to move from: {"x":0,"y":0,"width":0,"height":0}

It never moves from the initial Rect of 0,0,0,0

[mlazari]

This is likely related to the new architecture which is enabled by default in React Native 0.76 (but can be disabled if needed - https://reactnative.dev/blog/2024/10/23/the-new-architecture-is-here#opt-out).

[arpitdalal-hp]

Yes, but I need the new architecture, so I created a PR to use measureInWindow on the ref as recommended by the react-native team.

Sorry, forgot to mention this above but there's a workaround for now by calculating Rect and passing it to the component.

This is not ideal as this has a bit of delay in popover opening because of how react state works.

import React, { useLayoutEffect, useRef, useState } from "react"
import { StyleSheet, View, Pressable, Text, TouchableOpacity } from "react-native"
import Popover, {Rect} from "react-native-popover-view"

export const PopoverMenu = ({ items }: PopoverMenuProps) => {
  const [isPopoverOpen, setIsPopoverOpen] = useState(false)
  const [position, setPosition] = useState<Rect>(new Rect(0, 0, 0, 0))
  const fromElRef = useRef<React.ElementRef<typeof TouchableOpacity>>(null)

  useLayoutEffect(() => {
    fromElRef.current?.measureInWindow((x, y, width, height) => {
      setPosition(new Rect(x, y, width, height))
    })
  }, [])

  return (
    <>
      <TouchableOpacity ref={fromElRef} onPress={() => setIsPopoverOpen(true)}>
        <Text>Open</Text>
      </TouchableOpacity>
      <Popover
        from={position}
        isVisible={isPopoverOpen}
        offset={10}
        onRequestClose={() => setIsPopoverOpen(false)}
      >
        {items.map((item, index) => (
          <View key={item.title}>
            <Pressable
              onPress={() => {
                setIsPopoverOpen(false)
              }}
            >
              <View>
                <Text>{item.title}</Text>
              </View>
            </Pressable>
          </View>
        ))}
      </Popover>
    </>
  )
}

[Olekk17]

Yes, but I need the new architecture, so I created a PR to use measureInWindow on the ref as recommended by the react-native team.

Sorry, forgot to mention this above but there's a workaround for now by calculating Rect and passing it to the component.

This is not ideal as this has a bit of delay in popover opening because of how react state works.

import React, { useLayoutEffect, useRef, useState } from "react"
import { StyleSheet, View, Pressable, Text, TouchableOpacity } from "react-native"
import Popover, {Rect} from "react-native-popover-view"

export const PopoverMenu = ({ items }: PopoverMenuProps) => {
  const [isPopoverOpen, setIsPopoverOpen] = useState(false)
  const [position, setPosition] = useState<Rect>(new Rect(0, 0, 0, 0))
  const fromElRef = useRef<React.ElementRef<typeof TouchableOpacity>>(null)

  useLayoutEffect(() => {
    fromElRef.current?.measureInWindow((x, y, width, height) => {
      setPosition(new Rect(x, y, width, height))
    })
  }, [])

  return (
    <>
      <TouchableOpacity ref={fromElRef} onPress={() => setIsPopoverOpen(true)}>
        <Text>Open</Text>
      </TouchableOpacity>
      <Popover
        from={position}
        isVisible={isPopoverOpen}
        offset={10}
        onRequestClose={() => setIsPopoverOpen(false)}
      >
        {items.map((item, index) => (
          <View key={item.title}>
            <Pressable
              onPress={() => {
                setIsPopoverOpen(false)
              }}
            >
              <View>
                <Text>{item.title}</Text>
              </View>
            </Pressable>
          </View>
        ))}
      </Popover>
    </>
  )
}

Man, you are my savior, I made this component and replaced with it my popovers in app and it worked:

import React, { forwardRef, useLayoutEffect, useRef, useState } from 'react';
import { View } from 'react-native';
import PopoverLib, { Rect } from 'react-native-popover-view';
import { PopoverProps } from 'react-native-popover-view/dist/Types';

type Props = PopoverProps & {
  from: React.ReactNode;
};

export const Popover = (props: Props) => {
  const [position, setPosition] = useState<Rect>(new Rect(0, 0, 0, 0));
  const fromElRef = useRef<React.ElementRef<typeof View>>(null);

  useLayoutEffect(() => {
    if (!fromElRef || !('current' in fromElRef)) return;
    fromElRef.current?.measureInWindow((x, y, width, height) => {
      setPosition(new Rect(x, y, width, height));
    });
  }, []);

  return (
    <>
      <View ref={fromElRef}>{props.from}</View>
      <PopoverLib {...props} from={position}>
        {props.children}
      </PopoverLib>
    </>
  );
};

[say-rahul]

I'm trying to do my first project in react native
It's throwing me an error..plz help me out

When i enter
npx react-native run-android

What went wrong:
Execution failed for task ':gradle-plugin:shared:compileKotlin'.

Could not resolve all files for configuration ':gradle-plugin:shared:compileClasspath'.
Could not resolve org.jetbrains.kotlin:kotlin-stdlib:1.9.24.
Required by:
project :gradle-plugin:shared
> Could not resolve org.jetbrains.kotlin:kotlin-stdlib:1.9.24.
> Could not get resource 'https://repo.maven.apache.org/maven2/org/jetbrains/kotlin/kotlin-stdlib/1.9.24/kotlin-stdlib-1.9.24.pom'.
> Could not HEAD 'https://repo.maven.apache.org/maven2/org/jetbrains/kotlin/kotlin-stdlib/1.9.24/kotlin-stdlib-1.9.24.pom'.
> repo.maven.apache.org
Could not resolve com.google.guava:guava:31.0.1-jre.
Required by:
project :gradle-plugin:shared
> Could not resolve com.google.guava:guava:31.0.1-jre.
> Could not get resource 'https://repo.maven.apache.org/maven2/com/google/guava/guava/31.0.1-jre/guava-31.0.1-jre.pom'.
> Could not HEAD 'https://repo.maven.apache.org/maven2/com/google/guava/guava/31.0.1-jre/guava-31.0.1-jre.pom'.
> No such host is known (repo.maven.apache.org)