I'm trying to make a popup screen for the value I have selected. Which is in the localstorage.
I am trying to pass the value firstname, lastname, phone to Popup.
Like this
I want the value "h" to show up next to 'Call' and 'Text'.
{
favContact.map((obj,i)=>{
return (
<View style={[HomePageStyles.ContactList, {width:95}]}>
{/* CONTACT CALL/MESSAGE POPUP */}
<ContactPopup Popup={Popup} setPopup={setPopup} />
{/* CONTACT */}
<TouchableOpacity onPress={() => {setPopup(true)}
}>
{/* CONTACT ICON */}
{ showIcon }
{/* CONTACT NAME */}
<Text numberOfLines={1} style={[Fonts.ContactNameFonts, {textAlign:'center', fontSize:11, paddingHorizontal:15}]}>{obj.firstname}</Text>
</TouchableOpacity>
{/* END OF CONTACT */}
</View>
)
})
}
This is my Favorite Contact Page.
<Modal isVisible={props.Popup} hideModalContentWhileAnimating={true}
backdropTransitionOutTiming={0}
onBackdropPress={() => props.setPopup(false)}
onSwipeComplete={() => props.setPopup(false)}
swipeDirection="down"
animationInTiming={550} animationOutTiming={850}>
<View style={AddPopupStyles.Container}>
<View style={AddPopupStyles.ImgCont}>
<Image style={AddPopupStyles.Img}source={require('../assets/icons/swipe.png')}/>
</View>
<Text style={AddPopupStyles.Heading}>{firstname}{lastname}</Text>
<TouchableOpacity style={AddPopupStyles.TextCont}
onPress = {() => Communications.phonecall( phone , true)}
>
<Text style={AddPopupStyles.Text}>Call {firstname}{lastname}</Text>
</TouchableOpacity>
<TouchableOpacity style={AddPopupStyles.TextCont}
onPress={() => Communications.text(phone, 'Hey ' + firstname + ', im in need of a Ryde. Are you able to pick me up? This is my current location: ' )}
>
<Text style={AddPopupStyles.Text}>Text</Text>
</TouchableOpacity>
<TouchableOpacity style={AddPopupStyles.TextCont}
onPress={() => {props.setPopup(false)}}
>
<Text style={[AddPopupStyles.Text, AddPopupStyles.CancelText]}>
Cancel
</Text>
</TouchableOpacity>
</View>
</Modal>
This is my pop up page.
Please help me masters.
{
favContact.map((obj,i)=>{
return (
<View style={[HomePageStyles.ContactList, {width:95}]}>
{/* CONTACT CALL/MESSAGE POPUP */}
<ContactPopup Popup={Popup} setPopup={setPopup} details = {this.state.popupDetails} />
{/* CONTACT */}
<TouchableOpacity onPress={() => {this.onPressContact(obj)}
}>
{/* CONTACT ICON */}
{ showIcon }
{/* CONTACT NAME */}
<Text numberOfLines={1} style={[Fonts.ContactNameFonts, {textAlign:'center', fontSize:11, paddingHorizontal:15}]}>{obj.firstname}</Text>
</TouchableOpacity>
{/* END OF CONTACT */}
</View>
)
})
}
onPressContact = (contactDetails) => {
this.setState({popupDetails: contactDetails})
setPopup(true)
}
and next in popup screen
<Modal isVisible={props.Popup} hideModalContentWhileAnimating={true}
backdropTransitionOutTiming={0}
onBackdropPress={() => props.setPopup(false)}
onSwipeComplete={() => props.setPopup(false)}
swipeDirection="down"
animationInTiming={550} animationOutTiming={850}>
<View style={AddPopupStyles.Container}>
<View style={AddPopupStyles.ImgCont}>
<Image style={AddPopupStyles.Img}source={require('../assets/icons/swipe.png')}/>
</View>
<Text style={AddPopupStyles.Heading}>{props.details.firstname}{props.details.lastname}</Text>
<TouchableOpacity style={AddPopupStyles.TextCont}
onPress = {() => Communications.phonecall( phone , true)}
>
<Text style={AddPopupStyles.Text}>Call {props.details.firstname}{props.details.lastname}</Text>
</TouchableOpacity>
<TouchableOpacity style={AddPopupStyles.TextCont}
onPress={() => Communications.text(phone, 'Hey ' + props.details.firstname + ', im in need of a Ryde. Are you able to pick me up? This is my current location: ' )}
>
<Text style={AddPopupStyles.Text}>Text</Text>
</TouchableOpacity>
<TouchableOpacity style={AddPopupStyles.TextCont}
onPress={() => {props.setPopup(false)}}
>
<Text style={[AddPopupStyles.Text, AddPopupStyles.CancelText]}>
Cancel
</Text>
</TouchableOpacity>
</View>
</Modal>
In brief, here what i have done is on click of contact i'm calling a function onPressContact and storing the obj of that particular contact and then sending to popup using details props in contactPopup
Related
I'm making an app with expo react native, and I made a collapse that shows profile information about all users on my SQLite database.
I added a button (touchableopacity) inside the collapse and my idea is to edit information in the input where I'm showing information, but i don't know how to link the button press to the profile where is being touched.
so my code is as follows (i deleted styles to make it cleaner to see):
render(){
const miLista = this.state.datos.map((item) => //this is "list" and it works(show information of each profile and shows the button of each profile when i open the collapse of each on of them)
<ScrollView style={styles.container}>
<Collapse>
<CollapseHeader>
<Text>{item.id} {item.nombre}</Text> //here shows id and name (from sqlite data)
</CollapseHeader>
<CollapseBody >
<View key={item.id} >
<Text >Nombre</Text>
<TextInput
value={item.nombre}
onChangeText={(val) => this.setState({ nombre: val})}/>
<Text style=>Rut</Text>
<TextInput
value={item.rutPersona}
onChangeText={(val) => this.setState({ rutPersona: val})}/>
<Text >Clave</Text>
<TextInput
value={item.clave}
onChangeText={(val) => this.setState({ clave: val})}/>
{this.boton(item.id)}
</View>
</CollapseBody>
</Collapse>
</ScrollView>
);
return(
<View >
<SafeAreaView >
<TouchableOpacity
onPress={() => this.props.navigation.openDrawer()}>
<FontAwesome5 name="bars" size={24} color="#161924"/>
</TouchableOpacity>
</SafeAreaView>
<Text>Perfiles</Text>
<ScrollView>
{miLista}
</ScrollView>
</View>
);
};
so i needed to add .bind to the onpress of my button and pass the data: like this
boton(id,nombre,rutPersona,clave){
return(
<TouchableOpacity
key={id}
style={styles.boton}
onPress={this.funcionBoton.bind(this,nombre,rutPersona,clave,id)}
>
<Text>SAVE </Text>
</TouchableOpacity>
);
};
I make check box list on Model Pop up by using react native multiple select checkbox list listed but it take full screen height i am not able to fix this issue please Any body help me
below is my Model Pop up Code
[![<Modal
animationType="slide"
transparent={true}
visible={this.state.modalVisible}
onRequestClose={() => {
Alert.alert("Modal has been closed.");
}}
>
<View style={styles.ModalcenteredView}>
<View style={styles.ModalView}>
<View style={{height:'30%'}}>
<SelectMultiple
items={this.state.ParticipantCheckBox}
// renderLabel={renderLabel}
selectedItems={this.state.selectedFamilyMembers}
onSelectionsChange={this.SelectFamilyMembers} />
</View>
<View style={{flex:1, flexDirection:'row', flex:1,height:'1%'}}>
<TouchableHighlight style={{height:'5%'},\[styles.ModalCloseButton\] }
onPress={() => {
this.HideShowFamilyMemberModel(false);
}}
>
<Text style={styles.ModalCloseButtonTextStyle}>Close</Text>
</TouchableHighlight>
<TouchableHighlight style={{height:'5%'},\[styles.ModalSaveButton\] }
onPress={() => {
this.SaveFamilyMemberModel(false);
}}
>
<Text style={styles.ModalSaveButtonTextStyle}>Save</Text>
</TouchableHighlight>
</View>
</View>
</View>
</Modal>][1]][1]
You can make your modal like this
<Modal>
//this is parent view
<View>
//set this vide at the center of parent view and set height 40% or 30%
<View>
<ScrollView>
…
...
</ScrollView>
</View>
</View>
</Modal>
I have this below code, The alert shows following message:
{"item":{"isPositive":"false", "balance":"-500","currency":"AUD"}}
If I do alert on "ob" I get undefined. My problem is that the Text doesn't display anything:
_renderItemView(item) {
const ob = item
//alert(JSON.stringify(ob))
alert(JSON.stringify(item))
return(<>
<View style={styles.rowContainer}>
<View style={styles.iconContainer}></View>
<View style={styles.descriptionContainer}>
<Text style={styles.subText}>{item.date}asasas</Text>
{/* <Text style={styles.transactionDescText}>{item.description}</Text>
<Text style={styles.subText}>{item.descFrom}</Text> */}
</View>
<View style={styles.balanceContainer}>
{/* <Text style={styles.balance}>{item.currency}</Text>
<Text style={styles.balanceSubText}>{item.balance}</Text> */}
</View>
</View>
</>)
}
I was using renderItem={(item, index) => _renderItemView(item) to render
I needed an extra brace like this
renderItem={({item, index}) =>
I am doing react native application. In that, One screen have custom tabs in centre of the screen.
My screen is like,
top view around 200px height with some text lines showing.
After that, Custom tabs as picture attached.
After that, I am showing for first tab on tap flat list data.
I have checked online forums and tutorials, According to tab bar, We can show either top or bottom screen with tabs.
But, How to show tabs with customisation like my requirement.
I have 4 tabs, and each tab has same top view which I mentioned in above (some text lines), And if I tap on each tab, different data bottom page should show.
Like,
First tab with some flat list,
second tab with some text lines,
likewise all tabs has different layout in bottom screen.
As I am very new to react native. How to achieve this?
Due to privacy policy, I am unable to post complete screenshot.
Here is my code.
Screen.js
onClickTelugu = () => {
alert("you clicked onClickTelugu")
}
onClickTamil = () => {
alert("you clicked onClickTamil")
}
onClickHindi = () => {
alert("you clicked onClickHindi")
}
onClickEnglish = () => {
alert("you clicked onClickEnglish");
}
render(item) {
return (
<View style={styles.container}>
<View style ={styles.Container}>
<Text style={styles.textStyle}>
Some Text
</Text>
<View style={styles.somestyles}>
<TouchableOpacity onPress={this.onClick}>
<Image
style={styles.somestyles}
source={MenuImage}
/>
</TouchableOpacity>
<TouchableOpacity onPress={this.onClick}>
<Image
style={styles.menuIcon}
source={MenuImage}
/>
</TouchableOpacity>
</View>
</View>
<View style ={styles.somestyles}>
<View style={styles.somestyles}>
<Text style= {styles.somestyles}>
Some Text
</Text>
<Text style= {styles.somestyles}>
Some Text
</Text>
<Text style= {styles.somestyles} >
<Text style= {styles.somestyles}>
Some Text
</Text>
<Text style ={styles.somestyles}>
Some Text
</Text>
</Text>
</View>
<View style={styles.somestyles}>
<Text style={styles.somestyles}>some text</Text>
<Text style={styles.somestyles} >some text</Text>
<Text style={styles.somestyles}>date</Text>
<Text style={styles.somestyles}>some other date</Text>
</View>
</View>
</View>
<View style = {styles.tabContainer}>
<View style ={styles.tabInnerContainer}>
<TouchableOpacity style={styles.tabIcons} onPress={this.onClickTelugu}>
<Image
style={styles.tabItemsImages}
source={image}
/>
</TouchableOpacity>
<Text style={styles.tabTextItems} onPress={this.onClickTelugu}>Telugu</Text>
</View>
<View style={styles.tabInnerContainer}>
<TouchableOpacity style={styles.tabIcons} onPress={this.onClickTamil}>
<Image
style={styles.tabItemsImages}
source={image}
/>
</TouchableOpacity>
<Text style={styles.tabTextItems} onPress={this.onClickTamil}>Tamil</Text>
</View>
<View style={styles.tabInnerContainer}>
<TouchableOpacity style={styles.tabIcons} onPress={this.onClickHindi}>
<Image
style={styles.tabItemsImages}
source={image}
/>
</TouchableOpacity>
<Text style={styles.tabTextItems} onPress={this.onClickHindi}>Hindi</Text>
</View>
<View style={styles.tabInnerContainer}>
<TouchableOpacity style={styles.tabIcons} onPress={this.onClicEnglish}>
<Image
style={styles.tabItemsImages}
source={image}
/>
</TouchableOpacity>
<Text style={styles.tabTextItems} onPress={this.onClicEnglish}>English</Text>
</View>
</View>
<View style = {styles.flatListContainer}>
<FlatList style = {styles.flatList}
showsVerticalScrollIndicator = {true}
data = {this.state.dataArray}
renderItem = {({item}) => (
<TouchableWithoutFeedback onPress={ () => this.flatListItemHandler(item)}>
<Image
style={styles.flatListArrowImage}
source={image}
/>
</View>
<View style={styles.flatListItemInsideSeparator}>
)
}
ItemSeparatorComponent = {() => (
<View style={{height:15, backgroundColor:'#F8F8F8'}}/>
)}
/>
</View>
</View>
);
}
}
And I have to show overlay tab images too. If 1st tab tapped, 2,3,4
tabs images should be like delighted images. Like
highlighted/delighted images.
Ok you need to give this component it's own state to keep track of what you want to show in the lower section. then you should replace all of your onClick events with just one onClick event that you pass different languages to. For Example this.onClickTelugu becomes () => this.onClick('telugu'), then your onClick event should be:
onClick = (language) => {
this.setState({selectedLanguage: language})
}
then in your renderBottomContent function, you can render different things depending on what this.state.selectedLanguage is.
something like...
class MyComponent extends Component {
constructor(props) {
super(props)
this.state = { selectedLanguage: null}
}
onClick = (language) => {
this.setState({selectedLanguage: language})
}
renderBottomContent = () => {
const {selectedLanguge} = this.state
switch(selectedLanguage) {
case "telugu":
return <View><Text>Telugu</Text></View>
case "tamil":
return <View><Text>Tamil</Text></View>
case "hindi":
return <View><Text>Hindi</Text></View>
case "english":
return <View><Text>English</Text></View>
default:
return <View><Text>No Language Selected...</Text></View>
}
}
render() {
...
<View style ={styles.tabInnerContainer}>
<TouchableOpacity style={styles.tabIcons} onPress={() => this.onClick('telugu')}>
<Image style={styles.tabItemsImages} source={image} />
<Text style={styles.tabTextItems}>
Telugu
</Text>
</TouchableOpacity>
</View>
<View style ={styles.tabInnerContainer}>
<TouchableOpacity style={styles.tabIcons} onPress={() => this.onClick('tamil')}>
<Image style={styles.tabItemsImages} source={image} />
<Text style={styles.tabTextItems}>
Tamil
</Text>
</TouchableOpacity>
</View>
...
// after all the other tab buttons, render bottom content depending on the component state
{this.renderBottomContent()}
}
}
How to add a link in the Expo.WebBrowser.openBrowserAsync(url) function. What I did Expo.WebBrowser.openBrowserAsync("{mylink}") and Expo.WebBrowser.openBrowserAsync({mylink}) does not work. What to do ? However, when I put Expo.WebBrowser.openBrowserAsync ("http://example.com"), it works well. Thanks for your help.
renderPost = ({id, titre, contenu, mylink}, i) => {
return (
<View
key={id}
style={styles.post}
>
<View style={styles.postContent}>
<Text>
{titre}
</Text>
<Text style={styles.postBody}>
{contenu}
</Text>
<Button
style={styles.paragraph}
title="Voir le site."
onPress={() => Expo.WebBrowser.openBrowserAsync("{mylink}")}
/>
<Text>{"\n\n"}</Text>
</View>
</View>
)
}
I found the solution. The code:
renderPost = ({id, titre, contenu, mylink}, i) => {
return (
<View
key={id}
style={styles.post}
>
<View style={styles.postContent}>
<Text>
{titre}
</Text>
<Text style={styles.postBody}>
{contenu}
</Text>
<Button
style={styles.paragraph}
title="Voir le site."
onPress={() => Expo.WebBrowser.openBrowserAsync(mylink)}
/>
<Text>{"\n\n"}</Text>
</View>
</View>
)
}