`HoldItem` react context is incorrect

[mrjackdavis]

Describe the bug HoldItem do not respect the react context in which they are rendered in. They seem to be rendered in the context of their HoldMenuProvider

To Reproduce

import React from 'react';
import { HoldItem, HoldMenuProvider } from "react-native-hold-menu";

const MyContext = React.createContext(0);

const holdItemMenu = [{ text:"test", onPress:()=>{} }]

const MyComponent = ()=>{
  const context = React.useContext(MyContext);

  return (
    <HoldItem>
      <View>{context}</View>
    </HoldItem>
  )
}

export const App = ()=>{
  return (
    <HoldMenuProvider>
      <MyContext.Provider value={123}>
        <MyComponent />
      </MyContext.Provider>
    <HoldMenuProvider>
  )
}

n.b. this is a simplified, untested example of what I'm experiencing. LMK if there are any issues.

Expected behavior In the example above, I expect MyComponent to render 123.

I expect this because it is rendered inside of that context

Actual behavior In the example above,MyComponent renders 0.

It appears MyComponent is actually rendered where HoldMenuProvider is rendered, receiving that context

Screenshots None

Package versions

• React: 18.2.0
• React Native: 0.69.6
• React Native Reanimated: 2.9.1
• React Native Hold Menu: 0.1.5
• Expo: 46.0.9

Additional context Add any other context about the problem here.

[fukemy]

You are wrong about using Context Api from ReactNative, please read more about how to use context, this issues does not related with Hold menu

[mrjackdavis]

@fukemy in what way?

As per the docs, I expect React components which are children of a context provider to have that corresponding context value.

Note that this behaviour seems to be an issue with the underlying react-native-portal as a couple of others have confirmed here.

If you're certain that my understanding is incorrect, or perhaps my untested example is incorrect, I'm keen to understand why if you could explain :)