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>
)
}
Related
can someone help me? so I'm trying to pass data from add balance components to home but I keep getting an error saying that the object is undefined. I just wanted to update the current balance which is displayed on the home screen if the user adds balance to their accounts.
function Home({ props, navigation }){
return (
<View style={styles.container}>
<Text style={{fontSize:30, paddingVertical:150, fontWeight:'bold'}}>Current Balance:
{props.money} </Text>
<TouchableOpacity style={styles.btnLogin1} onPress=
{()=>navigation.navigate("AddBalance")}>
<Text style={styles.btnLogin}>Add Balance</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.btnLogin1} onPress=
{()=>navigation.navigate("Withdraw")}>
<Text style={styles.btnLogin}>Withdraw</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.btnLogin1} onPress=
{()=>navigation.navigate("ViewCode")}>
<Text style={styles.btnLogin}>View Code To Pay</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.btnLogin1} onPress={()=>navigation.navigate("Login")}>
<Text style={styles.btnLogin}>Logout</Text>
</TouchableOpacity>
</View>
);
}
const MyFunction = () => Alert.alert('Amount Added Successfully');
function AddBalance({ navigation }){
const[balance, newBalance] = useState(0)
const[amount, setAmount] = useState()
function addTogether(){
const Total = balance + amount;
newBalance(Total);
MyFunction();
}
return (
<View style={styles.container}>
<Text style={{fontSize:30, paddingVertical:20, fontWeight:'bold'}}>Add Balance</Text>
<TextInput style={styles.inputBox} placeholder="Enter Amount" keyboardType={'numeric'} onChangeText={(text) => setAmount(Number.parseInt(text))}></TextInput>
<TouchableOpacity style={styles.btnLogin1} onPress ={addTogether}>
<Text style={styles.btnLogin}>Continue</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.btnLogin1} onPress={()=>navigation.navigate("Home")}>
<Text style={styles.btnLogin}>Back</Text>
</TouchableOpacity>
<Home money = {balance}/>
</View>
);
}
Replace your Home function's parameters
function Home({ props, navigation }){...} //this
With
function Home(props){...}
Then, you can navigate with that props like props.navigation.navigate, so also replace navigation.navigate with props.navigation.navigate everywhere.
Hope this works for you.
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
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}) =>
TouchableOpacity requires us to click two times in IOS 12.2. These issues were not in previous IOS 12.1 version.
Whenever clicking on TouchableOpacity it seems to register click but do not fire onPress event. This issue is occuring in react-native version 0.52. This issue only occurs in IOS and not in android.
Code Snippet
<FlatList
scrollEnabled={false}
data={this.props.menuData[this.props.toutIndex].Menu}
keyExtractor={(data, index) => index}
renderItem={({ item , index}) => {
//alert(categoryLinks.menu_id+""+data.menu_id);
//alert(JSON.stringify(data));
return (
<TouchableOpacity onPress={()=>this.itemDetailsPage(item)} >
<View>
<CardItem onPress={()=>this.itemDetailsPage(item)} style={[styles.menuSubCategoryCardItem, {marginLeft:0, borderLeftWidth: 6, borderLeftColor: item.itemCount ? '#00CDBE' : '#FFFFFF'}]}>
<View style={{flex:2,marginLeft:"0%"}}>
<View style={styles.menuItemImageOuterContainer}>
<View style={styles.menuItemImageInnerContainer}>
<ImageLoad
style={styles.menuItemImage}
isShowActivity={false}
borderRadius={10}
source={{ uri: item.menu_photo }}
/>
{item.ratable == 'true' ?
<View style={[styles.menuItemRatingImage,{backgroundColor:item.overall_rating==0 ? 'rgb(166,166,166)' : item.rating_color}]}>
<Text style={styles.menuItemRatingImageText}>{ item.overall_rating>0 ? parseFloat(item.overall_rating).toFixed(this.state.rating_decimal_places) : "-" }</Text>
</View>
:null}
</View>
<View style={styles.menuItemNameContainer}>
<View style={{width:'100%',}}>
<Text numberOfLines={2} style={[styles.textHeadingMenuItem,{fontSize: item.menu_name.length>50 ? 53/3.82 : 63/3.82,paddingLeft:"2%"}]}>
{this.Capitalize(item.menu_name)}
</Text>
</View>
<View style={{width:'130%',}}>
<Text numberOfLines={3} note style={[styles.textMenuItem,{paddingLeft:"2%"}]}>
{item.menu_description}
</Text>
</View>
{
item.friend_review_count > 0 ?
<View style={{flexDirection:'row',marginLeft:"2%",alignItems:'center'}}>
<Image style={styles.userIconBelowMenuItemText} source={require("../../../assets/home/blueUser.png")}>
</Image>
<Text numberOfLines={1} style={styles.MenuItemFriendsRatedText}>
{item.friend_review_count} friends have rated this.
</Text>
</View>
:
null
}
</View>
</View>
</View>
<Right>
<View style={styles.menuItemPriceOuterContainer}>
<Text style={[styles.textHeadingMenuItemPrice,{paddingTop:"5%"}]}>
{this.state.currency} {CommonFunc.numberWithCommas(
parseInt(item.menu_price)
.toFixed(categoryLinks.state.decimal_places)
)
}
</Text>
</View>
<View style={styles.menuItemPlusButtonContainer}>
{ item.itemCount == undefined || item.itemCount == 0?
<TouchableOpacity style={styles.menuItemPlusButton}
onPress={() => this.displaySelector(item.menu_price, item.Menu_Options, this.props.toutIndex, null, index, 1)}
onLongPress={() => this.displaySelector(item.menu_price, item.Menu_Options, this.props.toutIndex, null, index, 1, 1)}
rejectResponderTermination
>
<Image style={[styles.menuItemPlusButtonImage,{resizeMethod:'resize'}]} source={require("../../../assets/order/Add.png")} />
</TouchableOpacity>
:
<View style={styles.menuItemSelectorContainer}>
<Button transparent onPress={() => this.displaySelector(item.menu_price, item.Menu_Options, this.props.toutIndex, null, index, -1)} style={{paddingVertical:10, paddingLeft:2}}>
<Image source={require('../../../assets/order/decrease.png')}
style={[styles.menuItemSelectorDecreaseIcon,{resizeMethod:'resize'}]}/>
</Button>
<Button transparent>
<Text style={styles.menuItemSelectorCountText}>
{item.itemCount}
</Text>
</Button>
<Button transparent onPress={() => this.displaySelector(item.menu_price, item.Menu_Options, this.props.toutIndex, null, index, 1)}
onLongPress={() => this.displaySelector(item.menu_price, item.Menu_Options, this.props.toutIndex, null, index, 1, 1)}
style={{paddingVertical:10, paddingRight:2}}
>
<Image source={require('../../../assets/order/increase.png')}
style={[styles.menuItemSelectorDecreaseIcon,{resizeMethod:'resize'}]}/>
</Button>
</View>
}
</View>
</Right>
</CardItem>
</View>
</TouchableOpacity>
);
}}
/>
</View>
</View>
}
use
keyboardShouldPersistTaps='always'
on parent components to the TouchableOpacity inorder for child touchables to persist the taps.
for eg1
<Flatlist keyboardShouldPersistTaps='always'>
<TouchableOpacity/>
</Flatlist>
eg2:
<TouchableOpacity keyboardShouldPersistTaps='always'>
<TouchableOpacity></TouchableOpacity>
</TouchableOpacity>
This, most probably, is a conflict between react components. While updating to latest react might do the trick, but I would advice you to try and remove each and every component and see if it works.
Are you using PanResponder by any chance? This could also create a conflict. Thanks and good luck.
Try react-native 0.55.4 its a stable version and i mostely use in my personal projects.
and try to wrap your image inside a View like this\
<TouchableOpacity>
<View>
<Image />
</View>
</TouchableOpacity>
You have 2 onPress nested functions, in <TouchableOpacity> and <Card>, which both are calling the same item, delete onPress function of <Card> component and it will mostly work
I am trying to calculate renderRow in listView. actually i need to show index of the row with data. its working fine for subitems but not working for parent. i did like this-
render() {
return(
<ScrollView style={styles.drawer}>
<View style={styles.content} key={1}>
<ListView
dataSource={this.state.dataSource}
renderRow={(data) =>
<View>
<Text style={styles.navMenuTop}>
{'› '+data.Name}
</Text>
{data.SubItems.map((b,Index) =>
<View>
<Text style={styles.navMenu} onPress={this.handlePressCatid.bind(this,b.cPath)}> {'» '+b.Name+"=="+Index}</Text>
{b.SubItems != undefined && b.SubItems.map((c) =>
<View>
<Text style={styles.navMenu} onPress={this.handlePressCatid.bind(this,c.cPath)}> {'»»»» '+c.Name}</Text>
</View>
)}
</View>
)}
</View>
}
/>
</View>
</ScrollView>
);
}
}
I want to show Index with data.Name . its working properly for b.Name and c.Name. how i can do this?
I believe that you can use rowId for your purpose (rowData, sectionID, rowID, highlightRow) => renderable please see, https://facebook.github.io/react-native/docs/listview.html
and maybe look at this example too: https://medium.com/differential/react-native-basics-how-to-use-the-listview-component-a0ec44cf1fe8
Hope this helps.
Ranjeet,
You can visit https://facebook.github.io/react-native/docs/listview.html#renderrow
in your case,
In renderRow callback you receive 4 parameters (rowData, sectionID, rowID)
so just pass rowID to your UI function like this way
_renderRow(rowData, sectionID, rowID){
//use this rowID to show Index with data.Name
return <View>
<Text style={styles.navMenuTop}>
{'› ' + rowData.Name}
</Text>
{rowData.SubItems.map((b, Index) =>
<View>
<Text style={styles.navMenu} onPress={this.handlePressCatid.bind(this, b.cPath)}> {'» ' + b.Name + "==" + Index}</Text>
{b.SubItems != undefined && b.SubItems.map((c) =>
<View>
<Text style={styles.navMenu} onPress={this.handlePressCatid.bind(this, c.cPath)}> {'»»»» ' + c.Name}</Text>
</View>
)}
</View>
)}
</View>
}
render() {
parentIndex = 0;
return (
<ScrollView style={styles.drawer}>
<View style={styles.content} key={1}>
<ListView
dataSource={this.state.dataSource}
renderRow={(rowData, sectionID, rowID) => this._renderRow(rowData, sectionID, rowID)}
/>
</View>
</ScrollView>
);
}
I did this like:
render() {
return(
<ScrollView style={styles.drawer}>
<View style={styles.content} key={1}>
<ListView
dataSource={this.state.dataSource}
renderRow={((data,sectionID:number,rowID:number) =>
<View>
<Text style={styles.navMenuTop}>
{'› '+data.Name+rowID}
</Text>
{data.SubItems.map((b,Index) =>
<View>
<Text style={styles.navMenu} onPress={this.handlePressCatid.bind(this,b.cPath)}> {'» '+b.Name+"=="+Index}</Text>
{b.SubItems != undefined && b.SubItems.map((c) =>
<View>
<Text style={styles.navMenu} onPress={this.handlePressCatid.bind(this,c.cPath)}> {'»»»» '+c.Name}</Text>
</View>
)}
</View>
)}
</View>
}
/>
</View>
</ScrollView>
);
}
}