enesozturk / react-native-hold-menu

📱 A performant, easy to use hold to open context menu for React Native powered by Reanimated 🚀
https://enesozturk.github.io/react-native-hold-menu/
MIT License
1.42k stars 95 forks source link

Synchronously call function #10

Open productdevbook opened 3 years ago

productdevbook commented 3 years ago
Screen Shot 2021-03-09 at 20 07 30

Screen Shot 2021-03-09 at 20 08 58

Originally posted by @productfrontenddeveloper in https://github.com/enesozturk/react-native-hold-menu/issues/9#issuecomment-794175410

enesozturk commented 3 years ago

Could you please share other details in bug issue template for your example?

HoldMenuProvideis should be used in root of your app (App.js) by the way. And what kind a usage are you trying? If you want to use touchable or pressable with HoldMenu you can check this usage.

productdevbook commented 3 years ago

Screens tsx

import { Box, StyledText } from 'components';

import * as React from 'react';

import { useNavigation } from '@react-navigation/native';
import { useDispatch } from 'react-redux';

import I18n from 'lang/languages';

import { ListInterface } from 'store/types';
import { Pressable } from 'react-native';
import { HoldItem } from 'react-native-hold-menu';

interface Props {
  item: ListInterface;
  isFirstElement?: boolean;
  isLastElement?: boolean;
  onPress?: () => void;
}

export const MeListItem = (props: Props) => {
  const MenuItems = [
    { text: 'Actions', isTitle: true, onPress: () => {} },
    { text: 'Action 1', onPress: () => {} },
    { text: 'Action 2', withSeperator: true, onPress: () => {} },
    { text: 'Action 3', isDestructive: true, onPress: () => {} },
  ];

  return (
    <Box>
      <HoldItem items={MenuItems}>
        <Pressable onPress={() => console.log('test')}>
          <StyledText fontSize={25}>{props.item.emoji}</StyledText>
        </Pressable>
      </HoldItem>
    </Box>
  );
};

app.tsx

 <HoldMenuProvider theme="light">
              <Navigator />
            </HoldMenuProvider>
enesozturk commented 3 years ago

Are we going to go one by one? Which versions are you using?

productdevbook commented 3 years ago

Are we going to go one by one? Which versions are you using?

oo sorry :(

Package versions

React: 17.0.1
React Native: 0.64.0-rc.4
React Native Reanimated: 2.0.0
enesozturk commented 3 years ago

And the Hold Menu version? Is it v0.0.8? This might because of your Reanimated setup as well. Be sure Reanimated it is working fine.

productdevbook commented 3 years ago

And the Hold Menu version? Is it v0.0.8? This might because of your Reanimated setup as well. Be sure Reanimated it is working fine.

yes, v0.0.8, Reanimated I've been using it for a long time, but let me check again.

enesozturk commented 3 years ago

I see, I have to reproduce problem to solve and will try. Any help would be great to reproduce it.

productdevbook commented 3 years ago

I see, I have to reproduce problem to solve and will try. Any help would be great to reproduce it.

Reanimated no problem, add react-native-hold-menu some problem https://user-images.githubusercontent.com/38668796/110529174-f8a2e780-8129-11eb-90ca-b65ca7e33ea5.mov

productdevbook commented 3 years ago

https://github.com/software-mansion/react-native-reanimated/releases/tag/2.0.0

Can it test this with the stable version just released? I wonder if the library does not work steadily

enesozturk commented 3 years ago

I have not tested with stable version yet but was working with rc-3 that last version before the stable. No breaking changes after rc-3 (maybe this). Will try it today with 2.0.0.

llr101 commented 3 years ago

@enesozturk Can it run ? I have the same error. I use react-native init to create a project and follow react-native-unimodules installing. Do I need try create-react-native-app to create a project ?

enesozturk commented 3 years ago

Hi @BooYeu, I am trying to fix another more important issue for now, after that this must be solved with new release. It is important which React Native and Reanimated version you are using. You can check the expo project or clone this repo and run the example project.

llr101 commented 3 years ago

@enesozturk thank you very much ^^ . And I want to know dose it also need expo in the new release ? My app will be bigger when I choice add react-native-unimodules to enable expo function

enesozturk commented 3 years ago

@enesozturk thank you very much ^^ . And I want to know dose it also need expo in the new release ? My app will be bigger when I choice add react-native-unimodules to enable expo function

You don't have to use Expo. You can use bare RN setup with unimodules. It is needed for blurview and haptic feedback. We may make it optional further releases.

llr101 commented 3 years ago

@enesozturk ok ok , thank you . I really really like this project and appreciate . And want to know maybe when it can use in react-native@0.64 and react-native-reanimated@2.0.0 stable version ?

enesozturk commented 3 years ago

@enesozturk ok ok , thank you . I really really like this project and appreciate . And want to know maybe when it can use in react-native@0.64 and react-native-reanimated@2.0.0 stable version ?

Not sure. Thanks for let me know the versions. I will check it 👍🏽

llr101 commented 3 years ago

I fix the problem by set _leftOrRight from object to value, and edit "..._leftOrRight" to "left:_leftOrRight" but now , I found items onPress error . Maybe also because of react-native-reanimated stable version?

enesozturk commented 3 years ago

There must be something missing. _leftOrRight is returning an object are you sure? And what if it is opening from right? Yes there is an issue I am following it. https://github.com/software-mansion/react-native-reanimated/issues/1758 Reanimated team also worked on int an releases in v2.0.1 but still exist -> https://github.com/software-mansion/react-native-reanimated/pull/1844

llr101 commented 3 years ago

I see the object _leftOrRight just has one param . So I change _leftOrRight to number, and edit it like "left:leftOrRight". Then it can run and shows ok. Do you have error when click the item . I give an onPress param , But it shows like this ![41616844434 pic](https://user-images.githubusercontent.com/16587763/112719173-80faf800-8f32-11eb-812c-a3224ee51a1f.jpg)

llr101 commented 3 years ago

and it seems your doc write a wrong props . holditems your doc shows styles , but it is containerStyles in codes~~

enesozturk commented 3 years ago

and it seems your doc write a wrong props . holditems your doc shows styles , but it is containerStyles in codes~~

Oh I see, will fix it 👍🏽

llr101 commented 3 years ago

and item text prop doesn't support Chinese like " 你好". It shows error code.I review the code the whole day. But I don't know why...Do you have any idea ? Thank you very much !!!! 11616846767_ pic

enesozturk commented 3 years ago

That is weird. No idea why. Maybe it is related the same issue. Text is passing through Shared Value. That might breake something.

cayasso commented 3 years ago

I am experiencing this exact same error, any fix for it yet?

cayasso commented 3 years ago

As @BooYeu pointed out the solution, that works because object spread is not supported in worklets, its a known problem, as mentioned in the reanimated docs here https://docs.swmansion.com/react-native-reanimated/docs/next/#known-problems-and-limitations

bfischer1121 commented 3 years ago

Maybe you guys could release this to npm? We're having to point to the develop branch because the npm version is broken and I don't think it's going to work for anyone.

bfischer1121 commented 3 years ago

For anyone encountering this issue, the simplest thing I found is to fork the repo, build the develop branch, remove lib from the .gitignore and commit it, then point to your fork in the package.json

riamon-v commented 3 years ago

Having the exact same issue here too. Using react-native: 0.65.1 And last version of this package

riamon-v commented 3 years ago

For anyone encountering this issue, the simplest thing I found is to fork the repo, build the develop branch, remove lib from the .gitignore and commit it, then point to your fork in the package.json

Not working for me