Actually I developing Sample appilication,I want to displayed list of names using map function in react native menu option:
first i was declare one array:
after next i wrote map function in render() and that component used in return() at menu context Component.
var ListNames = [{"pname":"Smith"},{"pname":"Jhon"},{"pname":"Steve"},{"pname":"Ferr"},{"pname":"Kevin"}];
render(){
ListNames.map((ele, i)=>{
<Text>{ele.pname}</Text>
})
return(
<MenuContext style={{height:50,marginTop:20}} ref="MenuContext">
<Menu style={styles.dropdown} onSelect={(value) => this.setState({ dropdownSelection: value })}>
<MenuTrigger style={{flex:1,flexDirection:'row'}}>
<View style={{flex:.7}}>
<Text style={{color:'black',fontSize:15}}>{this.state.dropdownSelection}</Text>
</View>
<View style={{flex:.3,alignItems:'flex-end'}}>
<Image source = {require('./../images/dropdown.png')} style={{height:15,width:20,marginTop:3}}/>
</View>
</MenuTrigger>
<MenuOptions optionsContainerStyle={styles.dropdownOptions1}
renderOptionsContainer={(options) => <ScrollView><Text>SELECT....</Text>{options}</ScrollView>}>
<MenuOption value={ListNames}>
**{ListNames}**
</MenuOption>
{/* <MenuOption value="Kevin">
<Text>Kevin</Text>
</MenuOption>
<MenuOption value="Pieterson">
<Text>Pieterson</Text>
</MenuOption>
<MenuOption value="David">
<Text>David</Text>
</MenuOption>
<MenuOption value="Meissi">
<Text>Meissi</Text>
</MenuOption> */}
</MenuOptions>
</Menu>
</MenuContext>)
}
So I want using Mapping Function in react native menu option module is it Displaying are names using map function
any one please suggest this
Finally I Solved this , i am Very Foolish thinking, just in retturn methode
<MenuOption value={ListNames>
{ListNames}
</MenuOption>
replaced to given below
{
this.state.ListNames.map((ele, i)=>{
return <MenuOption value={ele.playerName}>
<Text>{ele.playerName}</Text>
</MenuOption>
})
}
Related
Below in a code I have describe the question as comment
//This is MessagesScreen.js
<FlatList
data={messages}
keyExtractor={messages => messages.id.toString()}
renderItem={({ item }) =>
<ListItem style={styles.listItem}
title={item.title}
subTitle={item.description}
image={item.image}
DeleteIconView={ListItemDeleteAction} /*Here ListItemDeleteAction.js
is component want to pass it to
the ListItem.js. Note: I have
imported all the nessory
labries*/
onPress={() => handleDelete(item)}
//renderRightActions={ListItemDeleteAction}
/>
}
ItemSeparatorComponent={ListItemSeparator}
refreshing={refreshing}
onRefresh={() => {
setMessages([
{
id: 2,
title: 'Komail',
description: 'React-Native Developer',
image: require("../asserts/komail.jpg"),
}
])
}}
/>
This is ListItemDeleteAction.js, which I want to render in ItemList.js
//This is ListItemDeleteAction.js
function ListItemDeleteAction(props) {
return (
<View style={styles.container}>
<MaterialCommunityIcons name="trash-can" size={30} color={Colors.danger} />
</View>
);
}
Now, in ListItem.js I want to render the ListItemDeleteAction.js as I have passed as a argument. Below in code I have described as comment.
Note: I am strict to this method, render the ListItemDeleteAction as it passed as argument, which is "DeleteIconView" as parameter in ListItem.js
function ListItem({ image, title, subTitle, ImageComponent, style, onPress, DeleteIconView}) {
return (
<TouchableHighlight
//onPress={onPress}
underlayColor={Colors.light}
>
<View style={[styles.container, style]}>
{ImageComponent}
{image && <Image style={styles.image} source={image} />}
<View style={styles.parentDeatailContainer}>
<View style={styles.detailContainer}>
<Text style={{ fontWeight: "bold" }}>{title}</Text>
{subTitle && <Text>{subTitle}</Text>}
</View>
<TouchableOpacity style={styles.deleteIconContainer} onPress={onPress}>
{DeleteIconView} /* This is the place where I want to render the
ListItemDeleteAction components as I passed as argument but How? */
</TouchableOpacity>
</View>
</View>
</TouchableHighlight>
);
}
You are passing the prop wrong. When you write DeleteIconView={ListItemDeleteAction}, you aren't actually creating a JSX component. This can be solved by writing the following.
renderItem={({ item }) =>
<ListItem style={styles.listItem}
title={item.title}
subTitle={item.description}
image={item.image}
DeleteIconView={<ListItemDeleteAction />}
onPress={() => handleDelete(item)}
/>
}
Now, the prop DeleteIconView is an actual JSX component which can be rendered as usual.
I am not able to identify how to display Menu items when clicked on Icon in React Native
Expo Link
Code
_onPressItem = () => {
this.setState({ opened: true });
};
render() {
return (
<View style={styles.container}>
<ListItem
title={
<View>
<Text style={{ fontWeight: "bold" }}>Mason Laon Roah</Text>
<Text>9886012345</Text>
</View>
}
subtitle={
<View>
<Text>445 Mount Eden Road, Mount Eden, Auckland. </Text>
<Text>Contact No: 134695584</Text>
</View>
}
leftAvatar={{ title: 'MD' }}
rightContentContainerStyle={{ alignSelf: 'flex-start'}}
rightTitle={<Icon type="material" color="red" name="more-vert" />}
/>
</View>
);
}
getMenuView() {
const { opened } = this.state;
return (
<MenuProvider style={{flexDirection: 'column', padding: 30}}>
<Menu
opened={opened}
onBackdropPress={() => this.onBackdropPress()}
onSelect={value => this.onOptionSelect(value)}>
<MenuTrigger onPress={() => this._onPressItem()} text="Menu Icon Here" />
<MenuOptions>
<MenuOption value={1} text='One' />
<MenuOption value={2}>
<Text style={{color: 'red'}}>Two</Text>
</MenuOption>
<MenuOption value={3} disabled={true} text='Three' />
</MenuOptions>
</Menu>
</MenuProvider>
);
}
Please let me know how to integrate Menu with Icon..
Basically all the items are displayed in FlatList where each item have its own Menu Item
Just Update Code below:
instead of:
rightTitle={<Icon type="material" color="red" name="more-vert" />}
update to:
rightTitle={this.getMenuView()}
Because this Method returns view not Menu popup.
and instead of:
<MenuTrigger onPress={() => this._onPressItem()} text="Menu Icon Here" />
update to:
<MenuTrigger onPress={() => this._onPressItem()}>
<Icon type="material" color="red" name="more-vert" />
</MenuTrigger>
so that instead of printing text, it shows icon.
I tried this code on your given link, it works..
I am using 'react-native-popup-menu'
<MenuOptions customStyles={{ optionText: styles.text }}>
<MenuOption value="History" text='History'
onPress={()=>{this.props.navigation.navigate('History')}} />
<MenuOption value="Logout" text='Logout' onPress={()=>{this.props.navigation.navigate('Login')}}/>
</MenuOptions>
I want to navigate when I click on any of the menu options to another screen,
how can I achieve it?
Looking at the docs from the Library, MenuOption takes an onSelect prop rather than onPress
From their example:
<MenuOptions>
<MenuOption **onSelect**={() => alert(`Save`)} text='Save' />
<MenuOption **onSelect**={() => alert(`Delete`)} >
<Text style={{color: 'red'}}>Delete</Text>
</MenuOption>
<MenuOption onSelect={() => alert(`Not called`)} disabled={true} text='Disabled' />
</MenuOptions>
Changing your onPress to onSelect should start working as per your requirements.
I tried everything I can think of and I can't seem to have it working
I want to add multiple options from an array like this
<Menu renderer={renderers.SlideInMenu} ref={(ref) => statusRef = ref}>
<MenuTrigger/>
<TouchableWithoutFeedback onPress={this.onQuestionStatusButtonPressed}>
<View style={styles.view_header_submit_icon}>
<Icon style={styles.icon_header_submit} name={"dots-vertical"} />
</View>
</TouchableWithoutFeedback>
<MenuOptions>
{this.state.subjects.forEach((value) => {
<MenuOption >
<View style={styles.view_option}>
<Text style={styles.text_option}>value.name</Text>
</View>
</MenuOption>
)}
</MenuOption>
</MenuOptions>
</Menu>
This doesn't work for me
Am I doing something wrong? and the array has items in it because I debugged it with the console and it runs 2 times but never renders
Your code does not seem to be syntactically correct (e.g. extra </MenuOption>) and you have empty trigger but outside extra touchable..
Secondly - forEach won't work as it has no return value - use map instead.
I made simple working demo https://snack.expo.io/SJBJkr7yQ and it works without any problems
<Menu>
<MenuTrigger text="Select action" />
<MenuOptions>
<MenuOption onSelect={() => alert(`Save`)} text="Save" />
{this.state.subjects.map(s => <MenuOption key={s} text={s}/>)}
</MenuOptions>
</Menu>
Pro-tip: start with the simplest working example (eg. from official documentation) and add step-by-step things always checking that everything works.
I am using react-native-popup-menu#0.10.0. It works fine on IOS but cannot overlay on another component on android. It is invisible on android. Please provide any solution .
renderHeader() {<Header><MenuContext style={styles.container}>
<View>
<Menu>
<MenuTrigger customStyles={triggerStyles} onPress={() => this.setState({ opened: true })}>
<FaIcon name='ellipsis-h' size={21} color='#b1b9bc'/>
</MenuTrigger>
<MenuOptions>
<MenuOption onSelect={() => this.edit()} disabled={this.state.disabled}>
<Text style={this.state.disabled ? {color: 'lightgrey'} : {color: 'black'}}>Edit</Text>
</MenuOption>
<MenuOption onSelect={() => this.delete()} disabled={this.state.disabled}>
<Text style={this.state.disabled ? {color: 'lightgrey'} : {color: 'red'}}>Delete</Text>
</MenuOption>
</MenuOptions>
</Menu>
</View>
</MenuContext></Header>}
This happened to me when the MenuContext wasn't high enough in the tree.
Eventually I moved it to the very first component's render function as the wrapper for everything, and that works great.