How to implement this lib in a Custom Flatlist

Question

i have a flatlist like image bellow. The code is this. How to implement the pop menu in this case?

renderList = () => (
    <FlatList
      data={this.props.contracts.data}
      keyExtractor={item => String(item.id)}
      renderItem={({ item }) => <ListItem onPress={() => {}} listItem={item} />}
    />
);

hey guys, i implement this solution, but i have this warning _"in most cases you should not have more menu providers in your app (see API documentation). In other cases use skipinstacecheck prop"_ help me please — Julio Azevedo, Jan 25 '19 at 17:58
I inserted the image directly to the question to be always visible instead of displaying a url link. — kboul, Jan 25 '19 at 22:05

score 3 · Answer 1 · answered Jan 26 '19 at 19:25

There is nothing special about rendering popup menu inside of flat list. Simply put it into your ListItem component.

Ad "in most cases you should not have more menu providers in your app (see API documentation). In other cases use skipinstacecheck prop" warning. Normally (like 98% of cases) you should not have multiple MenuProviders in your application. If you put it inside of ListItem, it will be rendered multiple times. Just use one MenuProvider on the top of your applications - see main README:

Wrap your application inside MenuProvider and then simply use Menu component where you need it.

And there are plenty of examples where you can look into, e.g. https://github.com/instea/react-native-popup-menu/blob/master/examples/InFlatListExample.js

Thanks so much! This popup menu is awesome! – Julio Azevedo Jan 27 '19 at 22:28 — Julio Azevedo, Jan 27 '19 at 22:28

How to implement this lib in a Custom Flatlist

1 Answers1