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.
Related
I am trying design like below image with react native.If anyone have worked like this modal design over the toolbar then please help me.
1
You will need a Modal with a embedded TouchableOpacity combined with some styling for positioning.
Please refer this
https://snack.expo.io/SJrDAC8Qr
render() {
return (
<>
<View>
<Appbar.Header>
<Appbar.Content title="Title" subtitle="Subtitle" />
<Appbar.Action icon="search" onPress={() => this.setState({displayModal: true})} />
</Appbar.Header>
<View>
<Text>Main content!</Text>
</View>
</View>
{/*Modal code*/}
<Modal transparent={true} visible={this.state.displayModal}>
{/*Container .. clicking this closes the modal*/}
<TouchableOpacity style={{flex:1}} onPress={() => this.setState({displayModal:false})}>
<View style={{backgroundColor:'blue', position:'absolute', right:0, width:200, height: 200}}>
<Text style={{color:'#ffffff'}}>Hello World!</Text>
</View>
</TouchableOpacity>
</Modal>
</>
);
}
Not very nicely styled but I guess it does what you want
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 have a listView. I want to open a popup menu when user long press on "name". But i am getting error of createContext.
import {
MenuContext,
Menu,
MenuOptions,
MenuOption,
MenuTrigger,
} from 'react-native-popup-menu';
render()
{
...
return(
<View style={{ flex: 1, flexDirection: 'row' }} >
<MenuContext>
<TouchableWithoutFeedback onLongPress = {this.openMenu}>
<Text style={styles.textViewContainer} >{rowData.Ad_name}</Text>
<Menu ref={c => (this.menu = c)}>
<MenuTrigger text = "Select Action.." />
<MenuOptions>
<MenuOption onSelect = {() => this.onEditCampaignAction.bind(this, rowData.campaign_id)}>
{rowData.Status == '0' ?
<TouchableOpacity
style={styles.SubmitButtonStyle}
activeOpacity={.5}
onPress={this.onEditCampaignAction.bind(this, rowData.campaign_id)}>
<FontAwesomeIcon name='pencil' style={styles.icon} />
</TouchableOpacity>
:
<TouchableOpacity
style={styles.SubmitButtonStyle}
activeOpacity={.5}
onPress={this.onViewDetailsAction.bind(this, rowData.campaign_id)}>
<FontAwesomeIcon name='eye' style={styles.icon} />
</TouchableOpacity>
}
</MenuOption>
</MenuOptions>
</Menu>
</TouchableWithoutFeedback>
</MenuContext>
</View>
);
}
Issue has been fixed. react-native-popup-menu requires following versions:
React: 16.3.2
React-Native : 0.55.3
I upgraded versions of both and package installed successfully.
You are using incompatible version of RN. Downgrading to 0.12.x will solve your problem.
See https://github.com/instea/react-native-popup-menu#react-native-compatibility for more details
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>
})
}