How to add React native Popup Menu in Dynamic FlatList

Question

I will try to add react native popup menu in flatlist. but the problem is menu has been displayed only two flatlist ite

<MenuContext>
                                            <Menu
                                              style={{ height: 200,width:54, alignItems: 'center', marginLeft:'85%' }}
                                              onSelect={(value) => this.OptionMenu(value,item.id)}>
                                              <MenuTrigger triggerTouchable={{activeOpacity: 1,}}>
                                                <Icon name="ellipsis-v" size={25} style={{color:'#FFF',paddingHorizontal:20, paddingVertical:20 }} />
                                              </MenuTrigger>
                                              <MenuOptions optionsContainerStyle={{width: 100}}>
                                                  <MenuOption value={1}>
                                                    <Text>Update </Text>
                                                  </MenuOption>
                                                  <MenuOption value={2}>
                                                    <Text>Delete</Text>
                                                  </MenuOption>
                                                  <MenuOption value={3}>
                                                    <Text>Share</Text>
                                                  </MenuOption>
                                            
                                              </MenuOptions>
                                            </Menu>
                                        </MenuContext>

m.

Answer 1

You can use popup menu as any other component in FlatList.

    <FlatList
      data={data}
      renderItem={({ item }) => (
        <Menu onSelect={value => Alert.alert(value)}>
          <MenuTrigger text={'Select option ' + item.value} />
          <MenuOptions>
            <MenuOption value="A" text="A" />
            <MenuOption value="B" text="B" />
            <MenuOption value="C" text="C" />
        </MenuOptions>
      </Menu>
      )}
      style={{ height: 200 }}
    />

Full example can be found here https://github.com/instea/react-native-popup-menu/blob/master/examples/InFlatListExample.js