Comments (12)
HI @mxck
I found a solution to handle this problem. This could help others.
here is my code
//===================For dropdown menu=============================//
_menu = [ ];
hideMenu = (item) => {
this._menu[item].hide();
};
showMenu = (item) => {
this._menu[item].show();
};
displayDropdown = (item) => {
return (
<Menu
// ref={this.setMenuRef}
ref={(menu) => { this._menu[item] = menu }}
button={<Icon2 name="dots-three-vertical"
size={25}
color="#572E82"
onPress={() => this.showMenu(item)}
/>}
>
<MenuItem onPress={() => this.hideMenu(item)}>{item}</MenuItem>
</Menu>
)
}
//===================End dropdown menu=============================//
Inside render method
render() {
let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13];
return (
<ScrollView style={styles.listModuleContainer}>
{
array.map(
item =>
<View key={item} style={styles.moduleContainer} >
<View style={styles.infosModule}>
<Text style={[styles.infos, styles.infosSerial]}>CE4WRTRYTY - {item} </Text>
<Text style={styles.infos}>695203140</Text>
<Text style={styles.infos}>31-07-2017</Text>
</View>
<View style={styles.triggerDropdown}>
{this.displayDropdown(item)} //display dropdown
</View>
</View>
)
}
</ScrollView>
)
}
from react-native-material-menu.
I am having a problem implementing this ref with useRef
. Can anyone guide me? @kabitacode ?
from react-native-material-menu.
@wilfriednhw hello! Right now you can create menus for each item, but this is not optimized. In the future, I will rework this library by using react context.
from react-native-material-menu.
Thank you for your answer, I have another problem.
for example, I have 6 elements, when I click on the first element, the menu is triggered on the sixth element.
What to do please
from react-native-material-menu.
HI @mxck
I found a solution to handle this problem. This could help others.
here is my code
//===================For dropdown menu=============================// _menu = [ ]; hideMenu = (item) => { this._menu[item].hide(); }; showMenu = (item) => { this._menu[item].show(); }; displayDropdown = (item) => { return ( <Menu // ref={this.setMenuRef} ref={(menu) => { this._menu[item] = menu }} button={<Icon2 name="dots-three-vertical" size={25} color="#572E82" onPress={() => this.showMenu(item)} />} > <MenuItem onPress={() => this.hideMenu(item)}>{item}</MenuItem> </Menu> ) } //===================End dropdown menu=============================//
Inside render method
render() { let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13]; return ( <ScrollView style={styles.listModuleContainer}> { array.map( item => <View key={item} style={styles.moduleContainer} > <View style={styles.infosModule}> <Text style={[styles.infos, styles.infosSerial]}>CE4WRTRYTY - {item} </Text> <Text style={styles.infos}>695203140</Text> <Text style={styles.infos}>31-07-2017</Text> </View> <View style={styles.triggerDropdown}> {this.displayDropdown(item)} //display dropdown </View> </View> ) } </ScrollView> ) }
you saved my day ! thanks!
from react-native-material-menu.
HI @mxck
I found a solution to handle this problem. This could help others.
here is my code
//===================For dropdown menu=============================// _menu = [ ]; hideMenu = (item) => { this._menu[item].hide(); }; showMenu = (item) => { this._menu[item].show(); }; displayDropdown = (item) => { return ( <Menu // ref={this.setMenuRef} ref={(menu) => { this._menu[item] = menu }} button={<Icon2 name="dots-three-vertical" size={25} color="#572E82" onPress={() => this.showMenu(item)} />} > <MenuItem onPress={() => this.hideMenu(item)}>{item}</MenuItem> </Menu> ) } //===================End dropdown menu=============================//
Inside render method
render() { let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13]; return ( <ScrollView style={styles.listModuleContainer}> { array.map( item => <View key={item} style={styles.moduleContainer} > <View style={styles.infosModule}> <Text style={[styles.infos, styles.infosSerial]}>CE4WRTRYTY - {item} </Text> <Text style={styles.infos}>695203140</Text> <Text style={styles.infos}>31-07-2017</Text> </View> <View style={styles.triggerDropdown}> {this.displayDropdown(item)} //display dropdown </View> </View> ) } </ScrollView> ) }
Does not work for me :(
from react-native-material-menu.
@wilfriednhw i tried using ur solution but the problem of menu being displayed on the last item of flatlist is still there
from react-native-material-menu.
Same issue persisting for me . Did anyone found a solution for this ?
from react-native-material-menu.
in flatlist ( renderItem I added items and index)
showMenu = (item, index) => {
this._menu[index].show()
};
<Menu
ref={(menu) => {this._menu[index] = menu}}
button={<Text onPress={()=>this.showMenu(item, index)}>Show menu</Text>}>
<MenuItem onPress={this.hideMenu}>Menu item 1</MenuItem>
</Menu>
Solved for me :) thank's @jeffelector
from react-native-material-menu.
@Saad-Bashar same here
from react-native-material-menu.
showMenu = (item, index) => {
this._menu[index].show()
};
Solution worked for me:) thanks alots.
from react-native-material-menu.
@Saad-Bashar same here
- Create a variable inside your component let _menu : any = []
- Inside your renderItem method and in Menu component pass this ref={(ref)=> _menu[index] = ref }
- Open your Menu by calling _menu[index]?.show();
from react-native-material-menu.
Related Issues (20)
- onHidden is not working on iOS HOT 2
- Menu Postion HOT 1
- On FlatList does not appears on exact point HOT 5
- Warning: Encountered two children with the same key, `5`
- it's not working according to index. HOT 4
- How to work with hook HOT 1
- MenuItem onPress not working HOT 2
- Please add modalBackgroundColor prop HOT 1
- Unable to start Expo SDK42 app with version 2.0.0.0 of react-native-material-menu HOT 2
- Can't open a modal right after closing the menu HOT 3
- unable to create multiple menu
- Is it possible to hide the menu when clicking away? HOT 1
- color attribute of textStyle takes precedence over disabledTextColor
- .
- iOS terminating due to uncaught exception of type NSException HOT 5
- Bug located to use react-native-material-menu?!
- Reopening menu after setting state to false on ios HOT 2
- TypeError: undefined is not an object (evaluating '_reactNative.TouchableHighlight.propTypes.style' HOT 4
- Proposal: Use react-native-reanimated for 60FPS animations. HOT 2
- How to wrap text inside MenuItem? HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 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.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
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.
from react-native-material-menu.