📱 A performant, easy to use hold to open context menu for React Native powered by Reanimated 🚀
Home Page: https://enesozturk.github.io/react-native-hold-menu/
License: MIT License
A performant, easy to use hold to open context menu for React Native powered by Reanimated. 🔥
This package is experimental and still in progress. Using it in production is not preffered yet.
TypeScript.Check out the documentation website.
Please give a star if you like this project! 🤩
Describe the bug
Including HoldMenuProvider in a view crashes expo when reloading the app.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
The expo app should reload.
Actual behavior
Expo crashes.
Screenshots
If applicable, add screenshots to help explain your problem.
Thread 17 Crashed:: com.facebook.ABI47_0_0React.JavaScript
0 libsystem_kernel.dylib 0x7ff83611d22a __pthread_kill + 10
1 libsystem_pthread.dylib 0x7ff836175f7b pthread_kill + 263
2 libsystem_c.dylib 0x7ff80013307a __abort + 139
3 libsystem_c.dylib 0x7ff800132fef abort + 145
4 libsystem_c.dylib 0x7ff8001322cc __assert_rtn + 314
5 Expo Go 0x10d56809e ABI47_0_0facebook::jsc::JSCRuntime::~JSCRuntime() + 110
6 Expo Go 0x10d56815a ABI47_0_0facebook::jsc::JSCRuntime::~JSCRuntime() + 14
7 Expo Go 0x10c97fe77 std::__1::shared_ptr<ABI45_0_0expo::CallbackWrapper>::~shared_ptr() + 49
8 Expo Go 0x10d5746ae ABI47_0_0facebook::ABI47_0_0React::JSIExecutor::~JSIExecutor() + 14
9 Expo Go 0x10d43e605 ABI47_0_0facebook::ABI47_0_0React::tryAndReturnError(std::__1::function<void ()> const&) + 22
10 Expo Go 0x10d44ea90 ABI47_0_0facebook::ABI47_0_0React::ABI47_0_0RCTMessageThread::tryFunc(std::__1::function<void ()> const&) + 18
11 Expo Go 0x10d44ed6b ABI47_0_0facebook::ABI47_0_0React::ABI47_0_0RCTMessageThread::runOnQueueSync(std::__1::function<void ()>&&) + 183
12 Expo Go 0x10d50e4ba ABI47_0_0facebook::ABI47_0_0React::NativeToJsBridge::destroy() + 70
13 Expo Go 0x10d5092af ABI47_0_0facebook::ABI47_0_0React::Instance::~Instance() + 31
14 Expo Go 0x10d43c3cf std::__1::__shared_ptr_pointer<ABI47_0_0facebook::ABI47_0_0React::Instance*, std::__1::shared_ptr<ABI47_0_0facebook::ABI47_0_0React::Instance>::__shared_ptr_default_delete<ABI47_0_0facebook::ABI47_0_0React::Instance, ABI47_0_0facebook::ABI47_0_0React::Instance>, std::__1::allocator<ABI47_0_0facebook::ABI47_0_0React::Instance> >::__on_zero_shared() + 23
15 Expo Go 0x10d438f31 __35-[ABI47_0_0RCTCxxBridge invalidate]_block_invoke + 1217
16 Expo Go 0x10d43e605 ABI47_0_0facebook::ABI47_0_0React::tryAndReturnError(std::__1::function<void ()> const&) + 22
17 Expo Go 0x10d432bdb -[ABI47_0_0RCTCxxBridge _tryAndHandleError:] + 103
18 Foundation 0x7ff800c8054f __NSThreadPerformPerform + 177
19 CoreFoundation 0x7ff800387fe5 __CFRUNLOOP_IS_CALLING_OUT_TO_A_SOURCE0_PERFORM_FUNCTION__ + 17
20 CoreFoundation 0x7ff800387f24 __CFRunLoopDoSource0 + 157
21 CoreFoundation 0x7ff800387721 __CFRunLoopDoSources0 + 212
22 CoreFoundation 0x7ff800381e23 __CFRunLoopRun + 927
23 CoreFoundation 0x7ff8003816a7 CFRunLoopRunSpecific + 560
24 Expo Go 0x10d432b0e +[ABI47_0_0RCTCxxBridge runRunLoop] + 467
25 Foundation 0x7ff800c8011b __NSThread__start__ + 1009
26 libsystem_pthread.dylib 0x7ff836176259 _pthread_start + 125
27 libsystem_pthread.dylib 0x7ff836171c7b thread_start + 15
Package versions
Describe the bug
A clear and concise description of what the bug is.
To Reproduce
HoldItem has a TouchableOpacity
Expected behavior
Can holdItem stop its children's onPress(any touch function) function when the holdItem is active(open)?
Actual behavior
A clear and concise description of what happened.
Package versions
Additional context
none
Describe the bug
A clear and concise description of what the bug is.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
A clear and concise description of what you expected to happen.
Actual behavior
A clear and concise description of what happened.
Screenshots
If applicable, add screenshots to help explain your problem.
Package versions
Additional context
Add any other context about the problem here.
Describe the bug
Crash on application start if iconComponent is not provided to HoldMenuProvider with "cannot read property displayName of undefined"
To Reproduce
Steps to reproduce the behavior:
Clean install, follow the docs, assume that iconComponent is not needed if you don't want to use icons.
Package versions
Additional context
Probably should add a default value of class component that renders null to HoldMenuProvider or/and mention it in the docs, since it's marked as required in Typescript defs.
I think some of the dependencies (like expo-blur) need to be peer dependencies only.
At least it worked for me removing these dependencies and upgrading the peer dependencies.
I really love this package, so i can't wait for the next release!
Describe the bug
null is not an object (evaluating 'NativeUnimoduleProxy.viewManagersNames')
Package versions
Describe the bug
Example app crashes with reanimated 2.0.1
To Reproduce
Upgrade to reanimated 2.0.1
Open example app
Screenshots
Package versions
See example app
Hi @enesozturk , are you going to publish v0.1.6 to https://www.npmjs.com/package/react-native-hold-menu ?
Describe the bug
Pressing any action prompts an undefined is not a function error on line 3 of MenuItem.tsx
To Reproduce
Steps to reproduce the behavior:
HoldMenuProvider at the top of stack.HoldItem component with items={ [ { onPress: () => alert('wtf'), text:'what the actual fuck' }] }yarn start --resetCacheExpected behavior
An alert message that says wtf
Actual behavior
A runtime js error... will investigate to see if this is because react-native-reanimated is v3 instead of v2
Screenshots
If applicable, add screenshots to help explain your problem.
Package versions
18.2.0^0.71.8^3.3.0^0.1.6^48.0.0Additional context
Add any other context about the problem here.
Describe the bug
Sometimes the options opacity seems like does not work properly
To Reproduce
Steps to reproduce the behavior:
Create a component and wrapper your component inside HoldItem. If your component is using React.memo, text in options is never shown
Expected behavior
Text shown
Actual behavior
Text doesnt shown
Screenshots
Package versions
Additional context
Some of my code:
const GalleryItem: React.FC<{
own?: boolean;
index: number;
item: Gallery;
onPress: () => void;
}> = ({ own, index, onPress, item }) => {
const { deletePublicImage } = useGalleryActions();
const onDelete = React.useCallback(() => {
deletePublicImage({ uid: item.id });
}, [item.id]);
const MenuItems = React.useMemo(
() => [
{
text: "Eliminar",
onPress: onDelete,
isDestructive: true,
},
],
[onDelete]
);
return (
<HoldItem items={MenuItems}>
<View
style={{
aspectRatio: 1,
width: (width - 40) / 2,
marginLeft: index % 2 === 0 ? 10 : 0,
marginRight: index % 2 === 0 ? 15 : 0,
}}
>
<Pressable onPress={onPress} style={{ width: "100%", height: "100%" }}>
<Image style={styles.img} source={{ uri: item.media }} />
</Pressable>
</View>
</HoldItem>
);
};
To be clear, if I define my GalleryItem with React.memo, then text opacity is never updated. Otherwise, sometimes appears and sometimes doesnt
Describe the bug
The menu item heights are different in rc and debug. The weird situation is that it works on iPhone 13 pro but not on 12 Pro.
UPDATE:
I investigate the source of the problem. It is cause by the FONT_SCALE multiplier in the constants.ts. If I set to 1 is works good, but I set back to const FONT_SCALE = Dimensions.get('screen').fontScale; it measure the scale size and because of that, the menuItem will be smaller.
To Reproduce
<HoldItem
activateOn="tap"
closeOnTap
items={[
{
text: translations.WORKOUT_REMOVE_EXERCISE,
onPress: (
entityId: string,
superSet: number,
setEntityIds: string[],
) => {
deleteExercise(entityId, superSet);
deleteSets(setEntityIds!);
updateExercisesOnDelete();
},
},
// {
// text:
// /\d/.test(alphabet) && alphabet.includes('1')
// ? translations.WORKOUT_SUPER_SET_UP
// : translations.WORKOUT_SUPER_SET_DOWN,
// },
// {
// text:
// (alphabet.includes('1') &&
// !!alphabets[exerciseIndex + 2] &&
// !alphabets[exerciseIndex + 2].includes('3')) ||
// (alphabet.includes('2') &&
// !!alphabets[exerciseIndex + 1] &&
// !alphabets[exerciseIndex + 1].includes('3'))
// ? translations.WORKOUT_SUPER_SET_BREAK
// : !/\d/.test(alphabet)
// ? translations.WORKOUT_SUPER_SET_UP
// : translations.WORKOUT_SUPER_SET_REMOVE,
// },
]}
actionParams={{
[translations.WORKOUT_REMOVE_EXERCISE]: [
exercise.entityId!,
exercise.superSet,
exercise.setEntityIds,
],
}}>
<Pressable
onPress={() => {
Keyboard.dismiss();
}}>
<FontAwesomeIcon icon={faEllipsisH} size={30} color="#000000" />
</Pressable>
</HoldItem>
Screenshots
Debug
Release
Package versions
Describe the bug
I navigate the page and onPress can't get ref again~~
To Reproduce
the code is:
const MyInput = forwardRef((props, ref) => {
useImperativeHandle(ref, () => ({
test() {
console.warn('test');
},
}));
return <TextInput placeholder={props.value} />;
});
const MyInsidePage = ({route}) => {
const inputRef = useRef(null);
return (
<>
<MyInput ref={inputRef} value={route.params.text} />
<HoldItem
items={[
{text: 'test', icon: 'zap', onPress: () => inputRef.current.test()},
]}
activateOn="tap"
hapticFeedback="None">
<Text>Press me</Text>
</HoldItem>
</>
);
};
const Index = ({navigation}) => {
return (
<View>
<Text
onPress={() =>
navigation.navigate({
name: 'MyInsidePage',
params: {text: 'page1'},
key: 'MyInsidePage_1',
})
}>
go to 1
</Text>
<Text
onPress={() =>
navigation.navigate({
name: 'MyInsidePage',
params: {text: 'page2'},
key: 'MyInsidePage_2',
})
}>
go to 2
</Text>
</View>
);
};
export default function () {
return (
<HoldMenuProvider iconComponent={FeatherIcon}>
<SafeAreaProvider>
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Index" component={Index} />
<Stack.Screen name="MyInsidePage" component={MyInsidePage} />
</Stack.Navigator>
</NavigationContainer>
</SafeAreaProvider>
</HoldMenuProvider>
);
}
Expected behavior
Actual behavior
useImperativeHandle can't set ref again~
Screenshots
Package versions
Additional context
none
Describe the bug
When you first time open manu, the area of where the menu list items were opened, are pressable. Menu is hidden, But still can press the menu items. Can't understand what is the problem .. Please fix.
Package versions
"react": "17.0.2",
"react-native": "0.68.2",
"react-native-reanimated": "~2.8.0",
"react-native-hold-menu": "^0.1.5",
"expo": "^45.0.6",
Describe the bug
I tried using this package with a FlatList component, but the data of the items being pressed doesn't update.
Expected behavior
When I long-press an Item, it displays the ID
Actual behavior
It withholds the ID of the first item that was pressed
Package versions
Describe the bug
When HoldMenuItem is used in a screen that has presentation: 'modal'. The hold-items display behind the modal instead of on top.
Expected behavior
The blur and menu items should be displayed on top of the modal view.
Actual behavior
The blur and menu items are displayed behind the modal view.
Screenshots
Package versions
Require cycle: node_modules\react-native-hold-menu\src\components\provider\Provider.tsx -> node_modules\react-native-hold-menu\src\components\menu\index.ts -> node_modules\react-native-hold-menu\src\components\menu\Menu.tsx -> node_modules\react-native-hold-menu\src\components\menu\MenuList.tsx -> node_modules\react-native-hold-menu\src\components\menu\MenuItems.tsx -> node_modules\react-native-hold-menu\src\components\menu\MenuItem.tsx -> node_modules\react-native-hold-menu\src\components\provider\Provider.tsx
Require cycles are allowed, but can result in uninitialized values. Consider refactoring to remove the need for a cycle.
Package versions
Additional context
Add any other context about the problem here.
Describe the bug
I have a chat app and a simple menu with only one item - delete. In debug mode everything looks good but in the production build it does not always render menu item text (see screenshots).
const menuItems: MenuItemProps[] = [
{
text: 'Delete',
isDestructive: true,
onPress: deleteMsg,
},
];
Screenshots
Package versions
Additional context
Please let me know where to look. I guess it could be something related to the menuItem height or opacity.
The usage of react-native-unimodules is deprecated since Expo SDK 43.
https://docs.expo.dev/bare/installing-unimodules/
Please consider to migrate to Expo Modules
https://docs.expo.dev/bare/installing-expo-modules/
Describe the bug
Hello,
There is a problem with the bottom item in the appearance of the drop-down menu.
Here are some devices where I encountered the view (space) error:
iPhone 11
Samsung (SM-A307FN/DS)
Samsung (SM-A920F)
I tried styling it but it had no effect.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
Just a little bit padding for last (actually bottom) item.
Screenshots (Two different devices)
Package versions
Additional context
"Actions" section icon does not load (any icon - 'home', 'archive', etc.).
Describe the bug
Hi
As in title:
The popup positioned lower than it should. If I remove header and text content then position is correct. I think the lib measures absolute position, not relative
Describe the bug
After opening the hold menu on Android it just freezes, no actions can be performed, and can't close the menu by tapping on the backdrop
To Reproduce
Steps to reproduce the behavior:
closeOnTap prop (no result)Expected behavior
Either action is performed or the menu is closed on one of the possible actions
Actual behavior
Neither action performed nor overlay closed
Screenshots
If applicable, add screenshots to help explain your problem.
Package versions
Hi, sorry for wrong tag, im using mobile but i can not create a feature request.
As u can see the picture here, did u support to show a custom preview include reaction? Thanks
Thanks for this amazing package. I used in my app but has not good performance in android. In iOS everything is good and smooth. But in android is so laggy!
Now, it just accept a string name for icon , so I can't set color by myself . Should the icon be red when isDestructive is true ?
Describe the bug
Because this uses nanoid instead of allowing the developer to specify their own key values, sometimes the menu onPress does not update when it should.
To Reproduce
Steps to reproduce the behavior:
HoldMenuProvider at the top of stack.HoldItem components with items that differ only by the onPress property but have the same titles and icons for each item.yarn start --resetCacheonPress function will get called for the wrong item rather than the one that was long pressed.Expected behavior
The correct onPress being called for the hold item being long pressed.
Actual behavior
Occasionally the wrong onPress is called for the corresponding hold item. Adding an item with text that is unique across all hold items fixes the problem, but I don't want to make them unique other than the onPress functions.
import React from 'react';
import {
SafeAreaView,
Text,
View,
} from 'react-native';
import { HoldItem } from 'react-native-hold-menu';
function Test() {
const titles = ['one', 'two', 'three'];
return (
<View style={ { rowGap: 10 } }>
{titles.map((title) => (
<HoldItem
key={ title }
items={ [{
onPress: () => alert(title),
text: 'share',
}] }>
<Text style={ {
backgroundColor: '#eee',
padding: 10,
} }>
{title}
</Text>
</HoldItem>
))}
</View>
);
}
export function TestScreen() {
return (
<SafeAreaView style={ { flex: 1 } }>
<View style={ { padding: 24 } }>
<Test />
</View>
</SafeAreaView>
);
}Screenshots
If applicable, add screenshots to help explain your problem.
*** Not working as expected. ***
https://github.com/enesozturk/react-native-hold-menu/assets/14790443/88583b0d-a8eb-49bc-8bf3-2b22329452f9
*** Oddly it works when make text unique for each item***
items={ [{
onPress: () => alert(title),
text: `share-${title}`,
}] }>Package versions
18.2.0^0.71.8^3.3.0^0.1.6^48.0.0Additional context
Add any other context about the problem here.
Describe the bug
deepEqual validation returns true for the below params.
const senderMenuItems = [ {text: 'Send', icon: 'trash'} ]
const receiverMenuItems = [ {text: 'Receiver', icon: 'trash'} ]
deepEqual(senderMenuItems, receiverMenuItems)To Reproduce
Steps to reproduce the behavior:
deepEqual with above given exampleExpected behavior
It should return false.
Actual behavior
It's returning true.
Screenshots
None
Package versions
https://enesozturk.github.io/react-native-hold-menu/docs
"React Native Reanimated v2 needs extra steps to finalize its installation, please follow their installation instructions." <- Link is dead
New suggested link: https://docs.expo.dev/versions/latest/sdk/reanimated/
Hi! Thanks so much for the awesome library!
I was wondering if you'd be open to supporting use of this package as more of a general purpose context menu? I'd like to use it to open a context menu on tap (instead of on long press), and without a blurred background. I'm thinking something like https://github.com/instea/react-native-popup-menu, but with the awesome animation and smoothness of this package.
I forked and quickly updated it to work that way, and would be happy to open a PR eventually, but wasn't sure if that fit your vision for the package.
There is a type error If I use the actionParams with multiple args.
Type '(status: string, id: string) => void' is not assignable to type '(arg?: string | number | undefined) => void'.
The original type of onPress?: (arg?: string | number) => void;
Maybe this can be a solution for it: onPress?: (...args: (string | number)[]) => void;
Describe the bug
> 1 | import { NativeModulesProxy, requireNativeViewManager } from '@unimodules/core';
| ^
2 | import * as React from 'react';
3 | import { findNodeHandle, View, StyleSheet } from 'react-native';
4 | export default class BlurView extends React.Component {]
Steps to reproduce the behavior:
import { HoldItem } from 'react-native-hold-menu';Screenshots
Package versions
Hi @enesozturk , congratulations with your new job and Center Pixel and relocation to USA.
What do you think of transfering this repo to one of fork authors?
Project is still used, but forks can help only with one-time temp fixes that ultimately should land in main repository:
@athombv @SohelIslamImran what do you think, is there oss maintainer with good reputation to take over or a least merge PRs with fixes and keep dependencies (expo. haptics etc) up-to-date ? Expo has 6 month compatibility window, so this should be done on a regular basis.
<HoldItem
items={[
{ text: 'Edit', icon: 'pencil', onPress: (term, definition) => { navigation.navigate('EditWord', { term, definition }) } },
{ text: 'Delete', icon: 'trash', isDestructive: true, onPress: () => { } }
]}
actionParams={{ Edit: [word.term, word.definition] }} bottom={true}
>
onPress is unable to navigate to another screen
Describe the bug
Hold menu appears off screen when nested inside a horizontal scrollview.
Expected behavior
Hold menu appears in screen.
Actual behavior
Hold menu appears partially off screen.
Screenshots
Package versions
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
Additional context
Add any other context about the problem here.
Describe the bug
Doesn't expire cached items prop with functions
To Reproduce
Pass function to onPress in items
Even though you can pass updated items - it's cache on the lib side
const holdItemMenuItems = (
[
{
icon: 'copy-outline',
text: 'Скопировать',
onPress: () => {
console.log('holdItemMenuItems text', text)
Clipboard.setString(text)
},
},
]
)
Expected behavior
It should call items with new function passed
Actual behavior
Caches function forever
Screenshots
Package versions
Describe the bug
Background of menu is transparent on iOS.
Expected behavior
Expected background to be opaque (not able to see content behind menu)
Actual behavior
Menu is transparent, background is visible.
Screenshots
If applicable, add screenshots to help explain your problem.
Package versions
Additional context
same code works fine on android.
Describe the bug
On the latest version (including in the example project), the final item of the context menu has less height than the rest.
To Reproduce
Steps to reproduce the behavior:
Package versions
Describe the bug
Menu item colors are not reset between dark and light theme changes
To Reproduce
Steps to reproduce the behavior:
git clone https://github.com/enesozturk/react-native-hold-menu
cd react-native-hold-menu
yarn
cd example
yarn
cd ios
npx pod-install
cd ..
yarn run iosNote: I had to comment out flipper in the Podfile to get the app to build in xcode
See video recorded from the repo example app
Expected behavior
Theme colors should be preserved between toggle
Actual behavior
Menu item text and icon colors are not reset between theme changes
Screenshots
https://user-images.githubusercontent.com/362729/155426227-727e2f0a-52fa-4b84-afcb-988941186e40.mp4
Package versions
See example/package.json
Additional context
Add any other context about the problem here.
Describe the bug
Using Expo-router, <HolItem /> translates on the Y axis the height if a header of a <Stack />, even if the prop disabledMove is set.
To Reproduce
Steps to reproduce the behavior:
/app create a _layout.tsx/app
_layout.tsx
index.tsx
_layout.tsx, create a basic that returns a navigationreturn (<>
<Stack screenOptions={{ headerShown: true }}>
<Stack.Screen name="index" options={{ headerLargeTitle: false }} />
</Stack>
</>
)
index.tsx, use <HoltItem /><HoldItem
activateOn="tap"
disableMove
items={[
{ text: 'Reply', onPress: () => {} },
{ text: 'Edit', onPress: () => {} },
{ text: 'Delete', onPress: () => {} },
]}>
<Text>My Action</Text>
</HoldItem>
My Action, this text will translate on Y axis to a distance that is equal to the header's height.Expected behavior
The My Action text should not move.
Additional context
There is no move by setting headerShown: false in the <Stack />, but I need that header.
Describe the bug
Not sure if this is a bug or me doing something wrong.
I have a flatlist and the render method outputs a tile wrapped by the HoldItem component. Each of these tiles has a unique ID and when I create a menu to act on that tiles ID, the ID of the first tile I use the Hold Menu on, is the ID that is shown for every tile that I subsequently try to the Hold Menu on.
I'm creating the Menu items with a function that accepts the a Nav function and the Movie ID:
const createMenuItems = ({ navigateToDetails, movieId }) => [
{ text: "Actions", isTitle: true, onPress: () => {} },
{
text: "Details",
onPress: () => {
console.log("movieId in menu", movieId);
navigateToDetails();
},
},
{
text: "Action 2",
withSeperator: true,
onPress: () => {
console.log(movieId);
},
},
{
text: "Delete",
isDestructive: true,
onPress: () => {
deleteMovie(movieId);
},
},
];This is the component using the Hold Menu:
<View style={styles.movieCard}>
{/* <TouchableOpacity
onPress={navigateToDetails}
onLongPress={() => setMovieEditingId(movie.id)}
> */}
<HoldItem items={menuItems}>
<View>
<PosterImage
uri={movie.posterURL}
posterWidth={posterWidth}
posterHeight={posterHeight}
placeholderText={movie.title}
style={{ borderRadius: BORDER_RADIUS }}
/>
</View>
</HoldItem>
{/* </TouchableOpacity> */}
{/* Icon row */}
</View>Thanks for any insight into the issue.
Android de açılır menu içindeki function lara tıklanınca android de alttaki hatayı alıyorum.
Possible Unhandled Promise Rejection (id: 0): Error: The method or property Haptic.impactAsync is not available on android, are you sure you've linked all the native dependencies properly? Error: The method or property Haptic.impactAsync is not available on android, are you sure you've linked all the native dependencies properly?
Describe the bug
Can't change theme auto.
To Reproduce
Steps to reproduce the behavior:
have a button to change theme , the theme value changed but react-native-hold-menu's theme didn't change
Expected behavior
react-native-hold-menu's theme props change with its value
Package versions
Additional context
the demo code is below~~
const [flag,setFlag] = useState(false);
const theme = useMemo(()=>flag?'light':'dark',[flag]);
return (
<HoldMenuProvider theme={theme}>
<TouchableOpacity onPress={()=>setFlag(true)}>test</TouchableOpacity>
</HoldMenuProvider>
);
the HoldMenu theme doesn't change
Describe the bug
In the expo example, the icons do not render for a couple reasons:
iconProvider is not added.{!item.isTitle && item.icon && AnimatedIcon && (
typeof item.icon === 'string' ? <AnimatedIcon name={item.icon} size={18} style={textColor} /> : item.icon()
)}Notice I also conditionally hide the icons if they aren't defined, this isn't great but it does prevent the 'rendering undefined' bug.
Here is the diff that solved my problem:
diff --git a/node_modules/react-native-hold-menu/src/components/menu/MenuItem.tsx b/node_modules/react-native-hold-menu/src/components/menu/MenuItem.tsx
index efa3e73..18674cd 100644
--- a/node_modules/react-native-hold-menu/src/components/menu/MenuItem.tsx
+++ b/node_modules/react-native-hold-menu/src/components/menu/MenuItem.tsx
@@ -64,8 +64,8 @@ const MenuItemComponent = ({ item, isLast }: MenuItemComponentProps) => {
>
{item.text}
</Animated.Text>
- {!item.isTitle && item.icon && (
- <AnimatedIcon name={item.icon} size={18} style={textColor} />
+ {!item.isTitle && item.icon && AnimatedIcon && (
+ typeof item.icon === 'string' ? <AnimatedIcon name={item.icon} size={18} style={textColor} /> : item.icon()
)}
</AnimatedTouchable>
{item.withSeparator && <Separator />}
diff --git a/node_modules/react-native-hold-menu/src/components/menu/MenuList.tsx b/node_modules/react-native-hold-menu/src/components/menu/MenuList.tsx
index c476f1d..fb02325 100644
--- a/node_modules/react-native-hold-menu/src/components/menu/MenuList.tsx
+++ b/node_modules/react-native-hold-menu/src/components/menu/MenuList.tsx
@@ -33,7 +33,7 @@ import { useInternal } from '../../hooks';
import { deepEqual } from '../../utils/validations';
import { leftOrRight } from './calculations';
-const MenuContainerComponent = IS_IOS ? BlurView : View;
+const MenuContainerComponent = BlurView;
const AnimatedView = Animated.createAnimatedComponent<{
animatedProps: Partial<{ blurType: string }>;
}>(MenuContainerComponent);
@@ -72,8 +72,8 @@ const MenuListComponent = () => {
state.value === CONTEXT_MENU_STATE.ACTIVE
? withSpring(1, SPRING_CONFIGURATION_MENU)
: withTiming(0, {
- duration: HOLD_ITEM_TRANSFORM_DURATION,
- });
+ duration: HOLD_ITEM_TRANSFORM_DURATION,
+ });
const opacityAnimation = () =>
withTiming(state.value === CONTEXT_MENU_STATE.ACTIVE ? 1 : 0, {
@@ -104,8 +104,8 @@ const MenuListComponent = () => {
? 'rgba(255, 255, 255, .75)'
: 'rgba(255, 255, 255, .95)'
: IS_IOS
- ? 'rgba(0,0,0,0.5)'
- : 'rgba(39, 39, 39, .8)',
+ ? 'rgba(0,0,0,0.5)'
+ : 'rgba(39, 39, 39, .8)',
};
}, [theme]);
@@ -114,6 +114,7 @@ const MenuListComponent = () => {
}, [theme]);
const setter = (items: MenuItemProps[]) => {
+ console.log('add items:', items)
setItemList(items);
prevList.value = items;
};This issue body was partially generated by patch-package.
Notice dropping the IS_IOS check fixed the blur issue as well.
Describe the bug
When pressing an option in the menu with an onPress I get this error:
Error: Value is undefined, expected an Object
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:104:6 in reportException
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:171:19 in handleException
at node_modules/react-native/Libraries/Core/setUpErrorHandling.js:24:6 in handleError
at node_modules/expo-error-recovery/build/ErrorRecovery.fx.js:12:21 in ErrorUtils.setGlobalHandler$argument_0
at [native code]:null in flushedQueue
at [native code]:null in invokeCallbackAndReturnFlushedQueue
This is my code:
<HoldItem
items={[
{ text: "Test", onPress: () => {}, isTitle: false },
{ text: "Reply", onPress: () => console.log("hi") },
{ text: "A (no onPress)", isDestructive: true },
]}
containerStyles={{ width: "100%", alignItems: "center" }}
>
<HomePageButton
text="test"
onPress={() => null}
style={{ alignSelf: "center" }}
/>
</HoldItem>To Reproduce
Steps to reproduce the behavior:
react-native-hold-menuonPress: () => {}Expected behavior
I of course expect it to not error and just run the onPress function.
Actual behavior
When I press an item that has an onPress function, I get an error. If it doesn't have the onPress function, I don't.
Screenshots
Error on my phone:
Package versions
Additional context
This also happens on android.
Describe the bug
Upon following the instructions in this package's README and also the dependencies instructions, I've come up to this error:
TypeError: (0, _expoModulesCore.requireNativeModule) is not a function. (In '(0, _expoModulesCore.requireNativeModule)('ExpoHaptics')', '(0, _expoModulesCore.requireNativeModule)' is undefined)
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:104:6 in reportException
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:172:19 in handleException
at node_modules/react-native/Libraries/Core/setUpErrorHandling.js:24:6 in handleError
at node_modules/@react-native/polyfills/error-guard.js:49:36 in ErrorUtils.reportFatalError
at node_modules/metro-runtime/src/polyfills/require.js:204:6 in guardedLoadModule
at http://192.168.1.100:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&strict=false&minify=false:284752:3 in global code
To Reproduce
Steps to reproduce the behavior:
yarn add react-native-hold-menunpx expo install react-native-reanimatedexpo install react-native-gesture-handlernpx expo install expo-blurnpx expo install expo-hapticsExpected behavior
Hold menu working
Actual behavior
App doesn't run with the following error being displayed: TypeError: (0, _expoModulesCore.requireNativeModule) is not a function. (In '(0, _expoModulesCore.requireNativeModule).
Screenshots
Package versions
Additional context
From my understanding, this could be an issue with expo-modules-core not supporting expo managed apps yet - hence the API documentation for setup not being valid.
However, if that is true this package could have a more clear description of what's going on with the expo compability. It says it's compatible but it's not clear if it supports bare, managed or both types of apps.
That's the only error showing up which won't allow me to use the react-native-hold-menu.
Do you know how to fix this?
undefined is not an object (evaluating '_useInternal.state')
Hi! 👋
Firstly, thanks for your work on this project! 🙂
Today I used patch-package to patch [email protected] for the project I'm working on.
The following fixes what is happening in the below screen recording:
Here is the diff that solved my problem (#105):
diff --git a/node_modules/react-native-hold-menu/lib/typescript/components/menu/types.d.ts b/node_modules/react-native-hold-menu/lib/typescript/components/menu/types.d.ts
index 514e5c9..3cddd4b 100644
--- a/node_modules/react-native-hold-menu/lib/typescript/components/menu/types.d.ts
+++ b/node_modules/react-native-hold-menu/lib/typescript/components/menu/types.d.ts
@@ -1,6 +1,7 @@
import { TransformOriginAnchorPosition } from '../../utils/calculations';
export type MenuItemProps = {
+ key: string;
text: string;
icon?: string | (() => React.ReactElement);
onPress?: (...args: any[]) => void;
diff --git a/node_modules/react-native-hold-menu/src/components/menu/MenuItems.tsx b/node_modules/react-native-hold-menu/src/components/menu/MenuItems.tsx
index bef7a30..6b48188 100644
--- a/node_modules/react-native-hold-menu/src/components/menu/MenuItems.tsx
+++ b/node_modules/react-native-hold-menu/src/components/menu/MenuItems.tsx
@@ -11,7 +11,7 @@ const MenuItemsComponent = ({ items }: { items: MenuItemProps[] }) => {
{items.map((item: MenuItemProps, index: number) => {
return (
<MenuItem
- key={index}
+ key={item.key}
item={item}
isLast={items.length === index + 1}
/>
diff --git a/node_modules/react-native-hold-menu/src/components/menu/types.d.ts b/node_modules/react-native-hold-menu/src/components/menu/types.d.ts
index 514e5c9..3cddd4b 100644
--- a/node_modules/react-native-hold-menu/src/components/menu/types.d.ts
+++ b/node_modules/react-native-hold-menu/src/components/menu/types.d.ts
@@ -1,6 +1,7 @@
import { TransformOriginAnchorPosition } from '../../utils/calculations';
export type MenuItemProps = {
+ key: string;
text: string;
icon?: string | (() => React.ReactElement);
onPress?: (...args: any[]) => void;Then in your code you will need to specify unique keys that react to whenever you want the item to be rerendered like this:
const items = ['one', 'two', 'three'];
...
<HoldItem items={ items.map((item) => ({
key: item,
text: 'share',
onPress: () => alert(item),
})) }>
{item}
</HoldItem>This issue body was partially generated by patch-package.
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.