According to my project need, i need to click on name or any other field and then menu should popup. So, i called a function from render() to show menu but it is not showing up. Below is my code snippet, please have a look and fix the issue. If there is issue of zIndex then also please help me.
import React, { Component } from 'react';
import { AppRegistry, StyleSheet, TextInput,Keyboard,TouchableWithoutFeedback, ActivityIndicator, Switch, ListView, Text, View,
Alert, Platform, TouchableHighlight, Image, TouchableOpacity, ScrollView } from 'react-native';
import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
import EntypoIcon from 'react-native-vector-icons/Entypo';
import FoundationIcon from 'react-native-vector-icons/Foundation';
import Menu, { MenuItem, MenuDivider } from 'react-native-material-menu';
import { StackNavigator } from 'react-navigation';
class view_camp extends Component {
_menu = null;
static navigationOptions = {
title: 'View Campaigns',
headerLeft : null,
};
constructor(props) {
super(props);
this.state = {
isLoading: true,
text: '',
stat: '',
isPopupMenu : false,
dummy_data : [{"id":'1',"name":"abc","status":'0'},{"id":'2',"name":"xyz","status":'1'}],
}
this.arrayholder = [];
}
_onPressButton = () => {
this.props.navigation.navigate('Third', { ClientId: this.props.navigation.state.params.ClientId });
}
componentDidMount() {
const base64 = require('base-64');
return fetch('http://devapi.nlpcaptcha.in/v1/campaign_ad/loadCampaigns/All', {
method: 'GET',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
"Authorization": "Basic " + base64.encode("C1X_demo:QZMWOLIT]C")
}
}).then((response) => response.json())
.then((responseJson) => {
let ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
this.setState({
isLoading: false,
dataSource: ds.cloneWithRows(this.state.dummy_data),
}, function () {
this.arrayholder = responseJson;
});
})
.catch((error) => {
console.error(error);
});
}
onEditCampaignAction = (campaignID) => {
this.hideMenu();
this.props.navigation.navigate('Fourth', { campaign_id: campaignID, ClientId: this.props.navigation.state.params.ClientId });
}
onViewDetailsAction = (campaignID) => {
this.hideMenu();
this.props.navigation.navigate('Fifth', { campaign_id: campaignID, ClientId: this.props.navigation.state.params.ClientId });
}
onGeoTargetingAction = (campaignID) => {
this.hideMenu();
this.props.navigation.navigate('Sixth', { campaign_id: campaignID, ClientId: this.props.navigation.state.params.ClientId });
}
ListViewItemSeparator = () => {
return (
<View
style={{
height: .5,
width: "100%",
backgroundColor: "#000",
}}
/>
);
}
renderPopupMenuCampName = (camp_id, camp_status) =>
{ console.log("here");
var menuVar =
(
<View style={styles.viewMenuContainer}>
<Menu
style = {styles.menuContainer}
ref={this.setMenuRef}
button={<Text onPress={this.showMenu}></Text>}
>
<View style={styles.menuItemContainer}>
{camp_status == '0' ?
<MenuItem
style={styles.IconOuterSectionStyleMenu}
activeOpacity={.5}
onPress={() => this.onEditCampaignAction.bind(this, camp_id)}>
{<FontAwesomeIcon name='pencil' style={styles.iconMenu}/>}
</MenuItem>
:
<MenuItem
style={styles.IconOuterSectionStyleMenu}
activeOpacity={.5}
onPress={this.onViewDetailsAction.bind(this, camp_id)}>
{ <FontAwesomeIcon name='eye' style={styles.iconMenu} /> }
</MenuItem>
}
<MenuItem
style={styles.IconOuterSectionStyleMenu}
activeOpacity={.5}
onPress={this.onGeoTargetingAction.bind(this, camp_id)}>
{<FontAwesomeIcon name='map-marker' style={styles.iconMenu}/>}
</MenuItem>
</View>
</Menu>
</View>
);
console.log(menuVar);
//this.showMenu();
return menuVar;
}
setMenuRef = ref => {
this._menu = ref;
};
hideMenu = () => {
this._menu.hide();
};
showMenu = () => { console.log("start");
this._menu.show();
console.log("end");
};
render() {
const { navigate } = this.props.navigation;
if (this.state.isLoading) {
return (
<View style={{ flex: 1, paddingTop: 20 }}>
<ActivityIndicator />
</View>
);
}
return (
<ScrollView>
<ListView
enableEmptySections={true}
dataSource={this.state.dataSource}
stickyHeaderIndices={[0]}
renderSeparator={this.ListViewItemSeparator}
renderRow={(rowData) =>
<View style={{ flex: 1, flexDirection: 'row' }} >
<TouchableOpacity
style={styles.showMenuContainer}
activeOpacity={.5}
onPress={this.renderPopupMenuCampName.bind(this, rowData.id,rowData.status)}
>
<Text style={styles.textViewContainer}> {rowData.name} </Text>
</TouchableOpacity>
{rowData.status == '0' ?
<View style={styles.SwitchOuterSectionStyle}>
<Text style={styles.textWithSwitch}>
Inactive </Text>
<Switch
onValueChange={this.onStatusButtonPressed.bind(this, rowData.status, rowData.campaign_id)}
value={false} />
</View>
:
<View style={styles.SwitchOuterSectionStyle}>
<Text style={styles.textWithSwitch}>
Active </Text>
<Switch
onValueChange={this.onStatusButtonPressed.bind(this, rowData.status, rowData.campaign_id)}
value={true} />
</View>}
</View>
}
/>
</ScrollView>
</View>
);
}
}
const styles = StyleSheet.create({
viewMenuContainer :{
width: 150,
zIndex : 999,
},
menuContainer :{
flexWrap: 'wrap',
//width : 550,
//height : 300,
flex: 1,
// left: 20,
top: 400,
marginTop: 100,
flexDirection:"row",
padding: 5,
overflow: 'visible',
position: 'absolute',
alignItems: 'flex-start',
justifyContent: 'center',
borderWidth: 1,
borderColor: '#87ceeb',
},
showMenuContainer:{
width: 150,
//zIndex : 999,
},
textViewContainer: {
textAlignVertical: 'center',
padding: 7,
borderWidth: 1,
borderColor: '#87ceeb',
fontSize: 13,
width: 150,
},
textViewMenuContainer: {
textAlignVertical: 'center',
padding: 7,
borderWidth: 1,
borderColor: '#87ceeb',
fontSize: 13,
width: 90,
},
stickyTextViewContainer: {
textAlignVertical: 'center',
fontSize: 17,
fontWeight: 'bold',
padding: 7,
height: 45,
backgroundColor: '#00BFFF',
borderWidth: 1,
borderColor: '#87ceeb',
fontSize: 13,
width: 150,
},
stickyActionTextViewContainer: {
textAlignVertical: 'center',
textAlign: 'center',
fontSize: 17,
fontWeight: 'bold',
padding: 7,
justifyContent: 'center',
alignItems: 'center',
height: 45,
backgroundColor: '#00BFFF',
borderWidth: 1,
borderColor: '#87ceeb',
fontSize: 13,
width: 550,
},
textWithSwitch: {
fontSize: 13,
},
imageClass: {
height: 40,
width: 40,
marginLeft: 25,
borderRadius: 7,
},
SubmitButtonStyle: {
marginTop: 10,
marginLeft: 10,
marginBottom: 5,
backgroundColor: '#D6EAF8',
borderRadius: 10,
borderWidth: 1,
borderColor: '#fff'
},
TextStyle: {
color: '#fff',
textAlign: 'center',
},
icon: {
fontSize: 30,
padding: 5
},
iconMenu: {
flex : 1,
flexDirection : 'row',
fontSize: 30,
padding: 2
},
menuItemContainer: {
},
SectionStyle: {
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#fff',
borderWidth: .5,
borderColor: '#000',
height: 40,
width: 220,
borderRadius: 5,
margin: 10
},
});
module.exports = view_camp;