I am new to react-native and I am trying to display modal in react-native with following code
<View>
<View onPress={() => {this.toggleModal(true) }} onBackdropPress={ () =>
{this.hideModal(false)}}>
<View>
<OcticonsIcons name='plus' size={19}/>
<Text>QUICK ACTION</Text>
</View>
<View>
<View>
<Image source={require('../images/truck.png')}
/>
<Image source={require('../images/taxi(1).png')}
/>
<Image source={require('../images/tour.png')}
/>
</View>
</View>
</View>
</View>
<Modal visible={this.state.isModalVisible} animationType = "slide" transparent =
{false}>
<View style={{ flex: 1 }}>
<Text style={{ fontWeight:'bold', fontSize: 20, color: '#f79334', marginTop: 15
}} > Services </Text>
</View>
</Modal>
toggleModal(visible){
this.setState({ isModalVisible: visible });
}
hideModal(visible){
this.setState({ isModalVisible: visible })
}
but it's not working, can anyone tell me what wrong with my code, thank you.
The thing is you cant have onPress function on components, its solely for just showing. To use onPress you have to use TouchableOpacity.
Check the code below :
<View>
<TouchableOpacity onPress={() => {this.toggleModal(true) }} onBackdropPress={ () =>
{this.hideModal(false)}}>
<View>
<OcticonsIcons name='plus' size={19}/>
<Text>QUICK ACTION</Text>
</View>
<View>
<View>
<Image source={require('../images/truck.png')}
/>
<Image source={require('../images/taxi(1).png')}
/>
<Image source={require('../images/tour.png')}
/>
</View>
</View>
</TouchableOpacity>
</View>
<Modal visible={this.state.isModalVisible} animationType = "slide" transparent =
{false}>
<View style={{ flex: 1 }}>
<Text style={{ fontWeight:'bold', fontSize: 20, color: '#f79334', marginTop: 15
}} > Services </Text>
</View>
</Modal>
toggleModal = (visible) =>{
this.setState({ isModalVisible: visible });
}
hideModal = (visible) => {
this.setState({ isModalVisible: visible })
}
Hope it helps. feel free for doubts
Related
UserAttemp.js
const setModal = ({ item }) => {
const perc = (item.score * 100) / item.total;
console.log("perc", perc);
if (perc >= 70) {
setImagePath(smile);
} else if (perc >= 40 && perc < 70) {
setImagePath(dis);
} else {
setImagePath(sad);
}
setTotal(item.total);
console.log("item_id",item.attempt_id);
console.log("item_total",item.total)
// setAttemp(item.attempted_question);
setScore(item.score);
setWrong(item.wrong);
setSkip(item.skip);
setModalVisible(true);
// setboolThree(false);
// setboolTwo(true);
};
const renderItem = ({ item }) => {
return (
<TouchableOpacity
style={styles.userAttemptItemContainer}
onPress={() => setModal({ item })}
>
<View>
<Text style={{alignSelf:'center',color:'black',textTransform:'uppercase'}}>{item.attempt_id}</Text>
<View
style={{ flexDirection: "row", justifyContent: "space-around" }}
>
<Text style={styles.userAttempRenderText}>Score</Text>
<Text style={styles.userAttempRenderText}>{item.score}</Text>
</View>
<Date_time
item={item}/>
</View>
</TouchableOpacity>
);
};
return (
<View>
<Loader bool={bool} />
{!bool && (
<View>
<View style={{ alignSelf: "center" }}>
<Text style={{ color: "black", fontSize: 20 }}>{title}</Text>
</View>
<FlatList
data={attempt}
renderItem={renderItem}
ListFooterComponent={<View style={{ height: 0, marginBottom: 90 }}></View>}
ListEmptyComponent={() => <EmptyListMessage />}
></FlatList>
</View>
)}
<Modal
animationType="slide"
transparent={true}
visible={modalVisible}
onRequestClose={() => {
setModalVisible(!modalVisible);
}}
>
<View style={styles.ResultModalCenterView}>
<View style={styles.ResultModalView}>
<View style={styles.ResultModalClosebuttonCon}>
<Pressable
style={[styles.ResultModalButton, styles.ResultButtonClose]}
onPress={() => setModalVisible(!modalVisible)}
>
<Icon name="close" size={20} color="black" />
</Pressable>
</View>
<ModalView
score={score}
total={total}
wrong={wrong}
title={title}
skip={skipp}
attempted={attempted}
imagePath={imagePath}
/>
</View>
</View>
</Modal>
</View>
);
};
export default UserAttemps;
Date_time.js
import React, { useState } from 'react'
import { View,Text } from 'react-native';
const Date_time=(props)=> {
const [dateBool,setDateBool]=useState(props.item?false:true);
const [timeBool,setTimeBool]=useState(props.item?false:true);
if(props.item.start_date==props.item.end_date){
setDateBool(true);
}
if(props.item.start_time==props.item.end_time){
setTimeBool(true);
}
return (
<View>
{dateBool&&<View style={{flexDirection:'row',justifyContent:'center',}}>
<Text style={{color:'black',}}>Date:</Text>
<Text style={{color:'black',marginLeft:5}}>{props.item.start_date}</Text>
</View>}
{!dateBool&&<View style={{flexDirection:'row',justifyContent:'center',}}>
<Text style={{color:'black',}}>Date:</Text>
<Text style={{color:'black',marginLeft:5}}>{props.item.start_date}</Text>
<Text style={{color:'black',marginLeft:5}}>{props.item.end_date}</Text>
</View>}
{/* <View style={{flexDirection:'row',justifyContent:'center'}}>
<Text style={{color:'black'}}>Date</Text>
<Text style={{color:'black'}}>{Date}</Text>
</View> */}
{ timeBool&& <View style={{flexDirection:'row',justifyContent:'center',}}>
<Text style={{color:'black',}}>Time:</Text>
<Text style={{color:'black',marginLeft:5}}>{props.item.start_time}</Text>
</View>}
{timeBool&&<View style={{flexDirection:'row',justifyContent:'center',}}>
<Text style={{color:'black',}}>Time:</Text>
<Text style={{color:'black',marginLeft:5}}>{props.item.start_time}</Text>
<Text style={{color:'black',marginLeft:5}}>{props.item.end_time}</Text>
</View>}
</View>
)
}
export default Date_time;
I am calling component in UserAttemp.js
I have made a component of Date_time in that I am trying to set state in the body of function component but i am getting too manay render error due to the useState hook
I want to set State in the body of function Date_time.jjs component how to set?
Updating state outside the return function, makes it go in infinite loop. It will check the condition and update the state which will cause re-render then if will again check the condition and so on... it keeps re-rendering.
Remove the if statements and handle them in initial value of useState hook. Like-
const [dateBool,setDateBool]=useState(props.item?.start_date==props.item?.end_date ? true : props.item? false :true);
const [timeBool,setTimeBool]=useState(props.item?.start_time==props.item?.end_time ? true : props.item ? false:true);
How to set selected value from modal on text component in react-native.
I am using modal component from 'react-native'.
import { StyleSheet, View, Text, TouchableOpacity, Image,Modal,} from 'react-native'
<View style={styles.vwstyle}>
<Text style={styles.texthead}>You are Interested in</Text>
<View style={styles.vwside}>
<Modal
animationType="fade"
transparent={false}
visible={this.state.modalVisible}
onRequestClose={() => {
}}>
<View style={styles.vwmodal}>
<TouchableOpacity style={styles.touchmodal}
onPress={() => {
this.setModalVisible(!this.state.modalVisible);
}}>
<Text style={styles.txtmodal}>Man</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.touchmodal}
onPress={() => {
this.setModalVisible(!this.state.modalVisible);
}}>
<Text style={styles.txtmodal}>Woman</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.touchmodal}
onPress={() => {
this.setModalVisible(!this.state.modalVisible);
}}>
<Text style={styles.txtmodal}>Everyone</Text>
</TouchableOpacity>
</View>
</Modal>
<TouchableOpacity
style={{flexDirection:'row'}}
onPress={() => {this.setModalVisible(true);}}>
<Text style={styles.txtselected}>Woman</Text>
<Image
source={require('../Images/rightarrow.png')} style={{ height: 20, width: 20, marginTop: 8, marginRight: 5 }} />
</TouchableOpacity>
</View>
</View>
You can use state to hold the values being pressed. I am including a code snippet here for your reference.
constructor(props) {
super(props);
this.state = {
otherStateVariables..... ,
pressedOption: ""
}
}
render() {
<View style={styles.vwstyle}>
<Text style={styles.texthead}>You are Interested in</Text>
<View style={styles.vwside}>
<Modal
animationType="fade"
transparent={false}
visible={this.state.modalVisible}
onRequestClose={() => {
}}>
<View style={styles.vwmodal}>
<TouchableOpacity style={styles.touchmodal}
onPress={() => {
this.setModalVisible(!this.state.modalVisible);
/* Add this line to set your state on onPress handler*/
this.setState({pressedOption:"Man"})
}}>
<Text style={styles.txtmodal}>Man</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.touchmodal}
onPress={() => {
this.setModalVisible(!this.state.modalVisible);
/* Add this line to set your state on onPress handler*/
this.setState({pressedOption:"Woman"})
}}>
<Text style={styles.txtmodal}>Woman</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.touchmodal}
onPress={() => {
this.setModalVisible(!this.state.modalVisible);
/* Add this line to set your state on onPress handler*/
this.setState({pressedOption:"Everyone"})
}}>
<Text style={styles.txtmodal}>Everyone</Text>
</TouchableOpacity>
</View>
</Modal>
<TouchableOpacity
style={{flexDirection:'row'}}
onPress={() => {this.setModalVisible(true);}}>
<Text style={styles.txtselected}>Woman</Text>
<Image
source={require('../Images/rightarrow.png')} style={{ height: 20, width: 20, marginTop: 8, marginRight: 5 }} />
</TouchableOpacity>
</View>
</View>
}
After setting the state, you can use that state variable anywhere in your code by using
this.state.pressedOption
I am new in react native and I need to show and hide for text input on each comment reply option.How to unique each and every section so I can hide and show text input for each button click.
Here is my flat list:
<FlatList
data={item.comments}
keyExtractor={this._keyExtractor}
renderItem={this.renderRowItem}
extraData={this.state}
/>
Here is render row item:
renderRowItem = (itemData) => {
Moment.locale('en');
return (
<View style={styles.commentSection}>
<View style={{flexDirection:'row'}}>
<View style={{flex:1,flexDirection:'row'}}>
<Image style={{ height: 30,width: 30,borderRadius: 15, marginTop:8}}
source={{ uri: this.state.profile_image }} resizeMode='cover' />
<View style={{width:width,paddingHorizontal:10,paddingRight:10,borderBottomColor:'#D2D0D1',borderBottomWidth:1,paddingBottom:10}}>
<View style={{flexDirection:'row',paddingTop:5}}>
<Text style={{fontWeight:'600',fontSize:14}}>
{itemData.item.firstName} {itemData.item.surname}</Text>
<Text style={{color:'grey',fontWeight:'500',fontSize:12,paddingHorizontal:20}}>
{Moment(itemData.item.dateCreated).format('d MMM YYYY')}</Text>
</View>
<Text style={{fontWeight:'500',color:'grey',marginTop:5}}>
{itemData.item.comment}</Text>
<Text onPress={this.ShowHideTextComponentView} style={{width:width*0.8,color:"#F766FF",textAlign:'right',alignSelf:'stretch',fontSize:12,fontWeight:'600'}}>
Reply</Text>
<View>
<FlatList
data={itemData.item.replies}
keyExtractor={this._keyExtractor}
renderItem={this.renderRowReply}
/>
</View>
<View>
{
this.state.replyboxShow ?
<View style={{flex:1,flexDirection:'row',width:width*0.6,marginLeft:10}}>
<TextInput
style = {[styles.inputReplyBox,
!this.state.postValidate ? styles.error : null]}
placeholder="Enter message here"
placeholderTextColor="grey"
onChangeText = {reply => this.setState({reply})}
/>
<TouchableOpacity style={{position: 'absolute',right:6,top:5,alignSelf:'stretch'}}
onPress={() => this.replyCom(itemData.item._id)}>
<Icon name="paper-plane-o" size={20} color="#F766FF" />
</TouchableOpacity>
</View>
: null
}
</View>
</View>
</View>
</View>
</View>
)
}
In the end of render item I am using reply button and on click I want to show and hide each text input fields:
This is design I need to implement.
My ShowHideTextComponentView function:
ShowHideTextComponentView = () =>{
if(this.state.replyboxShow == true){
this.setState({replyboxShow: false})
}else{
this.setState({replyboxShow: true})
}
}
With your replyboxShow state, all the item will be showing or hiding,
i create a replyboxShowId state to save the item_id of the element
you want to show.
renderRowItem = (itemData) => {
Moment.locale('en');
return (
<View style={styles.commentSection}>
<View style={{flexDirection:'row'}}>
<View style={{flex:1,flexDirection:'row'}}>
<Image style={{ height: 30,width: 30,borderRadius: 15, marginTop:8}}
source={{ uri: this.state.profile_image }} resizeMode='cover' />
<View style={{width:width,paddingHorizontal:10,paddingRight:10,borderBottomColor:'#D2D0D1',borderBottomWidth:1,paddingBottom:10}}>
<View style={{flexDirection:'row',paddingTop:5}}>
<Text style={{fontWeight:'600',fontSize:14}}>
{itemData.item.firstName} {itemData.item.surname}</Text>
<Text style={{color:'grey',fontWeight:'500',fontSize:12,paddingHorizontal:20}}>
{Moment(itemData.item.dateCreated).format('d MMM YYYY')}</Text>
</View>
<Text style={{fontWeight:'500',color:'grey',marginTop:5}}>
{itemData.item.comment}</Text>
<Text onPress={this.ShowHideTextComponentView.bind(this,itemData.item._id)} style={{width:width*0.8,color:"#F766FF",textAlign:'right',alignSelf:'stretch',fontSize:12,fontWeight:'600'}}>
Reply</Text>
<View>
<FlatList
data={itemData.item.replies}
keyExtractor={this._keyExtractor}
renderItem={this.renderRowReply}
/>
</View>
<View>
{
this.state.replyBoxShowId === itemData.item._id ?
<View style={{flex:1,flexDirection:'row',width:width*0.6,marginLeft:10}}>
<TextInput
style = {[styles.inputReplyBox,
!this.state.postValidate ? styles.error : null]}
placeholder="Enter message here"
placeholderTextColor="grey"
onChangeText = {reply => this.setState({reply})}
/>
<TouchableOpacity style={{position: 'absolute',right:6,top:5,alignSelf:'stretch'}}
onPress={() => this.replyCom(itemData.item._id)}>
<Icon name="paper-plane-o" size={20} color="#F766FF" />
</TouchableOpacity>
</View>
: null
}
</View>
</View>
</View>
</View>
</View>
)
}
ShowHideTextComponentView:
ShowHideTextComponentView = (id) =>{
this.setState({
replyBoxShowId : id
})
}
I am trying to open the modal through a TouchableOpacity (the second line). I got it to work on a clean application, but when I basically copy and paste to a my current application it does not open at all... Another important point is that this is a card component that is within react-native-deck-swiper. That is my guess for why is won't work.
Top part of my code:
constructor() {
super();
this.state = {
modalVisible: false
}
}
setModalVisible = (visible) => {
this.setState({modalVisible: visible})
}
Bottom Part of my code with the modal
<View style={{flex: 1, justifyContent: 'flex-end', paddingLeft: 5, paddingTop: 10}}>
<TouchableOpacity onPress={() => { this.setModalVisible(true)}}>
<Icon name="more" style={{fontSize: 40}} />
</TouchableOpacity>
</View>
</View>
</View>
</View>
<View style={{padding: 5}}>
<Text style={{fontSize: 20}}>10 miles away</Text>
</View>
<View style={{marginTop: 22, flex:1}}>
<Modal
animationType="slide"
transparent={true}
visible={this.state.modalVisible}
onRequestClose={() => {
alert('Modal has been closed.');
}}>
<View style={{marginTop: 22}}>
<View>
<Text>Hello World!</Text>
<TouchableHighlight
onPress={() => {
this.setModalVisible(!this.state.modalVisible);
}}>
<Text>Hide Modal</Text>
</TouchableHighlight>
</View>
</View>
</Modal>
</View>
You need to bind you function in the constructor or use arrow functions or else this wont be pointing to your component:
setModalVisible = (visible) => {
this.setState({modalVisible: visible})
}
According to your code, don't use the Arrow function. if you want arrow function then bind it, otherwise use below function.
setModalVisible(visible) {
this.setState({modalVisible: visible});
}
This question already has answers here:
Close react native modal by clicking on overlay?
(24 answers)
Closed last month.
I have written a code to hide modal whenever user click to the 'hide me' text which is in the modal but I also want modal to hide when we click outside the modal. I can use 'TouchableWithoutFeedback' but it doesn't work for me. How can I use 'TouchableWithoutFeedback' or any other solution for this?
this.state = {
showPopupModal: false
}
hideModal(){
this.setState({showPopupModal: false});
}
showModal(){
this.setState({showPopupModal: true});
}
return(
<Conatiner>
<View>
<TouchableOpacity onPress={() => { showModal(); }}>
<Text> open modal <Text>
</TouchableOpacity>
</View>
<Modal visible={this.state.showPopupModal}>
<View>
<TouchableOpacity onPress={() => { hideModal(); }}>
<Text> hide me </Text>
</TouchableOpacity>
</View>
</Modal>
</Container>
);
You have to set isVisible and onBackdropPress attributes of Modal,eg:
<Modal isVisible={this.state.showPopupModal} onBackdropPress={() => this.hideModal()} >
..
</Modal>
You have not assigned props to the Modal, doing
<Modal visible={this.state.showPopupModal}>
<View>
<TouchableOpacity onPress={() => { hideModal(); }}>
<Text> hide me </Text>
</TouchableOpacity>
</View>
</Modal>
Should solve this.
This is the only way I could do this without installing any additional libraries!
<Modal
visible={this.state.modal}
animationType="fade"
transparent={true}
onRequestClose={this.handleClose}>
<Pressable
onPress={() => {
this.handleClose();
}}
style={[
Platform.OS === 'ios' ? styles.iOSBackdrop : styles.androidBackdrop,
styles.backdrop,
]}
/>
...
</Modal>;
Add this below styles in to your styles.
const styles = StyleSheet.create({
iOSBackdrop: {
backgroundColor: '#000000',
opacity: 0.3,
},
androidBackdrop: {
backgroundColor: '#232f34',
opacity: 0.32,
},
backdrop: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
},
});
this.state = {
showPopupModal: false
}
hideModal(){
this.setState({showPopupModal: false});
}
showModal(){
this.setState({showPopupModal: true});
}
return(
<Conatiner>
<View>
<TouchableOpacity onPress={() => { showModal(); }}>
<Text> open modal <Text>
</TouchableOpacity>
</View>
<TouchableWithoutFeedback onPress={() => { hideModal(); }}>
<Modal visible={this.state.showPopupModal}>
<TouchableWithoutFeedback onPress={() => { hideModal(); }}>
<View>
<TouchableOpacity onPress={() => { hideModal(); }}>
<Text> hide me </Text>
</TouchableOpacity>
</View>
</TouchableWithoutFeedback>
</Modal>
</TouchableWithoutFeedback>
</Container>
);
this solution is working for me.